个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
46
4
我是 vue 的新手，一直试图在我的网页中包含一个谷歌登录按钮。但是，在我的mounted() 中有一个错误指出“gapi 未定义”。我该如何解决？我也尝试过初始化 gapi，但我不知道该放在哪里。
<template>
<div id = "signin"><div class="g-signin2">Sign in with LFA Email</div></div>
</div>
</template>
<script src="https://apis.google.com/js/platform.js" async defer></script>
<script>
import UserDataService from "../services/UserDataService";
export default {
data(){
return {
emailAddress:"",
signedIn:false
};
},
methods:{
onSignIn(user){
const profile = user.getBasicProfile()
this.emailAddress =profile.getEmail()
console.log(this.emailAddress)
if(this.emailAddress.indexOf("@students.org")>-1){
UserDataService.create(this.emailAddress)
this.signedIn = true
}
else{
alert("Please sign in with an LFA Email Account")
var auth2 = gapi.auth2.getAuthInstance();
auth2.signOut().then(function () {
console.log('User signed out.');
});
this.signedIn=false
}
}
},
mounted() {
gapi.signin2.render('signin', {
'scope': 'profile email',
'width': 240,
'height': 50,
'longtitle': true,
'theme': 'dark',
'onsuccess': this.onSuccess,
})
}
}
</script>
<style>
@import '../../public/stylesheet.css';
</style>
最佳答案
你不能把这个标签 <script src="https://apis.google.com/js/platform.js"></script>在单个文件组件中。
将此标签放入您的public/index.html :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title>t-vue</title>
</head>
<body>
<noscript>
<strong>We're sorry but t-vue doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<script src="https://apis.google.com/js/platform.js"></script>
<!-- built files will be auto injected -->
</body>
</html>
async和
defer .因为当您调用
gapi
mounted 中的变量该脚本尚未下载。
<script src="https://apis.google.com/js/platform.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<button @click="test">Click Here</button>
</div>
<script src="https://apis.google.com/js/platform.js"></script>
<script>
let app = new Vue({
el: '#app',
methods: {
test() {
console.log('method', gapi);
},
},
mounted() {
console.log('mounted', gapi);
},
});
</script>
</body>
</html>
关于javascript - 使用谷歌登录时出错 - vue "gapi is not defined"，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/61100835/
46
4
0
我需要跨多个帐户连接到多个 Google 议程以获取事件。为每个要连接的议程调用以下函数，它适用于第一个查询的帐户，之后我收到上述错误。我怎样才能连接到下一个帐户，身份验证是否需要断开连接或取消设置？
在 Google 的 JavaScript API 中，gapi.load() 和 gapi.client.load() 之间有什么区别？它们之间的互换性如何？我什么时候应该使用其中一个而不是另一个？
我在 Angular 5 中有一个项目，我正在尝试使用 Google gapi.auth2 库实现登录。我被这个错误困住了: ERROR in ./src/app/signin.service.ts
我正在尝试了解如何最好地使用客户端 Javascript 访问 Google 云端硬盘。我写了一些测试代码来插入一个只有元数据的新文件。我找到了一个使用此代码的示例: var request = ga
Exception: GAPI: Failed to request account data. Error: " Error 404 (Not Found)!!1 * {
我根据谷歌文档在页面加载时运行此代码: (function() { var po = document.createElement('script'); po.type = 'text/jav
我很难将 Google javascript api 加载到我的 chrome 扩展程序中。请注意我是 javascript 的新手，甚至是 chrome 扩展的新手。 我有一个执行脚本的 backg
我正在尝试将图像上传到谷歌驱动器。我按照本教程上传文件，我可以上传一个简单的文件，但是当我尝试上传图像时，我得到了损坏的图像。事实上，文件已上传，但我要查看的图像已损坏。我知道问题出在请求的正文中，但
很抱歉，这个话题复活了，但是我也有同样的疑问。 我使用的是gapi，目前“ 2013年10月23日”，谷歌更改了如何获取数据。我无法获得全部访问。 我只需要访问我的网站的总次数，仅此而已。 这是我正在
我正在尝试使用 gapi php 类从分析中获取基本统计信息。我只需要过去 30 天的数据，没有特定维度。这与查看没有分割的分析相同。我从这个开始: $ga->requestReportData($a
我正在使用 GAPI 尝试根据 Google Analytics(分析)数据创建简单的报告。我的内部客户希望看到每页有 2 个字段的概述:综合浏览量和唯一访问者。我的综合浏览量部分可以工作，但我无法让
我做了下面的测试，但是结果不是很好，因为我希望GAPI能有很大的提高。不知道是不是我做错了，希望大家帮我指正，万分感谢! My test environment are OpenCV4.2 offic
从我的 HTML 代码访问 Google+ API 时，我看到了 ReferenceError:gapi is not defined 错误。 我的代码很简单，但不确定它有什么问题。 如有任何意见，我
我正在尝试使用 Google Sheets API 将其包含在我的网络应用程序中，但我一直收到一条错误消息，指出未定义 gapi 库。我尝试使用 ComponentDidMount 生命周期方法延迟对
请遵循以下指示：https://developers.google.com/+/web/api/javascript (function() { var po = document.cr
我目前正在多个位置使用应用调用 gapi.signIn 方法。 当用户登录时 当用户注册时 当用户想要将其应用帐户关联到 Google 帐户时 因此，在每个实例中都会使用不同的回调参数调用 gapi.
我已经投入到一个旨在利用 YouTube API 的小项目中。我已经准备好一些基本代码，我最初认为这些代码可以正常工作。 使用 Chrome，我可以通过我自己网络上的多台机器登录，使用下面的源代码没有
需要在js中进行auth请求，但浏览器不支持弹窗。有什么方法可以重定向到新的 url 或在应用程序的 html5 页面中显示请求 最佳答案 通过使用此代码检查用户是否授权您的应用 gapi.auth.
我有一个基于类的组件，它使用 gapi (Google Auth) API 呈现一个按钮并且它可以工作: import React from 'react'; class GoogleAuth ext
我是 vue 的新手，一直试图在我的网页中包含一个谷歌登录按钮。但是，在我的mounted() 中有一个错误指出“gapi 未定义”。我该如何解决？我也尝试过初始化 gapi，但我不知道该放在哪里。
我是一名优秀的程序员,十分优秀！