Authentication

Follow the step-by-step tutorials below to get going with the basic SDK features.

User login via username/email and password

This tutorial shows how to use SDK methods to implement:

  • user sign-up
  • resend request for a sign-up confirmation email
  • user login
  • user password reset

You can authenticate users with their username or email address. In the following examples we authenticate users with their username, whereas the email address is used to confirm sign-up and to reset the password.

Note
If you use the Login widget on your site (in a web store, for example), make sure that you implemented the same user authentication methods on your site and in your application. The widget uses the email address for authentication by default. To set up user login via username, contact your Account Manager.

The logics and interface in the examples are less complicated than they will be in your application. A possible authentication system implementation option is described in the demo project.

Implement user sign-up

Create widget

  1. Go to Content Browser and create a UI directory. In the contextual menu, go to User Interface > Widget Blueprint.
  2. In the widget blueprint, add the following interface elements:
    • username field
    • user email address field
    • user password field
    • sign-up button

The following picture shows an example of a sign-up page structure.

  1. Open a level blueprint:
    1. Choose a level in Content Browser.
    2. In the main menu, go to Blueprints > Open Level Blueprint.
  2. Implement widget display when the level is started. To do this, add nodes as shown below. In the CreateWidget node, specify the created widget.

Add event handling

  1. In the Hierarchy panel, select a sign-up button.
  2. In the Details panel, click the + icon near the On Clicked event.

  1. Open a Graph view.
  2. Link a RegisterUser method call on the XsollaLoginSubsystem object to the OnClicked node and add passing of data entered by users.
  3. Add callback functions:
    • OnRegistered — called if sign-up is successful
    • OnError — called if an error occurs

Note
In the example of event handling, callback functions use the PrintString class. A code and error description are passed in Code and Description parameters. You can add other actions. For example, open a confirmation email resend page after successful sign-up or a login page.

  1. To start widget debugging, start a level.

Example of event handling implementation:

Set up sign-up confirmation email

After successful sign-up, a user receives a sign-up confirmation email to a specified address. You can customize emails sent to users in Publisher Account.

If you are developing an Android application, set up deep links to return a user to an application after they confirm sign-up.

Implement sign-up confirmation email resend request

Create widget

  1. Go to Content Browser and open a UI directory. In the contextual menu, go to User Interface > Widget Blueprint.
  2. In the widget blueprint, add the following interface elements:
    • username/email field
    • resend button

The following picture shows an example of a sign-up page structure.

  1. Open a level blueprint:
    1. Choose a level in Content Browser.
    2. In the main menu, go to Blueprints > Open Level Blueprint.
  2. In the CreateWidget node, specify the created widget.

Add event handling

  1. In the Hierarchy panel, select a sign-up button.
  2. In the Details panel, click the + icon near the On Clicked event.

  1. Open a Graph view.
  2. Link a ResendAccountConfirmationEmail method call on the XsollaLoginSubsystem object to the OnClicked node and add passing of data entered by users.
  3. Add the OnEmailResend and OnError callback functions.
  4. To start widget debugging, start a level.

If the request is successful, the user receives a sign-up confirmation email to the email address specified during sign-up.

Example of event handling implementation:

Implement user login

Create widget

  1. Go to Content Browser and open a UI directory. In the contextual menu, go to User Interface > Widget Blueprint.
  2. In the widget blueprint, add the following interface elements:
    • username field
    • password field
    • remember me checkbox
    • login button

The following picture shows an example of a page structure.

  1. Open a level blueprint:
    1. Choose a level in Content Browser.
    2. In the main menu, go to Blueprints > Open Level Blueprint.
  2. In the CreateWidget node, specify the created widget.

Add event handling

  1. In the Hierarchy panel, select a sign-up button.
  2. In the Details panel, click the + icon near the On Clicked event.

  1. Open a Graph view.
  2. Link an AuthenticateUser method call on the XsollaLoginSubsystem object to the OnClicked node and add passing of data entered by users.
  3. Add the OnAuthenticated and OnError callback functions.

Note
After successful user login, the authorization token is passed in the LoginData parameter. The authorization token is used in requests to Xsolla servers.

  1. To start widget debugging, start a level.

Example of event handling implementation:

Implement password reset

Create widget

  1. Go to Content Browser and open a UI directory. In the contextual menu, go to User Interface > Widget Blueprint.
  2. In the widget blueprint, add the following interface elements:
    • username/user email address field
    • password reset button

