日本語
Logto x Hasura: オープンソースの認証 + GraphQL ソリューションを使ってプロジェクトを強化する方法
この記事では、Logto と Hasura を接続することに焦点を当て、認証、認可、GraphQL API をスムーズに実装する方法を説明します。そのため、複雑な学習なしにすぐにビジネスに取り組むことができます。
Gao
Founder
Founder
この記事では、Logto と Hasura を接続することに焦点を当て、認証、認可、GraphQL API をスムーズに実装する方法を説明します。そのため、複雑な学習なしにすぐにビジネスに取り組むことができます。
新しいプロジェクトを始めるとき、多くの場合いくつかのことを省略することはできません：API、認証 + 認可、アイデンティティ、エンドユーザーのサインインフローです。以前は、多くの概念や技術が広がっているため、これらのことを始めるのは難しかったです：RESTful/GraphQL、ウェブフロントエンド、ネーティブクライアント、クライアントとAPIの接続、セキュリティとユーザーエクスペリエンスのバランスを取るための認証ベストプラクティスなど。
また、ほとんどの作業は「繰り返し」です。ほぼすべてのプロジェクトで必要であり、いくつかの調整があるとはいえ、似ています。
怖くて退屈に聞こえますか？心配しないでください。今日ではオープンソースがあります。以下の二つのオープンソースプロジェクトを使用することで、物事は複雑ではなくなります：
この記事では、Logto と Hasura を接続し、認証、認可、GraphQL API をスムーズに実装する方法に焦点を当てます。そのため、複雑な学習なしにすぐにビジネスに取り組むことができます。
Logto および Hasura の双方は十分に初心者向けのガイドを持っているため、それらを読んで基本的な理解を持っていると仮定します。両者の稼働中のインスタンスへのアクセスが必要です。
アクセス可能なエンドポイントは以下と仮定します：
http://localhost:3001http://localhost:8080また、React や Next.js などのクライアントアプリケーションを構築するための好みのプラットフォームとフレームワークを持っていることを想定しています。
Logto Admin Console の左ナビゲーションサイドバーで「API リソース」をクリックすると、API リソース管理ページが表示されます。
その後、右上隅の大きな「+ API リソースを作成」ボタンをクリックします。開いたモーダルで、API 名に Hasura、API 識別子に https://hasura.api を入力します。
今後の記事でこの API 識別子を使用します。しかし、好みに応じて値を変更しても構いません。
「API リソースを作成」をクリックすると、リソースが正常に作成されたことを示すメッセージが表示されます。これで今のところ Logto で必要なすべてです。
Hasura の権限管理を活用するために、Logto にロールを作成します。これらのロールは Hasura のロールにマッピングされます。
ユーザーにロールを割り当てることを忘れないでください。
Hasura はロールベースのアクセス管理を使用します、これは認可を処理します。したがって、認証だけを考慮する必要があります。Webhook と JWT の二つの方法をサポートしています。Webhook はより柔軟なので、こちらを選びます。
Webhook 認証を有効にするためには、管理者シークレットと認証フックエンドポイントを設定する必要があります。
それらは 環境変数 を通じて設定できます：
Logto で入力した API 識別子を使用して、認証フックエンドポイントを構築していることに気づくかもしれません。これにより、ユーザーが正しいベアラートークンを渡していることを保証し、不正なトークンを防ぎます。
別の Logto エンドポイントや API 識別子がある場合は、認証フックエンドポイントを更新する必要があります。たとえば、Logto エンドポイントが https://logto.domain.com、API 識別子が https://graphql.domain.com の場合、それは以下のようになります：
今後、すべての GraphQL リクエストに対して、Hasura はすべてのリクエストヘッダーを Logto 認証フックエンドポイントに送り、Logto が適切に応答します。
生産環境では Hasura の管理者シークレットは使用しないため、すべての GraphQL リクエストは以下のヘッダーで保護されています：
Authorization Logto で生成された標準的なベアラートークン。Expected-Role 認証フックレスポンスに Logto が示すことを期待する役割。Authorization ヘッダーには、オーディエンスとして Hasura API インジケーターを持つ、有効な JWT フォーマットのアクセス トークンが必要です。待ってください - これらのことをすべて覚えて組み合わせるのはなかなか難しいです。幸いなことに、Logto の SDK でこの技術的な部分を簡略化できます。
統合ガイドに従って、クライアントアプリに Logto SDK を統合します。これにより、GraphQL リクエスト用の有効なアクセス トークンを生成する能力だけでなく、エンドユーザーのためのスムーズなサインイン体験も可能になります。
ガイドを終えたら、LogtoConfig に小さな変更が必要です：Logto Admin Console で作成した API 指標を resources に追加します。React SDK を例に取ると：
最後に！ユーザーがサインインした後、Logto SDK 内の getAccessToken() を使用して、Hasura GraphQL リクエスト用のアクセス トークンを取得します：
上記の努力により、イントロにあった省略できないすべての事項を成功裏に実装しました：
それほど難しくありませんでしたね？何か問題が発生した場合は、Logto または Hasura のディスコードサーバーに参加して、チームとライブチャットすることをお勧めします。