Login

Login is a single sign-on tool that authenticates and secures user passwords on behalf of partners who develop video games. It creates a seamless, one-click user registration experience through 30+ third-party authentication providers that offer players convenient, safe, and fast methods for signing up or logging into all of their favorite games. Login uses API methods and allows partners to:

  • Process personal data according to the GDPR regulations
  • Configure the solution from Publisher Account
  • Select the user data storage
  • Authenticate users via username/password or social networks
  • Order social networks according to their use and the user’s location

You can also authenticate users via the Login Widget, which supports:

  • UI customization
  • Localization into 20 languages
  • Automatic delivery of widget updates
  • Widget start page setup

Note: Login Widget is recommended when using Launcher. If you’re already using Xsolla products and want to integrate them with Login, please contact your Account Manager.

Integration Flow

There are two ways to integrate Login:

  • Via API, if you use your own interface to authenticate users in the game, or
  • Using the Login Widget, which features both a user authentication UI and Login API methods.

Integrating Login via API

  1. Create a Login instance in your Publisher Account and specify:
    • Name,
    • Link to the game’s website to connect Login to.
  2. Go to General settings and fill in the following fields:
    • Callback URL to redirect the user to after successful authentication,
    • Allowed origins (CORS) that will be calling the API methods,
    • Error callback URL to redirect the user to in case of an authentication error. If you don’t specify any value, we’ll be using the Callback URL.
  3. Select a user database storage (ours or yours).
  4. Set up the social networks via which users will be able to log in.

Integrating Login via a Widget

  1. Create a Login instance in your Publisher Account and specify:
    • Name,
    • Link to the game’s website to connect Login to.
  2. Go to General settings and fill in the following fields:
    • Callback URL to redirect the user to after successful authentication,
    • Error callback URL to redirect the user to in case of an authentication error. If you don’t specify any value, we’ll be using the Callback URL.
  3. Select a user database storage (ours or yours).
  4. Set up the social networks via which users will be able to log in.
  5. Customize the Login Widget UI.
  6. Connect Login Widget to your website.

UI Customization

  1. Download styles archive from your Publisher Account and unpack it.
  2. Download and install Node.js. The version of Node.js must not be later than 10.x.x.
  3. Run npm i from the unpacked styles folder.
  4. Edit app/styles/themes/_default.scss.
  5. Run npm run styles from the unpacked styles folder.
  6. Upload the file with a name resembling app.default.css from the dist folder to your Publisher Account.

For further widget UI customization, repeat steps 4–6.

Connecting Login Widget to Your Website

To integrate Login Widget with your website, use Xsolla Login Javascript SDK.

Step 1

Connect Xsolla Login Javascript SDK:

  • If your project uses Bower, launch the console and run bower install xsolla-login-js-sdk.
  • If you don’t have the package installed, add the following code to the <head> tag of the web page where you want to place the widget: <script src="https://cdn.xsolla.net/xsolla-login-widget/sdk/2.2.4/xl.min.js"></script>.

Step 2

Add the widget initialization code to the <body> tag.

<script type="text/javascript">
XL.init({
  projectId: '{Login ID}',
  callbackUrl: '{callbackUrl}',
  locale: 'en_US'
});
</script>

Parameter Type Description
projectId string Login ID from Publisher Account. Required.
callbackUrl string URL to redirect the user to after registration/authentication/password reset. Must be identical to Callback URL specified in Publisher Account in Login settings. Required if there are several Callback URLs.
locale string Region in the <language code>_<country code> format, where: The list of social networks will be sorted from most to least used, according to the variable value.
fields array of strings List of parameters required for successful user registration/authentication. Example: 'email, promo_email_agreement'. The user will be asked to specify these parameters in the corresponding form.
theme string URL with the widget styles file. If the value is empty, styles uploaded to Publisher Account are used.
popupBackgroundColor string Widget background color in the fullscreen mode. The value can be in any of the CSS color formats. Default is rgba(50, 150, 150, 0.1).
iframeZIndex string The stack order of the widget in the fullscreen mode. Default is 1000000.

Step 3

