Configuración de la autenticación de PlayFab con Google y HTML5

Este tutorial le guía a través del proceso de autenticación de PlayFab con Google y HTML5/JavaScript.

Requisitos

Necesitará:

Una cuenta de Google para realizar pruebas.
Un título de [PlayFab](https://developer.playfab.com/) registrado.
Familiaridad con Conceptos básicos de inicio de sesión y procedimientos recomendados.
Como mínimo, un servidor con un nombre de dominio válido que actúe como archivo HTML estático. Consulte el tutorial Ejecución de un servidor HTTP para pruebas para obtener información sobre cómo configurar uno.

Servidor y dominio

Para seguir esta guía se necesita un servidor con un dominio válido. Si aún no tiene un dominio registrado y un servidor web remoto, siga nuestro tutorial Ejecución de un servidor HTTP para pruebas para obtener información sobre cómo configurar uno para ejecutar un servidor web local con un nombre de dominio válido. A lo largo de esta guía, supondremos que su dominio es [http://playfab.example](http://playfab.example).

Registro de un proyecto de la API de Google

Comience por ir a la consola de la API de Google:

Vaya a CREATE PROJECT y selecciónelo.

Rellene el campo situado bajo Project Name.
Seleccione el botón Create.

Es normal que el Administrador de API tarde entre 10 y 20 segundos en generar el proyecto.

Una vez creado el proyecto:

Vaya a la pantalla de consentimiento de OAuth.
Seleccione External en User Type.
A continuación, seleccione Create.

Rellene un nombre de aplicación.
Asegúrese de que hay correos electrónicos en user support email y Developer Contact Email.
A continuación, seleccione SAVE AND CONTINUE.

A continuación, vaya a Credentials.
Seleccione Create credentials.
Después, seleccione OAuth client ID.

Seleccione Web Application como Application type.
Asigne un nombre a la aplicación.
Agregue su dominio a Authorized JavaScript origins, [PlayFab](http://playfab.example.com) en nuestro caso.
Por último, seleccione el botón Create para confirmar los cambios.

En la pantalla OAuth client que se muestra a continuación, el Administrador de API de Google revela dos datos importantes:

El identificador de cliente.
El secreto de cliente.

Asegúrese de copiar y guardar estos valores en un lugar seguro de fácil acceso, ya que se usarán en el proceso de autorización que se muestra más adelante en este tutorial.

Vaya a la página de Game Manager de PlayFab de su título.

Vaya a Add-ons en el menú.
Busque y abra el icono o vínculo del complemento de Google.

Rellene el identificador de cliente.
Rellene el secreto de cliente.
A continuación, seleccione el botón Install Google.

Desde julio de 2017, el Administrador de API de Google tiene la mala costumbre de no enlazar correctamente el dominio de origen de Allowed JS. Si recibe el error siguiente: “idpiframe_initialization_failed”, details: “Not a valid origin for the client: somedomain.com…”, elimine las credenciales y vuelva a crearlas. No es necesario eliminar todo el proyecto, solo las credenciales.

Pruebas con un token de acceso

En este ejemplo, mostramos cómo probar la API LoginWithGoogleAccount mediante el enfoque clásico de token de acceso. Use el código HTML que se proporciona a continuación para sus pruebas.

Asegúrese* de reemplazar YOUR_CLIENT_ID y YOUR_PLAYFAB_TITLE por sus propios valores.

El parámetro AccessToken falta en el objeto LoginWithGoogleAccountRequest de los archivos de tipos de TypeScript. Si usa TypeScript con el SDK de Node, puede crear un tipo personalizado interface LoginRequest extends PlayFabClientModels.LoginWithGoogleAccountRequest { AccessToken: string; } y convertir el tipo al usar la 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>

Pruebas con la biblioteca (en desuso) de Google Sign-in Platform

El ejemplo siguiente usa la biblioteca de plataforma de Google Sign-In. Según el sitio de documentación pública de Google Identity, la biblioteca de plataforma de JavaScript de Google Sign-In para web quedará en desuso el 31 de marzo de 2023. Este ejemplo no funcionará para los clientes de Google recién creados de aquí en adelante; consulte el ejemplo de código anterior, que usa la biblioteca más reciente de 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>

Recuerde abrir esta página con su servidor web y asegúrese de acceder a ella mediante la URL que especificó al configurar el proyecto de Google (http://playfab.example en nuestro caso).

Cuando se abra la página, seleccione G Signed In y siga el flujo general de autenticación de Google.
Cuando esto termine, el script intentará autenticarse en PlayFab y mostrará el resultado.

Si ya tiene una sesión de autenticación de Google en ejecución, no tendrá que seleccionar G Signed In. Todo sucederá automáticamente.

​Requisitos

​Servidor y dominio

​Registro de un proyecto de la API de Google

​Pruebas con un token de acceso

Requisitos

Servidor y dominio

Registro de un proyecto de la API de Google

Pruebas con un token de acceso