Se você estiver usando seu próprio sistema de autenticação, nesse estágio você só precisa garantir que ele armazena e consegue passar os dados exigidos pela Xsolla para gerenciar assinaturas:

• um ID de usuário exclusivo
• o e-mail do usuário

Nesse caso, recomendamos criar um site usando o modelo Web Shop e configurando a autenticação de usuário por ID ou via links profundos.

Para fazer isso:

1. Abra seu projeto na Conta de Distribuidor e acesse a seção Storefronts > Websites.
2. Selecione Create site.
3. Selecione o modelo Web Shop.
4. Adicione um URL a uma plataforma externa onde seu jogo está disponível. Isso permite que você rapidamente crie uma página no estilo do seu jogo: imagens e o título do jogo, informações do desenvolvedor e um esquema de cores são adicionados automaticamente à página. Se não quiser usar os dados do jogo, desative a opção Copy game info via App Store or Google Play URL.

5. Selecione Create Web Shop.

6. Configure uma das seguintes opções de autenticação de usuários:

   • Autenticação por ID de usuário
   • Autenticação por ID de usuário e link profundo
   • Autenticação por link profundo
   • Autenticação via Xsolla Login vinculado com ID de usuário

Configure a autenticação de usuário na Conta de Distribuidor

A Xsolla permite que você configure diversas maneiras de autenticar usuários. Esse guia contém instruções sobre a maneira mais rápida de integrar e configurar — utilizando um widget pré-pronto para autenticar o usuário via um código de uso único ou rede social.

Mais tarde, você poderá mudar o método de autenticação do usuário ou usar uma opção de integração diferente.

A Xsolla fornece modelos de widget padrão. Sua aparência e conteúdo são determinadas pelo método de login escolhido para seu projeto e as configurações de personalização do widget da Conta de Distribuidor.

Visualização padrão do widget para autenticação usando um código de uso único ou via redes sociais:

Para configurar a autenticação de usuário na Conta de Distribuidor:

1. Abra seu projeto na Conta de Distribuidor e vá para a seção Players > Login.
2. Na seção do Dashboard, selecione Create Login project.
3. Selecione Standard Login project e clique em Create and set up. Espere até seu novo projeto Login ser criado. Você verá então a página do projeto Login.
4. No bloco Login methods, selecione Passwordless login.
5. Selecione Configure.
6. Configure a autorização usando um código de uso único:
   1. No bloco Passwordless login, selecione Callback URLs.
   2. No campo Callback URL, adicione o URL para o qual o usuário é redirecionado após uma autenticação bem-sucedida.
   3. Selecione Save changes.
7. Configure a autenticação via redes sociais (opcional):
   1. Selecione o nome do seu projeto Login na trilha de migalhas para retornar à pagina do projeto Login.
   2. Acesse o bloco Authentication e selecione Social login.
   3. Conecte as redes sociais que os usuários poderão usar para se cadastrarem e acessarem o aplicativo:

1. 1. • Para conectar a rede social desejada, selecione o ícone ⚙ e então Connect.

1. 1. • Para conectar várias redes sociais ao mesmo tempo, selecione os painéis necessários (suas bordas ficarão verdes). Em seguida, no menu suspenso Manage, selecione Connect.

1. 1. • Para conectar todas as redes sociais disponíveis de uma só vez, clique em Selecionar tudo. Em seguida, no menu suspenso Manage, selecione Connect.

1. 4. Clique em Save changes.

Você pode testar as configurações do widget. Para fazer isso, selecione Check now no lado esquerdo da tela e faça login.

Durante o processo de integração, você precisará de um ID de projeto Login. Você pode encontrá-lo no seu projeto na Conta de Distribuidor, na seção Players > Login > Dashboard.

Implemente a autenticação do usuário no aplicativo

Abaixo, você encontra instruções sobre a maneira mais rápida de integrar o Xsolla Login — integrando um web widget pré-pronto no aplicativo.

Se quiser usar sua própria interface para os usuários acessarem seu aplicativo, você deve implementar a lógica de autenticação de usuário usando a Login API ou métodos SDK.

Conecte o SDK do widget Xsolla Login

O widget Xsolla Login está disponível para instalação usando o gerenciador de pacotes NPM ou o marcador <script> em uma página HTML.

Conecte o SDK do widget Xsolla Login de uma das seguintes formas:

1npm i @xsolla/login-sdk

1<script src="https://login-sdk.xsolla.com/latest/">
2</script>

Inicialize o SDK do widget Xsolla Login

Inicialize o widget usando um dos métodos abaixo. Especifique os seguintes parâmetros:

