Средство выбора Google просит войти даже после предоставления токена доступа

Во-первых, после некоторых исследований я обнаружил, что многие люди сталкивались с этой проблемой, но я не нашел конкретного решения этой проблемы. Подходя к вопросу,

Цель: я хочу интегрировать диск Google с моим приложением, чтобы пользователь мог загружать файлы на свой диск из моего приложения. Таким образом, пользователь сначала должен интегрировать свой диск с приложением, а затем использовать средство выбора Google для загрузки/импорта файлов. После интеграции диска Google пользователь больше не должен видеть экран аутентификации, вместо этого по нажатию кнопки должен открываться инструмент выбора Google.

Реализация: при интеграции я использую OAuth2 на стороне сервера и сохраняю учетные данные клиента, которые приведены ниже.

   { 
     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 
   }

Теперь на стороне клиента я получаю тот же токен доступа и использую для загрузки средства выбора

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

Ожидаемое поведение: средство выбора Google должно открываться по нажатию кнопки. введите здесь описание изображения

Я попытался использовать параметр входа для получения текущего пользователя, но мне не удалось получить текущего пользователя. Помимо этого, я также пытался выполнить авторизацию на стороне клиента с помощью gapi, но он также запрашивает экран аутентификации каждый раз, когда я пытаюсь загрузить средство выбора.

Любая помощь приветствуется. Заранее спасибо.


javascript google-api google-drive-api google-picker
person ot954    schedule 05.01.2020    source источник
comment
Попробуйте использовать Быстрый запуск браузера для Google Диска API. developers.google.com/drive/api/v3/quickstart/js   -  person Branden Huggins    schedule 05.01.2020
comment
@BrandenHuggins У меня проблема со сборщиком Google, а не с вождением. Для средства выбора Google я пытался использовать браузер oauth, но все еще сталкивался с проблемой с отображением экрана авторизации. После интеграции диска я не хочу, чтобы пользователь показывал экран авторизации для выбора учетной записи.   -  person ot954    schedule 05.01.2020
comment
Попробуйте загрузить Picker в соответствии с Документами разработчика для Picker API.   -  person Rafa Guillermo    schedule 06.01.2020
comment
@RafaGuillermo уже сделал. Я обнаружил, что сборщик и диск имеют разную область действия oauth. Таким образом, сборщик показывает свою собственную авторизацию после каждого сеанса. Сказав это, я знаю, что можно пропустить авторизацию сборщика, поскольку я видел это на веб-сайте под названием Insightly.   -  person ot954    schedule 08.01.2020
comment
Какую область вы используете для выбора?   -  person Rafa Guillermo    schedule 08.01.2020
comment
@RafaGuillermo при аутентификации, т.е. интеграции диска пользователя в мое приложение, я использую область ['googleapis.com/auth /drive.file', 'googleapis.com/auth/userinfo.email ']. При вызове сборщика я использую тот же токен доступа, созданный при аутентификации пользователя.   -  person ot954    schedule 09.01.2020

Ответы (2)


arrow_upward
0
arrow_downward

Когда вы изначально интегрируете Google Drive, вы получаете и сохраняете refresh_token? Если вы не видите refresh_token, вам нужно добавить параметр prompt: 'consent' в параметры oauth.

Например:

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

Затем, прежде чем открыть средство выбора, вам нужно убедиться, что срок действия вашего access_token не истек, и если это так, вы можете обновить его с помощью refresh_token

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

person Nate Good    schedule 16.06.2020

arrow_upward
0
arrow_downward

У меня была такая же проблема, и я решил добавить код ниже

  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 не определена

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



                       });
                   }
               },
person sanainfotech    schedule 18.06.2020