So far, I have covered various BaaS (Backend-as-a-Service) features on my blog that were introduced in RAD Studio XE6, including:
- Backend Storage
- Push Triggers
- Remote Push Notifications
- User Account Creation
- Using Custom Endpoints
- Visualizing Json Data
Today, I thought I would write about how you can add user authentication via a login screen to our included ToDo List BaaS demo.
I used the BaaS demo as a starting point and added a new TabItem to our TabControl, and renamed it to TabItemLogin.
For my member login, I created a nice graphic that I parented 2 edits and labels to, one for the username and one for the password. My member login graphic includes a button graphic that I wanted to use with my on-click event handler. I used a TRectangle and created an outline over the button graphic. For TRectangle, I chose no stroke or fill (color property set to ‘Null’) and setup the following on-click event:
procedure TBaaSToDoList.Rectangle1Click(Sender: TObject);varACreatedObject: TBackendEntityValue;beginBackendUsers1.Users.LoginUser(Edit1.Text, Edit2.Text, ACreatedObject);ShowMessage(’Logged in’);DataModule1.RefreshAdapter;DataModule1.ItemAdapter.Active := True;ShowView(TView.List);end;
I placed a TBackendUsers component onto my form and connected it to my KinveyProvider component.
I created a new Login view:
publictypeTView = (List, Details, Add, Edit, Login); //added Login
I then defined the behavior for the new Login view:
function TBaaSToDoList.CurrentView: TView;beginif Self.TabControl1.ActiveTab = TabItemAdd thenResult := TView.Addelse if Self.TabControl1.ActiveTab = TabItemList thenResult := TView.Listelse if Self.TabControl1.ActiveTab = TabItemEdit thenResult := TView.Editelse if Self.TabControl1.ActiveTab = TabItemDetails thenResult := TView.Detailselse if Self.TabControl1.ActiveTab = TabItemLogin then //newly addedResult := TView.Loginelseraise Exception.Create(’Unexpected’);end;
I updated the OnCreate event to default to the Login tab when the app is launched:
procedure TBaaSToDoList.FormCreate(Sender: TObject);beginTabControl1.TabPosition := TTabPosition.None;DataModule1.RefreshAdapter;DataModule1.ItemAdapter.Active := True;TabControl1.ActiveTab := TabItemLogin; //newly changedend;
I then setup and defined the text for the toolbar label:
procedure TBaaSToDoList.ActionLabelUpdate(Sender: TObject);begincase CurrentView ofTView.List: (Sender as TAction).Text := ‘To Do List’;TView.Details: (Sender as TAction).Text := ‘To Do Item’;TView.Add: (Sender as TAction).Text := ‘Add To Do Item’;TView.Edit: (Sender as TAction).Text := ‘Edit To Do Item’;TView.Login: (Sender as TAction).Text := ‘ToDo List Login Screen’; //newly addedend;end;
Next, I defined that the Login view should load the Login tab:
procedure TBaaSToDoList.ShowView(AView: TView);begincase AView ofList: Self.TabControl1.ActiveTab := TabItemList;Details: Self.TabControl1.ActiveTab := TabItemDetails;Add: Self.TabControl1.ActiveTab := TabItemAdd;Edit: Self.TabControl1.ActiveTab := TabItemEdit;Login: Self.TabControl1.ActiveTab := TabItemLogin; //newly addedelseraise Exception.Create(’Unexpected’);end;end;
I created a user inside my Kinvey account under AddOns > Core > Users, but the code and process for using Parse are the same.
Below is a screenshot of my running application:
