Logto x Hasura: Как использовать открытое ПО для аутентификации + решение GraphQL, чтобы ускорить ваш проект

Введение#

Когда дело касается нового проекта, обычно невозможно пропустить несколько вещей: 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.

Настройка API в Logto#

На левой панели навигации вашей админ-консоли Logto нажмите "API Resources" и вы увидите страницу управления ресурсами API.

Затем нажмите большую кнопку "+ Create API Resource" в правом верхнем углу. В открывшейся модальной окне введите Hasura в качестве имени API и https://hasura.api в качестве идентификатора API.

Мы будем использовать этот идентификатор API в остальной части нашей статьи. Но не стесняйтесь изменять значения в зависимости от ваших предпочтений.

Нажмите "Create API Resource", и появится сообщение о том, что ресурс успешно создан. Это все, что нам нужно в Logto на данный момент.

Создание роли для Hasura#

Чтобы воспользоваться управлением разрешениями Hasura, мы создадим роли в Logto, которые будут сопоставлены с ролями Hasura.

Не забудьте назначить роль пользователям.

Включение аутентификации вебхука в Hasura#

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 будет отвечать соответствующим образом.

Отправка защищенных запросов GraphQL#

Резюме#

Поскольку мы не будем использовать секрет админа Hasura в производственной среде, каждый запрос GraphQL защищен следующими заголовками:

• Authorization Стандартный токен типа bearer, который генерирует Logto.
• Expected-Role Роль, которую вы хотите, чтобы Logto показал в ответе auth hook.

Заголовок Authorization требует действительного токена доступа в формате JWT с индикатором API Hasura в качестве аудитории. Но это достаточно трудно запомнить и составить все эти вещи. К счастью, у нас есть SDK Logto, который упрощает сложную часть.

Интеграция Logto SDK#

Следуйте руководству по интеграции для интеграции Logto SDK в ваше клиентское приложение. Это позволяет не только создать действительный токен доступа для запросов GraphQL, но и обеспечить плавный процесс входа для ваших конечных пользователей.

После завершения руководства нужно одно небольшое изменение в LogtoConfig: добавьте индикатор API, который вы создали в admin консоли Logto, в resources. Пример для React SDK:

Отправка запросов#

Наконец! После того как пользователь вошел в систему, используйте getAccessToken() в Logto SDK, чтобы получить токен доступа для запросов Hasura GraphQL:

Подводим итоги#

С приложенными усилиями мы успешно реализовали все необходимые вещи, указанные во введении:

• Точная GraphQL конечная точка с управлением схемой базы данных
• Сервис аутентификации и идентификации на основе протокола OIDC
• Полный процесс входа конечного пользователя и управление состоянием аутентификации
• Защищенный доступ к API на основе идентификации пользователя и ролей

Не так уж сложно, правда? Если вы столкнулись с какими-либо проблемами, присоединитесь к серверу discord Logto или Hasura, чтобы пообщаться с командой вживую.