Аутентификация Google, токены доступа и токены обновления для использования API
Это руководство по аутентификации и обработке токенов доступа Google для использования API. В качестве примера я буду использовать Google Calendar API.
Вы узнаете основы аутентификации в Google, возврата токенов, хранения токенов доступа, использования токенов для доступа к API, обработки токенов обновления и проверки того, не истек ли срок действия токена, чтобы либо получить новый токен доступа, либо используйте старый.
Я также пишу электронную книгу, чтобы поделиться всем, что я узнал об API Google с нуля! Пожалуйста, дайте мне знать, если вы заинтересованы :)
«React и API Google
Научитесь управлять API Google с нуля: аутентификация, управление электронными таблицами, Календарь Google, токен…react-ultimate-guide-googleapis.vercel .приложение"
Требования
- Базовый React.js
- Выборка Javascript
- Базовый Node.js
Проблема
Срок действия токенов доступа Google истекает через 1 час. Это означает, что если вы пройдете аутентификацию в Google, получите токен доступа и используете его для доступа к API Календаря Google, вы сможете использовать этот токен доступа только в течение 1 часа. После этого срок действия токена истекает, и вам нужен новый.
Решение
Мы выполним аутентификацию в Google на сервере Node.js, отправим access_token и refresh_token пользователю внешнего интерфейса после завершения аутентификации и сохраним refresh_tokenв localStorage. Вы также можете сохранить это в файле пользовательской базы данных. Затем проверяйте, истек ли срок действия токена каждый раз, когда мы отправляем запрос к API Google, и обрабатывайте его соответствующим образом.
Шаги перед запуском
- Создайте новое приложение React
- Создайте новый сервер Node.js с помощью Express.js.
Настройка проекта
Я создал папку с именем google-auth-tokens, затем создал внутри приложение React с именем client и приложение Node.js с именем server. Затем я установил на сервер зависимости express, googleapis, cors и dotenv.
Вы можете скопировать следующие команды для настройки проекта.
mkdir google-auth-tokens && cd google-auth-tokens
npx create-react-app client && touch client/src/tokens.js && touch client/src/calendarApi.js
mkdir server && touch server/index.js && touch server/.env && cd server && npm init -y && yarn add express dotenv googleapis cors [email protected] body-parser
Вот и вся настройка структуры проекта!
Клиент React:
Давайте перейдем непосредственно к коду. В основном в клиентском приложении есть 3 шага.
- Войдите и получите учетные данные обратно из Query Params
- Хранить учетные данные токена в sessionStorage
- Обрабатывать просроченные и неистекшие токены при отправке запросов API
В App.js запустите аутентификацию с помощью кнопки Войти, которая вызывает функцию createGoogleAuthLink. Это создает ссылку на вашем сервере, отправляет ссылку аутентификации обратно клиенту и перенаправляет приложение React на ссылку аутентификации Google в случае успеха.
После аутентификации в Google необходимо отправить другую ссылку, содержащую токен доступа и токен обновления. Это будет обработано в ловушке useEffect с помощью функции с именем handleTokenFromQueryParams() и зарегистрирует пользователя.
Теперь мы обработаем запросы календаря и истечение срока действия токена.
Доступ к управлению токенами на клиенте
Мы создадим систему управления токенами, которая будет учитывать время истечения срока действия и всегда будет получать действительный access_token.
В файле tokens.js мы создадим функцию getToken(). Что он делает, довольно просто:
Функция проверяет, не истек ли срок действия токена.
Если он истек срок действия, он получает новый токен с сервера, используя refresh_token, хранящийся в sessionStorage. Он также устанавливает новый access_token и новый expireDate в sessionStorage.
Если он не просрочен, мы возвращаем текущий сохраненный токен доступа.
Все это происходит после того, как пользователь прошел аутентификацию хотя бы один раз.
Теперь все, что нам нужно сделать, это вызвать API Календаря Google с токеном, возвращенным из getToken(). Мы сделаем это в файле с именем calendarApi.js.
Подробнее о функциях REST API Календаря Google можно прочитать здесь https://developers.google.com/calendar/api/v3/reference.
Большой! Вы настроили клиент. Теперь давайте настроим проект Google, чтобы вы могли пройти аутентификацию на сервере.
Настройка проекта консоли Google для сервера
Чтобы пройти аутентификацию через ваш сервер, вам необходимо настроить проект консоли Google.
Создайте новый проект здесь:
Включите API календаря Google в API и службах -> Библиотека. Найдите API календаря.
Настройте разрешенные маршруты доступа на экране согласия OAuth, а также маршруты перенаправления на консоли. Сначала вам нужно перейти к API и службам и создать настройки для внешнего использования:
Когда вы дойдете до раздела областей на экране согласия OAuth, обязательно добавьте область Google Calendar API.
Нажмите «Сохранить» и «Далее» через Необязательная информация и Сводка.
Теперь настройте идентификатор клиента аутентификации на странице Учетные данные:
Наконец, на вкладке Учетные данные настройте его как веб-приложение и перенаправляйте на правильные маршруты при входе.
Внимание: вам нужно обработать успешный вход в Google по маршруту GET, который мы назовем /handleGoogleRedirect. Вот как вы можете направить сервер обратно к вашему клиенту с помощью токенов в URL-запросе.
Убедитесь, что вы нажали Опубликовать приложение. В противном случае вы не сможете войти в систему.
После этого шага вы получите свой идентификатор клиента и секрет. Вы будете использовать оба на следующем шаге.
Конфигурация проекта Node.js
Добавьте свой идентификатор клиента и секрет в файл .env на сервере Node.js.
Если вы настроили это правильно, добавьте следующий код в index.js и запустите свой сервер.
Аутентификация
Теперь запустите приложение React и сервер Node.js одновременно. В клиенте нажмите кнопку «Войти». Вы попадете на экран входа в Google, который обрабатывается сервером.
Предупреждение
Вы увидите экран с предупреждением от Google при авторизации, потому что вы используете конфиденциальные области (Календарь Google). Вам нужно будет подтвердить это с Google, если вы хотите опубликовать его. Чтобы сэкономить время, мы проигнорируем его, нажав последнюю кнопку «Перейти к токенам аутентификации (небезопасно)» в нижней части предупреждающего сообщения.
Вы должны увидеть надпись «Перейти к токенам аутентификации» над этим текстом.
Разрешите приложению доступ к вашему календарю и нажмите Продолжить.
Объяснение кода сервера
После предоставления приложению доступа к вашему календарю вы будете перенаправлены на localhost:8080/handleGoogleRedirect с кодом доступа Google. Это не токен доступа к API, это код, который идентифицирует вас как пользователя, выполнившего вход в Google. Вы можете использовать этот код для получения токенов.
С помощью пакета googleapis мы можем получать токены с помощью кода, полученного от Google с помощью функции getToken. Это обеспечивает access_token и refresh_token.
Мы можем отправить их обратно клиенту с ответом:
Вызов res.redirect(client:refreshToken,accessToken,expirationDate) (строка 48 server/index.js).
Если вы сделали это правильно, вы будете перенаправлены на ваш клиент React по адресу localhost:3000.
Затем просто нажмите кнопку «Получить календари Google», и вы должны увидеть, как это распечатывается в консоли!
И готово! Теперь у вас есть успешно работающий процесс аутентификации с токенами доступа, срок действия которых не истекает.
Вы можете получить доступ к репозиторию здесь:
Пару недель назад я создал решение, целью которого было поделиться тем, как я исправил эту проблему с Firebase. Это был расширенный учебник, но вы поймете его лучше, если заранее прочитаете текущую статью.
Вы можете проверить это здесь:
Пожалуйста, дайте мне знать, если у вас есть какие-либо вопросы/предложения по адресу [email protected], будем рады помочь.
Я создаю платформу финансового образования для средних школ под названием Snowball. Вы можете проверить это здесь:
Спасибо и как всегда,
