Configure a autenticação do usuário

Fluxo do usuário

1. O usuário acessa a Web Shop com a autenticação de ID de usuário configurada.
2. O usuário é autorizado na Web Shop de uma das seguintes maneiras:
   • O usuário insere seu ID no bloco Fast Login e clica no botão de login.
   • O usuário clica no botão de compra do item selecionado ou no botão de login na barra superior:
     1. Uma janela modal para inserir o ID de usuário ou fazer login por uma rede social é aberta.
     2. O usuário insere seu ID e clica em Continue ou clica no ícone de redes sociais para escolher uma rede social e concluir a autenticação na respectiva página da rede social.

3. O sistema confere se um usuário já existe no jogo. Se um usuário com esse ID ou conta social existir no jogo, o usuário é autorizado na Web Shop. Caso contrário, uma mensagem de erro é exibida.

Como obtê-lo

1. Do lado do seu aplicativo, implemente a manipulação do webhook de validação do usuário. Ao receber um webhook, o aplicativo deve fazer o seguinte:
   • Procurar um usuário por seu ID passado no webhook.
   • Dependendo do resultado, enviar um dos seguintes códigos de status:
     • Código HTTP 200 com uma resposta do webhook se um usuário for encontrado
     • Código HTTP 404 se o ID do usuário não for encontrado
   • Enviar atributos de usuário para personalização.

4. Se seu site incluir múltiplas páginas, selecione a que você precisa:
   1. Selecione o título da página atual no topo do construtor.
   2. Selecione a página necessária na lista suspensa.
5. Acesse o bloco Login settings.

6. Selecione a opção ID de Usuário.

7. Na lista suspensa, selecione Novo Login.

1. 4. Para configurar uma rede social, vá para o cartão de rede social, clique no ícone ⚙ à direita do título e selecione Connect.

Um link profundo é um URL especial que direciona o usuário não só para a página principal de um aplicativo ou site como também diretamente a uma seção, página ou ação específica.

Links profundos podem ser usados como um método de autenticação ao fazer login via ID de Usuário. Se o jogo for instalado no dispositivo móvel do usuário, ele será redirecionado ao jogo via link profundo para obter um token de autorização.

Fluxo do usuário

No aplicativo móvel

1. Um usuário não autorizado na Web Shop clica no botão de login ou no botão de compra. Uma janela modal para inserir o ID do usuário ou fazer login pelo jogo móvel é aberta.

2. O usuário clica no botão Log in via Jogo Móvel.
3. O usuário é redirecionado e então retorna automaticamente à Web Shop como um usuário autorizado.

Na versão desktop

1. Um usuário não autorizado na Web Shop clica no botão de login ou no botão de compra. Uma janela modal para inserir o ID do usuário ou fazer login na versão móvel do jogo usando um código QR é aberta.

2. O usuário digitaliza o código QR usando seu dispositivo móvel.
3. A Web Shop abre no dispositivo móvel do usuário.
4. O usuário é automaticamente redirecionado ao jogo e então retorna à Web Shop como um usuário autenticado.

Fluxo de interação de serviços

  %%{init: {'themeVariables': { 'noteBkgColor': 'transparent', 'noteBorderColor': 'transparent' }}}%%
sequenceDiagram
    participant U as Usuário
    participant WS as Web Shop
    participant B as Navegador
    participant MOS as SO Móvel
    participant G as Jogo
    participant LA as API Login
    U->>WS: Clica no botão para fazer login por um jogo móvel
    activate WS
    WS->>B: Redireciona o usuário via link profundo
    activate B
    B->>MOS: Faz uma chamada de sistema para abrir o jogo móvel
    activate MOS
    MOS->>G: Abre o jogo móvel
    activate G
    G->>LA: Gera um token de autorização
    activate LA
    LA-->>G: Retorna o token de autorização
    deactivate LA
    G->>MOS: Faz chamada de sistema para abrir navegador com token no URL
    deactivate G
    MOS-->>B: Abre o navegador com o token no URL
    deactivate MOS
    B-->>WS: Abre a página da Web Shop para usuários autorizados
    deactivate B
    WS-->>U: Exibe o nome do usuário no cabeçalho
    deactivate WS

