Google+ ログインから移行する

スコープの変更によるユーザーへの影響を最小限に抑える手順

1. アプリケーションで認証済みユーザーのメールアドレスが必要な場合、以前は profile.emails.read を使用していた場合は、代わりに email を使用してください。
2. 承認済みの適格性確認リクエストで profile.emails.read の承認を得る。検証のために送信するにはどうすればよいですか？を参照してください。
3. 削除するスコープに対する以前のユーザー トークンを取り消すか、アプリケーションへのアクセス権を完全に削除します。たとえば、profile.emails.read アクセス権を持つトークンは取り消す必要があります。ユーザーがアプリを使用しているときに取り消しを適用することをおすすめします。これにより、ユーザーの同意をすぐに得ることができます。
4. profile.emails.read なしで新しいスコープ（email など）に対する同意を再度ユーザーに求める。
5. 段階的に廃止されるスコープを Google API の OAuth 同意画面の構成から削除します。

Google+ ログインから Google ログインにサイトを移行するために必要な変更は、使用する Google+ ログイン フローに応じて異なります。通常、移行では、ログインボタン、リクエストされたスコープ、Google からプロフィール情報を取得する手順を更新する必要があります。

ログインボタンを更新する際は、G+ を参照したり、赤色を使用しないでください。更新されたブランドの取り扱いガイドラインに準拠する。

ほとんどの G+ ログイン アプリケーションは、plus.login、plus.me、plus.profile.emails.read のスコープの組み合わせをリクエストしていました。スコープを次のように再マッピングする必要があります。

古いスコープ	新しいスコープ
plus.login	profile
plus.me	openid
plus.profile.emails.read	email

Google+ ログインを実装した多くのデベロッパーは、コードフローを使用していました。つまり、Android、iOS、または JavaScript アプリが Google から OAuth コードを取得し、クライアントがそのコードをクロスサイト リクエストのなりすまし防止とともにサーバーに送り返します。サーバーはコードを検証し、更新トークンとアクセス トークンを取得して、people.get API からユーザー プロファイル情報を取得します。

そのため、ID トークンをリクエストし、その ID トークンをクライアントからサーバーに送信することをおすすめします。ID トークンにはクロスサイト偽造防止機能が組み込まれており、サーバー上で静的に検証することもできます。これにより、Google のサーバーからユーザー プロファイル情報を取得するための追加の API 呼び出しを回避できます。手順に沿ってサーバー上で ID トークンを検証します。

それでもコードフローを使用してプロフィール情報を取得する場合は、サーバー側でアクセス トークンを取得したら、ログイン 検出ドキュメントで指定されている userinfo エンドポイントからユーザー プロフィール情報を取得する必要があります。API レスポンスの形式は Google+ プロフィール レスポンスの形式と異なるため、解析を新しい形式に更新する必要があります。

HTML ログインボタンを移行する

要素にクラス g-signin を割り当てて Google+ ログインボタンをページに追加した場合は、次のように変更します。

• <meta> タグ、data- 属性、または parameters オブジェクトでクライアント ID を指定する場合は、次の例のように文字列 clientid を client_id に変更します。

  <!-- Google+ Sign-in (old) -->
  <meta name="google-signin-clientid" content="YOUR_CLIENT_ID">
  

  <!-- Google Sign-in (new) -->
  <meta name="google-signin-client_id" content="YOUR_CLIENT_ID">
  

• ログインボタン要素に g-signin ではなくクラス g-signin2 を割り当てます。また、次の例のように、単一のコールバックではなく、成功と失敗のコールバックを個別に指定します。

  <!-- Google+ Sign-in (old) -->
  <div
    class="g-signin"
    data-callback="signinCallback">
  </div>
  

  <!-- Google Sign-in (new) -->
  <div
    class="g-signin2"
    data-onsuccess="onSignIn"
    data-onfailure="onSignInFailure">
  </div>
  

• 単一のコールバック ハンドラではなく、次の例のように成功ハンドラと失敗ハンドラを定義します。

  // Google+ Sign-in (old)
  function signinCallback(authResult) {
    if (authResult['status']['signed_in']) {
      // Handle successful sign-in
    } else {
      // Handle sign-in errors
      console.log('Sign-in error: ' + authResult['error']);
    }
  }
  

  // Google Sign-in (new)
  function onSignIn(googleUser) {
    // Handle successful sign-in
  }
  function onSignInFailure() {
    // Handle sign-in errors
  }
  

• この変更により、デフォルトのスコープが profile email openid に更新されます。ユーザーの基本的なプロフィール情報（名前、メールアドレス、写真画像の URL など）は、次のように取得できます。

  // Google Sign-in (new)
  function onSignIn(googleUser) {
    let profile = googleUser.getBasicProfile();
    let fullName = profile.getName();
    let email = profile.getEmail();
    let imageUrl = profile.getImageUrl();
  }
  

