Configuração de autenticação via link profundo

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.

Fluxo do usuário

No aplicativo móvel

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.

O usuário clica no botão de login pelo jogo.
O usuário é redirecionado para o jogo, onde ele é redirecionado automaticamente para a Web Shop como um usuário autorizado.

Na versão desktop

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.

O usuário digitaliza o código QR usando o dispositivo móvel dele e então a Web Shop é aberta no dispositivo móvel.
A versão móvel do jogo abre no dispositivo móvel do usuário.
O usuário é automaticamente redirecionado para a Web Shop no dispositivo móvel como um usuário autorizado.

Fluxo de interação de serviços

Como configurar

No lado do jogo

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 esquema URL para registrar um jogo: gamename://authorize, onde:

gamename — o nome do seu jogo que deve ser aberto em um dispositivo móvel para a autenticação do usuário.
authorize — um exemplo de um nome de ação que deve ser executada após a abertura do jogo. Use o nome da ação que corresponde às ações no sistema operacional do seu aplicativo.

Exemplo de cadastro de um esquema de URL nos aplicativos iOS:

Copy

Full screen

Small screen

<key>CFBundleURLTypes</key>
  <array>
    <dict>
      <key>CFBundleTypeRole</key>
      <string>Editor</string>
      <key>CFBundleURLSchemes</key>
      <array>
        <string>gamename</string>
      </array>
    </dict>
  </array>

Exemplo de cadastro de um esquema de URL em aplicativos Android:

Copy

Full screen

Small screen

<intent-filter>
    <action android:name="android.intent.action.VIEW" />
    <category android:name="android.intent.category.DEFAULT" />
    <category android:name="android.intent.category.BROWSABLE" />
    <data android:scheme="gamename" android:host="authorize" />
</intent-filter>

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

Parâmetro	Tipo	Descrição
loginId	string	ID do método de autorização da Conta de Distribuidor. Obrigatório.
webhookUrl	string	URL para receber o webhook User validation in Web Shop. O URL deve corresponder ao endereço especificado ao configurar a autenticação via ID de Usuário. A Xsolla espera um código HTTP `200` em resposta ao webhook para autorizar o usuário Web Shop. Se a Xsolla receber uma resposta com um código HTTP `404` ou não receber uma resposta, o usuário não será autorizado. Você pode especificar o valor `"webhookUrl": "https://nowebhook.com"` para desativar webhooks ao autenticar via link profundo. Nesse caso, a Xsolla não verifica a existência do usuário, então certifique-se de que você passe o ID de usuário que existe no jogo no parâmetro user.id. Obrigatório.
settings.projectId	string	ID de Projeto encontrado na Conta de Distribuidor, que é especificado próximo ao nome do seu projeto na barra de endereço do navegador. O URL tem o seguinte formato:`https://publisher.xsolla.com/merchant ID/Publisher Account section`. Obrigatório.
user.id	string	ID de Usuário no jogo. Obrigatório.
user.name	string	Nome de usuário. Obrigatório.

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

Copy

Full screen

Small screen

curl --location 'https://sb-user-id-service.xsolla.com/api/v1/user-id' \
--header 'Content-Type: application/json' \
--data '{
 "loginId": "000001aa-001a-0ab0-00001-01a01a01a01a",
 "webhookUrl": "https://nowebhook.com",
 "settings": {
   "projectId": 123456,
   "merchantId": 123456
 },
 "user": {
   "id": "123",
   "name": "a-user-name"
 }
}'

Você obterá a resposta do tipo {token=“JWT_TOKEN”}.

Adicione uma janela pop-up com uma notificação de autorização bem-sucedida (opcional).
Implemente a abertura do Web Shop no navegador usando o token de usuário obtido.

Exemplo de criar 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.xsollasitebuilder.com/?token={token}, se você estiver usando um domínio Xsolla.

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

Dentro do Site Builder

Você pode aplicar as configurações no lado do Site Builder você mesmo usando os exemplos de código fornecidos abaixo.
Para obter ajuda na configuração, contate seu Gerente de Sucesso do Cliente ou envie um e-mail para csm@xsolla.com.

Primeiro, configure a autenticação via ID de Usuário. Isso é necessário para que os usuários tenham uma maneira alternativa de autenticação se a autenticação de link profundo estiver indisponível. Por exemplo, se o jogo não for instalado no dispositivo móvel de um usuário.

Abra o projeto na Conta de Distribuidor.
No menu lateral, clique em Site Builder.
Clique em Configure no cartão do seu site Web Shop com autenticação via ID de Usuário.
Adicione a autenticação via link profundo usando um bloco Custom code.
No bloco Custom code na guia JavaScript, adicione o código personalizado abaixo, que implementa a autenticação de link profundo para as versões móveis e desktop.