Como configurar

No lado do jogo

1. Nas configurações do aplicativo móvel do seu jogo, cadastre um esquema URL para abrir o jogo via link profundo:
   • em aplicativos Android — no arquivo AndroidManifest.xml.
   • em aplicativos iOS — no arquivo Info.plist.

Depois de cadastrar o esquema, quando o usuário se autenticar na Web Shop através do jogo, o jogo deve abrir no endereço especificado.

Exemplo de um link para abrir o jogo por um esquema de URL registrado:

scheme://authorize?operationPayload=<VALUE>, onde:
• scheme — um identificador exclusivo do seu jogo usado em um esquema de URL personalizado para inicializar o app e navegar à ação necessária.
• authorize — um exemplo de um nome de ação que deveria ser realizada após a inicialização do jogo. Use o nome da ação que corresponde às ações no sistema operacional do seu aplicativo.
• operationPayload=<VALUE> — um parâmetro que contém informações para a geração do token durante a autenticação. O valor é um dado de codificação Base64 gerado pela Xsolla.

Exemplos:

• Cadastrando um esquema URL em aplicativos iOS
• Cadastrando um esquema URL em aplicativos Android

Copy

Full screen

Small screen

• xml

 1<key>CFBundleURLTypes</key>
 2  <array>
 3    <dict>
 4      <key>CFBundleTypeRole</key>
 5      <string>Editor</string>
 6      <key>CFBundleURLSchemes</key>
 7      <array>
 8        <string>scheme</string>
 9      </array>
10    </dict>
11  </array>

Copy

Full screen

Small screen

• xml

1<intent-filter>
2    <action android:name="android.intent.action.VIEW" />
3    <category android:name="android.intent.category.DEFAULT" />
4    <category android:name="android.intent.category.BROWSABLE" />
5    <data android:scheme="scheme" android:host="authorize" />
6</intent-filter>

2. Implemente a geração de um token de autorização no formato JWT usando o ID de usuário do jogo.

Exemplo de chamamento do método API de geração de token do usuário usando curl:

 1curl -X 'POST' \
 2'https://sb-user-id-service.xsolla.com/api/v1/user-id/token' \
 3-H 'accept: /' \
 4-H 'Content-Type: application/json' \
 5-d '{
 6 "loginId": "000001aa-001a-0ab0-00001-01a01a01a01a",
 7 "settings": {
 8   "projectId": 123456,
 9   "merchantId": 123456
10 },
11 "user": {
12   "id": "123",
13   "country": "US"
14 }
15 "operationPayload": "kosarb2NyrtIWaegJAH1f6P7XrBYPXYDya5coc_ZzcfiS_5o4QTUAL-CcGRC_Kv4CAtg"
16}'

Você receberá uma resposta como {token="JWT_TOKEN"}.

3. Adicione uma janela pop-up com uma notificação de autorização bem-sucedida (opcional).

4. Implemente a abertura do Web Shop no navegador usando o token de usuário obtido.

Exemplo de criação de um URL para abrir a Web Shop no navegador para um usuário autorizado:
• https:​//example.com/?token={token}, se você estiver usando um domínio personalizado
• https:​//example.xsolla.site/?token={token}, se você estiver usando um domínio da Xsolla

Onde {token} é o token de autorização do usuário.

Dentro do site builder

2. Clique em Configure no cartão do seu site Web Shop com autenticação via ID de Usuário.
3. Vá para Login Settings e selecione a seção User ID.
4. Ative a opção Autorização de Link Profundo.

5. No campo Deeplink URL, insira o link para a autenticação do usuário.

6. Se você estiver usando o bloco Login Rápido no site:
   1. Vá para o bloco Login Rápido.
   2. Na seção Layout, ative a opção Código QR.

7. Para conferir a autorização, clique em Preview.
8. Para publicar o site, clique em Publish.

Um link profundo é um URL especial que direciona o usuário não só para a página principal de um aplicativo ou site como também diretamente a uma seção, página ou ação específica.

Links profundos permitem que o usuário autentique-se na Web Shop pelo jogo em um clique, em vez de passar pelo processo de autenticação via ID de Usuário ou Xsolla Login.

