Oauth2 Google 身份验证流程 - Next.JS / Express

我正在使用 React/Next.Js 前端，并尝试通过 Google 的 Oauth2 策略实现身份验证。

我对这个过程感到非常困惑。

目前在客户端上，我有一个 Google 登录组件，其中包含客户端 ID，并且可以检索访问令牌。

      <GoogleLogin
            clientId="myclientid"
            buttonText="Login"
            onSuccess={userLogin}
            onFailure={userLogin}
            cookiePolicy={'single_host_origin'}
  />

然后我有一个函数，成功后会使用访问令牌向我的后端发送一条发布消息，如下所示：

export function googleAuthenticate(accessToken : string) : any{
    axios({
        method: 'post',
        url: "http://localhost:4000/auth/google",
        data: {
          accessToken: accessToken
        }
      })
    .then(res => {
        console.log(res);
    })
    .catch(err => {
        console.log("Failure!");
        console.log(err);
    })
};

在后端我使用护照，路线如下所示：

import express from 'express';
import passport from 'passport';
import Logger from '../logger/index';

const router = express.Router();

export function isAuthenticated(req:express.Request, res:express.Response, next : any) {
    return req.isAuthenticated() ?
        next() :
        res.sendStatus(401);
 }  

  router.get('/fail', (_req:express.Request, res:express.Response) => {
    res.json({ loginFailed: true });
  });

  router.post('/google', passport.authenticate('google', { scope: ['profile']}), (_req:express.Request, _res:express.Response) => {
    Logger.info("GET Request at Google Authentication endpoint received.");
  });

  router.get(
    '/google/callback',
    passport.authenticate('google', { failureRedirect: '/login' }),
    (_req:express.Request, res:express.Response) => {
      res.redirect('/graphql');
    }
  );

export default router;

我的护照模块如下所示：

module.exports = function(passport : any, GoogleStrategy : any){
  passport.use(new GoogleStrategy({
    clientID: config.google.client_id,
    clientSecret: config.google.client_secret,
    callbackURL: config.google.redirect_url
  },
  function(accessToken : string, profile : Profile, refreshToken : string, cb : any) {
    return cb(null, {
      id: profile.googleId,
      username: profile.email,
      image: profile.imageUrl,
      firstName: profile.givenName,
      surname: profile.familyName,
      accessToken: accessToken,
      refreshToken: refreshToken
    })
  }
  ));
}

由于 Next.js 是服务器端渲染的，因此我无法使用保存令牌。我知道我必须使用 cookie。但这是如何运作的呢？我无法从 Express 后端重定向客户端浏览器。

目前我只看到这两个错误：

OPTIONS https://accounts.google.com/o/oauth2/v2/auth?response_type=code&redirect_uri=http%3A%2F%2Flocalhost%3A4000%2localhost:3000%2Fdashboard&scope=profile&client_id=687602672235-l0uocpfchbjp34j1jjlv8tqv7jadb8og.apps.googleusercontent.com 405

Access to XMLHttpRequest at 'https://accounts.google.com/o/oauth2/v2/auth?response_type=code&redirect_uri=http%3A%2F%2Flocalhost%3A4000%2Fbackoffice.dev.myos.co%2Fdashboard&scope=profile&client_id=687602672235-l0uocpfchbjp34j1jjlv8tqv7jadb8og.apps.googleusercontent.com' (redirected from 'http://localhost:4000/auth/google') from origin 'null' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

首先，我认为谷歌身份验证无法在本地主机上运行。
如果我正确理解你的服务器端逻辑，你可以轻松地将你的令牌保存为 cookie，然后在客户端中读取它们。

不确定护照，但你可以做类似的事情：
（我的应用程序正在使用此代码的实现）

前端 ：

  <GoogleLogin
        clientId="myclientid"
        buttonText="Login"
        onSuccess={userLogin}
        onFailure={userLogin}
        cookiePolicy={'single_host_origin'}
/>

用户登录：

  async userLogin(response){
     var url = '/google-login/'+response.tokenObj.id_token
     fetch(url).then(/* i will handle response*/)
  }

然后在后台就可以使用google-auth-library登录或注册。
server.js:

const {OAuth2Client} = require('google-auth-library');
const GOOGLEID = "mygoogleid.apps.googleusercontent.com"
const client = new OAuth2Client(GOOGLEID);
var cookieParser = require('cookie-parser')

async function verify(userToken) {
    const ticket = await client.verifyIdToken({
    idToken: userToken,
    audience: "clientid.apps.googleusercontent.com",  // Specify the CLIENT_ID of the app that accesses the backend
   // Or, if multiple clients access the backend:
   //[CLIENT_ID_1, CLIENT_ID_2, CLIENT_ID_3]
  });
  const payload = ticket.getPayload();
  const userid = payload['sub'];
  return payload
  // If request specified a G Suite domain:
  //const domain = payload['hd'];
}

In server.js与此类似的路线：

   server.get('/google-login/:token',(req,res) => {
    const userToken =  req.params.token
    var  result =  verify(userToken).then(function(result){
      var userName = result.given_name
      var userSurname = result.family_name
      var userEmail = result.email
      /*
        Now user is authenticated i can send to the frontend
        user info or user token o save the token to session
      */
    }).catch(function(err){
      // error handling
    })
  })