Configuration de l'authentification PlayFab avec Google et HTML5

Ce tutoriel vous guide dans le processus d’authentification PlayFab à l’aide de Google et de HTML5/JavaScript.

Exigences

Vous aurez besoin de :

Un compte Google pour les tests.
Un titre [PlayFab](https://developer.playfab.com/) inscrit.
Une bonne connaissance des principes de base et meilleures 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

Ce guide nécessite 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 de nouvelles informations d'identification

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

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

Une fois le projet créé :

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

Google API Manager - écran de consentement OAuth

Remplissez un nom d’application (App Name)
Assurez-vous que des adresses courriel 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

Sur l’écran OAuth client illustré ci-dessous, le Google API Manager révèle deux informations importantes :

Le client ID
Le client secret.

Assurez-vous de copier et d’enregistrer ces valeurs dans un endroit sûr et 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 Game Manager de PlayFab pour votre titre.

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

Module complémentaire PlayFab Game Manager

Remplissez le Client ID.
Remplissez 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 mauvaise 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 tout le 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.

Assurez-vous* de 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 typage TypeScript. Si vous utilisez TypeScript avec le Node SDK, vous pouvez créer un type personnalisé interface LoginRequest extends PlayFabClientModels.LoginWithGoogleAccountRequest { AccessToken: string; } et convertir le 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 de 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 nouveaux clients Google créés à l’avenir; consultez l’exemple de code précédent, qui utilise la bibliothèque Google Identity Services plus récente!

<!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 assurez-vous d’y accéder à l’aide de 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 cela terminé, le script tentera de s’authentifier du côté de PlayFab et affichera le résultat.

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

​Exigences

​Serveur et domaine

​Inscription d’un projet d’API Google

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

Exigences

Serveur et domaine

Inscription d’un projet d’API Google

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