如何在Vue CLI环境中使用oAuth2正确验证和使用GoogleCalendar-API

时间:2019-05-11 23:43:13

标签: vue.js google-api google-calendar-api vue-cli-3

我正在尝试将Google-Calendar-API集成到基于Vue-CLI的Webapp中。我已决定使用从以下站点学到的GoogleAPI的node.js版本:https://developers.google.com/calendar/quickstart/nodejs#troubleshooting。但是,我得到了:

  

TypeError:预期inputFunctionObject,得到了   未定义

这是针对我用Vue-Cli,Vue Router,Vuetify.js编写的个人项目,另外还通过Firebase进行了身份验证(通过Google帐户登录)。用户通过Firebase UI(通过Google帐户)登录后,他们将可以访问仪表板页面,在那里他们将能够通过Google的oAuth2 API系统(固定)访问其日历。我最初尝试使用基于浏览器的javascript API,但失败了(以及后来个人首选的node.js版本)。

Dashboard.vue

<script>
import { config } from "@/../hidden/config.js";
const {google} = require('googleapis');

// If modifying these scopes, delete token.json.

// The file token.json stores the user's access and refresh tokens, and is
// created automatically when the authorization flow completes for the first
// time.
const TOKEN_PATH = '@/assets/token.json';
export default {
  data() {
    return {
      oAuth2Client: null,
      SCOPES: ['https://www.googleapis.com/auth/calendar.readonly'],
      client_secret: "", 
      client_id: "", 
      redirect_uris: ""
    };
  },
  methods: {

    /**
     * Create an OAuth2 client with the given credentials, and then execute the
     * given callback function.
     * @param {Object} credentials The authorization client credentials.
     * @param {function} callback The callback to call with the authorized client.
     */
    authorize: () => {
      const self = this;
      self.oAuth2Client = new google.auth.OAuth2(
          client_id, client_secret, redirect_uris[0]);

      self.getAccessToken(self.oAuth2Client);
      self.oAuth2Client.setCredentials();
      self.listEvents(oAuth2Client);
    },

    /**
     * Get and store new token after prompting for user authorization, and then
     * execute the given callback with the authorized OAuth2 client.
     * @param {google.auth.OAuth2} oAuth2Client The OAuth2 client to get token for.
     * @param {getEventsCallback} callback The callback for the authorized client.
     */
    getAccessToken: () => {
      const self = this;
      const authUrl = self.oAuth2Client.generateAuthUrl({
        access_type: 'offline',
        scope: SCOPES,
      });
      console.log('Authorize this app by visiting this url:', authUrl);
      self.oAuth2Client.getToken(code, (err, token) => {
        if (err) return console.error('Error retrieving access token', err);
        self.oAuth2Client.setCredentials(token);
        // self.listEvents();
      });
    }

    /**
     * Lists the next 10 events on the user's primary calendar.
     * @param {google.auth.OAuth2} auth An authorized OAuth2 client.
     */

     /*
    listEvents: () => {
      const self = this;
      const auth = self.oAuth2Client;
      const calendar = google.calendar({version: 'v3', auth});
      calendar.events.list({
        calendarId: 'primary',
        timeMin: (new Date()).toISOString(),
        maxResults: 10,
        singleEvents: true,
        orderBy: 'startTime',
      }, (err, res) => {
        if (err) return console.log('The API returned an error: ' + err);
        const events = res.data.items;
        if (events.length) {
          console.log('Upcoming 10 events:');
          events.map((event, i) => {
            const start = event.start.dateTime || event.start.date;
            console.log(`${start} - ${event.summary}`);
          });
        } else {
          console.log('No upcoming events found.');
        }
      });
    }
      */
  },
  created: function() {
    const {credentials} = require("@/credentials.json");
    this.client_secret = credentials.installed.client_secret;
    this.client_id = credentials.installed.client_id;
    this.redirect_uris = credentials.installed.redirect_uris;
    //this.authorize();
  }
};
</script>

我希望能够连接到Google Calendar API,并开始实际操作日历事件信息。但是,我得到了错误:

  

TypeError:预期inputFunctionObject,得到了   undefined

。 我尝试过在线寻找有类似问题的人,但是我没有找到任何视频指南或使用Google API的Vue-cli项目的书面指南。

我确实承认我已经从网站上引用的示例中对代码进行了一些修改,以避免使用fsreadline npm软件包。但是,在这些情况下,错误消息也相同。

0 个答案:

没有答案