2

我正在开发一个需要访问 Google Drive API 的 React 应用程序。我的基本设置是正确的（api key、c​​lient id、application id 等...）

我可以打开 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();
    
    
    
}

这是来自错误的图片，我可以点击图片但不能点击其他任何东西 抱歉模糊效果我不允许分享图片。

谢谢，如果您需要更多信息，我很乐意为您提供帮助（抱歉我的英语不好）

更新

插件之间似乎存在冲突（我们不知道是哪一个，因为我们使用了很多插件）。我的一位同事通过将所有 GDrive api 代码放在一个新的独立弹出窗口上来解决此问题。

4

0 回答 0