Se o jogo for instalado no dispositivo móvel do usuário, ele será redirecionado ao jogo via link profundo para obter um token de autorização.

Quando um link profundos é utilizado como método de autenticação primário, ele permite salvar os dados de pagamento, o que não é possível com a autenticação via ID de Usuário e link profundo. Neste caso, o link profundo apenas acelera a autenticação, mas não adiciona nenhum recurso novo.

Fluxo do usuário

No aplicativo móvel

1. Um usuário não autorizado na Web Shop clica no botão de login ou no botão de compra. Uma janela modal para fazer login pelo jogo móvel é aberta.

2. O usuário clica no botão Log in via Jogo Móvel.
3. O usuário é redirecionado e então retorna automaticamente à Web Shop como um usuário autorizado.

Na versão desktop

1. Um usuário não autorizado na Web Shop clica no botão de login ou no botão de compra. Uma janela modal para fazer login na versão móvel do jogo usando um código QR é aberta.

2. O usuário digitaliza o código QR usando seu dispositivo móvel.
3. A Web Shop abre no dispositivo móvel do usuário.
4. O usuário é automaticamente redirecionado ao jogo e então retorna à Web Shop como um usuário autenticado.

Fluxo de interação de serviços

  %%{init: {'themeVariables': { 'noteBkgColor': 'transparent', 'noteBorderColor': 'transparent' }}}%%
sequenceDiagram
    participant U as Usuário
    participant WS as Web Shop
    participant B as Navegador
    participant MOS as SO Móvel
    participant G as Jogo
    participant LA as API Login
    U->>WS: Clica no botão para fazer login por um jogo móvel
    activate WS
    WS->>B: Redireciona o usuário via link profundo
    activate B
    B->>MOS: Faz uma chamada de sistema para abrir o jogo móvel
    activate MOS
    MOS->>G: Abre o jogo móvel
    activate G
    G->>LA: Gera um token de autorização
    activate LA
    LA-->>G: Retorna o token de autorização
    deactivate LA
    G->>MOS: Faz chamada de sistema para abrir navegador com token no URL
    deactivate G
    MOS-->>B: Abre o navegador com o token no URL
    deactivate MOS
    B-->>WS: Abre a página da Web Shop para usuários autorizados
    deactivate B
    WS-->>U: Exibe o nome do usuário no cabeçalho
    deactivate WS

Como configurar

No lado do jogo

1. Nas configurações do aplicativo móvel do seu jogo, cadastre um esquema URL para abrir o jogo via link profundo:
   • em aplicativos Android — no arquivo AndroidManifest.xml.
   • em aplicativos iOS — no arquivo Info.plist.

Depois de cadastrar o esquema, quando o usuário se autenticar na Web Shop através do jogo, o jogo deve abrir no endereço especificado.

Exemplo de um link para abrir o jogo por um esquema de URL registrado:

scheme://authorize?operationPayload=<VALUE>, onde:
• scheme — um identificador exclusivo do seu jogo usado em um esquema de URL personalizado para inicializar o app e navegar à ação necessária.
• authorize — um exemplo de um nome de ação que deveria ser realizada após a inicialização do jogo. Use o nome da ação que corresponde às ações no sistema operacional do seu aplicativo.
• operationPayload=<VALUE> — um parâmetro que contém informações para a geração do token durante a autenticação. O valor é um dado de codificação Base64 gerado pela Xsolla.

Exemplos:

• Cadastrando um esquema URL em aplicativos iOS
• Cadastrando um esquema URL em aplicativos Android

Copy

Full screen

Small screen

• xml

 1<key>CFBundleURLTypes</key>
 2  <array>
 3    <dict>
 4      <key>CFBundleTypeRole</key>
 5      <string>Editor</string>
 6      <key>CFBundleURLSchemes</key>
 7      <array>
 8        <string>scheme</string>
 9      </array>
10    </dict>
11  </array>

Copy

Full screen

Small screen

• xml

1<intent-filter>
2    <action android:name="android.intent.action.VIEW" />
3    <category android:name="android.intent.category.DEFAULT" />
4    <category android:name="android.intent.category.BROWSABLE" />
5    <data android:scheme="scheme" android:host="authorize" />
6</intent-filter>

