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:

  • Configure the solution from Publisher Account
  • Choose between partner- or Xsolla-side 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
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 Settings and fill in the following fields:
    • Callback URL to redirect the user to after successful authentication,
    • CORS URLs 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 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 and unpack the styles archive.
  2. Download and install the latest LTS version of Node.js.
  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-<2eghnt456>.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/1.1.1/xl.min.js”></script>.

Step 2

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

<script type="text/javascript">
 XL.init({
   projectId: '40db2ea4-5p47-11e6-a3ff-005056a0e04a',
   redirectUrl: '<your redirect url>',
   loginUrl: '<your login url>',
   locale: 'en_US',
   onlyWidgets: true,
   fields: 'email'
 });
 </script>

Parameter Type Description
projectId string Project ID. Required.
redirect_url string The URL the partner redirects the user to after authentication.
login_url string URL Xsolla redirects the user to after authentication.
locale string User regional settings specified as <language code>_<country code>, where:
onlyWidgets boolean Whether the Login Widget UI is used. ‘true’ by default.
fields string List of parameters required to complete the registration, e.g. email. If some parameters cannot be obtained from the social network, the user will be asked to specify them in the sign-up form.

Step 3

Add the block to contain the widget to the <body> tag. Specify the block’s ID in the element_id parameter.

<div id="xl_auth"></div>
  <script type="text/javascript">
  var element_id = 'xl_auth';
  var options = {
      width: '200px',
      height: '400px'
  };
  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.
options.width string Block width.
options.height string Block height.

Recipes

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