我试图使用Google OAuth 2.0身份验证策略进行注册，在我完成所有过程后，谷歌登录页面不会出现，我的控制台中没有错误，密钥也导入得很好。我使用react js和Nodejs作为后端(我不想使用react Google OAuth 2.0组件(，我希望所有东西都在后端。
我的开发人员控制台详细信息
授权JavaScript来源URI：http://localhost:5000
授权重定向URIURI：http://localhost:5000/auth/google/callbackindex.js-file
const passport=require('passport')
const User=require("../mongodb/schema/userSchema")
const googleStrategy=require("./googleStrategy")
const signUpStrategy=require("./signUpStrategy")
const loginStrategy=require("./loginStrategy")
passport.serializeUser((user,done)=>done(null,user.id))
passport.deserializeUser((id,done)=>{
User.findById(id,(err,user)=>{
if(err){return done(err)}
done(null,user)
})
//return done(null,getUserById(id))
})
passport.use("local-signUp",signUpStrategy)
passport.use("local-login",loginStrategy)
passport.use("google-signUp",googleStrategy)
module.exports=passport
谷歌战略.js-file
//const GoogleStrategy = require('passport-google-oauth').OAuth2Strategy;
const GoogleStrategy = require( 'passport-google-oauth2' ).Strategy;
const keys = require("./keys")
/*
console.log( keys.GOOGLE.clientID)
console.log( keys.GOOGLE.clientSecret)
*/
//http://localhost:5000/auth/google/callback
// proxy: true
const googleLocalStrategy=new GoogleStrategy({
clientID: keys.GOOGLE.clientID,
clientSecret: keys.GOOGLE.clientSecret,
callbackURL: "http://localhost:5000/auth/google/callback",
passReqToCallback : true,
proxy: true
},
function(token, tokenSecret, profile, done) {
console.log(profile)
console.log(token)
console.log(tokenSecret)
console.log("tokenSecret")
return done(err, profile);
}
)
module.exports=googleLocalStrategy;
account.js-文件
router.get("/auth/google",passport.authenticate("google-signUp",{
scope: [ 'email', 'profile' ]
}))
router.get("/auth/google/callback",(req, res, next)=>{
passport.authenticate("google-signUp",(err, user, info) =>{
if (err) {
return res.status(400).json({express:err})
}
return res.status(200).json({express:user})
})(req, res, next)
})
来自reactjs 的login.js-file
import React,{useState} from 'react';
import axios from 'axios'
import {useHistory } from "react-router-dom";
function Login(){
const history=useHistory()
const [eventInfo,setEventInfo]=useState({password:'',email:''});
const {password,email}=eventInfo
const [error,setError]=useState('')
const handleChange=(event)=>{
const {name,value}=event.target
setEventInfo({...eventInfo,[name]:value})
}
const googleSignUp=async ()=>{
const res=await axios.get('/auth/google',{
}).then((res)=>{
})
.catch((error)=>{
// console.log(error.response.data.express)
})
}
const onSubmit=async (e)=>{
e.preventDefault();
const formData=new FormData();
formData.append('password',password);
formData.append('email',email);
try{
const res=await axios.post('/login',formData,{
headers:{
'Content-Type':'multipart/form-data'
}
}).then((res)=>{
history.push("/home/"+res.data.express.id)
})
.catch((error)=>{
console.log(error.response.data.express)
//setError(error.response.data.express)
})
const{home}=res.data
history.push(home)
}
catch(err){
console.log(err)
}
}
return(
<div>
{error?error:""}
<form onSubmit={onSubmit} encType="multipart/form-data">
<div>
<input type="email" placeholder="name@.com" name="email" onChange={handleChange} required></input>
</div>
<div>
<input type="password" placeholder="passWord ..." name="password" onChange={handleChange} required></input>
</div>
<button>login</button>
</form>
<a href="/auth/google" onClick={()=>{googleSignUp()}}>google</a>
</div>
)
}
export default Login;
代码使用不起作用，因为我需要访问后端服务器本地主机才能使用谷歌路由，而不是react，所以我所做的是引入一个按钮，当你点击它时，该按钮具有一个功能，该功能将react本地主机更改为后端本地主机，并切入require路由(谷歌路由(。