Этот блог — вторая часть серии, в которой я рассказываю о своем путешествии в программе Google Summer of Code, о некоторых советах, уроках и некоторых дизайнерских решениях, которые мы (я и мой наставник) приняли для создания проекта EmbeddedChat.
Итак, время пришло, первая оценка приближается (25 — 29 июля). Я и взволнован, и нервничаю одновременно. Но давайте сначала поговорим об обычном.
EmbeddedChat до сегодняшнего дня (23 июля)
Добавление аутентификации Google Single sign-on в EmbeddedChat
Мы решили использовать SSO Auth, поскольку люди, посещающие веб-приложения, всегда торопятся. Они не хотят проходить множество шагов регистрации или даже указывать свои учетные данные. Поэтому мы выбрали этот подход, т.е. если кто-то впервые посещает веб-приложение и не имеет аккаунта в экземпляре RocketChat этой компании, то он может просто нажать кнопку «Войти с помощью Google», и аккаунт будет создан для него. Кроме того, если у кого-то уже есть аккаунт в соответствующем экземпляре RocketChat, то он также может войти в систему одним щелчком мыши.
Сначала кажется, что это просто, но потребовалось много исследований. Сначала я подумал, что должна существовать библиотека, которую я мог бы использовать, верно? Ближе всего я нашел библиотеку под названием -@react-oauth/google, но она не была совместима с тем, как конечная точка RocketChat Google OAuth обрабатывает запросы. Ему требовались acessToken и idToken, но здесь при успешном входе мы могли получить либо accessToken, либо объект code. idToken — это JWT-хэшированная версия объекта code. Подробнее об этом можно прочитать здесь. Поэтому после некоторого исследования я начал реализовывать пользовательский хук, который мог бы обрабатывать это с помощью обычного gapi-скрипта с нуля.
Но в gapi-script появились некоторые ошибки/предупреждения. Поэтому я исправил код и опубликовал собственную библиотеку на его основе.
Создал исправленную версию библиотеки gapi-script под названием gapi-cjs.
Итак, я исправил предупреждения use of eval, jest — test failed error, this is set to be undefined error и опубликовал библиотеку. Я использовал ее внутри EmbeddedChat для создания пользовательского хука.
// src/hooks/useGoogleLogin.js
import { gapi } from 'gapi-cjs';
import { useState, useEffect } from 'react';
export const useGoogleLogin = (GOOGLE_CLIENT_ID) => {
...
const signIn = async () => {
const auth = await gapi.auth2.getAuthInstance();
await auth.signIn();
const { access_token, id_token } = await auth.currentUser
.get()
.getAuthResponse();
return { access_token, id_token };
};
...
return { user, signIn, signOut };
};
В функции signin мы возвращаем accessToken, а также idToken, которые были необходимы для вызова конечной точки Google OAuth в RocketChat.
Была еще одна оговорка, с которой мы столкнулись: RocketChat запрашивает имя пользователя, когда пользователь регистрирует аккаунт. Поэтому мы решили и этот случай. Подробнее об этом вы можете прочитать здесь — Глава: Аутентификация.
Анонимный режим
Итак, у компонента будет свойство anoynmousMode. Если разработчик или компания, использующая EmbeddedChat, хочет, чтобы пользователи могли читать сообщения, даже не входя в систему, то они могут установить anonymousMode в true и включить анонимное чтение в своем экземпляре RocketChat.
PRs Merged or under review
- RocketChat/EmbeddedChat — NEW: AUTH (google SSO)
- RocketChat/Rocket.Chat.js.SDK — Исправление: предупреждения eval, исходящие от js-sha256
Поднятые вопросы
- RocketChat/Rocket.Chat — Пользователь может отправить сообщение в канал, не присоединяясь к нему
- RocketChat/Rocket.Chat.js.SDK — BUG: RC node.js SDK deps используют операторы eval
Документация
- Вики: Глава — Аутентификация
- Вики: Глава — Emoji Picker
- Вики: Корни EmbeddedChat
- PR: Документация по разработке
К концу
В конце этого месяца у нас будет полностью рабочий продукт (для демонстрации). Затем, мы будем двигаться вперед, чтобы добавить больше функций, таких как прикрепление, звезды, потоки и реакция на сообщения.
Если вы хотите подключиться:
Email: sidmohanty11@gmail.com
GitHub: https://github.com/sidmohanty11
LinkedIn: https://www.linkedin.com/in/sidmohanty11
Twitter: https://twitter.com/sidmohanty11
Проверьте проект, и если он вам понравился, вы тоже можете его отметить 🙂
https://github.com/RocketChat/EmbeddedChat