部署后谷歌登录不起作用

如何解决部署后谷歌登录不起作用

我正在使用 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 中的网址