Google picker asking to sign in even after providing access token

问题

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.

回答1:

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

回答2:

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



                       });
                   }
               },

来源：https://stackoverflow.com/questions/59596708/google-picker-asking-to-sign-in-even-after-providing-access-token