これでばっちり！Auth0のRoleとPermission。
前回、Auth0を使うとログインとJWTによるアクセス制御が簡単にできると言うことをご紹介しました。
Auth0、これだけじゃありません。
RoleとPermissonも簡単に実装できるんです。
Role?Permission?
まずは、このRoleとPermissionが何者なのかを理解しなければいけません。
簡単に言うと、誰に(Role)に何に対してどういうアクセスを許可するのか(Permisson)と言うことです。
分かりやすく(?)、お母さん、お父さん、こどもと財布の関係で説明します。
人に対してRoleを割り当て、財布に対するアクセスにPermissionを設定すると言うことになります。
これをアプリケーションに対して適用すると、人、人物、役割に対してRoleを割り当て、APIに対するアクセスにPermissionを設定すると言うことになります。
Auth0のRoleとPermission
Auth0では、RoleとPermissionは以下のようになっています。
Role
Roleは単独で設定し、ユーザに割り当てます。
Roleに対し、APIごとに設定したPermissionを割り当てることができます。
つまり、ユーザにRoleが割り当てられた時点で、APIにどのようにアクセスできるかが決まります。
Permission
Permissionは、APIに対して設定します。
「何」に「どういう権限」を与えるかがPermissionですので、「権限:対象」とすると分かりやすいです。
例えば、memberに対して読み取り権限を与える場合は、「read:member」という感じで定義すると分かりやすいですね。
Auth0での設定
Auth0でRoleとPermissionを設定します。
Roleの設定
Roleの設定は、Users&RolesのRolesで行います。
Permissionの設定
APIにPermissionを設定します。
RoleにAPIのPermissionを設定
RoleにAPIのPermissionを設定します。
これで、ユーザにRoleを設定することで、APIのPermissionを設定することができます。
ユーザにRoleを割り当て
ユーザにロールを割り当てます。
こうすると、Roleに設定したAPIのPermissionがユーザに割り当てられます。
APIの設定
Auth0でログインしたときに、RoleとPermissionを扱えるようにするために、APIのRBACの設定を有効にします。
Add Permissions in the Access Tokenは、EnabledにするとJWTにユーザに割り当てられているPermissionが付加されます。
JWTは証明書がなくても簡単に中を読み取ることができますので、PermissionをJWTに含めるかは慎重に検討してください(JWTの作成、JWTの検証には証明書が必要なので簡単に偽装はできませんが)
Angularアプリケーションの実装
ユーザに割り当てられたPermissionによって、表示できるページをコントロールできるようします。
@auth0/angular-jwtのインストール
JWTをデコードするために、@auth0/angular-jwtパッケージを使います。
npm install @auth0/angular-jwt --save実装
まずは、Permissionの定義をPermissions.tsに実装します。
export const Permissions = {
// 契約:読み取り
READ_CONTRACT: 'read:contract',
// メンバー:読み取り
READ_MEMBER: 'read:member',
// メンバー:作成
CREATE_MEMBER: 'create:member',
// メンバー:更新
UPDATE_MEMBER: 'update:member',
// メンバー:削除
DELETE_MEMBER: 'delete:member',
} as const;
export type Permission = typeof Permissions[keyof typeof Permissions];
次にユーザが指定したPermissionを持っているかをチェックするためのサービスクラスを作成します。
import { Injectable } from '@angular/core';
import { JwtHelperService } from '@auth0/angular-jwt';
import { Observable } from 'rxjs';
import { Permission } from './permissions';
import { AuthService } from '../auth/auth.service';
@Injectable({
providedIn: 'root'
})
export class PermissionsService {
constructor(
private readonly authService: AuthService,
) { }
/**
* ログインしているユーザがロールを持っているかを取得する
* @param roles 期待するロール
*/
has(permissions: Permission | Permission[]): Observable<boolean> {
return new Observable<boolean>((observer) => {
// ユーザプロファイルを取得する
this.authService.getToken$()
.subscribe(
t => {
const jwtHelperService: JwtHelperService = new JwtHelperService();
const token: any = jwtHelperService.decodeToken(t);
// トークンにpermissionsがなければfalseにする
if (!token || !token.permissions) {
observer.next(false);
}
// ユーザがロールを持っているかをチェックする
let ret;
if (typeof permissions !== 'string') {
ret = permissions.every(permission => token.permissions.includes(permission));
}
else {
ret = token.permissions.includes(permissions);
}
observer.next(ret);
},
err => {
observer.error(err);
},
);
});
}
}
最後に、Guardを実装します。
import { Injectable } from '@angular/core';
import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, UrlTree, Router } from '@angular/router';
import { Observable } from 'rxjs';
import { PermissionsService } from './permissions.service';
import { Permission } from './permissions';
@Injectable({
providedIn: 'root'
})
export class PermissionsGuard implements CanActivate {
constructor(
private readonly router: Router,
private readonly permissionsService: PermissionsService
) {}
canActivate(
next: ActivatedRouteSnapshot,
state: RouterStateSnapshot): Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree {
// routerのdataで設定されているrolesを取得する
const roles: Permission[] = next.data.roles;
const has = this.permissionsService.has(roles);
if (!has) {
this.router.navigateByUrl('/');
}
return has;
}
}
これで、ルーティングの設定でGuardを以下のように使えば、ユーザに割り当てられたPermissionにあったアクセス制御を行うことができます。
{ path: 'member', component: MemberComponent, canActivate: [AuthGuard, PermissionsGuard], data: {roles: [Permissions.READ_MEMBER]} },NestJS APIの実装
NestJS APIで、ユーザに割り当てられたPermissionでアクセスをコントールします。
※ここで紹介するのはGraphQL APIです。
まず、Permissionをpermissions.tsに定義します。
先ほどのAngularアプリケーションと同じです。
export const Permissions = {
// 契約:読み取り
READ_CONTRACT: 'read:contract',
// メンバー:読み取り
READ_MEMBER: 'read:member',
// メンバー:作成
CREATE_MEMBER: 'create:member',
// メンバー:更新
UPDATE_MEMBER: 'update:member',
// メンバー:削除
DELETE_MEMBER: 'delete:member',
} as const;
export type Permission = typeof Permissions[keyof typeof Permissions];
次にユーザに割り当てられているPermissionを持っているかをチェックするGuardを作成します。
import { CanActivate, ExecutionContext, Injectable } from '@nestjs/common';
import { Observable } from 'rxjs';
import { Reflector } from '@nestjs/core';
import { GqlExecutionContext } from '@nestjs/graphql';
import { Permission } from './permissions';
@Injectable()
export class PermissionsGuard implements CanActivate {
constructor(private readonly reflector: Reflector) {}
canActivate(
context: ExecutionContext,
): boolean | Promise<boolean> | Observable<boolean> {
// APIに設定している権限を取得する
const routePermissions = this.reflector.get<Permission[]>(
'permission',
context.getHandler(),
);
// APIに権限が設定されていなければOK
if (!routePermissions) {
return true;
}
// GraphQLのコンテキストからRequestを取得する
const ctx = GqlExecutionContext.create(context);
const req = ctx.getContext().req;
// Request.user.permissionsがなければNG
if (!req.user
|| !req.user.permissions) {
return false;
}
return routePermissions.every(permission => req.user.permissions.includes(permission));
}
}
最後にデコレータの定義をします。
import { SetMetadata } from '@nestjs/common';
import { Permission } from './permissions';
export const PermissionsHas = (...permissions: Permission[]) =>
SetMetadata('permissions', permissions);
これで、Resolverクラスにデコレータを使ってGuardを設定すると、ユーザに割り当てられたPermissionにあったアクセス制御を行うことができます。
@UseGuards(GraphqlAuthGuard, PermissionsGuard)
@PermissionsHas(Permissions.CREATE_MEMBER)
@Mutation(returns => MemberResult)
async createMember(@Args({name: 'memberInput', type: () => MemberInput}) memberInput: MemberInput): Promise<MemberResult> {
Auth0のRoleとPermissionは、ダッシュボードを眺めていても仕組みを理解するのは難しいように思います。
実際に構築するアプリケーションでは、アクセス制御をしっかり行うことがとても重要です。
是非、Auth0のRoleとPermissionを攻略してみてください。