Использование Oauth 2.0 с Next js - PullRequest
Новая
       13

Использование Oauth 2.0 с Next js

0 голосов
/ 25 июня 2019

Я хочу использовать Google OAuth 2.0 с моим приложением React / Next.js.Я установил свои идентификаторы клиента OAuth на консоли разработчика Google и настроил маршрут в файле узла server.js.Когда я пытаюсь получить запрос https://localhost:3000/auth/google, я получаю страницу Next js 404 Not Found.Очевидно, он ищет страницу с именем auth в моей папке Next js pages.Попытка использовать next / Router, завернуть мою кнопку в элемент привязки, получить API GET, запросив https://localhost:3000/auth/google, все не удалось.

Мне удалось успешно реализовать проверку подлинности паспорта пользователя, подсолку, хеширование и сеансыно только Oauth доставляет мне неприятности.

Если бы это было стандартное приложение узла, https://localhost:3000/auth/google перенаправило бы на интерфейс, где пользователи могли бы войти со своими учетными данными Google.

Iя пробовал искать в github-файлах nextjs реализации 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>

1 Ответ

1 голос
/ 24 июля 2019

Вы можете просто попробовать это, 

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 находятся выше маршрута server.get ('*'), так как он перехватывает все запросы. Дополнительная помощь: https://github.com/zeit/next.js/blob/canary/examples/custom-server-express/server.js

...