Autentique os usuários no seu aplicativo

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:

• 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).

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>

Importar pacote de um arquivo

1. Baixe a última versão do SDK (recomendado) ou escolha a versão do SDK necessária no GitHub e baixe-a.
2. Descompacte o pacote.
3. Abra seu projeto Unity ou crie um novo ano.
4. No editor Unity, vá para Assets > Import Package > Custom Package no menu principal e selecione o SDK.

Configure o compilador

1. Clique em Edit > Project Settings no menu principal.
2. Vá para a seção Player > Other Settings > Configuration.
3. Certifique-se de que Mono esteja selecionado no campo Scripting Backend.

Configure o SDK

1. Abra seu projeto Unity.
2. Clique em Window > Xsolla > Edit Settings no menu principal.
3. Especifique os principais parâmetros do projeto no painel Inspector de uma das seguintes maneiras:

1. 1. 5. Clique em Apply Settings.

4. Defina outras configurações, se necessário (por exemplo, opções de exibição para a interface de pagamento na seção Pay Station UI).

Adicione a abertura do widget Xsolla Login

Para abrir o widget, chame o método SDK XsollaAuth.AuthWithXsollaWidget, passando os seguintes parâmetros:

• onSuccess — o retorno de chamada de autenticação bem-sucedida do usuário.
• onError — o retorno de chamada de erro de solicitação.
• onCancel — o retorno de chamada de cancelamento de autenticação do usuário, acionado quando o usuário fecha o widget sem concluir o processo de autenticação.
• locale — o idioma da interface (opcional). 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).

Para compilações independentes, o widget abre no navegador integrado incluído com o SDK. Você pode usar uma solução de navegação integrada diferente que permita a você rastrear alterações de URL.

Instalação do SDK

1. Baixe o Epic Games Launcher.
2. Crie um novo projeto Unreal Engine.

3. Baixe e instale o SDK:
   1. Para baixar e instalar o SDK do Unreal Engine Marketplace:
      1. Vá para a página do SDK no Unreal Engine Marketplace.
      2. Clique em Open in Launcher.

1. 1. 3. Vá para o Epic Games Launcher.

1. 1. 4. Clique em Install to Engine.
      5. Abra seu projeto Unreal Engine no Unreal Editor.
      6. Vá para a seção Settings > Plugins > Installed > Xsolla SDK. Marque a caixa Enabled e clique em Restart Now para salvar as configurações e recarregar o Unreal Editor.

1. 2. Para baixar e instalar o SDK do GitHub:
      1. Baixe o pacote com o SDK para a sua versão do engine.
      2. Descompacte o pacote.
      3. Mova a pasta do SDK para o diretório plugins na raíz do seu projeto Unreal Engine.

Configure o SDK

1. Abra seu projeto Unreal Engine no Unreal Editor.
2. Vá para Settings > Project Settings > Plugins > Xsolla Settings > General e especifique os parâmetros do projeto:

3. Vá para Content Browser > View Options e marque as caixas para Show Engine Content e Show Plugin Content.

Adicione a abertura do widget Xsolla Login

Chame o método SDK AuthWithXsollaWidget, passando os seguintes parâmetros:

• WorldContextObject — o objeto de contexto global (para chamadas C++).
• SuccessCallback — o retorno de chamada de autenticação bem-sucedida do usuário e recebimento de token (opcional).
• CancelCallback — o retorno de chamada de cancelamento de autenticação do usuário, acionado quando o usuário fecha o widget sem concluir o processo de autenticação (opcional).
• ErrorCallback — o retorno de chamada de erros que ocorrem durante o processo de autenticação (opcional).
• bRememberMe — se é necessário reter os dados de autenticação ou não (opcional). Por padrão, o valor é definido como false.
• Locale — o idioma da interface (opcional). Por padrão, esse valor é definido pelo endereço IP do usuário.
• State — uma string utilizada para verificações adicionais do usuário no servidor do aplicativo. O valor padrão é definido como xsollatest.

Exemplo: