Google と HTML5 を使用した PlayFab 認証のセットアップ

このチュートリアルでは、Google と HTML5/JavaScript を使用した PlayFab 認証のプロセスを説明します。

要件

必要なもの:

テスト用の Google アカウント。
登録済みの [PlayFab](https://developer.playfab.com/) タイトル。
ログインの基本とベストプラクティスに精通していること。
少なくとも、静的 HTML ファイルとして機能する有効なドメイン名を持つサーバー。セットアップ方法については、テスト用の HTTP サーバーの実行チュートリアルを参照してください。

サーバーとドメイン

このガイドに従うには、有効なドメインを持つサーバーが必要です。登録済みドメインとリモート Web サーバーがまだない場合は、テスト用の HTTP サーバーの実行チュートリアルに従って、有効なドメイン名でローカル Web サーバーを実行してください。このガイド全体を通じて、ドメインは [http://playfab.example](http://playfab.example) であると想定します。

Google API プロジェクトを登録する

まず、Google API Console に移動します:

CREATE PROJECT に移動して選択します。

Project Name の下のフィールドに入力します。
Create ボタンを選択します。

API Manager がプロジェクトを生成するのに 10 ～ 20 秒かかるのは正常です。

プロジェクトが作成されたら:

OAuth consent screen に移動します。
User Type の下で External を選択します
次に Create を選択します。

App Name を入力します
user support email と Developer Contact Email のメールアドレスがあることを確認します
次に SAVE AND CONTINUE を選択します

次に、Credentials に移動します。
Create credentials を選択します。
次に OAuth client ID を選択します。

Application type として Web Application を選択します。
アプリケーションに Name を付けます。
Authorized JavaScript origins にドメインを追加します — この場合は [PlayFab](http://playfab.example.com) です。
最後に、Create ボタンを選択して変更を確定します。

次の OAuth client 画面で、Google API Manager は 2 つの重要な情報を提供します:

client ID
client secret。

これらの値は、このチュートリアルの後半で示される認可プロセスで使用されるので、簡単にアクセスできる安全な場所にコピーして保存してください。

タイトルの PlayFab Game Manager ページに移動します。

メニューの Add-ons に移動します。
Google アドオン のアイコン/リンクを見つけて開きます。

Client ID を入力します。
Client secret を入力します。
次に Install Google ボタンを選択します。

2017 年 7 月現在、Google API Manager には Allowed JS origin ドメインを適切にフックしないという問題があります。“idpiframe_initialization_failed”, details: “Not a valid origin for the client: somedomain.com…” のようなエラーが表示された場合は、資格情報を削除して再作成してください。プロジェクト全体を削除する必要はありません。資格情報のみで十分です。

アクセストークンを使用したテスト

この例では、従来のアクセストークン方式を使用して LoginWithGoogleAccount API をテストする方法を示します。以下に提供されている HTML コードをテスト用に使用してください。

YOUR_CLIENT_ID と YOUR_PLAYFAB_TITLE は必ずご自身の値に置き換えてください。

TypeScript の型定義ファイルの LoginWithGoogleAccountRequest オブジェクトには AccessToken パラメーターが含まれていません。Node SDK で TypeScript を使用している場合、カスタム型 interface LoginRequest extends PlayFabClientModels.LoginWithGoogleAccountRequest { AccessToken: string; } を作成し、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>

(非推奨) Google Sign-in Platform ライブラリを使用したテスト

以下のサンプルは Google Sign-In プラットフォームライブラリを使用しています。Google Identity 公開ドキュメントサイトによると、Web 用 Google Sign-In JavaScript プラットフォームライブラリは 2023 年 3 月 31 日に非推奨となります。このサンプルは今後新しく作成される Google クライアントでは動作しません。より新しい 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>

Web サーバーを使用してこのページを開くことを忘れないでください。また、Google プロジェクトの構成中に指定した URL (この場合は http://playfab.example) を使用してこのページにアクセスするようにしてください。

ページが開いたら、G Signed In を選択し、一般的な Google 認証フローに従います。
完了すると、スクリプトが PlayFab 側で認証を試み、結果を出力します。

すでに Google 認証セッションが実行中の場合は、G Signed In を選択する必要はありません。すべてが自動的に行われます。

​要件

​サーバーとドメイン

​Google API プロジェクトを登録する

​アクセス トークンを使用したテスト

要件

サーバーとドメイン

Google API プロジェクトを登録する

アクセストークンを使用したテスト