时间戳

首页 > 解决方案 > 如何使用 vue-google-api 包获取 access_token 以便在 Google api 中进一步使用？

vue.js - 如何使用 vue-google-api 包获取 access_token 以便在 Google api 中进一步使用？

问题描述

我是 VueJS 和 Google API 的新手，所以我正在使用这个 vue-google-api https://www.npmjs.com/package/vue-google-api在 我的项目中实现 Google Drive可以使用谷歌选择器的示例代码，但我更喜欢使用 vue-google-api来缩短代码并进一步用于其他 API ，所以在我登录后（我成功登录），我想制作一个打开选择器模式的按钮它允许我在 Google Drive 中获取文件（截图如下），我从文档中使用它，这是在我的组件方法中@click：

        loadPicker(){
            this.$gapi._libraryLoad('picker')
            .then(picker => {
                console.log('picker object :', picker.api); // Just log it out to see what's this, nothing weird

                var view = new google.picker.View(google.picker.ViewId.DOCS); // From Docs
                view.setMimeTypes("image/png,image/jpeg,image/jpg,application/vnd.google-apps.folder");

                var newPicker = new google.picker.PickerBuilder() // From Docs
                    .enableFeature(google.picker.Feature.NAV_HIDDEN)
                    .enableFeature(google.picker.Feature.MULTISELECT_ENABLED)
                    .setAppId("MY_PROJECT_ID")
                    .setOAuthToken(THIS_IS_WHAT_IM_MISSING_AKA_ACCESS_TOKEN)
                    .addView(view)
                    .addView(new google.picker.DocsUploadView())
                    .setDeveloperKey("MY_API_KEY")
                    .setCallback(this.pickerCallback)
                    .build();

                    newPicker.setVisible(true);
                    console.log('send help pls reponse!');

            });            
        },
        pickerCallback(data) {
            var fileId = data.docs[0].id;
            alert('The user selected: ' + fileId);
        }

我包括这样的包：

import VueGoogleApi from 'vue-google-api';

const config = {
  apiKey: 'MY_API_KEY',
  clientId: 'MY_CLIENT_ID',
  scope: 'https://www.googleapis.com/auth/drive.file',
  discoveryDocs: ['https://www.googleapis.com/discovery/v1/apis']
};

Vue.use(VueGoogleApi, config);

我的屏幕截图以获取更多详细信息 https://i.stack.imgur.com/SkLXh.png 当然它发生了，我没有把我的 access_token 放进去，我在这里回复了它： https://i.stack。 imgur.com/oD0f6.png，但我不知道如何使用vue-google-api获取它，顺便说一下，这是 Laravel - Vue，如果它以某种方式重要的话。如果有帮助，我的登录代码：

var mixin = {
    methods:{
        //
        googleSignIn: () => {
            app.$gapi.signIn()
            .then(user => {
                alert('Signed in as ' + user.name);
                console.log('Signed in as '+ user.name);
            })
            .catch(err => {
                console.error('Not signed in: %s', err.error);
            })
        },
        googleSignOut: () => {
            // Google API 
            app.$gapi.signOut()
            .then(() => {
                alert('Signed out!');
                console.log('Signed out');
            });
        },
        checkGoogleSignIn: () => {
            app.$gapi.isSignedIn()
            .then(result => {
                app.$gapi.currentUser()
                .then(user => {
                    if (user) {
                        console.log('Signed in as '+ user.name);
                    } else {
                        console.log('No user is connected.');
                    }
                })
            });
        },
        //
    },
}

感谢您的所有回答

标签： vue.jsgoogle-drive-apiaccess-tokengoogle-oauthgoogle-picker

解决方案

我做到了，我必须再次初始化客户端，然后调用它自己的选择器then：

            let GoogleAuth;
            let GoogleUser;
            let oauthToken;
            app.$gapi._libraryLoad('auth2') // Init new user to get access_token
            .then(auth2 => {
                auth2.init(
                    {
                        client_id: GoogleApiConfig.clientId,
                        scope: GoogleApiConfig.scope,
                    }
                ).then(() => {
                    GoogleAuth = auth2.getAuthInstance();
                    GoogleUser = GoogleAuth.currentUser.get();
                    oauthToken = GoogleUser.Zi.access_token; // Get access_token
                    // Must load the picker when in the promise so it has the permission
                    app.$gapi._libraryLoad('picker') // Call picker API after authentication
                    .then(picker => {
                        var newPicker = new google.picker.PickerBuilder()
                            .enableFeature(google.picker.Feature.MULTISELECT_ENABLED)
                            .setAppId(GoogleApiConfig.projectId)
                            .setOAuthToken(oauthToken)
                            .addView(new google.picker.DocsView().setIncludeFolders(true).setOwnedByMe(true)) // My Drive
                            .addView(new google.picker.DocsUploadView().setIncludeFolders(true)) // Upload view
                            .addView(new google.picker.DocsView(google.picker.ViewId.RECENTLY_PICKED)) // Recently picked
                            .addView(new google.picker.DocsView().setIncludeFolders(true).setOwnedByMe(false)) // Shared with me
                            .addView(new google.picker.DocsView().setIncludeFolders(true).setStarred(true).setLabel('Starred')) // Starred
                            .setDeveloperKey(GoogleApiConfig.apiKey)
                            .setCallback(data => {
                                // var fileId = data.docs[0].id;
                                // Contained in array when select multiple files
                                app.pickedIDs = data.docs;
                            })
                            .build();
                        newPicker.setVisible(true);
                    });
                }).catch(()=> {
                    // If not signed in
                    this.googleSignIn();
                });
            });

推荐阅读