问题描述
我正在使用 MERN 堆栈并希望在我的网络应用程序中实现谷歌登录。在开发模式下,它工作得很好,但在部署后给我错误
The verifyIdToken method requires an ID Token
我已经在 google 控制台开发者中添加了我部署的 web 的 url。问题是当我路由到登录屏幕时,会自动点击谷歌登录按钮并显示该错误。当我点击那个谷歌登录按钮时,它仍然向我显示那个错误。
这是我的登录界面
const responseGoogle = (response) => {
dispatch(googleLoginUser({tokenId:response.tokenId}))
}
<GoogleLogin
clientId="1078753984247-m9qbdjmrkitomgoh1dhheue6je1gbqlr.apps.googleusercontent.com"
render={renderProps => (
<Button onClick={renderProps.onClick} disabled={renderProps.disabled} variant='dark' style={{textTransform:'none',width:'70%'}}>
<img width="20px" style={{marginBottom:'3px',marginRight:'5px'}} alt="Google sign-in" src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/53/Google_%22G%22_logo.svg/512px-Google_%22G%22_logo.svg.png" />
Login with Google
</Button>
)}
onSuccess={responseGoogle}
onFailure={responseGoogle}
cookiePolicy={'single_host_origin'}
/>
这里的客户端 ID 是正确的。 responseGoogle dispatch action 是这样的
export const googleLoginUser = (body)=>async (dispatch)=>{
try {
dispatch({
type:GOOGLE_LOGIN_USER_REQUEST
})
const config = {
headers: {
'Content-Type': 'application/json',}
};
const res = await axios.post(`/api/users/google-login`,body,config)
dispatch({
type:GOOGLE_LOGIN_USER_SUCCESS,payload: res.data
})
dispatch(getUser())
localStorage.removeItem('pending')
localStorage.setItem('authenticated','true')
} catch (error) {
dispatch({
type: GOOGLE_LOGIN_USER_FAIL,payload: error.response && error.response.data.message ? error.response.data.message : error.message
})
}
}
这是我的后端 api 路由。
onst {google} = require('googleapis')
const {OAuth2} = google.auth
const googleLoginUser = asyncHandler(async(req,res)=>{
const client = new OAuth2(process.env.GOOGLE_CLIENT_ID)
const {tokenId} = req.body
const verified = await client.verifyIdToken({idToken: tokenId,audience:process.env.GOOGLE_CLIENT_ID})
const {email_verified,email,name,picture} = verified.payload
const password = email + process.env.SECRET_PASSWORD_USER
const hashedPassword = await bcrypt.hash(password,12)
if(email_verified){
const user = await User.findOne({email})
if(user && !user.googleLogin.status){
user.googleLogin.secret = hashedPassword
user.googleLogin.status = TransformStreamDefaultController
const token = await user.generatetoken(3600)
await user.save()
res.cookie('token',token,{httpOnly:true,maxAge:3600000}).json({message:'Successfully login'})
}
else if(user && user.googleLogin.status){
const isMatch = await bcrypt.compare(password,user.googleLogin.secret)
if(!isMatch){
throw new Error('Some auth Error in google Login')
}
const token = await user.generatetoken(3600*5)
res.cookie('token',maxAge:3600000*5}).json({message:'Successfully login'})
}
else{
const newUser = new User({
email,username:name,password:hashedPassword,image:picture,verified:true
})
newUser.googleLogin.secret = hashedPassword
newUser.googleLogin.status = true
const tokenForUser = await newUser.generatetoken(3600*5)
await newUser.save()
res.cookie('token',tokenForUser,maxAge:3600000*5})
res.json({message:'Successfully login'})
}
}
})
我错过了什么吗?这完全适用于开发模式。部署后,我遇到了很多错误,这就是其中之一。
解决方法
好的。有时它起作用了。我认为需要一些时间来更新 Google 中的网址