Como integrar autenticação de usuário via Xsolla ID

Como funciona

Você pode adicionar autenticação de usuário com Xsolla ID — a plataforma de identidade compartilhada, proporcionando acesso contínuo aos produtos da Xsolla.

Você pode implementar um dos seguintes cenários de usuário:

• Abrir a página de autenticação do Xsolla ID em uma janela modal ao clicar no botão Log in with Xsolla no widget de login:

  1. O usuário clica no botão Log in with Xsolla no widget de login.
  2. O usuário é redirecionado para a página de autenticação do Xsolla ID que abre em uma janela modal.
  3. O usuário completa o processo de autenticação na página de autenticação do Xsolla ID.
  4. O usuário é redirecionado para a URL especificada no campo Callback URL na Conta de Distribuidor.

• Redirecionar para a página de autenticação do Xsolla ID ao clicar no botão Log in with Xsolla no widget de login:

  1. O usuário clica no botão Log in with Xsolla no widget de login.
  2. O usuário é redirecionado para a tela de autenticação do Xsolla ID que abre na mesma janela.
  3. O usuário completa o processo de autenticação no Xsolla ID.
  4. O usuário é redirecionado para a página cuja URL está especificada no campo Callback URL na Conta de Distribuidor.

• Redirecionar para a página de autenticação do Xsolla ID em uma janela pop-up ao clicar em um botão no seu site:

  1. O usuário clica em um botão no seu site.
  2. O usuário é redirecionado para a página de autenticação do Xsolla ID que abre em uma janela pop-up.
  3. O usuário completa o processo de autenticação na página de autenticação do Xsolla ID.
  4. O usuário é redirecionado para a página cuja URL está especificada no campo Callback URL na Conta de Distribuidor.

Como obter

Para integrar o login social via Xsolla ID:

1. Integre o widget de login.
2. Habilite o Xsolla como uma rede social.
3. Implemente a obtenção do token de autorização do usuário.

Integração do widget de login

Adicione o Xsolla Login widget à sua aplicação — ele fornece uma interface de autenticação de usuário pronta.

Habilitar Xsolla como rede social

1. No seu projeto na Conta de Distribuidor, vá para a seção Jogadores > Login.

2. Clique em Configure no painel de um Projeto de Login.

3. Vá para o bloco Authentication e selecione Social login.

4. Selecione Xsolla na lista de redes sociais.

5. Clique no ícone ⚙ e selecione Connect.

6. Configure um dos cenários de usuário:

   • Autenticação na mesma janela
   • Autenticação em janela pop-up
   • Autenticação em janela modal

Autenticação na mesma janela

Para redirecionar o usuário para a página de autenticação do Xsolla ID após ele clicar no botão Log in with Xsolla no widget de login:

1. Vá para a seção Authentication e clique em Callback URLs.
2. No campo Callback URL, insira a URL para redirecionar o usuário após a autenticação.
3. No parâmetro callbackUrl do código do widget de login, passe a URL para redirecionar o usuário após a autenticação.

Exemplo de código do Widget:

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

Autenticação em janela pop-up

Para redirecionar o usuário para a página de autenticação do Xsolla ID em uma janela pop-up após ele clicar em um botão no seu site:

1. Na página de navegação, vá para a seção Authentication e clique em Callback URLs.
2. Certifique-se de que a seguinte URL está adicionada na seção Callback URL: https://login.xsolla.com/api/social/oauth2/callback.
3. No código do widget de login, passe o valor true no parâmetro babkaLoginPopup, e passe a URL para redirecionar o usuário após a autenticação no parâmetro callbackUrl.

Exemplo de código do Widget:

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

4. Adicione o botão que abre a página de autenticação do Xsolla ID ao seu site.

Exemplo de código do botão Log in with Xsolla:

1<div id="xl_auth"></div>
2<button onclick="xl.open()">Log in with Xsolla</button>

Autenticação em janela modal

Para redirecionar o usuário para a página de autenticação do Xsolla ID em uma janela modal após ele clicar no botão Log in with Xsolla no widget de login:

1. Vá para a seção Authentication e clique em Callback URLs.
2. No campo Callback URL, insira a URL para redirecionar o usuário após a autenticação.
3. No código do widget de login, passe o valor popup no parâmetro babkaLoginFlow, e passe a URL para redirecionar o usuário após a autenticação no parâmetro callbackUrl.

Exemplo de código do Widget:

1import { Widget } from '@xsolla/login-sdk';
2const xl = new Widget({
3  projectId: '[Login ID]',
4  preferredLocale: 'en_US',
5  babkaLoginFlow: "popup",
6  callbackUrl: '[Your Callback URL]',
7});

Obtendo o token de autorização do usuário

Após a autorização no lado do Xsolla ID, o usuário será redirecionado para a URL especificada no parâmetro callbackUrl. O token de autorização do usuário é passado no parâmetro token.

Para incorporar o token JWT OAuth do Xsolla ID no token JWT do Xsolla Login:

1. No seu projeto na Conta de Distribuidor, vá para a seção Jogadores > Login.
2. Clique em Configure no painel de um Projeto de Login.
3. Vá para o bloco Authentication e selecione Social login.
4. Ative a opção Embed social network JWT token.
5. Clique em Save changes.