Nucleus Powered Mitochondria
Wondering what’s next for npm?Check out our public roadmap! »

@xsolla/login-sdkTypeScript icon, indicating that this package has built-in type declarations

0.27.3 • Public • Published

Xsolla Login Widget SDK

Currently, SDK supports the following types of authorization:

  • via login/password
  • via social networks

This page contains:

See Login 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 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>

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

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:

  1. Go to the Customization page in Publisher Account.
  2. Move your mouse cursor to the editing area and click Customize. It will open the widget builder.

  1. 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 instruction 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);

Install

npm i @xsolla/login-sdk

DownloadsWeekly Downloads

146

Version

0.27.3

License

ISC

Unpacked Size

392 kB

Total Files

61

Last publish

Collaborators

  • avatar
  • avatar
  • avatar