部署后 Google 登录无法使用

Question

我正在使用 MERN 堆栈，并希望在我的网络应用程序中实现 google 登录。在开发模式下，它工作得很好，但部署后却出现错误

The verifyIdToken method requires an ID Token

我已经在谷歌控制台开发人员中添加了我部署的网络的网址。问题是当我路由到登录屏幕时，会自动单击谷歌登录按钮并显示该错误。当我点击谷歌登录按钮时，它仍然显示该错误。

这是我的登录屏幕

 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 是正确的。响应Google调度操作是这样的

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',token,{httpOnly:true,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,{httpOnly:true,maxAge:3600000*5})
        res.json({message:'Successfully login'})
    }
}
})

我错过了什么吗？这在开发模式下完全有效。部署后，我遇到了很多错误，这就是其中之一。

Answer 1

好的。有时后它起作用了。我认为需要一些时间来更新 Google 中的网址

Answer 2

您在服务器上遇到的 Google 登录按钮问题可能与 OAuth 客户端 ID 的授权域有关。以下是一些需要遵循的步骤：

OAuth 客户端 ID 的授权域：

Google Cloud Console 上的授权域名：

• 访问 Google Cloud Console。
• 打开“API 和服务”>“凭据”页面。
• 查找用于 Google 登录的 OAuth 客户端 ID。
• 将 Firebase 托管域 (.firebaseapp.com) 和您的本地开发域（localhost:3000 或本地服务器使用的任何域）添加到授权 JavaScript 来源列表中。