Javascript 使用react组件在react应用程序上使用google登录
我正在尝试为web实现。我能够使用JavaScript完成一个基本的实现，如文档所示。但我无法在react组件中调用Javascript 使用react组件在react应用程序上使用google登录,javascript,reactjs,google-authentication,google-oauth,Javascript,Reactjs,Google Authentication,Google Oauth,我正在尝试为web实现。我能够使用JavaScript完成一个基本的实现，如文档所示。但我无法在react组件中调用onSignIn index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="google-signin-client_id" content="xxx.apps.googleusercontent.c
onSignIn<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="google-signin-client_id" content="xxx.apps.googleusercontent.com">
<script src="https://apis.google.com/js/platform.js" async defer></script>
<title>Dashboard</title>
</head>
<body>
<div id="app"></div>
</body>
仪表板
import React from 'react';
import PropTypes from "prop-types";
import styles from "../../../stylesheets/Layout/main.css";
import Logo from './logo';
class LoginPage extends React.Component {
onSignIn (googleUser) {
var profile = googleUser.getBasicProfile();
console.log('ID: ' + profile.getId()); // Do not send to your backend! Use an ID token instead.
console.log('Name: ' + profile.getName());
console.log('Image URL: ' + profile.getImageUrl());
console.log('Email: ' + profile.getEmail()); // This is null if the 'email' scope is no
}
render() {
return (
<div className="centered">
<Logo className="login-logo" />
<div>
<div className="g-signin2" data-onsuccess={this.onSignIn}></div>
</div>
<div>
<p className="login-text">
Login with Google account
</p>
</div>
</div>
);
}
}
export default LoginPage;
从“React”导入React；
从“道具类型”导入道具类型；
从“../../../stylesheets/Layout/main.css”导入样式；
从“./Logo”导入徽标；
类LoginPage扩展了React.Component{
onSignIn（谷歌用户）{
var profile=googleUser.getBasicProfile（）；
console.log（'ID:'+profile.getId（））；//不要发送到后端！改用ID令牌。
log（'Name:'+profile.getName（））；
log（'Image URL:'+profile.getImageUrl（））；
console.log（'Email:'+profile.getEmail（））；//如果'Email'作用域为否，则为null
}
render（）{
返回(
使用谷歌帐号登录
);
}
}
导出默认登录页面；
className=“g-signn2”id=“g-signn2”