Google picker asking to sign in even after providing access token

Question

Firstly, after some research I found out that many people have faced this issue but I did not find any concrete solution to this. Coming to the issue,

Objective: I want to integrate google drive with my app so that user can upload files to their drive from my app. So user first has to integrate their drive with the app and then subsequently use google picker to upload/import files. Once Google drive is integrated user should not see auth screen again instead directly google picker should open on click of a button.

Implementation: While integrating I am using OAuth2 in server side and storing client credentials which is following

   { 
     access_token: '',
     refresh_token: '',
     scope: 'https://www.googleapis.com/auth/drive.file https://www.googleapis.com/auth/userinfo.email openid',
     token_type: 'Bearer',
     expiry_date: 1578194339897 
   }

Now in the client side I am fetching same access token and using to load picker

createPicker() {
        const { accessToken } = this.props.userInfo;
        const uploadView = new google.picker.DocsUploadView();
        var picker = new google.picker.PickerBuilder().
          addViewGroup(
            new google.picker.ViewGroup(google.picker.ViewId.DOCS).
            addView(google.picker.ViewId.DOCUMENTS).
            addView(google.picker.ViewId.PRESENTATIONS)
          ).
          addView(uploadView).
          setOAuthToken(accessToken). //access token fetched from server
          setDeveloperKey(developerKey).
          setCallback(this.pickerCallback).
          build();
        picker.setVisible(true);
}

Expected behaviour: Google picker should open on click of a button.

I have tried using sign in option to fetch current user, but it fails to get the current user. Apart from this I have also tried to do client side authorization using gapi but it also ask for auth screen every time I try to load picker

Any help appreciated. Thanks in advance.

Try using Browser Quickstart for Google Drive API. https://developers.google.com/drive/api/v3/quickstart/js — Branden Huggins, Jan 05 '20 at 03:25
@BrandenHuggins I am having issue with Google picker and not drive. For google picker I have tried using browser oauth still faced issue with authorization screen showing up. Once drive is integrated I don't want user to show authorisation screen to choose account. — ot954, Jan 05 '20 at 04:15
Try loading the Picker as per the [Developer Docs for Picker API](https://developers.google.com/picker/docs). — Rafa Guillermo, Jan 06 '20 at 11:53
@RafaGuillermo already did. What I have found out is picker and drive has different oauth scope .So picker shows up its own authorization after every session. Having said that, I know it is possible to skip picker's authorization as I have seen it in a website called Insightly — ot954, Jan 08 '20 at 03:40
@RafaGuillermo while authenticating i.e integrating user's drive in my app I am using scope ['https://www.googleapis.com/auth/drive.file', 'https://www.googleapis.com/auth/userinfo.email']. While calling picker I am using same access token created while authenticating user. — ot954, Jan 09 '20 at 04:26

score 1 · Answer 1 · answered Jun 16 '20 at 12:34

When you integrate google drive initially are you getting and persisting the refresh_token? If you are not seeing the refresh_token you will need to add the prompt: 'consent' option in your oauth parameters.

For example:

access_type: `offline`,
response_type: `code`,
prompt: 'consent'

Then, before you open the picker you need to make sure your access_token isn't expired, and if it is you can refresh it using the refresh_token

https://developers.google.com/identity/protocols/oauth2/web-server#offline

score 0 · Answer 2 · answered Jun 18 '20 at 23:53

I had the same Issue and solved by add below code

  async openGoogleDrive(token){

               var self = this;
               if (token){
                   this.oauthToken = token
                   gapi.load('picker', () => {
                       console.log('Picker Loaded');
                       this.pickerApiLoaded = true;
                       this.createPicker();
                   });
               }
           },

After adding gapi.load('picker',() =>....... solved my google not defined issue

createPicker() {
                   console.log("Create Picker", google.picker);
                   console.log('token ', this.oauthToken)
                   if (this.pickerApiLoaded && this.oauthToken) {
                       var picker = new google.picker.PickerBuilder()
                           .enableFeature(google.picker.Feature.MULTISELECT_ENABLED)
                           .addView(google.picker.ViewId.DOCS)
                           .setOAuthToken(this.oauthToken)
                           //.setDeveloperKey('2OZ3Y7M85v_a8YG5WvROrm2h')
                           .setCallback(this.pickerCallback)
                           .build();
                       picker.setVisible(true);
                   }
               },

               async pickerCallback(data) {
                   var self = this;
                   console.log("PickerCallback", data);
                   var url = "nothing";
                   var name = "nothing";
                   if (data[google.picker.Response.ACTION] === google.picker.Action.PICKED) {
                       // Array of Picked Files
                       let project_id = 0;
                       if (typeof this.$route.params.project_id !== 'undefined'){
                           project_id = self.$route.params.project_id;
                       }
                       console.log(data);
                       self.addGoggleDocsPicked({
                           programme_id: self.$route.params.programme_id,
                           project_id: project_id,
                           docs: data

                       }).then(response => {
                           console.log(response);
                           //

                           this.fileContiner = true



                       });
                   }
               },

Google picker asking to sign in even after providing access token

2 Answers2

Linked