BaaS User Accounts and Password Management

Posted by on in Blogs
Over the last couple of months, I have been covering various BaaS (Backend-as-a-Service) features introduced in RAD Studio XE6.
Today, I thought I would expand on the User Account Creation and Authentication topic I previously covered by showing you how to allow the user to change their password within your BaaS enabled application.



In this app, I am using Kinvey as my BaaS Provider but the UI and code are the same if you are using Parse.
The app consists of 3 Edit controls: One for Username, one for Password and one for the Session ID.
There are also 4 TButtons on the form: One for Sign Up, one for Login, one for Logout, and one for Change Password.
I parented the input controls to TListbox items and added ListBoxItemGroupHeaders to divide up the UI.



Screenshot: iOS UI at design time; Windows app at runtime with Mobile Preview style

Below is the Object Pascal code for my application:
unit Unit7;

interface

uses
System.SysUtils, System.Types, System.UITypes, System.Classes, System.Variants,
FMX.Types, FMX.Controls, FMX.Forms, FMX.Graphics, FMX.Dialogs, IPPeerClient,
REST.OpenSSL, REST.Backend.ServiceTypes, REST.Backend.MetaTypes, System.JSON,
REST.Backend.KinveyServices, FMX.Edit, FMX.StdCtrls, REST.Backend.Providers,
REST.Backend.ServiceComponents, REST.Backend.KinveyProvider, FMX.ListBox,
FMX.Layouts;

type
TForm7 = class(TForm)
KinveyProvider1: TKinveyProvider;
BackendUsers1: TBackendUsers;
ButtonChangePassword: TButton;
ButtonLogin: TButton;
ButtonLogout: TButton;
ButtonSignup: TButton;
EditPassword: TEdit;
EditSessionID: TEdit;
EditUserName: TEdit;
ListBox1: TListBox;
ListBoxItem1: TListBoxItem;
ListBoxItem2: TListBoxItem;
ListBoxItem3: TListBoxItem;
ListBoxGroupHeader1: TListBoxGroupHeader;
ListBoxGroupHeader2: TListBoxGroupHeader;
ToolBar1: TToolBar;
Label1: TLabel;
procedure ButtonSignupClick(Sender: TObject);
procedure ButtonLoginClick(Sender: TObject);
procedure ButtonLogoutClick(Sender: TObject);
procedure ButtonChangePasswordClick(Sender: TObject);
private
{ Private declarations }
FLogin: TBackendEntityValue;
procedure Login;
procedure Signup;
public
{ Public declarations }
end;

var
Form7: TForm7;

implementation

{$R *.fmx}

procedure TForm7.ButtonChangePasswordClick(Sender: TObject);
var
LPassword: TJSONObject;
LUpdatedAt: TBackendEntityValue;
begin
LPassword := TJSONObject.Create;
try
LPassword.AddPair('password', EditPassword.Text);
BackendUsers1.Users.UpdateUser(FLogin, LPassword, LUpdatedAt);
Login;
finally
LPassword.Free;
end;
end;

procedure TForm7.ButtonLoginClick(Sender: TObject);
begin
Login;
end;

procedure TForm7.ButtonLogoutClick(Sender: TObject);
begin
BackendUsers1.Users.Logout;
EditSessionID.Text := '';
EditUsername.Text := '';
EditPassword.Text := '';
end;

procedure TForm7.Signup;
begin
BackendUsers1.Users.SignupUser(EditUserName.Text, EditPassword.Text, nil, FLogin);
BackendUsers1.Users.Login(FLogin);
EditSessionID.Text := FLogin.AuthToken;
end;

procedure TForm7.Login;
begin
BackendUsers1.Users.LoginUser(EditUserName.Text, EditPassword.Text, FLogin);
BackendUsers1.Users.Login(FLogin);
EditSessionID.Text := FLogin.AuthToken;
end;

procedure TForm7.ButtonSignupClick(Sender: TObject);
begin
Signup;
end;

end.


About
Gold User, Rank: 5, Points: 558
Senior Product Manager, RAD Studio

Comments

  • Berend S11330
    Berend S11330 Friday, 6 May 2016

    Hi Sarina,
    Thanks for the article, I am new to FMX and tried this example. Can login and logout to Kinvey. However I get a bad request Http 400 when trying to change the password. When looking at the documentation the backenduser.users.updateuser expects a string, but you use FLogin a backendentityvalue. Trying a string returns an error that it does not understand the request.
    What am I missing? I am using Delphi Enterprise 10.1 Berlin.
    Regards,
    Berend

  • Guest
    Mickey Saturday, 19 July 2014

    Hello Sarina,

    Thanks for the great tutorials about using the BaaS.

    But I'm missing the possibility to reset the user password.
    On Parse there is a REST API command which can be used to send the Password reset request as an email.

    Can this be done in Delphi XE6 too?

    Regards,
    Mickey

  • Guest
    John Fisher Tuesday, 22 July 2014

    Very nice, clean form design.

    Any chance you'd be willing to share the Align, Anchor, etc. settings along with what the form looks like rotated landscape?

    Thanks!

  • Guest
    sarinadupont Tuesday, 22 July 2014

    Hi Mickey,

    Thanks, I am happy to hear you find the tutorials useful.
    There is no password reset function exposed on the component for initiating a password reset email. However, you should be able to set up a custom endpoint for that. For custom endpoints, please see this blog post:
    http://blogs.embarcadero.com/sarinadupont/2014/04/17/sending-notifications-from-baas-enabled-desktop-apps-to-your-mobile-clients/

    The other option is to add password reset functionality to your app as I outlined in this blog post.

    Regards,
    Sarina

  • Guest

    [...] couple of days ago, I covered how to add password reset functionality to your application for resetting the password inside your a.... A common question I got was how to leverage the cloud based password reset email functionality [...]

  • Guest
    sarinadupont Wednesday, 23 July 2014

    Hi Mickey,
    I just did a blog post on how to trigger email notifications from your BaaS enabled Delphi app:

    http://blogs.embarcadero.com/sarinadupont/2014/07/23/adding-new-baas-method-for-executing-a-password-reset-email-notification/

    Regards,
    Sarina

  • Guest

    [...] User Account Password Management [...]

  • Guest
    Sarina DuPont Thursday, 24 July 2014

    Hi John,

    Thanks, glad you liked the tutorial. Here are some details on the UI for both portrait and landscape mode:

    Toolbar : aligned to top. Toolbar label: aligned to contents, Text VertAlign: center, StyleLookUp: toollabel

    TVertScrollBox: Aligned to the client

    Parent the following controls to the VertScrollBox component:

    - TListBox, 3 items. TListBox aligned to the top; GroupingKind: Grouped, StyleLookUp: transparentlistboxstyle
    Right-click on TListBox and add a group header. Use the Items Editor to define the order of the items and group header

    - Parent one TEdit to each TListBoxItem; Align each TEdit to the Right, with a Right Margin of 5 px

    For both of the buttons, set Align to Top
    Top Button: Margins Left: 100, Right: 30
    Next Buttons: Margins Left: 100, Right: 30, Top: 30

    Regards,
    Sarina

  • Please login first in order for you to submit comments
  • Page :
  • 1

Check out more tips and tricks in this development video: