Javascript 如何使用Vue.js初始化google OAuth客户端？_Javascript_Vue.js_Google Api_Google Oauth

Javascript 如何使用Vue.js初始化google OAuth客户端？

javascript vue.js google-api

Javascript 如何使用Vue.js初始化google OAuth客户端？,javascript,vue.js,google-api,google-oauth,Javascript,Vue.js,Google Api,Google Oauth,我正在尝试将google OAuth api与Vue.js一起使用。我使用并修改谷歌提供的示例代码。但当我点击“授权”按钮时，控制台返回：未捕获的TypeError:无法读取未定义的属性“init” Vue$3.initClient（Vueuth.js:24）在Vue$3.boundFn[作为初始客户端]（Vue.js:196）在Vue$3.HandleClient负载下（Vueuth.js:20）在边界fn（vue.js:196）调用程序（vue.js:2006）在HTMLBu

我正在尝试将google OAuth api与Vue.js一起使用。我使用并修改谷歌提供的示例代码。但当我点击“授权”按钮时，控制台返回：

未捕获的TypeError:无法读取未定义的属性“init”

Vue$3.initClient（Vueuth.js:24）

在Vue$3.boundFn[作为初始客户端]（Vue.js:196）

在Vue$3.HandleClient负载下（Vueuth.js:20）

在边界fn（vue.js:196）

调用程序（vue.js:2006）

在HTMLButtonElement.fn._withTask.fn._withTask（vue.js:1804）

这是我的密码

index.html

我想知道为什么gapi.client.init不可用。

如何更改代码以启用gapi？

如果您的代码依赖于gapi工作，则不应使用异步加载它。在您的案例中加载它的正确方法是：

为脚本标记尝试以下操作：

<script src="https://apis.google.com/js/client.js"></script>

以防有人在找这个。这就是我添加到Caledndar按钮的方式

public/index.html在头部添加脚本

<head>
...
<script async defer src="https://apis.google.com/js/api.js"></script>
...
</head>

如果您的

格兰特·辛格尔顿的反应帮助很大

<head>
...
<script async defer src="https://apis.google.com/js/api.js"></script>
...
</head>

<ion-button @click="addToCalendar(item)">
  Add to Calendar <ion-icon :icon="calendarClearOutline"></ion-icon>
</ion-button>

// after imports
var gapi = window.gapi;
var CLIENT_ID = "_YOUR_CLIENT_ID_";
var API_KEY = "_YOUR_API_KEY_";
var DISCOVERY_DOCS = ["https://www.googleapis.com/discovery/v1/apis/calendar/v3/rest"];
var SCOPES = "https://www.googleapis.com/auth/calendar";

// in methods
    addToCalendar(event) {
      gapi.load("client:auth2", () => {
        console.log("gapi loaded", gapi.client);
    
        gapi.client.init({
          apiKey: API_KEY,
          clientId: CLIENT_ID,
          discoveryDocs: DISCOVERY_DOCS,
          scope: SCOPES
        }).then(() => {
          const gcEvent = {
            "summary": event.eventName,
            "location": event.venue,
            "start": {
              "dateTime": moment(event.start).utc().format("YYYY-MM-DDTHH:mm:ss.SSS[Z]"),
              "timeZone": "Africa/Johannesburg"
            },
            "end": {
              "dateTime": moment(event.end).utc().format("YYYY-MM-DDTHH:mm:ss.SSS[Z]"),
              "timeZone": "Africa/Johannesburg"
            },
            "reminders": {
              "useDefault": false,
              "overrides": [
                {"method": "email", "minutes": 24 * 60},
                {"method": "popup", "minutes": 10}
              ]
            }
          };
    
          var request = gapi.client.calendar.events.insert({
            'calendarId': 'primary',
            'resource': gcEvent,
          });
    
          // window object is undefined inside `execute`/
          const rootWindow = window;
    
          request.execute(gcEvent => {
            rootWindow.open(gcEvent.htmlLink);
          })
        })
      })
    }