将 Oauth 2.0 与 Next js 一起使用

Posted 2023-03-30

【中文标题】将 Oauth 2.0 与 Next js 一起使用

【英文标题】：Using Oauth 2.0 with Next js

【发布时间】：2019-11-07 05:27:38

【问题描述】：

我想在我的 React/Next.js 应用中使用 Google OAuth 2.0。我已经在 Google Developer 控制台上设置了我的 OAuth 客户端 ID，并在我的 server.js 节点文件中设置了一个路由。当我尝试 GET 请求 https://localhost:3000/auth/google 时，我得到 Next js 404 Not Found 页面。它显然是在我的 Next js pages 目录中寻找一个名为 auth 的页面。尝试使用下一个/路由器，将我的按钮包装在一个锚元素中，获取 API GET 请求https://localhost:3000/auth/google，都失败了。

我已经成功地实现了护照用户身份验证、加盐、散列和会话，但给我带来麻烦的只是 Oauth。

如果它是标准节点应用程序https://localhost:3000/auth/google 将重定向到用户可以使用他们的谷歌凭据登录的界面。

我已尝试在 nextjs 示例 github 中搜索 oauth 的实现，但似乎没有。有人知道我如何将 OAuth 2.0 与 Next JS 一起使用吗？

路线

server.get("/auth/google", (req, res) =>
   passport.authenticate("google",  scope: ['profile']);
)

应该把我带到谷歌登录/注册页面的按钮

<button className="btn btn-block btn-social btn-google" style='color': '#fff' onClick=() => Router.push("/auth/google")>
<FontAwesomeIcon icon=faGoogle className="google-social-button" /> Sign Up with Google
</button>

【参考方案1】：

你可以试试这个，

const app = next( dev );
const server = express()

server.get('/auth/google/callback*',
    passport.authenticate('google'),
(req, res) => 
    res.redirect('/dashboard');
);

server.get('/auth/google*', (req, res) => 
    return app.render(req, res, req.path, req.query)
);

server.get('/api/logout', (req, res) => 
    req.logout();
    res.send(req.user);
)

server.get('/api/current_user', (req, res) => 
    res.send(req.user);
);

server.get('*', (req, res) => 
   return handle(req, res)
);

只要确保 google reqs 位于 server.get('*') 路由之上，因为它会捕获所有请求。 更多帮助：https://github.com/zeit/next.js/blob/canary/examples/custom-server-express/server.js

【参考方案2】：

不确定您是否还在此处寻找答案，但如果是，您可以在最新的 Next.js 版本 (9+) 下执行类似以下操作，https://nextjs.org/blog/next-9#api-routes

//--- 第 1 部分：定义您的 GOOGLE OAUTH 策略 ALA 护照 // 这将在它自己的 passport.js 文件中（文件名无关紧要），关键是你定义了你的谷歌策略

import passport from 'passport'
import 
  Strategy as GoogleStrategy,
 from 'passport-google-oauth20'

passport.use(new GoogleStrategy(
  ...getGoogleKeySecret(), // a utility for grabbing your secret keys
  callbackURL: `/api/authorize/google/callback`,
  passReqToCallback: true, // http://www.passportjs.org/docs/authorize/
, async function(req, accessToken, refreshToken, profile, done) 
    // Do any user lookup/mapping you need here
    return done(null, profile)
))

//--- 第 2 部分：定义端点 // 这将在您的 pages/api/auth/google.js 文件中

import nextConnect from 'next-connect'
import middleware from '../any/custom/middleware/stuff/you/may/have'

const handler = nextConnect()

handler.use(middleware)

handler.get(passport.authenticate("google", 
  scope: ['profile', 'email', 'openid'], // tailer the scope to fit your needs
))

export default handler

要试用它，请通过您的 UI 将用户引导至 /api/auth/google 或直接点击 URL，您应该会被引导通过 Google OAuth 2.0 流程。

希望这会有所帮助 - 祝你好运！