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 を追加します。