Question

我想在我的React / Next.js应用程序中使用Google OAuth 2.0。我已经在Google Developer控制台上设置了OAuth客户端ID，并在server.js节点文件中设置了路由。当我尝试获取请求https://localhost:3000/auth/google时，出现“下一个js 404未找到”页面。很显然，我的Next js pages目录中正在寻找一个名为auth的页面。使用next / Router进行尝试，将我的按钮包装在锚元素中，获取API GET请求https://localhost:3000/auth/google，全部失败。

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

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

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

路线

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

应该会带我进入Google登录/注册页面的按钮

<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>

Answer 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

Answer 2

不确定您是否仍在这里寻找答案，如果是，则可以在最新的Next.js版本（9+）https://nextjs.org/blog/next-9#api-routes

下执行以下操作

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

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

要进行尝试，请通过用户界面将用户定向到/ api / auth / google或直接点击URL，然后您将进入Google OAuth 2.0流程。

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

将Oauth 2.0与Next js一起使用

2 个答案: