メインコンテンツにスキップ

Hasura

統合する前に、まずCasdoorをローカルにデプロイする必要があります。

その後、以下の手順で独自のアプリにCasdoorベースのログインページを迅速に実装できます。

Casdoorアプリケーションの設定

  1. 既存のCasdoorアプリケーションを作成するか使用します。
  2. リダイレクトURLを追加します:http://CASDOOR_HOSTNAME/login Casdoorアプリケーション設定
  3. クライアントIDをコピーします。次のステップで必要になります。

Casdoorにユーザーを追加する

アプリケーションはありますが、ユーザーはまだいません。 つまり、ユーザーを作成し、役割を割り当てる必要があります。

「ユーザー」ページに移動し、右上の「ユーザーを追加」をクリックします。 新しいユーザーを追加できる新しいページが開きます。

ユーザーページを示す画像

ユーザー名を追加し、Hasura組織を追加してユーザーを保存します(他の詳細はオプションです)。

次に、ユーザーのパスワードを設定する必要があります。これは、「パスワードを管理する」をクリックすることで行えます。

ユーザーのパスワードを選択し、確認してください。

Hasuraアプリをビルドする

DockerまたはHasura CloudでHasuraを起動します。

次に、以下の列を持つusersテーブルを作成します:

  • テキスト型のid(プライマリーキー)
  • テキスト型のusername

参考のために下の画像を参照してください。

Hasuraでテーブルを作成する方法を示す画像

次のステップは、アプリのuserロールを作成することです。 ユーザーは自分のレコードのみを見ることができ、他人のレコードは見ることができません。

下の画像に示されているようにuserロールを設定します。 For more information, read about configuring permission rules in Hasura.

Hasuraで権限を設定する方法を示す画像

この方法では、ユーザーは他人のレコードを読むことができません。 彼らは自分のものにのみアクセスできます。

テスト目的で、ダミーユーザーを追加します。 これは、JWTトークンを使用するときに、他のユーザーの詳細ではなく、自分のユーザーの詳細のみが表示されるようにするためです。

Hasuraでテーブルレコードを追加する方法を示す画像

次に、HasuraでJWT_SECRETを設定する必要があります。

CasdoorでHasuraを設定する

このステップでは、HASURA_GRAPHQL_JWT_SECRETをHasuraに追加する必要があります。

そのためには、Hasuraのdocker-compose.yamlに行き、以下のように新しいHASURA_GRAPHQL_JWT_SECRETを追加します。

HASURA_GRAPHQL_JWT_SECRETは以下の形式であるべきです。 <Casdoor endpoint>を自分のCasdoorのURL(例:https://door.casdoor.com)に変更することを忘れないでください。

HASURA_GRAPHQL_JWT_SECRET: '{"claims_map": {
"x-hasura-allowed-roles": {"path": "$.roles"},
"x-hasura-default-role": {"path": "$.roles[0]"},
"x-hasura-user-id": {"path": "$.id"}
},"jwk_url":"<Casdoor endpoint>/.well-known/jwks"}'

変更を保存し、dockerをリロードします。

HasuraにClerk JWT URLを追加する

JWTトークンを取得する

クライアント実装がないため、以下のURLでリクエストを行うことによりアクセストークンを取得できます:

http://localhost:8000/login/oauth/authorize?client_id=<client ID>&response_type=code&redirect_uri=http%3A%2F%2Flocalhost%3A8080%2Flogin&scope=read&state=app-built-in<public certificate>>

以前にコピーしたclient IDに変更し、CasdoorのCertsページで見つけることができるCasdoorの公開証明書を入力します。

その後、Hasura用に作成したユーザー名とパスワードを入力します。

「サインイン」をクリックする

JWTトークンを取得する

Casdoor/Tokenページに戻ります。

トークンページ

以前に入力したユーザー名を見つけてから、「編集」をクリックする

アクセストークンをコピーする

アクセストークン

これで、認証されたリクエストを行うためにアクセストークンを使用できます。 Hasuraはデータベースからすべてのユーザーを返すのではなく、適切なユーザーを返しました。

CasdoorからのアクセストークンがHasuraで使用されていることを示す画像