web-dev-qa-db-ja.com

Google+サインイン使用時の自動サインインの防止

私はGoogle+サインインを私のサイトに統合する過程にあり、ユーザーがTwitterとFacebookでサインインできるようにします。したがって、サイトのサインインページには3つのボタンがあり、各サービスに1つあります。

私が抱えている問題は、次のシナリオにあります。

  • ユーザーはサインインページに移動します
  • ユーザーはG +で正常にログインします
  • ユーザーが私のサイトからサインアウトします（ただし、アカウントはまだG +に関連付けられています。サイトからサインアウトしてもG +アカウントは切断されません）
  • ユーザーが再度サインインページにアクセスする
  • この段階で、[G +でサインイン]ボタンがレンダリングされ、ユーザーがボタンをクリックすることなくG +に関連付けられたアカウントに自動的にサインインします

問題は、サインインページに再度アクセスしたときに、G +で自動的にサインインするのではなく、ユーザーに別のサービスでサインインするオプションを提供してほしいことです。ユーザーがG +でサインインしたい場合は、ボタンをクリックしてサインインできます-ユーザーは自動的にサインインします。

ボタンのレンダリングでこの自動サインインを防ぐことは可能ですか？ data-approvalprompt="force"をボタンの属性として使用することでシミュレートできますが、これは理想的なソリューションではないと思います（ユーザーは確認プロセスを実行する必要があります。 ）

google-plus
35
lamplightdev

更新

自動サインインを防ぐためにサポートされる最良の方法は、APIメソッドgapi.auth2.getAuthInstance().signOut()を使用することです。これにより、サイトが呼び出された後に自動サインインを防ぎます。 ここでデモ 。

デモでは、次のコードに示すように、ユーザーがページを離れるとサインアウトします。

window.onbeforeunload = function(e){
  gapi.auth2.getAuthInstance().signOut();
};

これで、ユーザーがサイトを終了する（ウィンドウを閉じる、移動する）たびに、ユーザーはサインアウトされ、ユーザーがクリックするまでサインインボタンはサインインをトリガーしません。

独自の実装でこれを行うことはお勧めしませんが、代わりにユーザーがサインインしたくないときに明示的にサインアウトできるようにします。また、私の例はデモであり、おそらくサインインしたくないことに注意してくださいユーザーがサイトを離れるたびに自動的にユーザーを除外します。

オリジナルポスト

まず、data-approvalprompt = "force"を使用しないでください。これにより、追加の承認済みサブトークンがアプリケーション/クライアントに発行され、資格情報がサーバーを失った後にユーザーを再承認する必要があるシナリオで使用するように設計されています-側。

2つ目は、ユーザーが既にGoogleアカウントに「サインイン」しており、再度サインイン（またはサインインをトリガー）する必要があるため、ユーザーがクリックしてサインインする必要がある動作をしたくない場合です。 、サイト用に個別に。

本当にこれを行いたい場合は、サインインボタンの明示的なレンダリングを実行しますが、気付くまで Google+サインインドキュメント に記載されているようにgapi.signin.renderを呼び出しませんユーザーが自動的にサインインしないnot.

次のコードは、サインインボタンの明示的なレンダリングを有効にする方法を示しています。

<script type="text/javascript" src="https://apis.google.com/js/plusone.js">
{"parsetags": "explicit"}
</script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<head>
<script type="text/javascript">
var token = "";
function onSigninCallbackVanilla(authResponse){
   // in a typical flow, you show disconnect here and hide the sign-in button
}

次のコードは、ボタンを明示的にレンダリングする方法を示しています。

  <span id="signinButton">
    <button id = "shim" onclick="gapi.signin.go(); $('#shim').hide();">Show the button</button>
    <span
      class="g-signin"
      data-callback="onSigninCallbackVanilla"
      data-clientid="YOUR_CLIENT_ID"
      data-cookiepolicy="single_Host_Origin"
      data-requestvisibleactions="http://schemas.google.com/AddActivity"
      data-scope="https://www.googleapis.com/auth/plus.login">

    </span>
  </span>

ユーザーがサイトからサインアウトしていることを伝える方法はおそらくサイトによって異なりますが、1つのアプローチは、ユーザーの「サインアウト」状態を示すCookieを設定し、これをトリガーとして使用することです。明示的なロードをブロックします。ユーザーがサイトにアクセスし、Cookieを無効にしている場合、または別のサインインしたブラウザーを使用している場合、動作は少し複雑になります。これに対処するには、サインインコールバックでXHRを介してサーバーからユーザー状態を照会し、ユーザーがGoogle+にサインインしていることを知らないふりをするなど、複雑な操作を行うことができます。

29
class

コールバック関数でg-auth-windowを確認するだけです：

    function google_sign_callback(authResult){
        if(authResult['g-oauth-window']){

        }else if(authResult['error']) {

        }
    }
26
Jacket

私はこの問題を抱えていて、 auth2.disconnect（） を使用しました

