Google Drive API Picker ведет себя странно

Я работаю над приложением React, которому требуется доступ к API Google Диска. Мои основные настройки верны (ключ API, идентификатор клиента, идентификатор приложения и т. д.)

Я могу открыть диалоговое окно oauth и войти в систему (я могу получить токен Oauth), затем я запускаю функцию, которая открывает средство выбора.

Вот моя проблема: я сделал первую версию только с базовой HTML-страницей, и сборщик работал отлично, даже если у меня были эти ошибки (которые, кажется, повторяются)

Failed to execute 'postMessage' on 'DOMWindow': The target origin provided ('https://docs.google.com') does not match the recipient window's origin ('myURL').

Invalid 'X-Frame-Options' header encountered when loading ...

POST https://docs.google.com/picker/logImpressions 400

Но теперь в моем приложении React окно выбора открыто, и я могу щелкнуть все файлы, НО нажатие «Сохранить», «Отмена» ничего не вызывает. То же самое, если я пытаюсь использовать параметры фильтра или пытаюсь закрыть средство выбора. У вас есть какие-либо идеи о том, что может вызвать это?

Мой код: реагировать

<ButtonCustom onClick={()=>loadGoogleDrive(this.state.channel,this.onSuccess)}>Importer depuis Gdrive</ButtonCustom>

и функция loadGoogleDrive:

    var developerKey = 'here goes my api key';

    // The Client ID obtained from the Google API Console. Replace with your own Client ID.
    var clientId = 'here goes my client id';
    
    // Replace with your own project number from console.developers.google.com.
    // See "Project number" under "IAM & Admin" > "Settings"
    var appId = 'here goes my app id';
    console.log(developerKey,clientId,appId)
    // Scope to use to access user's Drive items.
    var scope = ['https://www.googleapis.com/auth/drive.readonly'];
    
    var pickerApiLoaded = false;
    var oauthToken;
    
    // Use the Google API Loader script to load the google.picker script.
    function loadPicker() {
        if(oauthToken){
            gapi.load('picker', {'callback': onPickerApiLoad});
    
        }
        else{
            gapi.load('auth', {'callback': onAuthApiLoad});
    
        }
       
    }
    
    function onAuthApiLoad() {
        gapi.auth.authorize(
            {
                'client_id': clientId,
                'scope': scope,
                'immediate': false
            },
            handleAuthResult);
    }
    
    function onPickerApiLoad() {
        pickerApiLoaded = true;
        createPicker();
    }
    
    function handleAuthResult(authResult) {
        gapi.load('picker', {'callback': onPickerApiLoad});
        if (authResult && !authResult.error) {
            oauthToken = authResult.access_token;
            createPicker();
        }
    }
    
    // Create and render a Picker object for searching images.
    function createPicker() {
        if (pickerApiLoaded && oauthToken) {
            var view = new window.google.picker.View(window.google.picker.ViewId.DOCS);
            view.setMimeTypes("image/png,image/jpeg,image/jpg,application/json,application/vnd.google-apps.document");
            // MimeTypes a ajouter/modifier selon les besoins
            var picker = new window.google.picker.PickerBuilder()
                //   .enableFeature(google.picker.Feature.NAV_HIDDEN) Permet de cacher le bouton UPLOAD
                .enableFeature(window.google.picker.Feature.MULTISELECT_ENABLED)
                .setAppId(appId)
                .setOAuthToken(oauthToken)
                .addView(view)
                
                //.addView(new google.picker.DocsUploadView())
                .setDeveloperKey(developerKey)
                .setCallback(pickerCallback)
                .build();
            picker.setVisible(true);
        }
    }
    
    
    
    // A simple callback implementation.
    function pickerCallback(data) {
        console.log('datas',data)
        if(data.docs){
            importCallback(data.docs,'googledrive',{'oauthToken' : oauthToken});
        }
        
            

    } 

    loadPicker();
    
    
    
}

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

Спасибо, и если вам нужна дополнительная информация, я буду рад помочь (и извините за мой плохой английский)

ОБНОВЛЕНИЕ

Похоже, были конфликты между плагинами (мы не знаем, какой из них, потому что мы используем их много). Один из моих коллег исправил это, поместив весь API-код GDrive в новое независимое всплывающее окно.


person vlrd    schedule 14.10.2020    source источник
comment
Итак, в первой версии HTML вы могли сохранять файлы, верно? Вы получаете какое-либо сообщение об ошибке, когда нажимаете «Сохранить» или «Отмена» на консоли?   -  person Mateo Randwolf    schedule 15.10.2020
comment
Да, я смог сохранить файлы с единственной HTML-версией, и я не получаю никаких сообщений на консоли, за исключением ошибок post-message и xframe, которые присутствуют здесь в обоих случаях.   -  person vlrd    schedule 15.10.2020
comment
Включен ли в вашем проекте инструмент выбора диска ? Связанный ответ здесь. Другая причина, по которой это может происходить, может быть связана с тем, что параметры iFrame вашего проекта React блокируют iframe. Дайте мне знать, как это происходит :D   -  person Mateo Randwolf    schedule 16.10.2020
comment
Да, средство выбора включено, и iframe открыт, есть только некоторые действия, которые я не могу выполнить. Я обновил свой пост снимком экрана с ошибкой. Я думаю, что это может быть вызвано другим плагином, но я не знаю, как найти какой один, потому что у меня нет ошибок на консоли   -  person vlrd    schedule 16.10.2020
comment
Не могли бы вы попробовать отключить эти плагины и запустить снова, чтобы узнать, связана ли проблема с плагином или связана исключительно с Drive Picker? Дайте мне знать, как это происходит :D   -  person Mateo Randwolf    schedule 19.10.2020
comment
Это сработало? Вы решили это?   -  person Jdban101    schedule 13.07.2021
comment
Привет ! Мы оставили это в стороне на долгое время, поэтому я забыл обновить свой пост, извините! Один из моих коллег нашел обходной путь, я только что обновил свой пост.   -  person vlrd    schedule 13.07.2021