popup_closed_by_user when requesting addtional scopes

[john1jan]

getting popup_closed_by_user when requesting additional scope, Detailed issue is here

I am using this code to request additional scope

 `var options = new gapi.auth2.SigninOptionsBuilder(
            {'scope': 'https://www.googleapis.com/auth/contacts.readonly'});

    googleUser = auth2.currentUser.get();
    googleUser.grant(options).then(
        function(success){
          console.log(JSON.stringify({message: "success", value: success}));
        },
        function(fail){
          alert(JSON.stringify({message: "fail", value: fail}));
        });`

[TMSCH]

Hi @john1jan, I think the issue you are facing is that the popup is blocked by the browser. You should not call the grant method from within an asynchronous function (i.e. the onSuccess callback). The call to grant must be done synchronously after a user interaction (a click for instance).

[john1jan]

HI @TMSCH now i used grant() method on click of a button. Now grant method works. But it doesnot have the scope I have requested for. I have requested for contacts.readonly

success method is getting called and it logs

{
"message": "success",
"value": {
"El": "116045486997095asdasd667403",
"Zi": {
"token_type": "Bearer",
"access_token": "ya29.GltGBI#&$(#&($&(#&$(&#$(&$pNMl1Q",
"scope": "https://www.googleapis.com/auth/plus.me https://www.googleapis.com/auth/userinfo.profile https://www.googleapis.com/auth/userinfo.email openid email profile",
"login_hint": "asdadasd-NeCP8O8qs4FPElsdQN4JkloStRS7U8DwLsMPxHGLGuerZlvVx0g5LxVIXkPcjKG-9yQ",
"expires_in": 3600,
"id_token": "adasdsdsadsdadsA1rEknw",
"session_state": {
"extraQueryParams": {
"authuser": "0"
}
},
"first_issued_at": 1494406396880,
"expires_at": 1494409996880,
"idpId": "google"
},
"w3": {
}
}
}

[john1jan]

Oh.god..after wasting a lot of time on this.. found the solution. I dont know why google's doc is so wrong or outdated.

If you set options like this it is not working

var options = new gapi.auth2.SigninOptionsBuilder(
            {'scope': 'https://www.googleapis.com/auth/contacts.readonly'});

For getting the scopes you should use the methods

let googleUser = auth2.currentUser.get();

var options = new gapi.auth2.SigninOptionsBuilder();
options.setScope('https://www.googleapis.com/auth/contacts.readonly');


googleUser.grant(options).then(
        function(success){
          console.log(JSON.stringify({message: "success", value: success}));
        },
        function(fail){
          alert(JSON.stringify({message: "fail", value: fail}));
});

[john1jan]

@TMSCH is there any particular reason why grant should be called synchronously , because I dont want the user to click on a button and request for additional scope

[TMSCH]

@john1jan sorry if the doc was outdated. Could you point me where it is wrong? I don't see the syntax you used in the reference. I will update it though where you found it.

You may have been confused with the shorter syntax:

googleUser.grant({scope: 'https://www.googleapis.com/auth/contacts.readonly'})

The grant() call has to be synchronous after a user interaction as most browsers will block the popup if it is triggered asynchronously or without user interaction. This is a constraint outside of the Google Sign-In JS library, and a general constraint that JS apps have to deal with.

[john1jan]

@TMSCH here is the doc.

https://developers.google.com/identity/sign-in/web/incremental-auth

When is user shorter syntax its is not working. But when I use setScope() method everything works fine

[TMSCH]

Thanks @john1jan for pointing out this doc. It should actually work with the shorter syntax, so I'll investigate. Have you resolved your issue with the popup being blocked?

[bhaveshbrevitaz]

Consent popup doesn't show up with following code. Below function is called from success callback of google auth button. [Tested on latest chrome on Mac]

function grantPermissions() {
          var auth2 = gapi.auth2.getAuthInstance();
          var options = new gapi.auth2.SigninOptionsBuilder();
          options.setAppPackageName('mycompany');
          options.setPrompt('consent');
          options.setScope('https://www.googleapis.com/auth/contacts.readonly');

          auth2.currentUser.get().grant(options).then(function(response){
                console.log('user consent taken');
                console.log(auth2.currentUser.get().getBasicProfile());

                var profile = auth2.currentUser.get().getBasicProfile();
                var successServerSignIn = function() {
                       $scope.signingIn = true;
                       $state.go('main');
                     };
                     var failServerSignIn = function() {
                       $scope.signingIn = false;
                       $scope.error = "Incorrect login or password";
                       $state.go('auth.register');
                     };
                User.gapiRegister(profile.getEmail(), profile.getName()).then(successServerSignIn, failServerSignIn);
          }, function(err) {
            console.log("something went wrong while granting option");
            console.log(err);
            $state.go('auth.register');
          });

      };

No errors in console. I am expecting only consent popup.
Any clue? Am I missing anything here?