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 からプロフィール情報を取得する手順を更新する必要があります。

ログインボタンを更新する際は、Google+ に言及したり、赤色を使用したりしないでください。 更新されたブランドの取り扱いガイドラインを遵守している。

ほとんどの 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 からユーザー プロフィール情報を pull します。

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

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

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

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

• <meta> タグ、data- 属性、パラメータ オブジェクトのいずれかでクライアント 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-signin2 を、g-signin ではなく、ログインボタン要素に割り当てます。また、次の例に示すように、単一のコールバックではなく、成功のコールバックと失敗のコールバックを別々に指定します。

  <!-- 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- 属性、パラメータ オブジェクトのいずれかでクライアント 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- 属性、パラメータ オブジェクトのいずれかでクライアント 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);
  

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