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+ について言及したり、赤色を使用したりしないでください。 最新のブランドの取り扱いガイドラインに準拠する。

ほとんどの Google+ ログインアプリは、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+ ログインボタンを含める場合は、次の変更を行います。

• クライアント ID を <meta> タグ、data- 属性、パラメータ オブジェクトのいずれかに指定する場合は、次の例のように、文字列 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 クラスを割り当てます。また、次の例のように、1 つのコールバックではなく、成功と失敗のコールバックを別々に指定します。

  <!-- 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+ ログインボタンをページに配置した場合は、次の変更を行います。

• クライアント ID を <meta> タグ、data- 属性、パラメータ オブジェクトのいずれかに指定する場合は、次の例のように、文字列 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() を呼び出してログインフローを開始した場合は、次の変更を行います。

• クライアント ID を <meta> タグ、data- 属性、パラメータ オブジェクトのいずれかで指定する場合は、次の例のように文字列 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 を追加します。