Configuration de l'authentification PlayFab avec Google et HTML5

Ce tutoriel vous guide tout au long du processus d’authentification PlayFab avec Google et HTML5/JavaScript.

Configuration requise

Vous aurez besoin des éléments suivants :

Un compte Google pour les tests.
Un titre [PlayFab](https://developer.playfab.com/) inscrit.
Une bonne connaissance des principes de base et bonnes pratiques de connexion.
Au minimum, un serveur avec un nom de domaine valide pour servir un fichier HTML statique. Consultez le tutoriel Exécution d’un serveur HTTP pour les tests pour savoir comment en configurer un.

Serveur et domaine

Pour suivre ce guide, vous avez besoin d’un serveur avec un domaine valide. Si vous n’avez pas encore de domaine inscrit ni de serveur web distant, suivez notre tutoriel Exécution d’un serveur HTTP pour les tests pour savoir comment exécuter un serveur web local avec un nom de domaine valide. Tout au long de ce guide, nous supposerons que votre domaine est [http://playfab.example](http://playfab.example).

Inscription d’un projet d’API Google

Commencez par accéder à la console des API Google :

Accédez à CREATE PROJECT et sélectionnez-le.

Google API Manager : créer des informations d'identification

Renseignez le champ sous Project Name.
Sélectionnez le bouton Create.

Il est normal que l’API Manager mette 10 à 20 secondes pour générer le projet.

Une fois le projet créé :

Accédez à OAuth consent screen.
Sélectionnez External sous User Type
Sélectionnez ensuite Create.

Google API Manager : écran de consentement OAuth

Renseignez un nom d’application (App Name)
Assurez-vous que des adresses e-mail sont indiquées pour user support email et Developer Contact Email
Sélectionnez ensuite SAVE AND CONTINUE

Google API Manager : configuration de l'écran de consentement OAuth

Google API Manager : configuration de l'écran de consentement OAuth 2

Accédez ensuite à Credentials.
Sélectionnez Create credentials.
Sélectionnez ensuite OAuth client ID.

Google API Manager : ouvrir les informations d'identification OAuth

Sélectionnez Web Application comme Application type.
Donnez un Name à votre application.
Ajoutez votre domaine à Authorized JavaScript origins - [PlayFab](http://playfab.example.com) dans notre cas.
Enfin, sélectionnez le bouton Create pour valider vos modifications.

Google API Manager : créer des informations d'identification OAuth

Dans l’écran OAuth client illustré ci-dessous, le Google API Manager affiche deux informations importantes :

Le client ID
Le client secret.

Veillez à copier et enregistrer ces valeurs en lieu sûr, à un endroit facilement accessible, car elles seront utilisées dans le processus d’autorisation présenté plus loin dans ce tutoriel.

Google API Manager : ID client et secret OAuth

Accédez à la page PlayFab Game Manager de votre titre.

Accédez à Add-ons dans le menu.
Repérez et ouvrez l’icône/le lien Google Add-on.

Module complémentaire PlayFab Game Manager

Renseignez le Client ID.
Renseignez le Client secret.
Sélectionnez ensuite le bouton Install Google.

PlayFab Game Manager : installer le module complémentaire Google

Depuis juillet 2017, le Google API Manager a la fâcheuse habitude de ne pas associer correctement le domaine d’origine Allowed JS. Si vous recevez l’erreur suivante : “idpiframe_initialization_failed”, details: “Not a valid origin for the client: somedomain.com…” Supprimez les informations d’identification et recréez-les. Il n’est pas nécessaire de supprimer l’ensemble du projet, seulement les informations d’identification.

Test à l’aide d’un jeton d’accès

Dans cet exemple, nous montrons comment tester l’API LoginWithGoogleAccount à l’aide de l’approche classique par jeton d’accès. Utilisez le code HTML fourni ci-dessous pour vos tests.

Veillez* à remplacer YOUR_CLIENT_ID et YOUR_PLAYFAB_TITLE par vos propres valeurs.

le paramètre AccessToken est absent de l’objet LoginWithGoogleAccountRequest dans les fichiers de typages TypeScript. Si vous utilisez TypeScript avec le SDK Node, vous pouvez créer un type personnalisé interface LoginRequest extends PlayFabClientModels.LoginWithGoogleAccountRequest { AccessToken: string; } et effectuer un cast du type lors de l’utilisation de l’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>

Test à l’aide de la bibliothèque Google Sign-in Platform (dépréciée)

L’exemple ci-dessous utilise la bibliothèque de plateforme Google Sign-In. Selon le site de documentation publique Google Identity, la bibliothèque de plateforme JavaScript Google Sign-In pour le web sera dépréciée le 31 mars 2023. Cet exemple ne fonctionnera pas pour les clients Google nouvellement créés : reportez-vous à l’exemple de code précédent, qui utilise la bibliothèque plus récente 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>

N’oubliez pas d’ouvrir cette page à l’aide de votre serveur web et veillez à y accéder via l’URL que vous avez spécifiée lors de la configuration du projet Google (http://playfab.example dans notre cas).

Une fois la page ouverte, sélectionnez G Signed In et suivez le flux d’authentification Google habituel.
Une fois cette opération terminée, le script tente de s’authentifier côté PlayFab et affiche le résultat.

Si une session d’authentification Google est déjà en cours, vous n’aurez pas à sélectionner G Signed In. Tout se fera automatiquement.

​Configuration requise

​Serveur et domaine

​Inscription d’un projet d’API Google

​Test à l’aide d’un jeton d’accès

Configuration requise

Serveur et domaine

Inscription d’un projet d’API Google

Test à l’aide d’un jeton d’accès