Изучение Google Fit API с аутентификацией Google OAuth-2 с помощью React Hooks в забавном побочном проекте Javascript.
Хотите улучшить свои навыки реагирования и интеграции API? Следующий проект: Fit Me Up! - это скучное детище, в основе которого лежат вышеупомянутые технологии, и я объяснил все, чему я научился за время разработки этого проекта!
Что такое Fit Me Up и кто может им пользоваться? 🤔
Это мини-панель визуализации, которая извлекает ваши еженедельные данные Google Fit и дает вам сводку по следующим пунктам.
- Минуты движения
- Очки кардиотренировок
- Сожженные калории
- Пройденное расстояние
Вот онлайн-демо!
Чтобы получить значимый результат, вы должны установить приложение Google Fit в своем приложении для Android / вы должны разрешить своим часам Android отслеживать данные о вашем местоположении, только тогда эти точки данных будут фактически записаны, и вы получить доступ к нему на панели инструментов Fit Me Up, войдя в свою учетную запись Google.
Что такое стек технологий? 💻
- API Google Fit и Google OAuth2
- Шаблон CRA
- Реагировать на хуки
- Универсальные файлы cookie
Соответствующие ссылки на проект 🔗
Не хотите читать все положительные моменты и сразу переходить к проекту? Без вопросов. Вот соответствующие ссылки, которые могут быть вам полезны:
Репозиторий Github: https://github.com/uds5501/fitmeup-oauth-visualizer
Живая демонстрация: http://fitmeup.netlify.com/
Детали реализации✨
Вау, ты все еще здесь! Ладно, в таком случае позволь мне дать тебе хороший материал. Важные выводы перечислены ниже, и я буду рассматривать их один за другим:
- Интеграция Google OAuth 2 с React Hooks
- Использование файлов cookie для сохранения аутентификации
- Получение данных за неделю из Google Fit.
Итак, давайте теперь перейдем к этим реализациям одну за другой (PS: детали диаграммы улучшат этот пост, и я действительно не хочу сильно загромождать этот пост, поэтому давайте сосредоточимся на рабочем процессе того, как данные передаются. и обработаны в вашем приложении)
Интеграция Google OAuth 2 с React Hooks 👨🏫
Fit Me Up - это панель управления визуализацией, поэтому для ее визуализации обязательно нужны данные. Теперь мне нужны данные конкретного пользователя для получения из Google Fit API. Чтобы указать этого конкретного пользователя, мне нужны его учетные данные и токен доступа, так как же нам это получить?
Ответ прост: аутентификация.
Я использовал npm-пакет response-google-login, чтобы упростить процесс аутентификации. Все, что мне нужно было сделать здесь, это установить состояние реакции, в котором хранится, вошел ли мой пользователь в систему или нет, и токен доступа. В нашем приложении этот токен доступа имеет первостепенное значение и является той самой причиной, по которой мы в первую очередь реализуем аутентификацию, получение этого токена доступа.
Чтобы использовать response-google-login, все, что я сделал, это создал два обработчика входа и выхода, определил объем информации, которую я буду запрашивать у пользователей, и все!
UseEffect, SetCookie и DeleteCookie на данный момент следует игнорировать, кроме этого, функции входа в систему и выхода из системы обрабатывают свои соответствующие роли, а две другие функции обрабатывают отказ при входе в систему и выходе из системы. Во время входа в систему я настраиваю состояние пользователя на сохранение информации из ответа и устанавливаю для haslogin значение true.
На изображении выше показано, как GoogleLogin и GoogleLogout использовались для достижения нашей кнопки аутентификации. В кнопке GoogleLogin вам нужно будет ввести CLIENT_ID (с панели инструментов Google OAuth2) и указать объем информации, которую вы хотите помимо обычных сведений о пользователе.
Использование файлов cookie для сохранения аутентификации 🍪
Ура! Вы завершили аутентификацию, ваш пользователь вошел в систему, теперь вы нажимаете «Обновить», чтобы отпраздновать, но подождите, почему отображается «Вход», разве я только что вошел в систему?
Обновление означает, что ваше приложение перезагрузится, что просто означает, что вы только что потеряли все свои данные и, следовательно, вы потеряли токен доступа, поэтому ... вам нужно снова и снова входить в систему, когда вы нажимаете кнопку обновления или истекает срок действия вашего токена. Утомительно, правда?
Чтобы исправить это, нам нужно сохранить данные аутентификации пользователя где-нибудь постоянно, в базе данных? звучит как излишество. Как насчет локального хранилища браузера или файлов cookie? Я пошел с печеньем и позвольте мне рассказать вам, почему.
Кстати, а почему куки?
Файлы cookie создаются именно для этой цели, чтобы хранить данные пользователя, чтобы пользователю не приходилось повторно идентифицировать себя, и приложение могло предоставить ему / ей соответствующую информацию. Кроме того, в качестве вишенки наверху вы можете настроить срок хранения файлов cookie через определенное время. Обратите внимание, что ваш токен доступа истекает через 60 минут, поэтому давайте также проследим за тем, чтобы срок действия наших сохраненных пользовательских данных истек через 60 минут! Это можно легко сделать с помощью файлов cookie.
Я использовал universal-cookie для обработки части реализации файлов cookie. Функция SetCookie сохраняет файлы cookie для нескольких пользовательских полей, которые мы получаем при аутентификации. Функция Delete Cookie удаляет их, в то время как функция hasCookie () считывает информацию о пользователе при каждой перезагрузке приложения, чтобы мы могли определить, вошел ли пользователь в систему или нет.
Эта реализация в вашем базовом приложении гарантирует, что при каждой перезагрузке ваше приложение не вернется в состояние, не прошедшее проверку подлинности.
Получение данных за неделю из Google Fit 🏃♀️
Теперь наше приложение стабильно с точки зрения перезагрузки, поэтому перейдем к следующей части, которая извлекает данные с серверов Google Fit. У них потрясающий REST API, и вы можете прочитать его документацию прямо здесь.
В HTTP-запросе есть заголовки и тело запроса, в котором указывается, какие именно данные нам нужны от обслуживающей конечной точки. Для этого я реализовал следующие помощники, чтобы получать заголовок и тело запроса на ходу.
Важно отметить, что в теле запроса я планирую запрашивать информацию в течение 7 дней и хочу, чтобы данные за определенный день хранились в определенной корзине. Для этого я указываю в своем запросе, что мне нужны данные bucketByTime, а также длительность 86400000 миллисекунд (24 часа).
Мы используем 4 вызова данных именно для хранения 4 точек данных, которые я хочу отобразить. Теперь каждый такой вызов выполняется асинхронно с использованием наших классических шаблонов axios .then ().
Здесь я хочу обратить ваше внимание на некоторые важные вопросы, которые необходимо задать в этой реализации.
Что здесь делают куки? 🔁
Я использую состояние (скажем, состояние панели инструментов), в котором все обработанные данные будут храниться внутри приложения. Теперь ваше тело запроса будет меняться каждую миллисекунду (из-за того, что ваше текущее время изменяется при каждой перезагрузке), поэтому ваш тело ответа также будет меняться каждую миллисекунду, это будет означать состояние вашей панели инструментов никогда не будет прежним, и приложение будет запрашивать автоматическое обновление каждую миллисекунду и зависнет в бесконечной перезагрузке.
Чтобы решить эту проблему, я использую файл cookie, в котором хранится, когда мы в последний раз получали эти данные из API, и мы не будем получать их снова, пока не истечет срок действия файла cookie.
Это решает вашу бесконечную проблему перезагрузки панели инструментов.
Что это за обратный вызов (состояние) там? 🤯
Функции callback () - это прелесть.
Предположим, вам нужно изменить состояние родительского компонента в соответствии со свойствами определенных данных в дочернем компоненте, тогда как бы вы это сделали?
Вуаля, используйте функции обратного вызова. Позвольте мне показать вам, что я здесь сделал.
Это то, что происходит, когда загружается ваша родительская функция, она говорит, что любой массив, переданный в функцию с именем «state», должен быть установлен как состояние weekData, и мы передаем эту функцию callBack в getWeeklyData, которая является служебной функцией.
Теперь, когда вся обработка завершена и все обещания выполнены, мы вызываем нашу функцию callBack () и устанавливаем состояние Dashboard для этого только что обработанного массива.
В этом, друг мой, красота callback () функции.
Завершение рабочего процесса обработки данных ⏳
Я знаю, знаю, он был длинным и описательным, но на самом деле в этом и заключался весь смысл, чтобы сделать его длинным и описательным! Это было ядром того, как данные извлекаются и передаются между служебными функциями и основными компонентами!
Вы можете найти код в приведенной выше ссылке на репозиторий Github, и он достаточно информативен, чтобы показать, как все это вписывается в реальное приложение. .