Substitua os valores das constantes no código com os seus valores, onde:
- DEEPLINK_URL — Esquema URL para abrir o jogo via link profundo.
- QR_CODE — Código QR para abrir o jogo no formato SVG. O código QR deve contar o link à Web Shop com o parâmetro source = pc.
- deeplink__description — Descrição que é exibida sob o botão de autorização do jogo no aplicativo móvel.
- qr-code-auth__description — Descrição exibida sob o código QR na versão desktop do jogo.

Copy

Full screen

Small screen

{
    const DEEPLINK_URL = 'gamename://authorize';
    const QR_CODE = `YOUR_SVG_WITH_QR_CODE`;
    handleQRCodeRedirect();

// Event handlers are set up for opening the authentication modal or for successful authentication.
// If the event of opening the authentication modal occurs, the handler is triggered and a button or QR code is added to this window.
// If the event of successful authentication occurs, the handler is triggered and the successful authentication modal is opened.

    window.addEventListener('custom-event:modal:render', updateLoginModal);
    window.addEventListener('custom-event:authorization:login', showLoginSuccessPopup);
    let getToken;

    const searchParams = new URLSearchParams(window.location.search);
    const tokenParam = searchParams.get('token');
    if (tokenParam) {
        showLoginSuccessPopup(tokenParam);
    }

    window.SB.subscribe(api => {
        getToken = api.getToken;
    });

// Customization of the authentication modal window (adding a QR code for the desktop version of the game or a login button for the mobile version of the game).

    function updateLoginModal({detail}) {
        const {name, element} = detail;
        if (name !== 'user-id' || element.dataset.isQrAdded === 'true') return;
        const isMobile = checkMobileDevice();
        const ModalBody = element.querySelector('.ui-site-modal-window__body');
        const ModulInput = ModalBody.querySelector('.user-id-modal__input');
        element.classList.toggle('mobile-layout', isMobile);
        ModalBody.append(getTemplate(isMobile));

        element.dataset.isQrAdded = true;
    }

// Function to display the successful authentication modal window.

  function showLoginSuccessPopup(t) {
    let username = 'Gamer';
    try {
      const token = getToken?.() || t;
      if (token) {
        const jwtData = parseJwt(token);
        const payload = JSON.parse(jwtData.payload);
        if (payload.userInfo.name) {
          username = payload.userInfo.name;
        } else if (jwtData.username) {
          username = jwtData.username;
        } else if (jwtData.server_custom_id) {
          username = jwtData.server_custom_id;
        }
      }
    } catch (e) {
      console.log('error', e);
    }

    const Modal = document.querySelector('.deeplink-auth');
    const ModalTitle = Modal.querySelector('.deeplink-auth__title');

    ModalTitle.textContent = ModalTitle.textContent.replace(/\{username}/g, username);

    Modal.classList.add('_visible');
    Modal.querySelector('.deeplink-auth__button').addEventListener('click', closeModal);

    function closeModal() {
      Modal.classList.remove('_visible');
    }
  }

// Function that displays a QR code for the desktop version of the game or a login button for the mobile version of the game. Your_game should be replaced with the actual name of your game. To continue with the authentication, the game has to be installed on the user's phone.

  function getTemplate(isMobile) {
    const Deeplink = document.createElement('div');

    if (isMobile) {
      Deeplink.innerHTML = `
        <div class="deeplink__title"><span class="deeplink__title-text">or login via game</span></div>
        <a href="${DEEPLINK_URL}" class="deeplink__button" rel="noopener">Login via Mobile Game</a>
        <div class="deeplink__description">
          You need to have the Your_game installed on your phone in order to proceed with authorization and purchase
        </div>
      `;

      return Deeplink;
    }

    Deeplink.innerHTML = `
      <div class="separator">
        <span class="separator__text">or login via game</span>
      </div>
      <div class="qr-code-auth">
        <div class="qr-code-auth__image">${QR_CODE}</div>
        <span class="qr-code-auth__description">
        Scan the QR code with your phone and you will continue purchasing on your mobile device
        </span>
      </div>
    `;

    return Deeplink;
  }

  function checkMobileDevice() {
    return (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent));
  }

//  Function that decodes the JWT token and returns its payload as a JavaScript object.

  function parseJwt(token) {
    const base64Url = token.split('.')[1];
    const base64 = base64Url.replace(/-/g, '+').replace(/_/g, '/');
    const jsonPayload = decodeURIComponent(window.atob(base64).split('').map(function (c) {
      return '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2);
    }).join(''));

    return JSON.parse(jsonPayload);
  }

