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:

npm i @xsolla/login-sdk

<script src="https://login-sdk.xsolla.com/latest/">
</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 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 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.

import { Widget } from '@xsolla/login-sdk';
const xl = new Widget({
  projectId: 'LOGIN_PROJECT_ID',
  preferredLocale: 'en_US'
  clientId: 'CLIENT_ID',
  responseType: 'code',
  state: 'CUSTOM_STATE',
  redirectUri: 'REDIRECT_URI',
  scope: 'SCOPE'
});

<script>
const xl = new XsollaLogin.Widget({
  projectId: 'LOGIN_PROJECT_ID',
  preferredLocale: 'en_US',
  clientId: 'CLIENT_ID',
  responseType: 'code',
  state: 'CUSTOM_STATE',
  redirectUri: 'REDIRECT_URI',
  scope: 'SCOPE'
});
</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:

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

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

xl.mount('xl_auth');
const showFullscreen = () => {
  const myDiv = document.querySelector('#xl_auth');
  myDiv.style.display = 'block';
  xl.open();
}

<script type="text/javascript">
  xl.mount('xl_auth');

  function showFullscreen() {
    const myDiv = document.querySelector('#xl_auth');
    myDiv.style.display = 'block';

    xl.open();
  }
</script>

Importar pacote de um arquivo

1. Baixe o SDK da CDN ou GitHub.

2. Descompacte o pacote.
3. Abra seu projeto Unity ou crie um novo.
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.

Solucionar dependências do Android

Para compilações Android, o SDK utiliza funções das bibliotecas Andoird nativas.

Para resolver dependências e baixar as bibliotecas necessárias:

1. Especifique Android como plataforma de compilação:
   1. No editor Unity, vá para File > Build Settings no menu principal.
   2. No painel Platform, selecione Android.
   3. Clique em Switch Platform.

2. Inicie o gerenciador de dependências:
   1. No editor Unity, vá para Assets > External Dependency Manager > Android Resolver > Resolve no menu principal.
   2. Espere pelo gerenciador de dependência terminar.

Como resultado, os arquivos JAR ou AAR de todas as bibliotecas Android necessárias são baixados ao diretório Assets/Plugins/Android.

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. Importe as configurações da Conta de Distribuidor:
      1. Clique em Fill settings by PA.
      2. Especifique os dados de autorização da Conta de Distribuidor nos campos Login e Password.
      3. Clique em Log In.
      4. Preencha os campos na seção Publisher Account.

1. 1. 5. Clique em Apply Settings.

1. 2. Especifique os parâmetros manualmente:
      1. No campo Project ID, especifique o ID do projeto, que pode ser encontrado na Conta de Distribuidor ao lado do nome do seu projeto.
      2. No campo Login ID, especifique o ID do projeto de login. Para obtê-lo, abra a Conta de Distribuidor, vá para o Login > Dashboard > Seu projeto de login e clique em Copy ID ao lado do nome do projeto Login.
      3. No campo Callback URL, especifique o URL ou o caminho para o qual os usuários são redirecionados depois de serem autenticados com êxito, confirmarem seus emails ou redefinirem suas senhas. O valor deve corresponder ao especificado na Conta de Distribuidor na seção Login > Seu projeto de login > Security > OAuth 2.0.

1. 1. 4. No campo OAuth Client ID, especifique o ID do cliente para OAuth 2.0 que pode ser encontrado na Conta de Distribuidor na seção Login > Seu projeto de login > Security > OAuth 2.0.

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

As bibliotecas necessárias estão disponíveis em Maven Central.

Para instalar as bibliotecas:

1. Inicialize o Android Studio.
2. Abra o arquivo build.gradle do seu aplicativo.
3. Adicione as seguintes linhas na seção das dependências, onde <version_number> é a versão da biblioteca necessária:

implementation "com.xsolla.android:login:<version_number>"
implementation "com.xsolla.android:store:<version_number>"
implementation "com.xsolla.android:payments:<version_number>"

Inicialize o SDK

Inicialize a biblioteca Login chamando o método estático na inicialização do aplicativo. Para fazer isso, adicione as seguintes linhas ao seu código fonte do projeto Android:

val loginConfig = LoginConfig.OauthBuilder()
                .setProjectId("login-project-id") // You can find it in your Publisher Account, in the Login > Dashboard section.
                .setOauthClientId("oauth2-client-id") // You can find it in Publisher Account in the Login > your Login project > Security > OAuth 2.0 section.
                .build()

XLogin.init(applicationContext, loginConfig)

Adicione a abertura do widget Xsolla Login

Para abrir o widget:

1. Chame o método XLogin.startAuthWithXsollaWidget na biblioteca Login passando os seguintes parâmetros:

1. • fragment ou activity — o fragmento ou atividade atual.

1. • callback — o status do retorno de chamada.

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

2. Dentro do método onActivityResult, chame o método XLogin.finishAuthWithXsollaWidget da biblioteca Login, passando os seguintes parâmetros:

1. • activity — a atividade atual. Necessário para processar o contexto do aplicativo.

1. • activityResultRequestCode — o código de solicitação do método onActivityResult. Utilizado para identificar a solicitação original.

1. • activityResultCode — o código do resultado do método onActivityResult. Isso permite que você determine se a operação foi bem-sucedido.

1. • activityResultData — os dados retornados de onActivityResult. Contém os resultados da operação.

1. • callback — o status do retorno de chamada. Usado para processar o resultado da autenticação.

3. Ao processar o resultado de autorização, inicialize a biblioteca Store.

Inicialização da biblioteca Store:

XStore.init(<yourProjectId>, XLogin.token!!) // Project ID can be found in your Publisher Account next to the project name.

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:

1. 1. No campo Project ID, especifique o ID do projeto, que pode ser encontrado na Conta de Distribuidor ao lado do nome do seu projeto.
   2. No campo Login ID, especifique o ID do cliente do projeto Login. Para obtê-lo, abra a Conta de Distribuidor, vá para a seção Login > Seu projeto de login e clique em Copiar ID próximo ao nome do projeto de login.
   3. No campo Client ID, especifique o URL do cliente para o OAuth 2.0, que pode ser encontrado na Conta de Distribuidor na seção Login > Seu projeto de login > Security > OAuth 2.0.
   4. No campo Redirect URI, especifique o URL ou caminho no aplicativo para o qual os usuários são redirecionados depois de serem autenticados com sucesso, confirmarem o e-mail ou redefinirem a senha. Os valores devem corresponder aos especificados na Conta de Distribuidor na seção Login > Seu projeto de login > Security > OAuth 2.0.
   5. 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).

1. Como resultado, seu projeto na Conta de Distribuidor será conectado a mapas de demonstração.

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: