Logto x Hasura: Как использовать открытое ПО для аутентификации + решение GraphQL, чтобы ускорить ваш проект
В этой статье мы сосредоточимся на подключении Logto и Hasura, что позволяет реализовать аутентификацию, авторизацию и GraphQL API без затруднений. Таким образом, вы можете быстро приступить к своему бизнесу, не изучая сложные технологии.
GaoFounder
Хватит тратить недели на аутентификацию пользователей
Запускайте безопасные приложения быстрее с Logto. Интегрируйте аутентификацию пользователей за считанные минуты и сосредоточьтесь на вашем основном продукте.
Когда дело касается нового проекта, обычно невозможно пропустить несколько вещей: API, аутентификация + авторизация, идентификация и процесс входа конечного пользователя. Раньше это было трудно запустить, потому что существует много концепций и технологий, которые широко распространены: RESTful/GraphQL, веб-фронтенд, нативный клиент, подключение клиентов к API, лучшие практики аутентификации для балансировки безопасности и пользовательского опыта и т.д.
Также большая часть работы является "повторяющейся". Я имею в виду, что они необходимы и схожи почти для каждого проекта, с некоторыми изменениями.
Звучит страшно и утомительно? Не паникуйте. Сегодня у нас есть открытый исходный код. С двумя проектами с открытым исходным кодом ниже, все несложно:
Logto: помогает создать процесс входа, аутентификации и идентификации пользователя за считанные минуты.
Hasura: мгновенные реальные GraphQL API на вашем DB с тонко настроенным контролем доступа.
В этой статье мы сосредоточимся на подключении Logto и Hasura, что позволяет реализовать аутентификацию, авторизацию и GraphQL API без затруднений. Таким образом, вы можете быстро приступить к своему бизнесу, не изучая сложные технологии.
Поскольку и Logto, и Hasura имеют хороший руководства по началу работы, мы предполагаем, что вы их прочитали и имеете общее представление. Необходим доступ к работающему экземпляру обоих.
Мы предполагаем, что доступные конечные точки такие:
Logto: http://localhost:3001
Hasura: http://localhost:8080
Также мы предполагаем, что у вас есть предпочтительная платформа и фреймворк для создания клиентского приложения, например, React или Next.js.
На левой панели навигации вашей админ-консоли Logto нажмите "API Resources" и вы увидите страницу управления ресурсами API.
Затем нажмите большую кнопку "+ Create API Resource" в правом верхнем углу. В открывшейся модальной окне введите Hasura в качестве имени API и https://hasura.api в качестве идентификатора API.
Мы будем использовать этот идентификатор API в остальной части нашей статьи. Но не стесняйтесь изменять значения в зависимости от ваших предпочтений.
Нажмите "Create API Resource", и появится сообщение о том, что ресурс успешно создан. Это все, что нам нужно в Logto на данный момент.
Hasura использует управление доступом на основе ролей, которое обрабатывает авторизацию. Поэтому нам нужно только разобраться с аутентификацией. Она поддерживает два метода: Webhook и JWT. Мы выбираем webhook, так как это более гибкий вариант.
Чтобы включить аутентификацию webhook, необходимо настроить секрет админа и конечную точку auth hook.
Секрет админа — это ключ для получения администраторского доступа к Hasura при отправке запросов. Он необходим перед включением аутентификации webhook. Запомните его и не используйте в производственной среде.
Конечная точка auth hook — это URL-адрес для отправки запросов на аутентификацию.
Вы могли заметить, что мы используем идентификатор API, указанный в Logto, чтобы сформировать конечную точку auth hook. Это гарантирует, что пользователь передает правильный токен вместо случайного, который может быть злонамеренным.
Вам нужно обновить конечную точку auth hook, если у вас есть другая конечная точка Logto или индикатор API. Например, у вас есть https://logto.domain.com в качестве конечной точки Logto и https://graphql.domain.com в качестве идентификатора API, тогда это будет:
С этого момента для каждого запроса GraphQL Hasura будет передавать все заголовки запроса на конечную точку Logto auth hook, и Logto будет отвечать соответствующим образом.
Поскольку мы не будем использовать секрет админа Hasura в производственной среде, каждый запрос GraphQL защищен следующими заголовками:
Authorization Стандартный токен типа bearer, который генерирует Logto.
Expected-Role Роль, которую вы хотите, чтобы Logto показал в ответе auth hook.
Заголовок Authorization требует действительного токена доступа в формате JWT с индикатором API Hasura в качестве аудитории. Но это достаточно трудно запомнить и составить все эти вещи. К счастью, у нас есть SDK Logto, который упрощает сложную часть.
Следуйте руководству по интеграции для интеграции Logto SDK в ваше клиентское приложение. Это позволяет не только создать действительный токен доступа для запросов GraphQL, но и обеспечить плавный процесс входа для ваших конечных пользователей.
После завершения руководства нужно одно небольшое изменение в LogtoConfig: добавьте индикатор API, который вы создали в admin консоли Logto, в resources. Пример для React SDK:
Наконец! После того как пользователь вошел в систему, используйте getAccessToken() в Logto SDK, чтобы получить токен доступа для запросов Hasura GraphQL:
С приложенными усилиями мы успешно реализовали все необходимые вещи, указанные во введении:
Точная GraphQL конечная точка с управлением схемой базы данных
Сервис аутентификации и идентификации на основе протокола OIDC
Полный процесс входа конечного пользователя и управление состоянием аутентификации
Защищенный доступ к API на основе идентификации пользователя и ролей
Не так уж сложно, правда? Если вы столкнулись с какими-либо проблемами, присоединитесь к серверу discord Logto или Hasura, чтобы пообщаться с командой вживую.
