我正在尝试在反应应用程序中使用谷歌登录.虽然在应用程序外部使用登录按钮本身很有效,但在自定义SignIn组件中使用它时,我无法按预期工作.当用户登录时,按钮本身应该执行一个data-onsuccess方法.问题是即使登录工作,执行也永远不会到达该方法.
我可能错过了一些反应但我无法找到它.有帮助吗？在下面找到加载所有内容和组件本身的html.
<head>
<meta name="google-signin-scope" content="profile email">
<meta name="google-signin-client_id" content="1234-real-client-id.apps.googleusercontent.com">
<script src="https://apis.google.com/js/platform.js" async defer></script>
</head>
<body>
<!-- Here is where everything gets displayed -->
<div id="app"></div>
<!-- The file with the js code -->
<script src="/js/main.js"></script>
</body>
var SignIn = React.createClass({
onSignIn : function (google_user) {
// I want this method to be executed
},
render : function() {
return (
<div className="g-signin2" data-onsuccess={this.onSignIn} data-theme="dark" />
);
}
});
请注意,我没有在这里粘贴不相关的代码;)
我正在尝试通过以下问题使用带有angular2的谷歌登录:Google登录网站和Angular 2使用Typescript
但我收到一个错误:
ORIGINAL EXCEPTION: ReferenceError: gapi is not defined
ORIGINAL STACKTRACE:
ReferenceError: gapi is not defined
at LoginAppComponent.ngAfterViewInit (http://localhost:3000/app/login.component.js:33:9)
at DebugAppView._View_AppComponent0.detectChangesInternal (AppComponent.template.js:46:68)
at DebugAppView.AppView.detectChanges (http://localhost:3000/node_modules/@angular/core//bundles/core.umd.js:12143:18)
at DebugAppView.detectChanges (http://localhost:3000/node_modules/@angular/core//bundles/core.umd.js:12247:48)
at DebugAppView.AppView.detectViewChildrenChanges (http://localhost:3000/node_modules/@angular/core//bundles/core.umd.js:12169:23)
at DebugAppView.AppView.detectChangesInternal (http://localhost:3000/node_modules/@angular/core//bundles/core.umd.js:12154:18)
at DebugAppView.AppView.detectChanges (http://localhost:3000/node_modules/@angular/core//bundles/core.umd.js:12143:18)
at DebugAppView.detectChanges (http://localhost:3000/node_modules/@angular/core//bundles/core.umd.js:12247:48)
at ViewRef_.detectChanges (http://localhost:3000/node_modules/@angular/core//bundles/core.umd.js:10397:69)
at eval (http://localhost:3000/node_modules/@angular/core//bundles/core.umd.js:9911:88)
显然gapi没有定义 - 我可以理解,因为我似乎只是声明一个空的变量.
我目前的代码如下:
import {Component, NgZone} from "@angular/core";
declare var gapi: any;
@Component({
selector: "login",
templateUrl: "templates/login-template.html"
})
export class LoginAppComponent {
googleLoginButtonId = "google-login-button";
userAuthToken = null;
userDisplayName …我正在使用vuejs 2,我在使用Google身份验证时遇到问题.
我成功设置并使用vue进行了注销和用户配置文件功能:
export default {
data() {
return {
user: null
};
},
methods: {
getUserProfile() {
const profile = gapi.auth2.currentUser.get().getBasicProfile();
console.log(profile.getIdToken());
},
signOut() {
const auth2 = gapi.auth2.getAuthInstance();
auth2.signOut().then(function () {
console.log('user signed out');
});
}
},
};
我的主要问题是onSignIn(googleUser)来自的功能
<div class="g-signin2" data-onsuccess="onSignIn"></div>
在data-onsuccess="onSignIn"正在寻找VUE实例之外的js函数.我尝试onSignIn(googleUser)在我的HTML文件中添加该功能,如:
<script>
function onSignIn(googleUser) {
const auth2 = gapi.auth2.init();
if (auth2.isSignedIn.get()) {
const profile = auth2.currentUser.get().getBasicProfile();
console.log(profile.getName());
console.log(googleUser.getAuthResponse().id_token);
console.log(googleUser.getAuthResponse().uid);
console.log(auth2.currentUser.get().getId());
}
}
</script>
这按预期工作,但我想知道是否可以在我的vue文件而不是本机javascript方式中添加它,因为在此函数内部,我将调用其他vue方法.
或者有没有办法我可以onSignIn(googleUser)在vue中添加该功能,然后在Google Auth完成时调用它？
在Google的" 集成Google登录"页面上,底部的部分向您展示了如何使用Javascript对用户进行签名:
<a href="#" onclick="signOut();">Sign out</a>
<script>
function signOut() {
var auth2 = gapi.auth2.getAuthInstance();
auth2.signOut().then(function () {
console.log('User signed out.');
});
}
</script>
我一直在寻找,我找不到使用PHP这样签署用户的方法.
我确实找到了如何完全退出Google的用户,但我不希望这样.我也知道我可以删除$_SESSION包含访问代码的变量,但这仍然不完全是我想要的.
有谁知道如何使用PHP将某人从我的Google应用程序中删除？
我是 vue 新手，一直在尝试将 google 登录按钮包含到我的网页中。但是，在我的 Mount() 中出现错误，指出“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() { …所以我是新手，我想要做的是使用 Angular 作为前端来制作一个简单的按钮，当点击该按钮时会要求用户进行身份验证，就像使用 gmail 示例的任何登录一样，但我不断收到此错误，这是我的代码我想要做的是使用谷歌提供的代码 https://developers.google.com/gmail/api/v1/reference/users/messages/list 并将其转换为打字稿
app.component.ts
export class AppComponent {
async authenticate() {
return await gapi.auth2.getAuthInstance().signIn({
scope: 'https://www.googleapis.com/auth/gmail.readonly',
});
}
应用程序组件.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<script src="https://apis.google.com/js/api.js"></script>
<title>Document</title>
</head>
<body>
<div class="wrapper">
<button class="signup" (click)="authenticate()">authorize and load</button>
</div>
<router-outlet></router-outlet>
</body>
</html>
javascript ×5
angular ×2
typescript ×2
vue.js ×2
vuejs2 ×2
frontend ×1
gapi ×1
html ×1
php ×1
reactjs ×1