Auth0のRBAC SettingsとJWTの内容について

はじめに

Auth0を使ってJWT認証をしようとしてたがRBACやPermissionの設定等がいまいちわからなかったため検証した。

前提

フロントエンド : Vue 3.0
バックエンド : Java 11
認証サービス : Auth0

バックエンド側はJWTのスコープを見てアクセス制御している。
OKな権限だったらHTTP Status:200, NGな権限だったらHTTP Status:403を返却する

@Override
	public void configure(HttpSecurity http) throws Exception {
		http.authorizeRequests()
				.mvcMatchers("/api/private-scoped-read").hasAuthority("SCOPE_read:message")
				.mvcMatchers("/api/private-scoped-write").hasAuthority("SCOPE_write:message")
				.and().cors()
				.and().oauth2ResourceServer().jwt();
	}

Springの他の実装はSpring Boot API: Authorizationを参照してください

まとめ

Auth0のユーザー権限設定とユーザーの同意の組み合わせ表

RABC : ON

• Add Permissions in the Access TokenがOFFの場合はJWTにPermissionの項目はない

	Auth0		フロント		認証画面	API呼び出し結果 HTTP Status		JWT
	API Permission	User Permission	Scope		ユーザーに同意を求める権限	Read	Write	Scope	Permission
①	read:message write:message	-	read:message		profile email	403	403	openid profile email	-
②	read:message write:message	read:message	-		profile email	403	403	openid profile email	read:message
③	read:message write:message	read:message	read:message		profile email read:message	200	403	openid profile email read:message	read:message
④	read:message write:message	read:message	write:message		profile email	403	403	openid profile email	read:message
⑤	read:message write:message	read:message	read:message write:message		profile email read:message	200	403	openid profile email read:message	read:message

• JWTのScopeに設定される値は、Auth0のUserに設定されているかつ同意した権限
• JWTのPermissionに設定される値は、Auth0のUserに設定されている権限
  • 同意していない権限もPermissionに設定される

RABC : OFFの場合

• Add Permissions in the Access TokenはONにできない

	Auth0		フロント		認証画面	API呼び出し結果 HTTP Status		JWT
	API Permission	User Permission	Scope		ユーザーに同意を求める権限	Read	Write	Scope	Permission
①	read:message write:message	-	read:message		profile email read:message	200	403	openid profile email read:message	-
②	read:message write:message	read:message	-		profile email	403	403	openid profile email	-
③	read:message write:message	read:message	read:message		profile email read:message	200	403	openid profile email read:message	-
④	read:message write:message	read:message	write:message		profile email write:message	403	200	openid profile email write:message	-
⑤	read:message write:message	read:message	read:hoge write:message		profile email read:message	200	200	openid profile email read:message write:message

• JWTのスコープに設定されるのは同意した権限
  • ユーザーに権限がついてなくてもAPIにアクセスできる

JWTのSCOPEに設定される組み合わせ

RBAC	項目
ON	User Permission 同意した権限(フロントのscopeで設定した値)
OFF	同意した権限(フロントのscopeで設定した値)

詳細

Auth0の設定

API Permission

このAPIが要求するPermissionを設定する
フロント側でここにない権限をscopeに設定しても認証画面に反映されない

UserのPermission

APIに紐づいてる権限を付与できる。
Role毎の権限も個人毎の権限も設定可能

RBAC

ここでRBACとトークンのON/OFFを設定
トークンをONにするとJWTにpermissionが追加される

フロント側の設定

vue.js

export const Auth0Plugin = createAuth0({
    domain: domain,
    client_id: clientId,
    redirect_uri: window.location.origin,
    audience: audience,
    scope: "read:message" 
});

scopeにユーザーに許可をもらいたい権限を記載する。複数ある場合はスペース区切り。
フロント側のscopeにread:messageを指定しているので、認証画面にメッセージのread権限を求める項目が表示される

Vueの他の実装はVue: Loginと、The Complete Guide to Vue.js User Authentication with Auth0を参照してください