動的にレンダリングされるログインボタンを移行する

gapi.signin.render() を呼び出して Google+ ログインボタンをページに追加している場合は、次の変更を行います。

• <meta> タグ、data- 属性、または parameters オブジェクトでクライアント ID を指定する場合は、次の例のように文字列 clientid を client_id に変更します。

  <!-- Google+ Sign-in (old) -->
  <meta name="google-signin-clientid" content="YOUR_CLIENT_ID">
  

  <!-- Google Sign-in (new) -->
  <meta name="google-signin-client_id" content="YOUR_CLIENT_ID">
  

• 次の例のように、ログインボタンを gapi.signin.render() ではなく gapi.signin2.render() でレンダリングします。

  // Google+ Sign-in (old)
  gapi.signin.render('myButton', additionalParams);
  

  // Google Sign-in (new)
  gapi.signin2.render('myButton', additionalParams);
  

• 単一のコールバック ハンドラではなく、次の例のように成功ハンドラと失敗ハンドラを定義します。

  // Google+ Sign-in (old)
  function signinCallback(authResult) {
    if (authResult['status']['signed_in']) {
      // Handle successful sign-in
    } else {
      // Handle sign-in errors
      console.log('Sign-in error: ' + authResult['error']);
    }
  }
  

  // Google Sign-in (new)
  function onSignIn(googleUser) {
    // Handle successful sign-in
  }
  function onSignInFailure() {
    // Handle sign-in errors
  }
  

この変更により、デフォルトのスコープが profile email openid に更新されます。ユーザーの基本的なプロフィール情報は、getBasicProfile() メソッドで取得できます。

JavaScript で開始されるログインフローを移行する

ユーザーがログインボタンをクリックしたときに gapi.auth.signIn() を呼び出してログインフローを開始していた場合は、次の変更を行います。

• <meta> タグ、data- 属性、または parameters オブジェクトでクライアント ID を指定する場合は、次の例のように文字列 clientid を client_id に変更します。

  <!-- Google+ Sign-in (old) -->
  <meta name="google-signin-clientid" content="YOUR_CLIENT_ID">
  

  <!-- Google Sign-in (new) -->
  <meta name="google-signin-client_id" content="YOUR_CLIENT_ID">
  

• 次の例に示すように、ボタンが押されたときにログインフローを開始するには、gapi.auth2.attachClickHandler() を使用します。

  // Google+ Sign-in (old)
  var signinButton = document.getElementById('signinButton');
  signinButton.addEventListener('click', function() {
    gapi.auth.signIn(additionalParams);
  });
  

  // Google Sign-in (new)
  auth2 = gapi.auth2.init();
  auth2.attachClickHandler('signinButton', additionalParams, onSignIn, onSignInFailure);
  

• 単一のコールバック ハンドラではなく、次の例のように成功ハンドラと失敗ハンドラを定義します。

  // Google+ Sign-in (old)
  function signinCallback(authResult) {
    if (authResult['status']['signed_in']) {
      // Handle successful sign-in
    } else {
      // Handle sign-in errors
      console.log('Sign-in error: ' + authResult['error']);
    }
  }
  

  // Google Sign-in (new)
  function onSignIn(googleUser) {
    // Handle successful sign-in
  }
  function onSignInFailure() {
    // Handle sign-in errors
  }
  

この変更により、デフォルトのスコープが profile email openid に更新されます。ユーザーの基本的なプロフィール情報は、getBasicProfile() メソッドを呼び出すことで取得できます。

ハイブリッド サーバーサイド フローを移行する

JavaScript API を使用してサーバーへの渡す 1 回限りの認可コードを取得した場合は、次の変更を行います。

• スコープを https://www.googleapis.com/auth/plus.login から profile に変更します。

• 次の例のように、既存のコールバック関数で gapi.auth2.grantOfflineAccess() メソッドを使用します。

  <!-- Google+ Sign-in (old) -->
  <div class="g-signin"
    data-scope="https://www.googleapis.com/auth/plus.login"
    data-clientid="YOUR_CLIENT_ID"
    data-redirecturi="postmessage"
    data-accesstype="offline"
    data-callback="signInCallback">
  </div>
  

  // Google Sign-in (new)
  auth2 = gapi.auth2.init({
    client_id: 'YOUR_CLIENT_ID',
    scope: 'profile'
  });
  
  ...
  
  auth2.grantOfflineAccess().then(signInCallback);
  

ユーザーのメールアドレスにもアクセスする必要がある場合は、スコープ パラメータに email を追加します。