Xsolla Login widget SDK
The library allows you to use the login widget or Login SDK API methods separately. Currently, SDK supports the following types of authorization:
- via login/password
- via social networks
This page contains:
See Login documentation to find more.
Connecting SDK
Connect Xsolla Login widget 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>
Widget 2.0 preview
Before you integrate the Xsolla Login widget, you can see it in the preview mode. The preview uses default settings, style, and language. To see it, use the following URL with your own values for query parameters:
https://login-widget.xsolla.com/latest/?projectId={LOGIN_PROJECT_ID}&login_url={CALLBACK_URL}
You can also add the locale
query parameter to the URL. Possible values are available in the preferredLocale parameter.
Integrating widget 2.0
This library allows you to quickly integrate Xsolla Login widget with your website in following steps:
Step 1: 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 project 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.
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 9000.
Step 2: 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.open()
function to the site.
<div id="xl_auth" style="display: none"></div>
<button onclick="showFullscreen()">Fullscreen widget</button>
Add the code for inserting the widget into the block.
!! Please use the same id
for both div
& querySelector
!!
<script type="text/javascript">
xl.mount('xl_auth');
function showFullscreen() {
const myDiv = document.querySelector('#xl_auth');
myDiv.style.display = 'block';
xl.open();
}
</script>
Version for npm
:
xl.mount('xl_auth');
const showFullscreen = () => {
const myDiv = document.querySelector('#xl_auth');
myDiv.style.display = 'block';
xl.open();
}
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>
Version for npm
:
xl.mount('xl_auth');
Using additional features
If you have already integrated Login, you can also try additional features of Xsolla Login widget:
Customizing widget 2.0 style
By default, the widget looks like this:
![Widget 2.0 by default](https://cdn3.xsolla.com/img/misc/images/96aef5327e731219af6c8bad130c0c5b.png)
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.
![Customizing widget 2.0 Style — Step 2](https://cdn3.xsolla.com/img/misc/images/003b61be2909849ec44f12ea641f44ff.png)
-
Set up the widget style and click Publish.
![Customizing widget 2.0 Style — Step 3](https://cdn3.xsolla.com/img/misc/images/6f44b39ce1670e8e96f56024132af6cd.png)
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');
});
Widget 2.0 size changing
xl.on(xl.events.Dimensions, function(e) {
const { height, width } = e.dimensions;
console.log('Height: ', height);
console.log('Width: ', width);
})
If you would like to change your container based on these values,
we also recommend to add CSS transitions
to make resizing smoother.
.widget-container {
transition: height 300ms ease-out 0s;
}
Connecting OAuth 2.0 protocol
Xsolla Login widget supports the OAuth 2.0 protocol-based user authentication. Follow the Connecting OAuth 2.0 instruction to set it up.
Prioritize Apple ID social login
You can show Apple ID social login option at the first position by enabling the parameter below:
import { Widget } from '@xsolla/login-sdk';
const xl = new Widget({
appleIdPriority: true
});
Opening widget 2.0 pages
You can open Xsolla Login widget on other pages, in addition to the authentication (Login) page.
There are two ways of opening Login widget page:
- Before initializing - Login widget will open a selected page instead of Login page (default)
- After initializing - Login widget will switch current page to the selected page. Login widget must be already initialized.
The following pages are available:
Registration page
Before the widget initialization:
const pages = XsollaLogin.WidgetPages;
const xl = new XsollaLogin.Widget({
page: pages.SignUpPage
});
After the widget initialization:
const pages = XsollaLogin.WidgetPages;
const page = pages.SignUpPage;
xl.setPage(page);
Social authentication page
Before the widget initialization:
const pages = XsollaLogin.WidgetPages;
const xl = new XsollaLogin.Widget({
page: pages.SocialsPage
});
After the widget initilization:
const pages = XsollaLogin.WidgetPages;
const page = pages.SocialsPage;
xl.setPage(page);
Password reset page
Before the widget initialization:
const pages = XsollaLogin.WidgetPages;
const xl = new XsollaLogin.Widget({
page: pages.ResetPasswordPage
});
After the widget initilization:
const pages = XsollaLogin.WidgetPages;
const page = pages.ResetPasswordPage;
xl.setPage(page);
Login page
Before the widget initilization: no action required, since it is a default page.
After the widget initilization:
const pages = XsollaLogin.WidgetPages;
const page = pages.LogInPage;
xl.setPage(page);
Integrating login API
You can work with the Login widget SDK API calls separately from the Login widget if you want to:
- use your own widget design
- partly implement the Login widget flow
Detailed information is provided in the instruction.
Connecting JSON with widget settings
The widget settings are contained in the following JSON files:
settingsJSON
— main settingssocialsJSON
— social login settingsthemeJSON
— theme settings
You can reuse the settings in the files and display the same widget on different settings. The settings URL is specified in the widget initialization code. To connect JSON with widget settings, follow the instruction.