// Function to verify the vent occurred when the user scanned the QR code.

  function handleQRCodeRedirect() {
    const url = new URL(window.location.href);
    const source = url.searchParams.get('source');
    if (source === 'pc') {
      if (checkMobileDevice()) {
        const button = document.getElementById("deeplink-redirect");
        button.click();
      }

      setTimeout(function () {
        url.searchParams.delete('source');
        window.history.pushState({}, '', url);
      }, 2000);
    }
  }
}

No bloco Custom code na guia HTML, adicione o código para uma janela modal indicando a autorização bem-sucedida na Web Shop. Você pode definir seus próprios valores de texto.

Copy

Full screen

Small screen

<div class="ui-site-modal-window deeplink-auth">
  <div class="deeplink-auth__body">
    <div class="deeplink-auth__image"></div>
    <div class="deeplink-auth__title">Hi, {username}!</div>
    <div class="deeplink-auth__description">You’ve successfully logged in to the Web Shop</div>
    <button class="deeplink-auth__button">Continue</button>
  </div>
</div>

<a href="gamename://authorize" id="deeplink-redirect" style="display: none;"></a>

No bloco Custom code na guia CSS, adicione os estilos para os novos componentes da interface. Os estilos recomendados são sugeridos abaixo. Especifique o URL da sua própria imagem exibida na autorização bem-sucedida.

Copy

Full screen

Small screen

--deeplink-success-image-url: url("Successful_authorization_image_url");

.html-v2:has(.deeplink-auth._visible) {
  z-index: var(--modalsZIndex);
}

.user-id-modal__content {
  padding: 0 16px !important;
}

@media (min-width: 768px) {
  .user-id-modal__content {
    max-width: 460px !important;
    padding: 0 3.8rem 4rem !important;
    overflow: auto;
    justify-content: center;
  }
}

.mobile-layout .user-id-modal__close {
  right: 8px;
  top: 16px;
}

.user-id-modal__logo {
  width: 109px;
  height: 38px;
  margin: 4rem auto 2rem;
}

.user-id-modal.mobile-layout .user-id-modal__logo {
  margin: 3rem auto 2.5rem;
}

.user-id-modal__wrapper {
  margin-top: 0;
}

.user-id-modal__title {
  margin-bottom: 3rem;
}

.user-id-modal__input-wrapper .ui-site-input {
  height: 41px;
}

.user-id-modal__input {
  margin-top: 0;
  border-radius: var(--border-radius-16);
}

.user-id-modal__button {
  height: auto;
  margin: 12px auto 0;
  padding: 1.25rem;
  border-radius: var(--border-radius-16);
}

.user-id-modal__button .simple-button__text {
  font-size: 1.8rem;
  font-weight: 500;
  line-height: 2.5rem;
  letter-spacing: 0.5px;
}

.user-id-modal .ui-site-instruction-cut__title .ui-site-description {
  margin-bottom: 3rem;
  font-size: 1.2em;
}

.user-id-modal .ui-site-instruction-cut__steps {
  overflow-y: visible;
}

.user-id-modal .ui-site-instruction-card:first-child {
  margin-top: 0;
}

.user-id-modal .ui-site-instruction-card:last-child {
  padding-bottom: 4rem;
}

.user-id-modal .separator {
  display: flex;
  margin-bottom: 3.8rem;
  align-items: center;
}

.user-id-modal .separator__text {
  padding: 0 1.5rem;
  font-family: var(--main-font);
  font-size: 1.8rem;
  font-weight: 500;
  line-height: 2.5rem;
  letter-spacing: 0.8px;
}

.user-id-modal .separator::before,
.user-id-modal .separator::after {
  content: "";
  background-color: #797979;
  height: 1px;
  flex-grow: 1;
}

.user-id-modal .qr-code-auth__image {
  display: block;
  width: 160px;
  height: 160px;
  margin: 0 auto 20px;
}

.user-id-modal .qr-code-auth__image svg {
  display: block;
  width: 100%;
  height: 100%;
}

.user-id-modal .qr-code-auth__description {
  display: inline-block;
  font-family: var(--main-font);
  font-size: 1.5rem;
  font-weight: 400;
  line-height: 2.5rem;
  text-align: center;
  color: rgba(255, 255, 255, 0.7);
}

.deeplink__title {
  display: flex;
  margin-bottom: 3.8rem;
  align-items: center;
}

