Frontend Usage

Casbin.jsは、フロントエンドアプリケーションでのアクセス制御管理を容易にするCasbinのアドオンです。

インストール

npm install casbin.js
npm install casbin

または

yarn add casbin.js

フロントエンドミドルウェア

ミドルウェア	タイプ	著者	説明
react-authz	React	Casbin	Casbin.jsのためのReactラッパー
rbac-react	React	@daobeng	HOCs、CASL、Casbin.jsを使用したReactでのロールベースのアクセス制御
vue-authz	Vue	Casbin	Casbin.jsのためのVueラッパー
angular-authz	Angular	Casbin	Casbin.jsのためのAngularラッパー

クイックスタート

フロントエンドアプリケーションでmanualモードを使用し、必要なときに権限を設定することができます。

const casbinjs = require("casbin.js");
// Set the user's permission:
// He/She can read `data1` and `data2` objects and can write `data1` object
const permission = {
    "read": ["data1", "data2"],
    "write": ["data1"]
}

// Run casbin.js in manual mode, which requires you to set the permission manually.
const authorizer = new casbinjs.Authorizer("manual");

これで、authorizerという認証者ができました。 authorizer.can()とauthorizer.cannot()APIを使用して、それから許可ルールを取得することができます。これら2つのAPIの戻り値はJavaScriptのPromise(詳細はこちら)なので、戻り値のthen()メソッドを以下のように使用するべきです:

result = authorizer.can("write", "data1");
result.then((success, failed) => {
    if (success) {
        console.log("you can write data1");
    } else {
        console.log("you cannot write data1");
    }
});
// output: you can write data1

cannot() APIは同じ方法で使用されます：

result = authorizer.cannot("read", "data2");
result.then((success, failed) => {
    if (success) {
        console.log("you cannot read data2");
    } else {
        console.log("you can read data2");
    }
});
// output: you can read data2

上記のコードでは、パラメータの success 変数は、エラーをスローせずにリクエストが結果を取得することを意味し、許可ルールが true であることを意味するわけではありません。 failed 変数も許可ルールとは無関係です。これは、リクエストのプロセスで何かが間違っているときにのみ意味を持ちます。

Casbin.jsの実用的な使用法を見るために、私たちの Reactの例を参照してください。

許可オブジェクト

Casbin.jsは、訪問者の対応する許可を操作するためのJSONオブジェクトを受け入れます。例えば：

{
    "read": ["data1", "data2"],
    "write": ["data1"]
}

上記の許可オブジェクトは、訪問者が data1 と data2 オブジェクトを read でき、 data1 オブジェクトのみを write できることを示しています。

高度な使用法

Casbin.jsは、フロントエンドのアクセス制御管理をバックエンドのCasbinサービスと統合するための完璧なソリューションを提供します。

Casbin.jsの Authorizer を初期化する際に auto モードを使用し、エンドポイントを指定すると、許可が自動的に同期され、フロントエンドのステータスが操作されます。

const casbinjs = require('casbin.js');

// Set your backend Casbin service URL
const authorizer = new casbinjs.Authorizer(
    'auto', // mode
    {endpoint: 'http://your_endpoint/api/casbin'}
);

// Set your visitor.
// Casbin.js will automatically sync the permission with your backend Casbin service.
authorizer.setUser("Tom");

// Evaluate the permission
result = authorizer.can("read", "data1");
result.then((success, failed) => {
    if (success) {
        // Some frontend procedure ...
    }
});

それに対応して、許可オブジェクトを生成し、それをフロントエンドに渡すためのインターフェース（例えば、RestAPI）を公開する必要があります。 APIコントローラーで CasbinJsGetUserPermission を呼び出して、許可オブジェクトを構築します。以下はBeegoでの例です：

メモ

エンドポイントサーバーは次のようなものを返すべきです

{
    "other":"other",
    "data": "What you get from `CasbinJsGetPermissionForUser`"
}

// Router
beego.Router("api/casbin", &controllers.APIController{}, "GET:GetFrontendPermission")

// Controller
func (c *APIController) GetFrontendPermission() {
    // Get the visitor from the GET parameters. (The key is "casbin_subject")
    visitor := c.Input().Get("casbin_subject")
    // `e` is an initialized instance of Casbin Enforcer
    c.Data["perm"] = casbin.CasbinJsGetPermissionForUser(e, visitor)
    // Pass the data to the frontend.
    c.ServeJSON()
}

メモ

現在、 CasbinJsGetPermissionForUser APIはGo CasbinとNode-Casbinでのみサポートされています。他の言語でこのAPIをサポートしてほしい場合は、問題を報告するか、以下にコメントを残してください。

APIリスト

`setPermission(permission: string)`

許可オブジェクトを設定します。 manual モードで常に使用されます。

`setUser(user: string)`

訪問者のアイデンティティを設定し、許可を更新します。 auto モードで常に使用されます。

`can(action: string, object: string)`

ユーザーが object に対して action を実行できるかどうかを確認します。

`cannot(action: string, object: string)`

ユーザーが object に対して action を実行できないかどうかを確認します。

`canAll(action: string, objects: Array<object>)`

ユーザーが objects のすべてのオブジェクトに対して action を実行できるかどうかを確認します。

`canAny(action: string, objects: Array<object>)`

ユーザーが objects のいずれか一つのオブジェクトに対して action を実行できるかどうかを確認します。

なぜCasbin.jsなのか

Node-CasbinとCasbin.jsの違いについて疑問を持つ人もいるかもしれません。一言で言えば、Node-CasbinはNodeJS環境で実装されたCasbinのコアであり、通常はサーバーエンドでのアクセス制御管理ツールキットとして使用されます。 Casbin.jsは、クライアント側でウェブページのユーザーを認可するためにCasbinを使用するのを支援するフロントエンドライブラリです。

通常、以下の問題があるため、ウェブフロントエンドアプリケーションで直接Casbinサービスを構築し、認可/強制タスクを行うことは適切ではありません：

誰かがクライアントをオンにすると、エンフォーサーが初期化され、バックエンドの永続層からすべてのポリシーを引き出します。高い並行性はデータベースに厳しいプレッシャーをもたらし、多くのネットワークスループットを消費します。
すべてのポリシーをクライアント側にロードすると、セキュリティリスクが生じる可能性があります。
クライアントとサーバーを分離し、アジャイル開発を促進するのは難しいです。

フロントエンドでCasbinを使用するプロセスを簡単にするツールが必要です。実際、Casbin.jsの核心は、クライアント側で現在のユーザーの許可を操作することです。あなたが言及したように、Casbin.jsは指定されたエンドポイントからフェッチを行います。この手順により、ユーザーの許可がバックエンドのCasbinサービスと同期します。許可データを取得した後、開発者はCasbin.jsのインターフェースを使用して、フロントエンド側でのユーザーの振る舞いを管理できます。

Casbin.jsは上記の2つの問題を回避します：Casbinサービスは繰り返し引き上げられることはなく、クライアントとサーバー間のメッセージのサイズが縮小されます。また、すべてのポリシーをフロントエンドに保存することも避けます。ユーザーは自分自身の許可のみにアクセスできますが、アクセス制御モデルや他のユーザーの許可については知りません。さらに、Casbin.jsは認可管理においてクライアントとサーバーを効率的に分離することもできます。