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:
- Create a Babka Login OAuth 2.0 client.
- Integrate the Babka Login button on the side of your application.
- Implement the retrieval of the user authorization token.
Babka Login OAuth 2.0 client creation
To create a Babka OAuth 2.0 client:
- Contact your project account manager and provide the following information:
Parameter | Type | Example | Description |
---|---|---|---|
Redirect URIs | Array of strings | [“https://example.com/oauth/callback”, “http://localhost:3000/oauth/callback”] | A list of URI addresses that can be used for redirecting the user after authentication through Babka Login. |
Audience | String | “https://example.com” | The domain where Babka Login authentication will be used. |
Scope | Array of strings | [“email”, “transactions”] | List of permissions in Babka. |
- 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:
- Create a Babka Login OAuth 2.0 client.
- Integrate the login widget.
- Enable Babka Login as a social network.
- Implement the retrieval of the user authorization token.
Babka Login OAuth 2.0 client creation
To create Babka Login OAuth 2.0 client:
- Create a project in Publisher Account.
- Set up a Login project in Publisher Account.
- Contact your project account manager and provide the following information:
Parameter | Type | Example | Description |
---|---|---|---|
Redirect URIs | Array of strings | [“https://example.com/oauth/callback”, “http://localhost:3000/oauth/callback”] | A list of URI addresses that can be used for redirecting the user after authentication through Babka Login. |
Audience | String | “https://example.com” | The domain where Babka Login authentication will be used. |
Scope | Array of strings | [“email”, “transactions”] | List of permissions in Babka. |
- 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
- Open your project in your Publisher Account and go to the Login section.
- Click Configure in the pane of a Login project.
- On the navigation page, go to the Authentication section and select the Social login section.
- Select Babka from the list of social networks.
- Click the ⚙ icon and select Settings.
- 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.
- Click Connect.
- Enable using of a Babka Login pop-up window (optional):
- On the navigation page, go to the Authentication section and select the Callback URLs section.
- In the Callback URL field, enter
https://login-widget.xsolla.com/latest/babka-auth-succeed
. - In the login widget code pass the
true
value in thebabkaLoginPopup
parameter, in thecallbackUrl
parameter pass the URL address of the page to which the user should be redirected after authentication.
Widget code example:
- js
import { Widget } from '@xsolla/login-sdk';
const xl = new Widget({
projectId: '[Login ID]',
preferredLocale: 'en_US',
babkaLoginPopup: true,
callbackUrl: '[Your Callback URL]',
});
- Add the Babka Account button to your website.
Babka Accounts button code example:
- html
<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:
- Open your project in your Publisher Account and go to the Login section.
- Click Configure in the pane of a Login project.
- On the navigation page, go to the Authentication section and select the Social login section.
- Set the Embed social network JWT token toggler to On.
- Click Save changes.
Was this article helpful?
Rate this page
Don’t want to answer
Thank you for your feedback!
Found a typo or other text error? Select the text and press Ctrl+Enter.