Como integrar a autenticação de usuário por meio da conta Xsolla

Como funciona

Você pode adicionar autenticação de usuário com a conta Xsolla na Xsolla Wallet.

Cenários de usuário

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

1. Abrindo a página de autenticação da Xsolla Wallet em uma janela modal clicando no botão Login com a Xsolla no widget de login:
   1. O usuário clica no botão Login com a Xsolla no widget de login.
   2. Eles são redirecionados para a tela de autenticação da Xsolla Wallet que é aberta em uma janela modal.
   3. O usuário conclui o processo de autenticação na Xsolla Wallet.
   4. Eles são redirecionados para a página cujo URL é especificado no campo Callback URL na Conta de Distribuidor.

2. Redirecionando para a página de autenticação da Xsolla Wallet clicando no botão Login com a Xsolla no widget de login:
   1. O usuário clica no botão Login com a Xsolla no widget de login.
   2. Ele é redirecionado para a tela de autenticação da Login com a Xsolla que é aberta na mesma janela.
   3. O usuário conclui o processo de autenticação na Xsolla Wallet.
   4. Ele é redirecionado para a página cujo URL é especificada no campo Callback URL na Conta de Distribuidor.

3. Redirecionando para a página de autenticação da Xsolla Wallet em uma janela pop-up clicando em um botão no seu site:
   1. O usuário clica em um botão no seu site.
   2. Eles são redirecionados para a tela de autenticação da Xsolla Wallet que é aberta em uma janela pop-up.
   3. O usuário conclui o processo de autenticação na Xsolla Wallet.
   4. Eles são redirecionados para a página cujo URL é especificado no campo Callback URL na Conta de Distribuidor.

Como obtê-lo

Para integrar a autenticação via Xsolla como uma rede social:

1. Crie um cliente OAuth 2.0 da conta Xsolla.
2. Integre o widget de login.
3. Habilite a Xsolla como uma rede social.
4. Implemente a recuperação do token de autorização de usuário.

Criação do cliente OAuth 2.0 da conta Xsolla

1. Crie um projeto na Conta de Distribuidor.
2. Configure um projeto Login na Conta de Distribuidor.
3. Entre em contato com seu Gerente de Sucesso do Cliente ou envie um e-mail para csm@xsolla.com e forneça as seguintes informações:

4. A equipe de integração Xsolla criará um cliente OAuth 2.0 da conta Xsolla para você e fornecerá seu identificador e chave secreta. Esses dados são necessários para obter o token de autorização de usuário.

Integração de um widget de login

Ative a Xsolla como uma rede social

1. Abra seu projeto em sua Conta de Distribuidor e vá para a seção Login.
2. Clique em Configure no painel de um projeto Login.
3. Vá para a seção Autenticação e selecione a seção Social login.
4. Selecione Xsolla na lista de redes sociais.

5. Clique no ícone ⚙ e selecione Settings.
6. Preencha os seguintes campos:
   • Application ID — o identificador do cliente OAuth 2.0 da conta Xsolla que você recebeu da Xsolla.
   • Application secret key — a chave do OAuth 2.0 da conta Xsolla que você recebeu da Xsolla.
   • Your website link — o site a partir do qual os servidores Xsolla recebem uma solicitação para alterar um código de autorização por um token de autorização. Especifique o mesmo endereço URL que foi indicado no parâmetro Audiência ao criar o cliente OAuth 2.0 da conta Xsolla.

7. Clique em Conectar.

8. Configure um dos cenários do usuário:
   • Redirecionamento para a página de autenticação da Xsolla Wallet clicando no botão Login com a Xsolla no widget de login (por padrão):
     1. Vá para a seção Autenticação e selecione a seção Callback URLs.
     2. No campo Callback URL, insira o endereço URL da página para a qual você deseja redirecionar os usuários após a autenticação.
     3. No parâmetro callbackUrl do código do widget de login, passe o endereço URL da página para a qual o usuário deve ser redirecionado após a autenticação.

Exemplo de código do widget:

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

1. • Redirecionamento para a página de autenticação da Xsolla Wallet em uma janela pop-up clicando em um botão no seu site:
     1. Na página de navegação, vá para a seção Autenticação e selecione a seção Callback URLs.
     2. Certifique-se de que os seguintes URLs sejam adicionados na seção Callback URL:
        • https://login-widget.xsolla.com/latest/babka-auth-succeed
        • 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 o endereço URL da página para a qual o usuário deve ser redirecionado após a autenticação no parâmetro callbackUrl.

Exemplo de código do widget:

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

1. • 4. Adicione o botão que abre a página de autenticação da Xsolla Wallet ao seu site.

Exemplo do código do botão Login com a Xsolla:

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

1. • Abrindo a página de autenticação da Xsolla Wallet em uma janela modal clicando no botão Login com a Xsolla no widget de login:
     1. Vá para a seção Autenticação e selecione a seção Callback URLs.
     2. No campo Callback URL, insira o endereço URL da página para a qual você deseja 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 o endereço URL da página para a qual o usuário deve ser redirecionado após a autenticação no parâmetrocallbackUrl.

Exemplo de código do widget:

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

Obtenção de um token de autorização de usuário

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

Para incorporar o token JWT OAuth da conta Xsolla no token JWT Xsolla Login:

1. Abra seu projeto na sua Conta de Distribuidor e vá para a seção Login.
2. Clique em Configure no painel de um projeto Login.
3. Vá para a seção Autenticação e selecione a seção Social login.

4. Defina a opção Embed social network JWT token como On.
5. Clique em Save changes.