В этой следующей части серии я расскажу вам о реализации входа в Google с помощью простого приложения для реагирования и примера бонусного маршрутизатора реакции.

РЕДАКТИРОВАТЬ 2020–05–01: Я провел живое пошаговое руководство по программированию этого поста, чтобы выделить некоторые ошибки, которые необходимо исправить, чтобы успешно реализовать.

До сих пор мы видели два разных примера, привет, мир, как добавить вход в Google во внешнем интерфейсе - с использованием простого HTML и ванильного JS. Все это было красиво и модно для приветственного мира, но кое-что, чего мне не хватало, пока я разбирался в системе входа в Google, - это то, как выглядит рабочая реализация, особенно в React.

* Существует компонент react-google-login, который настраивает все входы в Google с помощью тега <GoogleLogin>. Это очень полезно, и я использовал его в нескольких случаях - моя единственная жалоба заключается в том, что вы не можете получить значение, возвращаемое методом gapi.auth2.init(). Этот пост покажет, что происходит под обложками, если вы предпочитаете не использовать библиотеку.

создание нового приложения React с входом в Google

Сначала создайте приложение create-react-app google-auth-demo. В основном мы будем работать с файлами App.js и index.html.

Добавьте тег скрипта входа в Google в свой public/index.html

добавить кнопку входа в систему

В App.js - добавьте состояние, чтобы отслеживать, когда пользователь вошел в систему

Добавьте кнопку в компонент

Подождите, как мне этого не показывать, если пользователь вошел в систему? Мы можем использовать состояние, чтобы условно показать это.

На этом этапе у вас будет кнопка, которая ничего не делает (лучший тип кнопки), и вы увидите сообщение «Вы не вошли в систему».

добавить вход

Чтобы завершить настройку входа в Google, вам нужно инициализировать библиотеку с помощью gapi.auth2.init(). Хорошее место для этого - внутри обратного вызова componentDidMount().

Чтобы использовать стиль по умолчанию, используйте метод gapi.signin2.render при инициализации компонента.

При использовании этого метода кнопка автоматически покажет, вошли ли вы в систему, но обратный вызов onSuccess фактически не запустится, если пользователь не щелкнет его, когда он говорит «Войти». В противном случае вы автоматически войдете в систему. Один из способов подключиться к концу этого процесса автоматического входа - добавить обратный вызов к обещанию, возвращаемому gapi.auth2.init:

Https://gist.github.com/78f401f3a03dc39f41b19410e829698d

создание «защищенного» маршрута

Если вы используете response-router и хотите добавить «защищенный» маршрут в свое приложение React, вы можете перехватить render опору <Route>. Вы можете сделать что-то вроде этого:

Подключившись к свойству рендеринга на <Route>, вы можете динамически определять, какой компонент будет загружаться, когда вы попытаетесь получить доступ к этому маршруту.

Это стратегия, используемая библиотекой react-private-route project, чтобы ее было немного легче писать, и ее определенно стоит проверить.

заключение

Если вы реализуете вход через Google в приложении React, ознакомьтесь с разделом my github repo intricatecloud / google-sign-in-demo, чтобы увидеть весь приведенный выше код в рабочей настройке.

В этой серии из трех частей мы рассмотрели переход от приветственного примера входа в систему google к использованию библиотеки javascript для совершения некоторых взломов. Мы рассмотрели весь код, необходимый для интеграции с кнопкой входа в Google.

Первоначально опубликовано на www.intricatecloud.io.