Авторизация с помощью Google Sign In

Задача урока: успешная авторизация пользователя через google аккаунт.

Условия выполнения: отображение информации из профиля + токен юзера.

Видео-версия

Подготовка

Для авторизации потребуется «приложение» google и проект на localhost (create-react-app подходит без проблем).

Откройте https://console.developers.google.com/apis/ и примите условия использования.

google приложения условия использования

Создайте новый проект:

google приложения новый проект

После создания ваш проект будет выбран автоматически (если он единственный). Пройдите в раздел Credentials.

проект создан

Далее нужно создать OAuth client ID, выбрать тип приложения Web Application и добавить разрешенный домен, с которого вы будете выполнять запросы. Инструкция в картинках ниже.

выбрать oauth client id

создать oauth client id

получить google sign in key

В конечном счете, у вас будет ключ (client ID):

XXX.apps.googleusercontent.com

Разработка

План:

  • развернуть create-react-app (в статье не обсуждается);
  • добавить скрипт google api;
  • разобраться с документацией;
  • залогинить пользователя.

После успешного запуска create-react-app второй версии, в браузере можно увидеть следующее:

главная страница create-react-app-2

Создайте в корне файл .env , в котором будет храниться ваш CLIENT_ID ключ, добавьте этот файл в .gitignore, если планируете использовать git.

.env

Все, что начинается с REACT_APP_ в cra будет доступно через process.env, например: process.env.REACT_APP_GOOGLE_CLIENT_ID вернет ваш ключ из «секретного» файла. Подробнее в статье (англ).

Добавьте на главную страницу в head скрипт от google.

public/index.html

<script src="https://apis.google.com/js/platform.js" async defer></script>

Теперь взглянем в документацию, в раздел Home (не торопитесь добавлять все, что выделено)

google sign in документация

Как видите, помимо скрипта в примере присутствуют и другие «инструкции» для корректной работы. Но проблема в том, что такое поведение не подойдет для react-приложения. Поэтому, мы добавляем только скрипт, а все остальное будем делать с помощью методов API, которые описаны на вкладке Reference.

Документацию желательно, если не прочитать, то хотя бы неспешно прокрутить и прочесть заголовки, так как, вы должны ориентироваться в первоисточнике.

Добавляем авторизацию через google в сreate-react-app

Остался последний пункт плана — «залогинить пользователя». Для этого, разобьем его на шаги:

  • инициализировать модуль gapi.auth2;
  • добавить функцию-обработчик на логин и на логаут;
  • вывести информацию о пользователе после успешного логина в консоль;
  • [бонус] оформить информацию на странице приложения, добавить красоты.

Для выполнения пунктов, нам понадобятся следующие методы:

  • gapi.auth2.init(params) — для инициализации (будем использовать в componentDidMount). Понадобится ваш ключ (client ID)
  • gapi.auth2.getAuthInstance() — чтобы получить объект GoogleAuth, который умеет:
    • GoogleAuth.signIn() — проивзодить логин
    • GoogleAuth.signOut() — производить логаут

Все методы взяты из документации, где вы можете ознакомиться и с другими полезными функциями.

Удалим лишнее из компонента <App /> и добавим необходимое:

(внимание, крутящееся лого реакта может перекрывать ваши элементы, и они будут не кликабельны)

src/App.js

Проверим, что в консоли:

инициализация google auth

По клику на Log in появится всплывающее окно

модальное окно google sign in

После выбора профиля — в консоль «упадет» информация из профиля

данные об google аккаунте пользоваателя


Комментарии по коду для «совсем новичков»: после добавления скрипта от google, у нас появился глобальный объект gapi, который лучше вызывать как window.gapi, чтобы программист, который читает ваш код не искал где объявлена переменная gapi.

Далее в cdm и в обработчиках signIn/signOut используется стандартный подход, когда в promise возвращается либо информация об объекте в случае успеха, либо ошибка.


Воспользуемся state и «подкрутим» пример:

src/App.js

src/User.js

Результат:

Удачный вход через google auth


Итоги

Мы научились использовать механизм входа «через google». В данный момент у нас есть возможность вытащить token, с помощью которого можно выполнять запросы к Google API. Также токен можно передавать на свой бэкэнд и там его «расшифровать». Это рекомендуемый способ, так как передавать ID пользователя или прочую информацию — небезопасно.

Исходный код

Понравилась статья? Поделиться с друзьями:
Добавить комментарий

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!: