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

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

    0.27.4 • 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.

    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: 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 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.

    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

    128

    Version

    0.27.4

    License

    ISC

    Unpacked Size

    392 kB

    Total Files

    61

    Last publish

    Collaborators

    • avatar
    • avatar
    • avatar