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

<ph type="x-smartling-placeholder">

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

  1. アプリケーションで認証済みユーザーのメールアドレスが必要で、以前にその目的で profile.emails.read を使用していた場合は、代わりに email を使用します。
  2. オーナー確認のリクエストを承認して、profile.emails.read の承認を得ます。適格性確認を申請するにはどうすればよいですか?を参照してください。
  3. 削除するスコープの以前のユーザー トークンを取り消すか、アプリケーションへのアクセス権を完全に削除します。たとえば、profile.emails.read アクセス権を持つトークンは取り消す必要があります。ユーザーがアプリケーションを開いている間に取り消しを適用して、すぐにユーザーの同意を得ることをおすすめします。
  4. profile.emails.read を指定せずに、新しいスコープ(email など)で再度同意するようユーザーに促します。
  5. Google API の OAuth 同意画面の設定から段階的に廃止するスコープを削除します。
で確認できます。 <ph type="x-smartling-placeholder">

サイトを Google+ ログインから Google に移行するために必要な変更 ログイン方法は、使用する Google+ ログインフローによって異なります。通常、移行は ログインボタン、リクエストされたスコープ、手順を更新する必要がある をご覧ください。

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

ほとんどの Google+ ログイン アプリケーションは、スコープの組み合わせを必要とします。 plus.loginplus.meplus.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 ログインボタンを移行する

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

  • クライアント ID を <meta> タグ、data- パラメータ オブジェクトの場合は、文字列 clientidclient_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 に更新されます。 ユーザーの基本的なプロフィール情報(名前、メールアドレス、写真など)を取得できます 次のように指定します。

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

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

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

  • クライアント ID を <meta> タグ、data- パラメータ オブジェクトの場合は、文字列 clientidclient_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.signin2.render() ではなく、ログインボタンをレンダリングする 次のように gapi.signin.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 に更新されます。Google Chat では getBasicProfile() メソッドを使用して、ユーザーの基本的なプロフィール情報を取得します。

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

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

  • クライアント ID を <meta> タグ、data- パラメータ オブジェクトの場合は、文字列 clientidclient_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 に更新されます。Google Chat では getBasicProfile() への呼び出しによってユーザーの基本的なプロフィール情報を取得する メソッドを呼び出します。

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

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