Auth0のRBACを使ってログインしたユーザーのロールによってReactを制御してみる

Auth0を使ってログインしたユーザーのロールによって、管理画面のメニューの表示非表示を制御するような実装をどうやるかがわからないので調査する

いまのところの方針

これがうまくいくかを確認する

Auth0 の管理画面での操作

1. Reactログイン用の Single Page Application を作成する
2. 認可対象となるAPIを作成する
3. 作成したAPIにパーミッションを付与する
4. APIのRBAC機能とアクセストークンにパーミッション情報を含めるにチェックする
5. ロールを作成する。
6. ロールにパーミッションを紐付ける
7. ユーザーを作成する
8. ユーザーにロールを紐付ける

React

• Auth0のユニバーサルログインでログインできるようにする
• ログインしたユーザーのアクセストークンを取得する
• アクセストークンをデコードして、パーミッションが取得できることを確認する
• 取得したパーミッション情報を使って、画面を表示非表示を制御する

Single Page Applicationを作成する

• RBAC Sample Appという名前で作成

認可対象となるAPIを作成する

認可対象となるAPIに対してパーミッションを付与することになるため、作成する

• Name: RBAC Sample API
• Identifier: cm-sato-identifier

作成したAPIにパーミッションを作成する

APIに対してどのような種類のパーミッションがあるかを作成する必要がある。サンプルで2種類作成した。

• read:products
  • 商品一覧を参照できる権限
• read:sales
  • 売上を参照できる権限

作成したAPIのRBAC機能を有効化する

パーミッションを付与しただけでは、RBAC機能は有効化されないので、明示的にチェックする必要がある。

• Enable RBAC
• Add Permissions in the Access Token

ユーザーとロールを作成して、ロールに権限を付与する

一般と管理者の2つのロールを作成した。

• Administrator
• General

Administratorロールには、2つの権限を付与して、Generalロールには1つの権限を付与した。

ユーザーにロールを紐付ける

Administratorロールにユーザーを作成したユーザーを紐付けた。
あとは、このユーザーでログインして設定したパーミッションがReact側で取得できれば良さそう