Configurar a autenticação do PlayFab usando Google e HTML5

Este tutorial orienta você no processo de autenticação do PlayFab usando Google e HTML5/JavaScript.

Requisitos

Você precisará de:

Uma conta do Google para testes.
Um título do [PlayFab](https://developer.playfab.com/) registrado.
Familiaridade com os conceitos básicos e práticas recomendadas de login.
No mínimo, um servidor com um nome de domínio válido para servir um arquivo HTML estático. Consulte o tutorial Executar um servidor HTTP para testes para obter informações sobre como configurar um.

Servidor e domínio

Este guia requer um servidor com um domínio válido. Se você ainda não tiver um domínio registrado e um servidor Web remoto, siga nosso tutorial Executar um servidor HTTP para testes para obter informações sobre como configurar e executar um servidor Web local com um nome de domínio válido. Ao longo deste guia, presumiremos que seu domínio é [http://playfab.example](http://playfab.example).

Registrar um projeto da API do Google

Comece navegando até o Console de APIs do Google:

Navegue até CREATE PROJECT e selecione essa opção.

Gerenciador de APIs do Google: criar novas credenciais

Preencha o campo em Project Name.
Selecione o botão Create.

Gerenciador de APIs do Google: novo projeto

É normal que o API Manager leve de 10 a 20 segundos para gerar o projeto.

Depois que o projeto for criado:

Navegue até OAuth consent screen.
Selecione External em User Type
Em seguida, selecione Create.

Gerenciador de APIs do Google: tela de consentimento OAuth

Preencha um nome de aplicativo (App Name)
Certifique-se de que haja emails em user support email e Developer Contact Email
Em seguida, selecione SAVE AND CONTINUE

Configuração da tela de consentimento OAuth no Gerenciador de APIs do Google

Configuração da tela de consentimento OAuth no Gerenciador de APIs do Google 2

Em seguida, navegue até Credentials.
Selecione Create credentials.
Em seguida, selecione OAuth client ID.

Gerenciador de APIs do Google: abrir credenciais OAuth

Selecione Web Application como seu Application type.
Dê um Name ao seu aplicativo.
Adicione seu domínio a Authorized JavaScript origins - [PlayFab](http://playfab.example.com) no nosso caso.
Por fim, selecione o botão Create para confirmar suas alterações.

Gerenciador de APIs do Google: criar credenciais OAuth

Na tela OAuth client mostrada abaixo, o Gerenciador de APIs do Google revela duas informações importantes:

A client ID
O client secret.

Certifique-se de copiar e salvar esses valores em um local seguro e de fácil acesso, pois eles serão usados no processo de autorização mostrado mais adiante neste tutorial.

ID e segredo do cliente OAuth no Gerenciador de APIs do Google

Acesse a página do Game Manager do PlayFab para seu título.

Navegue até Add-ons no menu.
Localize e abra o ícone/link Google Add-on.

Preencha a Client ID.
Preencha o Client secret.
Em seguida, selecione o botão Install Google.

Instalar o complemento do Google no Game Manager do PlayFab

Desde julho de 2017, o Google API Manager tem o mau hábito de não vincular corretamente o domínio de origem Allowed JS. Se você receber o seguinte erro: “idpiframe_initialization_failed”, details: “Not a valid origin for the client: somedomain.com…”, remova as credenciais e recrie-as. Não é necessário excluir o projeto inteiro, apenas as credenciais.

Testar usando um token de acesso

Neste exemplo, mostramos como testar a API LoginWithGoogleAccount usando a abordagem clássica de token de acesso. Use o código HTML fornecido abaixo para seus testes.

Certifique-se* de substituir YOUR_CLIENT_ID e YOUR_PLAYFAB_TITLE pelos seus próprios valores.

o parâmetro AccessToken está ausente no objeto LoginWithGoogleAccountRequest nos arquivos de tipagem do TypeScript. Se você estiver usando TypeScript com o SDK do Node, poderá criar um tipo personalizado interface LoginRequest extends PlayFabClientModels.LoginWithGoogleAccountRequest { AccessToken: string; } e converter o tipo ao usar a API

PlayFabClient.LoginWithGoogleAccount( { AccessToken: accessToken, CreateAccount: true, } as LoginRequest, onPlayFabResponse);

<!DOCTYPE html>
<html>
  <head>
    <script src="https://accounts.google.com/gsi/client" onload="initClient()" async defer></script>
    <script src="https://download.playfab.com/PlayFabClientApi.js"></script>
  </head>
  <body>
    <script>
      var client;
      function initClient() {
          console.log("Initializing Google token client on page load");
          client = google.accounts.oauth2.initTokenClient({
              client_id: "YOUR_CLIENT_ID", // TODO: PUT YOUR GOOGLE CLIENT_ID HERE!
              callback: "onTokenResponse",
              scope: "https://www.googleapis.com/auth/userinfo.profile",
              callback: (tokenResponse) => {
                  access_token = tokenResponse.access_token;
                  onSignIn();
              }
          });
      }

      function getToken() {
        client.requestAccessToken();
      }

      // Invoked after user has signed in with Google
      function onSignIn() {
          // Execute LoginWithGoogleAccount API call using the Google access token. Please replace TitleId.
          logLine("Attempting PlayFab Sign-in using LoginWithGoogleAccount");
          PlayFabClientSDK.LoginWithGoogleAccount({
              AccessToken: access_token, // This access token is generated after a user has signed into Google
              CreateAccount: true,
              TitleId: "YOUR_PLAYFAB_TITLE", // TODO: PUT YOUR TITLE ID HERE!
          }, onPlayFabResponse);
      }

      // Handles response from PlayFab
      function onPlayFabResponse(response, error) {
          if (response)
              logLine("Response: " + JSON.stringify(response));
          if (error)
              logLine("Error: " + JSON.stringify(error));
      }

      function logLine(message) {
          var textnode = document.createTextNode(message);
          document.body.appendChild(textnode);
          var br = document.createElement("br");
          document.body.appendChild(br);
      }
    </script>
    <h1>Google Access Token Auth Example</h1>
    <!-- Clicking this button will prompt the user to sign into Google. Once they have signed into Google, LoginWithGoogleAccount is automatically called. -->
    <button onclick="getToken();">Sign into Google</button><br><br>
  </body>
</html>

Testar usando a biblioteca Google Sign-in Platform (preterida)

O exemplo abaixo usa a biblioteca da plataforma Google Sign-In. De acordo com o site de documentação pública do Google Identity, a biblioteca da plataforma JavaScript Google Sign-In para Web será preterida em 31 de março de 2023. Este exemplo não funcionará para clientes do Google criados daqui em diante. Consulte o exemplo de código anterior, que usa a biblioteca mais recente Google Identity Services!

<!DOCTYPE html>
<html>
<head>
    <!-- Special meta tag allows you to pass Google Client ID. Replace the content attribute value with your own Client Id -->
    <meta name="google-signin-client_id" content="YOUR_CLIENT_ID"><!-- // TODO: PUT YOUR GOOGLE CLIENT_ID HERE! -->
    <!-- Load Google platform SDK-->
    <script src="https://apis.google.com/js/platform.js" async defer></script>
    <!-- Load PlayFab Client JavaScript SDK -->
    <script src="https://download.playfab.com/PlayFabClientApi.js"></script>
</head>
<body>
    <p>Google Access Token Auth Example</p>
    <!-- Neat Google button gets styled automatically when Google platform SDK is loaded -->
    <div class="g-signin2" data-onsuccess="onSignIn"></div>
    <script>
        // Invoked when user has signed in with Google
        function onSignIn() {
            // Retrieve access token
            var accessToken = gapi.auth2.getAuthInstance().currentUser.get().getAuthResponse(true).access_token;
            // Execute LoginWithGoogleAccount API call using the access token. Please replace TitleID with your own.
            logLine("Attempting PlayFab Sign-in using LoginWithGoogleAccount");
            PlayFabClientSDK.LoginWithGoogleAccount({
                ServerAuthCode: accessToken,
                CreateAccount : true,
                TitleId: "YOUR_PLAYFAB_TITLE", // TODO: PUT YOUR TITLE ID HERE!
            }, onPlayFabResponse);
        }

        // Handles response from PlayFab
        function onPlayFabResponse(response, error) {
            if (response)
                logLine("Response: " + JSON.stringify(response));
            if (error)
                logLine("Error: " + JSON.stringify(error));
        }

        function logLine(message) {
            var textnode = document.createTextNode(message);
            document.body.appendChild(textnode);
            var br = document.createElement("br");
            document.body.appendChild(br);
        }
    </script>
</body>
</html>

Lembre-se de abrir esta página usando seu servidor Web e certifique-se de acessá-la usando a URL que você especificou ao configurar o projeto do Google (http://playfab.example no nosso caso).

Quando a página abrir, selecione G Signed In e siga o fluxo geral de autenticação do Google.
Quando isso terminar, o script tentará se autenticar no lado do PlayFab e exibirá o resultado.

Se você já tiver uma sessão de autenticação do Google em execução, não será necessário selecionar G Signed In. Tudo acontecerá automaticamente.

​Requisitos

​Servidor e domínio

​Registrar um projeto da API do Google

​Testar usando um token de acesso

Requisitos

Servidor e domínio

Registrar um projeto da API do Google

Testar usando um token de acesso