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() メソッドを呼び出すことで取得できます。

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

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

• スコープを 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 を追加します。