Как лучше всего использовать Oauth2, React, Node.js и Passport.js для аутентификации пользователя с помощью кнопки входа в Google? - PullRequest
Новая
       7

Как лучше всего использовать Oauth2, React, Node.js и Passport.js для аутентификации пользователя с помощью кнопки входа в Google?

0 голосов
/ 09 марта 2019

Я хочу, чтобы на моем веб-сайте была кнопка входа в систему, чтобы при нажатии на нее пользователь мог использовать свои учетные данные Google. В идеале я бы хотел выполнить аутентификацию на стороне сервера, используя Express.js и Passport.js.

Я реализовал аутентификацию на стороне сервера, но проблема в том, что я не могу сделать запрос AJAX с веб-сайта на сервер, чтобы начать аутентификацию, потому что Google или Oauth не поддерживают CORS . Поэтому мне нужно использовать элемент a href на моем веб-сайте, который будет вызывать конечную точку аутентификации сервера. Тем не менее, я не могу поймать ответ сервера таким образом.

Если я выполняю аутентификацию на стороне клиента (я использую React), я могу сохранить состояние входа в Redux и разрешить пользователю доступ к ресурсам сайта. Однако, когда пользователь выходит из системы, мне нужно убедиться, что конечные точки сервера перестают обслуживать одного и того же пользователя, что похоже на реализацию аутентификации дважды: на стороне клиента и на стороне сервера.

Кроме того, при аутентификации на стороне клиента Google открывает всплывающее окно для аутентификации пользователя, которое, как мне кажется, хуже для пользователя, чем просто перенаправление при аутентификации на стороне сервера.

Мне интересно, какова лучшая практика с точки зрения аутентификации с использованием Oauth2 / Google. Например, на stackoverflow.com также есть кнопка Google, но она просто выполняет перенаправление без всплывающих окон, поэтому я думаю, что они нашли способ выполнить проверку подлинности на стороне сервера и обойти проблему CORS.

1 Ответ

2 голосов
/ 09 марта 2019

Ваша аутентификация должна выполняться на стороне сервера.Вот как это работает.

  1. Вы делаете fetch или axios вызов на ваш маршрут аутентификации.
  2. Ваш маршрут аутентификации отправляет запрос на серверы аутентификации Google.Это важно иметь на бэкэнде, потому что вам нужно будет предоставить свой clientSecret.Если бы вы сохранили это на веб-интерфейсе, кому-то было бы действительно легко найти это значение и поставить под угрозу ваш сайт.
  3. Google аутентифицирует пользователя, а затем отправляет вам набор токенов на ваш URL-адрес обратного вызова дляиспользовать для этого пользователя (обновить, авторизация и т. д.).Затем вы будете использовать токен авторизации для любой дополнительной авторизации до истечения срока ее действия.
  4. По истечении этого срока вы будете использовать токен обновления, чтобы получить новый токен авторизации для этого клиента.Это совсем другой процесс.

Вот пример того, как это выглядит с Passport.js: https://github.com/jaredhanson/passport-google-oauth2

РЕДАКТИРОВАТЬ # 1:

Вот пример с комментариями процесса, используемого с Facebook, который является той же кодовой базой OAuth: https://github.com/passport/express-4.x-facebook-example/blob/master/server.js

...