web-dev-qa-db-fra.com

Empêcher la connexion automatique lors de l'utilisation de Google+ Sign-In

Je suis en train d'intégrer la connexion à Google+ avec mon site, ce qui permet également aux utilisateurs de se connecter avec Twitter et Facebook. La page de connexion du site comporte donc 3 boutons, un pour chacun des services.

Le problème que j'ai est dans le scénario suivant:

  • l'utilisateur accède à la page de connexion
  • l'utilisateur se connecte avec succès avec G +
  • l'utilisateur se déconnecte de mon site (mais le compte est toujours associé à G +, la déconnexion du site ne déconnecte pas le compte G +)
  • l'utilisateur visite à nouveau la page de connexion
  • à ce stade, le bouton Se connecter avec G + est rendu et connecte automatiquement l'utilisateur au compte associé à G + sans que l'utilisateur ait à cliquer sur le bouton.

Le problème est que lors de la prochaine consultation de la page de connexion, je souhaite que l'utilisateur ait la possibilité de se connecter avec un autre service, plutôt que d'être automatiquement connecté avec G +. Si l'utilisateur souhaite se connecter avec G +, il peut le faire en cliquant sur le bouton. L'utilisateur sera alors automatiquement connecté.

Est-il possible d'empêcher cette connexion automatique lors du rendu du bouton? Je peux le simuler en utilisant le data-approvalprompt="force" comme attribut sur le bouton, mais je ne pense pas que ce soit une solution idéale (l'utilisateur doit alors passer par le processus de confirmation, ce que j'aimerais idéalement éviter).

google-plus
31
lamplightdev

Mettre à jour

Le meilleur moyen pris en charge d’empêcher la connexion automatique est d’utiliser la méthode API gapi.auth2.getAuthInstance().signOut(), qui empêche la connexion automatique sur votre site après son appel. Démo ici .

Dans la démo, l'utilisateur est déconnecté lorsqu'il quitte la page, comme indiqué dans le code suivant:

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

Désormais, chaque fois que l'utilisateur quitte le site (par exemple, ferme la fenêtre, navigue), il sera déconnecté et le bouton de connexion ne déclenchera pas la connexion tant que l'utilisateur n'aura pas cliqué dessus.

Je ne vous recommande pas de faire cela dans votre propre implémentation, mais permettez à l'utilisateur de se déconnecter explicitement lorsqu'il ne souhaite plus être connecté. Veuillez également noter que mon exemple est une démonstration, vous ne voulez probablement pas vous connecter. l’utilisateur automatiquement à chaque fois qu’il quitte votre site.

Message original

Tout d’abord, vous ne devez pas utiliser data-approbationprompt = "force", car cela entraînera l’émission de sous-octets autorisés supplémentaires sur votre application/client et est conçu pour être utilisé dans des scénarios dans lesquels l’utilisateur doit être réautorisé après la perte des informations d’identité du serveur. -côté. 

Deuxièmement, vous ne souhaitez probablement pas que l'utilisateur clique sur son compte pour se connecter car il est déjà "connecté" à son compte Google et il peut être déroutant de devoir se connecter à nouveau (ou déclencher la connexion). , séparément, pour votre site.

Si vous le souhaitez vraiment, vous devez effectuer un rendu explicite pour le bouton de connexion, mais ne pas effectuer l'appel à gapi.signin.render comme indiqué dans la documentation de connexion Google+ jusqu'à ce que vous sachiez que l'utilisateur pas sera automatiquement connecté.

Le code suivant montre comment activer le rendu explicite du bouton de connexion:

<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
}

Le code suivant vous montre comment rendre explicitement le bouton:

  <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>

La manière dont vous communiquez que l'utilisateur est déconnecté de votre site va probablement varier d'un site à l'autre, mais une approche pourrait consister à définir un cookie indiquant l'état "déconnecté" d'un utilisateur, puis à l'utiliser comme déclencheur. pour bloquer la charge explicite. Le comportement devient un peu plus délicat lorsqu'un utilisateur visite votre site et a désactivé les cookies ou utilise un navigateur distinct, connecté. Pour résoudre ce problème, vous pouvez effectuer quelque chose de compliqué, comme interroger l'état de l'utilisateur sur votre serveur via XHR via le rappel de connexion et faire semblant de ne pas savoir que l'utilisateur est connecté à Google+.

28
class

Il suffit de vérifier g-auth-window dans la fonction de rappel:

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

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

        }
    }
25
Jacket

J'ai eu ce problème et utilisé auth2.disconnect ()

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

    //do other stuff
}

Edit: Vous devez stocker le jeton avant de vous déconnecter, car dans certains cas, id_token deviendra nul après la déconnexion:

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

    //use idToken for server side verification
}

Si je ne me trompe pas, vous avez votre propre mécanisme de connexion pour votre site et vous n'avez besoin que de vous connecter à Google pour inscrire un utilisateur sur un courrier électronique vérifié. dans ce cas, vous pouvez facilement vous déconnecter après avoir reçu les informations de profil ..___ La prochaine fois que vous chargerez la page, le bouton "Connexion" apparaîtra au lieu du bouton "Connexion".

9
Alireza Rinan

J'utilise https://developers.google.com/identity/sign-in/web/build-button pour créer le bouton de connexion de mon application Web qui donne à l'utilisateur le choix de se connecter via Facebook. ou Google . Ce code est assez facile pour obtenir le Id_token. Cependant, il est également venu avec la connexion automatique de l'utilisateur si l'utilisateur est déjà connecté.

Ainsi, l'ajout de l'extrait suivant au début du script m'a aidé à contrôler la procédure d'inscription.

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

Merci!

3
Taani

Malheureusement, l'appel de gapi.auth.signOut() a créé l'application pour me reconnecter lorsque je demande des données utilisateur (elles ne sont pas persistantes)

Ainsi, la solution suggérée par @class consiste à révoquer le jeton:

  $.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

Moi aussi, j'ai le même problème, voici comment je l'ai corrigé.

ajouter ce Google JS de Google développeur 

<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
  });
}

Ajoutez maintenant le lien html et appelez onClick pour appeler cette fonction renderGmail ().

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

J'espère que ça marche ...

3
Amin Kodaganur

Notre solution AngularJS était:

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

Je suis aux prises avec ce problème depuis quelque temps et je ne pouvais pas trouver un moyen d'empêcher la connexion automatique à Google en utilisant la "mise en œuvre facile" de la connexion

J'ai fini par utiliser l'intégration custom qui ne tente pas de se connecter automatiquement (m'a également permis de modifier l'apparence en même temps).

1
Florin D

J'ai résolu ce problème en ajoutant un gestionnaire de clics à mon bouton de connexion à Google. Le gestionnaire de clic définit une variable Javascript globale google_sign_in sur true. Lorsque le gestionnaire onSuccess() se déclenche (que ce soit automatiquement lors du chargement de la page ou manuellement lorsque l'utilisateur clique sur le bouton de connexion), il vérifie d'abord si google_sign_in == true et ensuite seulement qu'il continue à signer l'utilisateur:

<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