Select the way of placing the widget on the website:

  • fullscreen mode
  • particular block of the page.

FULLSCREEN MODE

Add the button with an on-click event to your website and call the XL.show() function.

<button onclick="XL.show()">Fullscreen widget</button>

The fullscreen mode will be closed upon clicking outside the widget.

BLOCK OF THE PAGE

Add the block, in which the widget will be placed, to the <body> tag of this page and specify the block ID.

<div id="xl_auth"></div>

Add the following script and specify the parameters as described below.

<script type="text/javascript">
var element_id = 'xl_auth';
var options = {
  width: 400,
  height: 550,
  route: XL.ROUTES.REGISTRATION
};
XL.AuthWidget(element_id, options);
</script>

Parameter Type Description
element_id string ID of the block containing the Login Widget. Required.
options object Login Widget block settings. The object consists of the parameters listed below.
width number Block width in pixels. Default is 400.
height number Block height in pixels. Default is 550.
route string Widget start page. Can be:
  • XL.ROUTES.LOGIN — a login page via username/password. Used by default.
  • XL.ROUTES.REGISTRATION — a registration page.
  • XL.ROUTES.RECOVER_PASSWORD — a password reset page.
  • XL.ROUTES.ALL_SOCIALS — a page with a list of social networks available for user authentication.

Step 4 (Optionally)

You can track the widget actions:

  • widget loaded
  • user trying to close the widget
  • registration confirmation email sent.

Initialize and process the action as described below.

WIDGET LOADED

XL.on(XL.eventTypes.LOAD, function () {
    console.log('the widget has been loaded');
});

USER TRYING TO CLOSE THE WIDGET

XL.on(XL.eventTypes.CLOSE, function () {
    console.log('user is trying to close the widget');
});

REGISTRATION CONFIRMATION EMAIL SENT

XL.on(XL.eventTypes.REGISTRATION_REQUEST, function () {
    console.log('registration form has been sent');
});

Processing of Personal Data

Processing of personal data of the European Union (EU) users is regulated according to the provisions of the GDPR. Below you will find a list of the GDPR regulations and how Login can help you comply with them.

According to Articles 6-8 of the regulation, you must:

  • request the data subject to give consent to the processing of his or her personal data,
  • give the data subject the right to withdraw his or her consent at any time.

A registration form is used in Login Widget to request user consent to process personal data.

If a user changes his or her decision,you can cancel the processing of the personal data by sending a request to support@xsolla.com.

User Rights

According to Articles 15-17, 19 of the regulation, the user has rights to:

  • get a copy of his or her personal data,
  • ask for the rectification of inaccurate personal data concerning him or her,
  • ask for the erasure of personal data concerning him or her.

To get, rectify or erase user data:

  • send a request to support@xsolla.com if you use the Xsolla storage.
  • read the tutorial if you use PlayFab.
  • choose your own method if you use a custom storage.

Processing and Storage of Personal Data

According to Article 5 of the regulation,personal data shall be:

  • collected for specified purposes and not further processed in a manner that is incompatible with those purposes;
  • processed in a manner that ensures appropriate security of the personal data, including protection against unauthorised or unlawful processing and against accidental loss, destruction or damage.

Login uses the data that can affect the user's blocking, email sending, payment making, and other ways of applying personal data.

Storage and transfer of personal data are encrypted according to the AES-256 algorithm.

Data Portability

According to Article 20 of the regulation, the user has the right to transmit and store his or her personal data. You must provide the user with structured, commonly used and machine-readable format data.

To get user data:

  • go to your Publisher Account > Login settings > Users if you use the Xsolla storage.
  • read the tutorial if you use PlayFab.
  • choose your own method if you use a custom storage.

User Data Protection

According to Article 32 of the regulation, you must provide a reliable level of data security, using:

  • data encryption,
  • data confidentiality,
  • data integrity,
  • resilient data processing systems.

There are several Login features than can help you comply with the requirements:

  • data encryption in accordance with the AES-256 algorithm,
  • checking for the correctness of the entered password,
  • checking the password for security,
  • data access restriction.

Recipes

Our Recipes will help you try out some of the advanced features of Login: