Как разработчик клиента создание приложений с аутентификацией может быть утомительным процессом. Поскольку нам нужно обрабатывать аутентификацию на сервере и поддерживать код. У него есть несколько вариантов, которые необходимо поддерживать на основе механизмов аутентификации. (Basic, OAuth и т. Д.) Этот блог поможет вам создать автономный бэкэнд без аутентификации для вашего приложения React. (или дополнительно) вы также можете добавить конфигурации сервера для аутентификации на вашем сервере.
Почему OAuth?
Есть много причин использовать OAuth.
- Это безопасно.
- От пользователя не требуется никаких учетных данных. Так что не нужно запоминать несколько паролей.
- Веб-сайты также могут получать важную информацию о пользователях, не тратя много времени на заполнение форм.
В частности, в нашем случае нам не нужен сервер для аутентификации или получения исходных данных о пользователе. 😉
Я нашел пакет, который называется react-google-login. Которая предоставляет простые механизмы для добавления логина Google. Вы можете либо напрямую использовать их GoogleLogin компонент, либо использовать настраиваемые кнопки. Они также предоставляют настраиваемые крючки, такие как useGoogleLogin и useGoogleLogout, поэтому любителям крючков будет легко. (Оба метода описаны ниже)
Документация, которую они предоставили для этого репозитория, потрясающая. Но в некоторых случаях он отсутствует, о чем говорится в этом блоге. Как и подробно, этот блог помогает создать ваше приложение в консоли разработчика Google и получить доступ к clientId. Первоначального access_token, полученного этим пакетом, хватит всего на один час (из соображений безопасности). И нам нужно повторить процесс, чтобы получить доступ к новому access_token, используя refresh_token. Таким образом, вы можете создать готовое к эксплуатации приложение.
Шаги
- Нам нужно создать приложение в консоли разработчика Google. Он предоставляет
clientId, который используется для идентификации вашего приложения для деталей аутентификации. Выполните следующие шаги, чтобы получить идентификатор клиента.
- Перейдите на страницу учетных данных. (если вы новичок, то создайте проект и выполните следующие действия)
- Нажмите Создать учетные данные ›Идентификатор клиента OAuth.
- Выберите тип Веб-приложение.
- Назовите свой клиент OAuth 2.0 и нажмите Создать.
- Убедитесь, что вы указали свой домен и URL-адрес перенаправления. Таким образом, Google определяет исходный домен, для которого он может предоставить аутентификацию.
Вы также можете добавить свой локальный маршрут для разработки. Теперь настройка аутентификации в консоли разработчика Google готова.
Позволяет код
Начнем с кода. Просмотреть мое репо для доступа ко всем фрагментам кода. Посмотреть Демо.
В вашем CRA установите react-google-login пакет
Создайте Login компонент, который действует как кнопка входа в систему.
Аналогичным образом создайте компонент Logout.
И добавьте оба в нужное место вашего приложения. Мой находится в App.js
Теперь, когда ваше приложение запущено, после входа в систему в консоли будет отображаться profileObj.
Поздравляю Вы успешно сделали это 😃.
Но через 1 час срок действия вашего tokenId истекает, и, следовательно, он не будет использоваться для доступа к данным или аутентификации пользователей. Следовательно, нам нужно сгенерировать новый tokenId. Чтобы все работало, нам нужно, чтобы все работало, мы должны добавить несколько дополнительных кейсов в компонент Login.
refreshTokenSetup функция позаботится об обработке новых tokenIds
Эта функция проверяет expires_in метку времени или наше пользовательское время (до истечения срока действия токена) и вызывает reloadAuthResponse, служебную функцию, предоставляемую библиотекой, которая обрабатывает refresh_token и получает новый tokenId.
И да Логин Google успешно добавлен в ваше приложение 🎉. Итак, теперь вы можете получить доступ к имени пользователя, URL-адресу фотографии, электронной почте, идентификатору Google и т. Д.
Дополнительный
Вышеупомянутый способ использует кнопку входа в Google по умолчанию. Вы также можете использовать свою настраиваемую кнопку, используя render prop.
Мы также можем реализовать ту же функцию с помощью React Hooks ❤️
LoginHooks.js
LogoutHooks.js
Проверка на стороне сервера
Если вы хотите добавить проверку на стороне сервера, отправьте tokenId от клиента к серверу один раз onSuccess в Login вызываемом компоненте.
Таким образом, при обработке аутентифицированных маршрутов все запросы от клиента должны отправлять tokenId пользователя в заголовке как токен носителя. На сервере после получения токена необходимо проверить это tokenId
- принадлежит текущему приложению.
- Срок действия истек
Вы можете сделать это вручную, но Google предлагает использовать свою библиотеку аутентификации (требуется минимум усилий).
На стороне сервера (здесь используется Node.js).
Установите пакет google-auth-library официальной поддерживаемой библиотеки Google, который используется для аутентификации и проверки приложений OAuth.
Здесь, с нашим GOOGLE_CLIENT_ID отправленным, он проверяет, принадлежит ли этот токен нашему приложению или нет. И он анализирует их и предоставляет детали профиля в функции getPayload. И вы можете использовать их для доступа к пользовательским данным.
Любые запросы не стесняйтесь комментировать или общаться со мной лично в моих учетных записях в социальных сетях ниже.
Я люблю общаться с разработчиками. 😃
