Skip to content
master
Switch branches/tags
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
src
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Xsolla Login Javascript SDK

Currently SDK supports following types of authorization:

  • via login/password
  • via social networks

On this page you can see:

See documentation to find more.

Integrating Widget

This library allows you to quickly integrate Xsolla Login Widget with your website in following steps:

Step 1: Connecting SDK

Connect Xsolla Login Javascript SDK using one of the following methods:

  • If the project uses Bower, launch the console and run
bower install xsolla-login-js-sdk
  • If the package is not connected, add the following code to the <head> tag of the HTML-page where the widget will be placed:
<script src="https://cdn.xsolla.net/xsolla-login-widget/sdk/2.2.6/xl.min.js"></script>

Step 2: Initializing Widget

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

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

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 one of the Callback URL specified in Publisher Account in Login settings. Required if there are several Callback URLs.

You can pass several URL of the local server to make the widget available to the local build. For example https://localhost:9000.


locale
     string
Language of the widget interface and region in the <language code>_<country code> format where:

The following locales can be specified: Arabic (ar_AE), Bulgarian (bg_BG), Czech (cz_CZ), German (de_DE), Spanish (es_ES), French (fr_FR), Hebrew (he_IL), Italian (it_IT), Japanese (ja_JP), Korean (ko_KR), Polish (pl_PL), Portuguese (pt_BR), Romanian (ro_RO), Russian (ru_RU), Thai (th_TH), Turkish (tr_TR), Vientamese (vi_VN), Chinese Simplified (zh_CN), Chinese Traditional (zh_TW).

Also used for sorting social networks by the frequency of use in the chosen region.


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: Choosing Widget Placing

Choose the widget placing on the website start page:

Fullscreen Mode

Add the button with the on-click event and the XL.show() function to the site.

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

The fullscreen mode is closed by clicking outside the widget area.

Block on the Page

Add the block with the widget to the <body> tag and set the block ID.

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

Add the code and pass the parameter values 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>

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.

Usage

If you have already integrated Login, you can also try additional features of Xsolla Login Widget:

Connecting OAuth 2.0 Protocol

Xsolla Login Widget supports the OAuth 2.0 protocol-based user authentication. Follow the recipe to set it up.

Customizing Widget Style

By default, the widget looks like this:

You can customize the widget style by changing the following characteristics of its elements:

  • Location on the screen
  • Theme
  • Size
  • Background

Customization is based on CSS.

To customize:

  1. Go to Publisher Account > your Login project > Customization > Widget style, download the archive with styles 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.


NOTE

After publication, the widget will be changed for all the projects it was connected to.


Tracking Widget Events

You can collect widget statistics on the following events:

To start tracking the event, initialize and process the action as described below.

Loading Widget

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

Closing Widget

XL.on(XL.eventTypes.CLOSE, function () {
    console.log('user has closed the widget');
});

Sending the Registration Confirmation Email

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