.deeplink__title-text {
  padding: 0 1.5rem;
  font-family: var(--main-font);
  font-size: 1.8rem;
  font-weight: 500;
  line-height: 2.5rem;
  letter-spacing: 0.8px;
}

.user-id-modal .deeplink__title::before,
.user-id-modal .deeplink__title::after {
  content: "";
  background-color: #797979;
  height: 1px;
  flex-grow: 1;
}

.deeplink__button {
  display: block;
  margin-bottom: 2.2rem;
  padding: 1.3rem;
  font-family: var(--main-font);
  font-size: 1.8rem;
  font-weight: 500;
  line-height: 2.5rem;
  letter-spacing: 0.5px;
  text-align: center;
  color: var(--button-text-color);
  background: var(--accent-color);
  border-radius: var(--border-radius-16);
  text-decoration: none;
  transition: transform .2s cubic-bezier(.509, .001, .25, 1);
}

.deeplink__button:hover {
  transform: scale(.95);
}

.deeplink__description {
  margin-bottom: 2rem;
  font-family: var(--main-font);
  font-size: 1.6rem;
  line-height: 2.3rem;
  text-align: center;
  color: rgba(255, 255, 255, 0.7);
  letter-spacing: 0.5px;
}

.deeplink__cta-wrapper {
  display: flex;
  flex-direction: row;
  gap: 1.8rem;
  padding: 0 1.2rem;
}

.deeplink__cta-wrapper .ui-site-calltoaction__item {
  margin: 0;
  flex-grow: 2;
}

.deeplink__cta-wrapper .ui-site-calltoaction {
  width: 100%;
  min-width: auto;
  height: auto;
  min-height: auto;
  padding-bottom: 36%;
  background-size: contain;
  border-radius: 0;
}

.deeplink-auth {
  display: none;
}

.deeplink-auth._visible {
  display: flex;
}

.deeplink-auth__body {
  position: relative;
  width: 100%;
  max-width: 336px;
  padding: 16px;
  border-radius: 12px;
  background-color: var(--colors-core-background-secondary-rgb);
  border: var(--border-size) solid var(--border-color);
  font-family: var(--main-font);
  color: var(--colors-core-text-primary);
}

@media (min-width: 768px) {
  .deeplink-auth__body {
    max-width: 460px;
    padding: 24px 30px;
  }
}

.deeplink-auth__image {
  margin-bottom: 20px;
  padding-bottom: 49%;
  border-radius: 12px;
  background-image: var(--deeplink-success-image-url);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

@media (min-width: 768px) {
  .deeplink-auth__image {
    padding-bottom: 37%;
  }
}

.deeplink-auth__title {
  margin-bottom: 10px;
  font-size: 20px;
  font-weight: 500;
  line-height: 24px;
  text-align: center;
  letter-spacing: 0.7px;
}

@media (min-width: 768px) {
  .deeplink-auth__title {
    margin-bottom: 20px;
    font-size: 24px;
    line-height: 30px;
  }
}

.deeplink-auth__description {
  margin-bottom: 20px;
  font-size: 13px;
  font-weight: 400;
  line-height: 18px;
  text-align: center;
  letter-spacing: 0.5px;
  color: rgba(255, 255, 255, 0.7);
}

.deeplink-auth__button {
  display: block;
  width: 100%;
  padding: 1.3rem;
  font-family: var(--main-font);
  font-size: 1.8rem;
  font-weight: 500;
  line-height: 2.5rem;
  letter-spacing: 0.5px;
  text-align: center;
  color: var(--button-text-color);
  background: var(--accent-color);
  border-radius: var(--border-radius-16);
  text-decoration: none;
  transition: transform .2s cubic-bezier(.509, .001, .25, 1);
}

@media (min-width: 768px) {
  .deeplink-auth__button {
    padding: 12px;
    font-size: 16px;
    line-height: 24px;
  }
}

.deeplink-auth__button:hover {
  transform: scale(.95);
}

Obrigado pelo seu feedback!

Avaliaremos sua mensagem e a usaremos para melhorar sua experiência.

Avalie esta página

Não quero responder

Obrigado pelo seu feedback!

Última atualização: 2 de Mai de 2024

Encontrou um erro de texto ou digitação? Selecione o texto e pressione Ctrl+Enter.

Your browser is not supported. Please try a different browser

Web Shop

Configuração de autenticação via link profundo

Fluxo do usuário

No aplicativo móvel

Na versão desktop

Fluxo de interação de serviços

Como configurar

No lado do jogo

loginId

webhookUrl

settings.projectId

user.id

user.name

Dentro do Site Builder

Este artigo foi útil?

Avalie esta página

Obrigado pelo seu feedback!