How to integrate Babka Login

How it works

You can add user authentication to your website through Babka Login using a user account in Babka. The following integration methods are available:

• Babka Accounts button. In this case:
  • You don't need to create and set up an Xsolla Login project in your Publisher Account.
  • You need to implement exchanging the authorization code for the user authorization token on the server side of your application.

• Babka Login as a social network in the Xsolla Login widget. In this case:
  • You need to create and set up an Xsolla Login project in your Publisher Account.
  • You will immediately receive the user authorization token on your website.

Babka Accounts button integration

To integrate the Babka Accounts button:

1. Create a Babka Login OAuth 2.0 client.
2. Integrate the Babka Login button on the side of your application.
3. Implement the retrieval of the user authorization token.

Babka Login OAuth 2.0 client creation

To create a Babka OAuth 2.0 client:

1. Contact your project account manager and provide the following information:

2. The Xsolla integration team will create a Babka OAuth 2.0 client for you and provide its identifier and secret key. This data is necessary for obtaining the user authorization token.

Integration of a Babka Accounts button on the application side

Integrate the Babka Accounts button on your application side using the Babka Login SDK.

Getting a user authorization token

After authorization on the side of Babka Login, the user will be redirected to the URI address specified in the redirect_uri parameter. To obtain the user authorization token, refer to these instructions. To refresh the user authorization token after it has expired, please refer to these instructions.

Integration of Babka Login as a social network

To integrate Babka Login as a social network:

1. Create a Babka Login OAuth 2.0 client.
2. Integrate the login widget.
3. Enable Babka Login as a social network.
4. Implement the retrieval of the user authorization token.

Babka Login OAuth 2.0 client creation

To create Babka Login OAuth 2.0 client:

1. Create a project in Publisher Account.
2. Set up a Login project in Publisher Account.
3. Contact your project account manager and provide the following information:

4. The Xsolla integration team will create a Babka Oauth 2.0 client for you and provide its identifier and secret key. This data is necessary for obtaining the user authorization token.

Integration of a login widget

Integrate the login widget using SDK.

Enable Babka Login as a social network

1. Open your project in your Publisher Account and go to the Login section.
2. Click Configure in the pane of a Login project.
3. On the navigation page, go to the Authentication section and select the Social login section.
4. Select Babka from the list of social networks.

5. Click the ⚙ icon and select Settings.
6. Fill in the following fields:
   • Application ID — the Babka Login OAuth 2.0 client identifier you received from Xsolla.
   • Application Secret Key — the Babka Login OAuth 2.0 key you received from Xsolla.
   • Allowed Resources — the website from which requests for exchange of authorization code exchange for a user authorization token will be sent. Specify the same URL address that was indicated as the Audience parameter when creating the Babka Login OAuth 2.0 client.

7. Click Connect.
8. Enable using of a Babka Login pop-up window (optional):
   1. On the navigation page, go to the Authentication section and select the Callback URLs section.
   2. In the Callback URL field, enter https://login-widget.xsolla.com/latest/babka-auth-succeed.
   3. In the login widget code pass the true value in the babkaLoginPopup parameter, in the callbackUrl parameter pass the URL address of the page to which the user should be redirected after authentication.

Widget code example:

import { Widget } from '@xsolla/login-sdk';
const xl = new Widget({
  projectId: '[Login ID]',
  preferredLocale: 'en_US',
  babkaLoginPopup: true,
  callbackUrl: '[Your Callback URL]',
});

1. 4. Add the Babka Account button to your website.

Babka Accounts button code example:

<div id="xl_auth"></div>
<button onclick="xl.open()">Babka Login Popup</button>

Getting a user authorization token

After authorization on the Babka Login side, the user will be redirected to the URL specified in the callback_url parameter. The user authorization token is passed in the token parameter.

To embed Babka Login OAuth JWT token in Xsolla Login JWT token:

1. Open your project in your Publisher Account and go to the Login section.
2. Click Configure in the pane of a Login project.
3. On the navigation page, go to the Authentication section and select the Social login section.

4. Set the Embed social network JWT token toggler to On.
5. Click Save changes.

Rate this page

Is there anything we can improve? Send

Don’t want to answer

Thank you for your feedback!