1

I'm developing a website on which I would like my users to log in with their Google account.

I managed to do it thanks to the Google API and the OAuth protocol. The documentation is very well done for the implementation of the "Connect with Google" button, the problem is that the documentation stops there.

When I click on the "Connect with Google" button, the OAuth authorization page appears, I log in with my account and everything works.

My problem now is this: If I log out (and it works) I am redirected to my login.php page (which is perfectly normal), but when I want to log in again, by pressing the "Login with Google" button, I no longer have the choice of which account I want to log in with, it automatically logs me in with the account I used just before!

This is very convenient but for me it's a huge problem, since if I have several Google accounts, how can I connect with this account and not another one? Normally the OAuth authorization page should ask me with which account I want to log in, right?

Thanks in advance for your help!

Here's my code for login.php page :

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <script src="https://apis.google.com/js/platform.js" async defer></script>
    <meta name="google-signin-client_id" content="XXXXXXXXXXXXXXXXXXXXXXXXXXXX">
    <link rel="stylesheet" href="../assets/plugins/toastr/toastr.min.css">
    <script type="text/javascript" src='../assets/js/jquery.min.js'></script>
    <script src="../assets/plugins/toastr/toastr.min.js"></script>
</head>
<body>
    <h1>Connexion</h1>
    <div class="g-signin2" data-onsuccess="onSignIn" data-onfailure="onFailure"></div>
    <script>
        function onSignIn(googleUser){
            var id_token = googleUser.getAuthResponse().id_token;
            verif_token(id_token);
        }

        function onFailure(){
            toastr.error('Error !', '', {positionClass: 'toast-top-left'});
        }

        function verif_token(id_token){
            $.ajax({
                url: "connect.php?id_token="+id_token,
                method: "GET"
            }).done(function(response){
                var response = JSON.parse(response);
                if(response[0] == 1){
                    // success
                    window.location.replace('https://xxxxxxxx.xx/secret.php');
                }else{
                    // error
                    onFailure();
                }
            });
        }
    </script>
</body>
</html>
gphp92
  • 11
  • 3

1 Answers1

2

You can use Disconnecting and revoking scopes to delete the association between your app and a user's account.

Just add this code in onSignIn() function

var auth2 = gapi.auth2.getAuthInstance();
auth2.disconnect();

For more information look to google docs from here

Abdlrahman Saber
  • 144
  • 1
  • 7
  • Thanks for your answer, it must surely work but in the meantime I was given another solution that works very well for me: Just add the attribute data-prompt="select_account" in the div g-signin2 ! Example below `
    `     – gphp92 Apr 17 '21 at 13:29