The following picture shows an example of a page structure.

  1. Open a level blueprint:
    1. Choose a level in Content Browser.
    2. In the main menu, go to Blueprints > Open Level Blueprint.
  2. In the CreateWidget node, specify the created widget.

Add event handling

  1. In the Hierarchy panel, select a password reset button.
  2. In the Details panel, click the + icon near the On Clicked event.

  1. Open a Graph view.
  2. Link a ResetUserPassword method call on the XsollaLoginSubsystem object to the OnClicked node and add passing of data entered by users.
  3. Add the OnAuthenticated and OnError callback functions.
  4. To start widget debugging, start a level.

Example of event handling implementation:

After successful password reset request, the user receives an email with a password reset link. You can configure a redirection address in Publisher Account > your Login project > General settings > URL > Callback URL.

Was this article helpful?
Thank you!
Is there anything we can improve? Message
We’re sorry to hear that
Please explain why this article wasn’t helpful to you. Message
Thank you for your feedback!
We’ll review your message and use it to help us improve your experience.
Hide

Social login

This guide shows how you can use SDK methods to implement user sign-up and login via their social network account.

Unlike for user authentication via username/user email address and password, you don’t have to implement separate logics for user sign-up. If the user’s first login is via a social network, a new account is created automatically.

If you have implemented social login in your application as an alternative authentication method, the social network account automatically links to an existing user account if the following conditions are met:

  • A user who signed up with username/email address and password logged into your application via a social network account.
  • A social network returns an email address.
  • User email address in a social network is the same as the email address used for sign-up in your application.

Note
You can implement manual linking of a social network account. Add the page to your application where users can link a social network account to their account. In the page controller, use the LinkSocialNetworkToUserAccount SDK method.

The examples show how to set up user login via a Facebook account. You can set up all social networks in the same way.

The logics and interface in the examples are less complicated than they will be in your application. A possible authentication system implementation option is described in the demo project.

Create widget

  1. Go to Content Browser and create a UI directory.
  2. In the contextual menu, go to User Interface > Widget Blueprint.
  3. In the widget blueprint, add the social login button.

The following picture shows an example of a login page structure.

  1. Open a level blueprint:
    1. Choose a level in Content Browser.
    2. In the main menu, go to Blueprints > Open Level Blueprint.
  2. Implement widget display when the level is started. To do this, add nodes as shown below. In the CreateWidget node, specify the created widget.

Add event handling

  1. In the Hierarchy panel, select a sign-up button.
  2. In the Details panel, click the + icon near the On Clicked event.

  1. Open a Graph view.
  2. Implement a login page opening in a built-in browser:

    1. Link a GetSocialAuthenticationUrl method call connected with the XsollaLoginSubsystem object to the OnClicked node and add passing of data entered by users. Pass the Facebook value to the ProviderName parameter.
    2. Add the callback functions:
      • OnUrlReceived — called if you successfully receive a page URL. Received URL is passed in the Url parameter.
      • OnError — called if an error occurs.

Note
In the example of event handling, the OnError function uses the PrintString class. A code and error description are passed in Code and Description parameters. You can add other actions.

  1. Implement user login:
    1. Call the LaunchSocialAuthentication SDK methods linked to the XsollaLoginSubsystem object.
    2. Pass a login page URL.

  1. To get a token, track a login page URL change after successful user login:
    1. Implement closing of a browser after successful login.
    2. Call the OnSocialAuthCompleted method and subscribe to a BrowserClosed event.

Note
Getting a token from a URL is made by a blueprint of a built-in browser. The authorization token is passed to a LoginData parameter. Use it in requests to Xsolla servers.

Example of event handling implementation:

Was this article helpful?
Thank you!
Is there anything we can improve? Message
We’re sorry to hear that
Please explain why this article wasn’t helpful to you. Message
Thank you for your feedback!
We’ll review your message and use it to help us improve your experience.
Hide
Was this article helpful?
Thank you!
Is there anything we can improve? Message
We’re sorry to hear that
Please explain why this article wasn’t helpful to you. Message
Thank you for your feedback!
We’ll review your message and use it to help us improve your experience.
Rate this page
Rate this page
Is there anything we can improve?

Don’t want to answer

Thank you for your feedback!
Last updated: July 30, 2021

Found a typo or other text error? Select the text and press Ctrl+Enter.

Report a problem
We always review our content. Your feedback helps us improve it.
Provide an email so we can follow up
Thank you for your feedback!