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 acessa a Web Shop com a autenticação Xsolla Login configurada.
2. O usuário pressiona o botão de compra do item selecionado, no botão de login na barra superior ou no botão de login no bloco Fast Login.
3. Uma janela modal é aberta com os métodos de Autorização.
4. O usuário prossegue com a autorização e informa dados adicionais, se necessário.
5. O sistema verifica se o usuário existe no jogo. Se existir, o sistema autoriza o usuário na Web Shop. Caso contrário, é exibida uma mensagem de erro.

Como obter

2. Clique no ícone ••• no cartão do seu site da Web Shop com a autenticação Xsolla Login e selecione Configure.
3. Selecione Go to Builder e role até o bloco Login settings.

4. Selecione o método de autorização Xsolla Login.

5. Na opção Xsolla Login, selecione uma opção de autenticação na lista suspensa:
   • uma existente, se o Xsolla Login já estiver configurado no seu projeto
   • New Login, se ainda não houver uma opção de autenticação para a Web Shop

Ao visualizar ou publicar o site pela primeira vez, o URL de visualização da Web Shop e o domínio são adicionados automaticamente ao campo Callback URL nas configurações da opção de autenticação. O usuário é redirecionado para esses URLs nos seguintes casos:

• após a autenticação bem-sucedida
• após a confirmação de e-mail
• após a redefinição de senha
• em caso de falha na autenticação

Ao alterar o domínio da Web Shop, esses URLs são atualizados automaticamente.

6. Configure as redes sociais que os usuários podem usar para entrar na Web Shop (opcional). Para mais informações, consulte a documentação Login social.

7. Se você não quiser armazenar os dados do usuário no lado da Xsolla, conecte outro armazenamento de dados do usuário (opcional). Para mais informações, consulte a documentação Conectar armazenamento de dados do usuário.

A funcionalidade disponível depende do armazenamento selecionado. Para mais informações, consulte a documentação Comparação das opções de armazenamento de dados do usuário.

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.