reactjs - 任何人都可以与护照谷歌 oauth2 集成分享下一个 js 的例子吗？

Question

如果您有来自 的任何项目的代码示例nextjs 使用护照google oauth2，请分享。网上有一些仅使用 nodejs 的示例，但路由、中间件和回调的机制与 nextjs 不同，我还没有找到工作示例。
我有以下代码，但收到 CORS 错误。我在本地主机上看过带有 google auth 演示的 youtube 视频。我创建的凭据也使用 localhost。
\lib\Passport.js

import passport from 'passport';

import { Strategy as GoogleStrategy } from 'passport-google-oauth20';

passport.serializeUser((user, done) => {
  done(null, user._id);
});

passport.deserializeUser((req, id, done) => {
  req.db
    .collection('users')
    .findOne({ _id: id })
    .then((user) => done(null, user));
});

passport.use(new GoogleStrategy({
  clientID: process.env.GOOGLE_CLIENT,
  clientSecret: process.env.GOOGLE_SECRET,
  callbackURL: process.env.WEB_URI+"/users/callback/google",
  passReqToCallback: true,
},
function(accessToken, refreshToken, profile, cb) {
  // User.findOrCreate({ googleId: profile.id }, function (err, user) {
  //   return cb(err, user);
  // });
  console.log("profile below")
  console.log(profile)
}
));

export default passport;

\pages\login.js 带按钮 - “使用 Google 登录”

  <Button
  variant="outlined"
  color="secondary"
  startIcon={">"}
  onClick={(event) => {
    googleLogin(event) }}
  >
    Login using Google
  </Button>

和\pages\login.js 中的函数

  async function googleLogin(e) {
    const res = await fetch('/api/authGoogle', {
      method: 'GET',
      headers: { 'Content-Type': 'application/json' },
    })
    console.log(res);
    return;
  }

而\pages\api\authGoogle.js

import nextConnect from 'next-connect';
import middleware from '../../middlewares/middleware';
import passport from '../../lib/passport';

const handler = nextConnect();

handler.use(middleware);

handler.get(passport.authenticate("google", {
  scope: ['profile', 'email', 'openid'], 
}))

handler.delete((req, res) => {
  req.logOut();
  res.status(204).end();
});

export default handler;

我没有的是 users/callback/google 的代码我不知道在里面写什么。官方的passportjs 示例仅使用nodejs 并且很难遵循，因此使用next js 的任何示例将来都会对我和其他人有所帮助。

Answer 1

经过很多时间的挣扎，我自己想出了一些零碎的东西。
步骤 1
对于 Oauth，我们必须直接使用按钮/链接链接到提供者。我们不能使用先访问 api 的 fetch api 调用。
不管用await fetch('/api/authGoogle将工作href="/api/authGoogle 步骤 2
在 api/authGoogle 中需要调用passport.authenticate。handler.get(passport.authenticate("google", {scope: ['profile', 'email']})); 步骤 3
在passport.js 或任何你拥有所有策略的地方

passport.use(new GoogleStrategy({
  clientID: process.env.GOOGLE_CLIENT,
  clientSecret: process.env.GOOGLE_SECRET,
  callbackURL: process.env.WEB_URI+"/api/auth/callback/google",
  passReqToCallback: true,
},   
async (req, accessToken, refreshToken, profile, done) => {
  console.log(profile)
  // add code here to check if user exists in database or create a new one

它的工作方式是/api/auth/callback/google 传递您在浏览器 url 中看到的代码 (code=...)。详细信息然后从回调传递并可供 console.log(profile) 使用。以上。
第 4 步
回调文件 /api/auth/callback/google应该是这样的。我只是重定向到主页，但您可以在此文件中设置浏览器 cookie。如果您想这样做，请安装“cookies”，这是一个非常受欢迎的库。

handler.get(passport.authenticate("google"), (req, res) => {
  res.writeHead(302, {
    'Location': '/'
  });
  res.end();
})

这里再次重复了passport.authenticate，但它在步骤2 中。那是因为需要使用代码来使用上面的行获取配置文件信息。