Google选择器甚至在提供访问令牌后仍要求登录 [英] 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,

目标:我想将Google驱动器与我的应用程序集成在一起，以便用户可以从我的应用程序将文件上传到他们的驱动器中.因此，用户首先必须将其驱动器与应用程序集成，然后再使用Google Picker上传/导入文件.一旦集成了Google云端硬盘，用户就不会再看到身份验证屏幕，而是直接单击按钮即可打开Goog​​le选择器.

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.

实施:集成时，我在服务器端使用OAuth2并存储下面的客户端凭据

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

预期行为:点击按钮即可打开Goog​​le选择器.

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

我尝试使用登录选项来获取当前用户，但是无法获取当前用户.除此之外，我还尝试使用gapi进行客户端授权，但是每次我尝试加载选择器时，它也要求提供身份验证屏幕

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.

推荐答案

我遇到了同样的问题，并通过添加以下代码来解决

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

添加 gapi.load('picker'，()=> ....... 后，解决了我的Google未定义问题

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选择器甚至在提供访问令牌后仍要求登录的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！