function onSignIn(googleUser) {
    var profile = googleUser.getBasicProfile();
    var auth2 = gapi.auth2.getAuthInstance();
    auth2.disconnect();

    //do other stuff
}

編集：場合によってはid_tokenが切断後にnullになるため、切断する前にトークンを保存する必要があります。

function onSignIn(googleUser) {
    var profile = googleUser.getBasicProfile();
    var idToken=profile.id_token;
    googleUser.disconnect()

    //use idToken for server side verification
}

私が正しいなら、あなたはあなたのサイトのためのあなた自身のサインインメカニズムを持っています、そしてただ確認された電子メールでユーザーをサインアップするためにグーグルサインインを必要とします。この場合、プロファイル情報を取得した後、簡単に切断できます。次回ページをロードすると、「サインイン」ボタンの代わりに「サインイン」ボタンが表示されます。

9
Alireza Rinan

https://developers.google.com/identity/sign-in/web/build-button を使用して、ユーザーにログインの選択肢を提供するWebアプリのサインインボタンを作成していますFacebookまたはGoogleを介して。このコードは、Id_tokenを取得するのに非常に簡単です。ただし、ユーザーが既にサインインしている場合は、ユーザーの自動サインインも付属しています。

したがって、スクリプトの先頭に次のスニペットを追加すると、サインアップ手順を制御するのに役立ちました。

    window.onbeforeunload = function(e){
      gapi.auth2.getAuthInstance().signOut();
    };

ありがとう！

3
Taani

残念ながらgapi.auth.signOut()を呼び出すと、ユーザーデータを要求しているときにアプリが再度ログインすることになります（どちらも永続的ではありません）

そのため、@ classが提案する解決策は、トークンを取り消すことです。

  $.ajax({
    type: 'GET',
    url: 'https://accounts.google.com/o/oauth2/revoke?token=' +
        gapi.auth.getToken().access_token,
    async: false,
    contentType: 'application/json',
    dataType: 'jsonp',
    success: function(result) {
      console.log('revoke response: ' + result);
      $('#authOps').hide();
      $('#profile').empty();
      $('#visiblePeople').empty();
      $('#authResult').empty();
      $('#gConnect').show();
    },
    error: function(e) {
      console.log(e);
    }
  });
3
Maciej Jankowski

私もこれを修正した方法と同じ問題を抱えています。これがそれを行うための標準的な方法であるかどうかはわかりませんが、それでも私と一緒にうまく動作します...

google開発者からこのGoogle JSを追加します

<script src="https://apis.google.com/js/platform.js" async defer></script>
<script>

function onSuccessG(googleUser) {
        var profile = googleUser.getBasicProfile();
        console.log('ID: ' + profile.getId()); // Do not send to your backend! Use an ID token instead.
        console.log('Name: ' + profile.getName());
        console.log('Image URL: ' + profile.getImageUrl());
        console.log('Email: ' + profile.getEmail());
}
function onFailureG(error) {
    console.log(error);
}
function renderGmail() {

  gapi.signin2.render('my-signin2', {
    'scope': 'https://www.googleapis.com/auth/plus.login',
    'width': 0,
    'height': 0,
    'longtitle': true,
    'theme': 'dark',
    'onsuccess': onSuccessG,
    'onfailure': onFailureG
  });
}

Htmlリンクを追加し、onClickがこのrenderGmail（）関数を呼び出します。

<a href="javascript:void(0)" onclick="renderGmail();"> SignUp with Gmail</a>

これがうまくいくことを願っています...

3
Amin Kodaganur

AngularJSソリューションは次のとおりです。

$scope.$on('event:google-plus-signin-success', function (event, authResult) {
                if( authResult.status.method !== "AUTO"){
                    onGoogleLogIn(authResult[settings.configKeys.googleResponseToken]);
                }
            });
2
Jack Stone

私はしばらくこれに苦労しており、サインインの「簡単な実装」を使用してGoogleへの自動サインインを防ぐ方法を見つけることができませんでした

最終的に カスタム統合 を使用しましたが、これは自動サインインを試行しません（同時に外観を変更することもできました）

1
Florin D

これを解決するには、Googleのサインインボタンにクリックハンドラーを追加しました。クリックハンドラーは、グローバルJavascript変数_google_sign_in_をtrueに設定します。 onSuccess()ハンドラーが起動すると（ページの読み込み時に自動的に、またはユーザーがサインインボタンをクリックしたときに手動で）、最初に_google_sign_in_ == trueおよびその後、ユーザーのサインインを続行しますか？

_<div id="google-signin2" onclick="return do_click_google_signin();"></div>

<script>
    var google_sign_in = false; // assume

    function do_click_google_signin() {
        google_sign_in = true;
    }

    function onSuccess( googleUser ) {
        if ( google_sign_in ) {
            // Process sign-in
        }
    }

    // Other redundant login stuff not shown...
</script>
_
0
kmoser