Xsolla Login Widget SDK
| Notice: The Xsolla Login Widget SDK has moved to @xsolla/login-sdk and this kit is no longer supported. |
|---|
Currently, SDK supports the following types of authorization:
- via login/password
- via social networks
This page contains:
See documentation to find more.
Integrating Widget 2.0
This library allows you to quickly integrate Xsolla Login Widget with your website in following steps:
Step 1: Connecting SDK
Connect Xsolla Login SDK using one of the following methods:
- If the project uses
npm, launch the console and run
npm i @xsolla-login/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://login-sdk.xsolla.com/latest/">
</script>Step 2: Initializing Widget 2.0
Add the widget initialization code to the <body> tag.
<script>
const xl = new XsollaLogin.Widget({
projectId: '[Login ID]',
preferredLocale: 'en_US'
});
</script>Version for npm:
import { Widget } from '@xsolla-login/sdk';
const xl = new Widget({
projectId: '[Login ID]',
preferredLocale: 'en_US'
});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 URLs of the local server to make the widget available to the local build. For example https://localhost:9000.
payload
string
Your custom data. The value of the parameter will be returned in the user JWT > payload claim.
preferredLocale
string
Language of the widget interface and region in the <language code>_<country code> format where:
- language code: language code in the ISO 639-1 format;
- country code: country/region code in the ISO 3166-1 alpha-2 format.
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), Vietnamese (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.
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 2.0 Placing
Choose the widget placing on the website start page:
Enabling Fullscreen Mode
Add the button with the on-click event and the xl.show() function to the site.
<div id="xl_auth" style="display: none"></div>
<button onclick="xl.open()">Fullscreen widget</button>Add the code for inserting the widget into the block.
<script type="text/javascript">
xl.mount('xl_auth');
</script>The fullscreen mode is closed by clicking outside the widget area.
Adding a Block on the Page
Add the block with the widget to the <body> tag and set the block ID.
<div id="xl_auth" style="height: 700px"></div>Add the code for inserting the widget into the block.
<script type="text/javascript">
xl.mount('xl_auth');
</script>Using Additional Features
If you have already integrated Login, you can also try additional features of Xsolla Login Widget:
- Customizing Widget 2.0 Style
- Tracking Widget 2.0 Events
- Connecting OAuth 2.0 Protocol
- Opening Widget 2.0 Pages
Customizing Widget 2.0 Style
By default, the widget looks like this:
Customize the widget style by changing the following parameters in Publisher Account:
- Roundness
- Text color
- Buttons color
- Background color
To customize:
- Go to the Customization page in Publisher Account.
- Move your mouse cursor to the editing area and click Customize. It will open the widget builder.
- Set up the widget style and click Publish.
NOTE
After publication, the widget will be changed for all the projects it was connected to.
Tracking Widget 2.0 Events
You can collect widget statistics on the following events:
To start tracking the event, initialize and process the action as described below.
Opening Widget 2.0
xl.on(xl.events.Open, function () {
console.log('user has opened the widget');
});Closing Widget 2.0
xl.on(xl.events.Close, function () {
console.log('user has closed the widget');
});Connecting OAuth 2.0 Protocol
Xsolla Login Widget supports the OAuth 2.0 protocol-based user authentication. Follow the Connecting OAuth 2.0 recipe to set it up.
Opening Widget 2.0 Pages
You can open Xsolla Login Widget on other pages, in addition to the authentication (Login) page. The following pages available to you include:
To open the page, initialize and process the action as described below.
Registration Page
const pages = XsollaLogin.WidgetPages;
const page = pages.SignUpPage;
xl.setPage(page);Social Authentication Page
const pages = XsollaLogin.WidgetPages;
const page = pages.SocialsPage;
xl.setPage(page);Password Reset Page
const pages = XsollaLogin.WidgetPages;
const page = pages.ResetPasswordPage;
xl.setPage(page);