2. Implemente a geração de um token de autorização no formato JWT usando o ID de usuário do jogo.

Exemplo de chamamento do método API de geração de token do usuário usando curl:

 1curl -X 'POST' \
 2'https://sb-user-id-service.xsolla.com/api/v1/user-id/token' \
 3-H 'Accept: /' \
 4-H 'Content-Type: application/json' \
 5-d '{
 6 "loginId": "string",
 7 "settings": {
 8   "projectId": 0,
 9   "merchantId": 0
10 },
11 "user": {
12   "id": "string",
13   "country": "string",
14   "name": "string",
15   "picture": "string"
16 },
17 "operationPayload": "eyJ4c29sbGF1aWQiOiIzNzE5Nzc5NjU1MDE2Nzc2MzcifQ%3D%3D"
18}'

Você receberá uma resposta como {token="JWT_TOKEN"}.

3. Adicione uma janela pop-up com uma notificação de autorização bem-sucedida (opcional).

4. Implemente a abertura do Web Shop no navegador usando o token de usuário obtido.

Exemplo de criação de um URL para abrir a Web Shop no navegador para um usuário autorizado:
• https:​//example.com/?token={token}, se você estiver usando um domínio personalizado
• https:​//example.xsolla.site/?token={token}, se você estiver usando um domínio da Xsolla

Onde {token} é o token de autorização do usuário.

Dentro do site builder

3. Vá para Configurações de Login e selecione a seção Link Profundo.

4. No campo Deeplink URL, insira o link para a autenticação do usuário.

5. Se você estiver usando o bloco Fast Login no site:
   1. Vá para o bloco Fast Login.
   2. Na seção Configurações do Bloco, ajuste a exibição do botão de login pelo código QR.

6. Para conferir a autorização, clique em Preview.
7. Para publicar o site, clique em Publish.

Fluxo do usuário

1. O usuário vai à Web Shop com a autenticação por Xsolla Login configurada.
2. O usuário clica no botão de compra do item selecionado, o botão de login na barra superior, ou o botão de login no bloco Fast Login.
3. Uma janela modal é aberta com os métodos de autorização configurados no Xsolla Login.

4. O usuário prossegue à autorização e insere dados adicionais se necessário.
5. O sistema confere se um usuário já existe no jogo. Se um usuário existir no jogo, o usuário é autorizado na Web Shop. Caso contrário, uma mensagem de erro é exibida.

Como obtê-lo

1. No Builder do seu site, vá para o bloco Login settings.

2. Selecione a opção de autorização Xsolla Login.
3. Na lista suspensa, selecione New Login.

4. Vá para as configurações do projeto Login na janela modal ou clique em Set up authentication method no bloco Xsolla Login.

5. Conecte o armazenamento de dados do usuário.

Dependendo do método de armazenamento de dados do usuário, diferentes funcionalidades do produto estão disponíveis para você (consulte a Comparação de opções de armazenamento de dados do usuário).

Armazenamento Xsolla

Se você quiser que o produto Login processe toda a lógica de autenticação, conecte-se ao armazenamento Xsolla. Você terá configurações mais flexíveis disponíveis a você.

Quando você cria um projeto Login, o armazenamento Xsolla é conectado por padrão, sem nenhuma etapa adicional sendo necessária para configurá-lo. Se você alterou o tipo de armazenamento padrão e precisa se reconectar ao armazenamento Xsolla, siga essas etapas:

1. Vá para o bloco User database e selecione a seção Storage.
2. Selecione o Xsolla storage e clique em Save changes.

Armazenamento PlayFab

Se você quiser usar a funcionalidade do PlayFab para trabalhar com usuários, conecte-se ao armazenamento PlayFab. Esse armazenamento salva os seguintes dados do usuário:

• nome de usuário
• endereço de e-mail do usuário
• senha do usuário
• campos de um formulário de registro estendido se o formulário estiver configurado

O armazenamento do PlayFab dá acesso aos seguintes recursos:

• cadastro do usuário
• autenticação por endereço de e-mail ou nome de usuário e senha
• autenticação via Twitch
• redefinição de senha do usuário
• bloqueio de usuários

Para conectar o armazenamento:

