Google과 HTML5를 사용하여 PlayFab 인증 설정하기

이 튜토리얼에서는 Google과 HTML5/JavaScript를 사용한 PlayFab 인증 프로세스를 안내합니다.

요구 사항

다음이 필요합니다.

테스트용 Google 계정.
등록된 [PlayFab](https://developer.playfab.com/) 타이틀.
로그인 기본 사항 및 모범 사례에 대한 이해.
최소한 정적 HTML 파일 역할을 할 유효한 도메인 이름이 있는 서버. 설정 방법에 대한 정보는 테스트용 HTTP 서버 실행하기 튜토리얼을 참조하세요.

서버 및 도메인

이 가이드를 따라가려면 유효한 도메인이 있는 서버가 필요합니다. 등록된 도메인과 원격 웹 서버가 아직 없다면 유효한 도메인 이름으로 로컬 웹 서버를 실행하는 방법에 대한 정보는 테스트용 HTTP 서버 실행하기 튜토리얼을 따르세요. 이 가이드 전반에 걸쳐 도메인이 [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를 선택합니다.

앱 이름을 작성합니다.
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는 두 가지 중요한 정보를 표시합니다.

client ID
client secret

이 값들은 이 튜토리얼 후반부에 표시된 승인 프로세스에서 사용되므로 쉽게 접근할 수 있는 안전한 곳에 복사하여 저장하세요.

타이틀의 PlayFab Game Manager 페이지로 이동합니다.

메뉴에서 Add-ons로 이동합니다.
Google Add-on 아이콘/링크를 찾아 엽니다.

Client ID를 입력합니다.
Client secret을 입력합니다.
그런 다음 Install Google 버튼을 선택합니다.

2017년 7월 기준으로 Google API Manager는 Allowed JS 원본 도메인을 제대로 연결하지 않는 경우가 있습니다. “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 공개 문서 사이트에 따르면 웹용 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>

웹 서버를 사용하여 이 페이지를 열고, Google 프로젝트 구성 중에 지정한 URL(이 경우 http://playfab.example)을 사용하여 이 페이지에 접근하세요.

페이지가 열리면 G Signed In을 선택하고 일반적인 Google 인증 흐름을 따르세요.
완료되면 스크립트가 PlayFab 측에서 인증을 시도하고 결과를 출력합니다.

Google 인증 세션이 이미 실행 중인 경우 G Signed In을 선택할 필요가 없습니다. 모든 것이 자동으로 진행됩니다.

​요구 사항

​서버 및 도메인

​Google API 프로젝트 등록

​액세스 토큰을 사용한 테스트

요구 사항

서버 및 도메인

Google API 프로젝트 등록

액세스 토큰을 사용한 테스트