将 Oauth 2.0 与 Next js 一起使用答案

【问题标题】：Using Oauth 2.0 with Next js将 Oauth 2.0 与 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>

【问题讨论】：

标签： oauth-2.0 next.js

【解决方案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 流程。

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

【讨论】：