1. Vá para o bloco User database e selecione a seção Storage.
2. Selecione PlayFab.
3. No campo Title ID, insira o valor do mesmo campo da sua conta.
4. Clique em Save changes.

Armazenamento Firebase

Se você quiser usar a funcionalidade do Firebase para trabalhar com usuários, conecte-se ao armazenamento Firebase. Esse armazenamento salva os seguintes dados do usuário:

• nome de usuário
• endereço de e-mail do usuário
• senha do usuário
• campos de um formulário de registro estendido se o formulário estiver configurado

1. Vá para o bloco User database e selecione a seção Storage.
2. Selecione Firebase.
3. No campo API key, insira o valor do mesmo campo da sua conta Firebase.
4. Clique em Save changes.

Armazenamento personalizado

Se você usar seu próprio sistema de autorização e armazenar dados do usuário no lado do aplicativo, conecte-se ao armazenamento personalizado.

O armazenamento personalizado dá acesso aos seguintes recursos:

• cadastro de usuário
• autenticação por endereço de e-mail ou nome de usuário e senha autenticação
• autenticação sem senha por número telefônico
• autenticação via redes sociais
• redefinição de senha de usuário

1. Conecte o armazenamento personalizado.
2. Configure o processamento de solicitações do servidor Xsolla Login.

Conectar armazenamento personalizado

1. Vá para o bloco Banco de dados de usuários e selecione a seção Armazenamento.
2. Selecione Armazenamento personalizado.
3. Insira URLs para onde enviar as solicitações de API:
   • URL de verificação de usuário
   • URL de novo usuário
   • URL de redefinição de senha
   • URL de login sem senha
   • URL de login social
4. Clique em Salvar alterações.
5. Para os URLs definidos, implemente uma API que responderá da seguinte maneira:
   • HTTP 200 / HTTP 204 para solicitações bem-sucedidas. Se necessário, um JSON contendo dados adicionais do usuário pode ser colocado no corpo da resposta. Os dados passados são gravados em um JWT (o parâmetro partner_data).
   • Outros códigos de status HTTP para solicitações malsucedidas.

Configure o processamento de solicitações do servidor Xsolla Login

1. Valide um JWT recebido.
2. Se a validação for bem-sucedida, decodifice o JWT e verifique se ele inclui as declarações da tabela abaixo. Localize e use uma biblioteca para a decodificação.

1{
2  "exp": 1573635020,
3  "iat": 1573634600,
4  "iss": "https://login.xsolla.com",
5  "request_type": "gateway_request",
6  "xsolla_login_project_id": "00000000-0000-0000-0000-000000000000"
7}

Fluxo do usuário

1. O usuário acessa a Web Shop pela primeira vez com uma autenticação configurada com ID de usuário vinculado.
2. O usuário clica no botão de compra do item selecionado, o botão de login na barra superior, ou o botão de login no bloco Fast Login.
3. Uma janela modal é aberta com os métodos de autorização configurados no Xsolla Login.
4. O usuário prossegue à autorização e insere dados adicionais, se necessário.

5. A janela modal do jogo para vincular o ID de usuário é aberta após a autorização bem-sucedida via Xsolla Login.

6. O sistema confere se o usuário existe. Se o usuário com o ID especificado existir no jogo, o usuário é autorizado na Web Shop. Caso contrário, é exibida uma mensagem de erro.

Como obter

1. Do lado do seu aplicativo, implemente a manipulação do webhook de validação do usuário.

   Ao receber um webhook, o aplicativo deve fazer o seguinte:

   • Procurar um usuário por seu ID passado no webhook.
   • Dependendo do resultado, enviar um dos seguintes códigos de status:
     • Código HTTP 200 com uma resposta do webhook se um usuário for encontrado
     • Código HTTP 404 se o ID do usuário não for encontrado
   • Enviar atributos de usuário para personalização.

4. Se seu site incluir múltiplas páginas, selecione a que você precisa:
   1. Selecione o título da página atual no topo do construtor.
   2. Selecione a página necessária na lista suspensa.
5. Acesse o bloco Login settings.

6. Selecione a opção Login with linked user ID.
7. Na lista suspensa, selecione New Login ou um dos projetos criados.
8. Insira o URL para receber webhooks.