• projectId — ID do projeto Login. Pode ser encontrado no seu projeto na Conta de Distribuidor, na seção Players > Login> Dashboard.
• preferredLocale — o idioma da interface. Os seguintes idiomas são suportados: Árabe (ar_AE), Búlgaro (bg_BG), Tcheco (cz_CZ), Inglês (en_US), Alemão (de_DE), Espanhol (es_ES), Francês (fr_FR), Hebreu (he_IL), Italiano (it_IT), Japonês (ja_JP), Coreano (ko_KR), Polonês (pl_PL), Português (pt_BR), Romeno (ro_RO), Russo (ru_RU), Tailandês (th_TH), Turco (tr_TR), Vietnamita (vi_VN), Chinês Simplificado (zh_CN), Chinês Tradicional (zh_TW).
• clientId — ID do cliente OAuth 2.0. Pode ser encontrado no seu projeto na Conta de Distribuidor, na seção Players > Login> your Login project > Security > OAuth 2.0.
• redirectUri — O URL do usuário é redirecionado para após a confirmação da conta, login ou confirmação da redefinição de senha. Deve ser especificado na Conta de Distribuidor nas configurações do cliente OAuth 2.0.

Não é preciso modificar o resto dos parâmetros.

 1import { Widget } from '@xsolla/login-sdk';
 2const xl = new Widget({
 3  projectId: 'LOGIN_PROJECT_ID',
 4  preferredLocale: 'en_US'
 5  clientId: 'CLIENT_ID',
 6  responseType: 'code',
 7  state: 'CUSTOM_STATE',
 8  redirectUri: 'REDIRECT_URI',
 9  scope: 'SCOPE'
10});

 1<script>
 2const xl = new XsollaLogin.Widget({
 3  projectId: 'LOGIN_PROJECT_ID',
 4  preferredLocale: 'en_US',
 5  clientId: 'CLIENT_ID',
 6  responseType: 'code',
 7  state: 'CUSTOM_STATE',
 8  redirectUri: 'REDIRECT_URI',
 9  scope: 'SCOPE'
10});
11</script>

Adicione a abertura do widget Xsolla Login

1. Adicione um botão com o evento on-click e a função xl.open() à sua página HTML:

1<div id="xl_auth" style="display: none"></div>
2<button onclick="showFullscreen()">Fullscreen widget</button>

2. Adicione o código para abrir o widget no bloco <div> da sua página HTML.

1xl.mount('xl_auth');
2const showFullscreen = () => {
3  const myDiv = document.querySelector('#xl_auth');
4  myDiv.style.display = 'block';
5  xl.open();
6}

 1<script type="text/javascript">
 2  xl.mount('xl_auth');
 3
 4  function showFullscreen() {
 5    const myDiv = document.querySelector('#xl_auth');
 6    myDiv.style.display = 'block';
 7
 8    xl.open();
 9  }
10</script>

Configure a autenticação de usuário na Conta de Distribuidor

A Xsolla permite que você configure diversas maneiras de autenticar os usuários. Esse guida contém instruções sobre a maneira mais rápida de configurá-las: para autenticar o usuário via código de uso único ou rede social.

Mais tarde, você pode alterar o método de autenticação de usuários.

Para configurar a autenticação de usuário na Conta de Distribuidor:

1. Abra seu projeto na Conta de Distribuidor e vá para a seção Players > Login.
2. Na seção do Dashboard, selecione Create Login project.
3. Selecione Standard Login project e clique em Create and set up. Espere até seu novo projeto Login ser criado. Você verá então a página do projeto Login.
4. No bloco Login methods, selecione Passwordless login.
5. Selecione Configure.
6. Configure a autorização usando um código de uso único:
   1. No bloco Passwordless login, selecione Callback URLs.
   2. No campo Callback URL, adicione o URL para o qual o usuário é redirecionado após uma autenticação bem-sucedida.
   3. Selecione Save changes.
7. Configure a autenticação via redes sociais (opcional):
   1. Selecione o nome do seu projeto Login na trilha de migalhas para retornar à pagina do projeto Login.
   2. Acesse o bloco Authentication e selecione Social login.
   3. Conecte as redes sociais que os usuários poderão usar para se cadastrarem e acessarem o aplicativo:

1. 1. • Para conectar a rede social desejada, selecione o ícone ⚙ e então Connect.

1. 1. • Para conectar várias redes sociais ao mesmo tempo, selecione os painéis necessários (suas bordas ficarão verdes). Em seguida, no menu suspenso Manage, selecione Connect.

1. 1. • Para conectar todas as redes sociais disponíveis de uma só vez, clique em Selecionar tudo. Em seguida, no menu suspenso Manage, selecione Connect.

1. 4. Clique em Save changes.

Configure a autenticação de usuários no criador de sites

Para criar um site e configurar a autenticação de usuário:

1. Abra seu projeto na Conta de Distribuidor e acesse a seção Storefronts > Websites.
2. Selecione Create site.
3. Selecione qualquer modelo de site e prossiga à criação do seu site.

4. No construtor, acesse a seção Login settings > Xsolla Login e selecione a opção de autenticação previamente configurada na lista suspensa.
5. Para fazer a janela modal de autorização combinar com o esquema de cores do site, ative a opção Use site theme (recomendado).
6. Na seção Layout, configure o logotipo e plano de fundo personalizado se necessário.