Permify は、個人のアプリケーションやサービスに対してきめ細かなライセンスを作成および維持するためのオープンソース ライセンス サービスです。

Permify は、認可データをユーザーが指定するデータベース（Write Database と呼びます）に変換します。このデータベースは、認可システムの一元化されたデータソースとして機能します。Permify の DSL（Permify Schema）を使用して認可をモデル化し、保存されたリレーショナルタプルに基づいて、スタック内のどこからでも単一の API 呼び出しでアクセスチェックを実行できます。

Permify の最適な使用例:

• すでに ID/承認ソリューションがあり、その上にきめ細かな承認を追加したい場合。
• 単一のアプリケーションに対して統合されたアクセス制御メカニズムを作成する場合。
• 成長を続けるマイクロサービス インフラストラクチャのライセンスを管理している場合。
• 承認ロジックによってコードベースが乱雑になる場合。
• データ モデルが複雑になりすぎて、サービス内で認証を処理できなくなる場合。
• 認証がますます複雑になり、コードまたは API ゲートウェイ内で処理できなくなった場合。

特性

• 🔐 承認されたデータを高可用性で内部的に変換して保存します。
• 🔮 Permify の DSL である Permify Schema を使用して、ライセンスを簡単にモデル化およびリファクタリングできます。
• 📝 ユーザー インターフェイスを使用して、アクセス制御を簡単に監査および検討できます。
• ✅ アクセス チェック用の低遅延の並列グラフィック エンジン。
• 🩺 Jaeger、Signoz、Zipkin などの追跡ツールを使用して、ライセンスのパフォーマンスと動作を分析します。

例

次に、Permify のオープンソース RBAC ソリューションである React Roles を使用して、React アプリケーションに RBAC を実装する方法を紹介します。

React Roles はコンポーネント、フック、ヘルパー メソッドで構成されており、バックエンド接続なしでユーザー ロールと権限を制御できるため、アクセス管理においてさまざまな利点が得られます。

ここでは、React Roles の基本を紹介し、ユーザー、ユーザー ロール、およびユーザー権限のモックを定義および設定する CRM のようなアプリケーションの開発を試みます。

ステップ1: Reactプロジェクトを作成する

ターミナルまたはコマンドプロンプトで次のコマンドを実行して、新しい React プロジェクトを作成します。

アプリケーションを作成したら、ファイルを消去してプロジェクトを再開できます。完了すると、フォルダ構造、App.js、index.js ファイルは次のようになります。

App.js ファイルの内容を以下に示します。

 関数App (){
 return < div > React Role Demo </ div > ;
 }
 デフォルトアプリをエクスポートします。

index.js ファイルの内容は次のとおりです。

 「react」 からReactをインポートします。
 「react-dom/client」 からReactDOMをインポートします。
 「./App」 からApp をインポートします。
 const root = ReactDOM.createRoot (document.getElementById ( " root" ));
 root.render ( < App /> ) ;

ステップ2: UIインターフェース

ここでは、React初心者向けに多くのコンポーネントを提供するAnt Designライブラリを使用しました。プロジェクトでAnt Designを使用するには、まずプロジェクトフォルダで以下のコマンドを実行してインストールしてください。

このアプリケーションには、ログインページとホームページという2つの異なるページがあります。ユーザーはログインページでメールアドレスを入力することでアプリケーションにログインできるため、入力されたメールアドレス情報に基づいてユーザーのロールと権限を取得します。

ホームページには、連絡先情報を入力するフォームと2つのアクションボタンを配置します（下図参照）。赤いボタンはログアウト用、紫色のボタンは連絡先を作成するためのものです。ただし、連絡先作成ボタンは特定のユーザーのみに制限します。

ステップ3: ユーザーを作成する

このアプリケーションでは、管理者、編集者、エージェントという3つの異なるユーザーロールが存在します。これらのルールに基づいて、「連絡先を作成」ボタンへのアクセスを制限します。「連絡先を作成」ボタンは、管理者または編集者のロールを持つユーザーのみに表示され、利用できるようにします。

このボタンはエージェントロールに再度制限されます。ただし、ロールに加えて、ユーザー権限に基づいてこれらのボタンへのアクセス権限も確認する必要があります。ユーザーに連絡先作成権限がある場合は、ロールに関係なくこのボタンへのアクセスを許可します。

ここでは、以下に示すようにいくつかのサンプルユーザーを作成します。

 [
 {
 「id」 : 「1fbb807d972847cbb65096a22403bd2f」 、
 「メールアドレス」 : 「[email protected]」 、
 「名前」 ： 「ルイーズ・ウォーカー」
 「役割」 : 「管理者」 、
 「権限」 : [ 「プロジェクトインデックス」 、 「プロジェクト作成」 、 「プロジェクト削除」 ]
 },
 {
 「id」 : 「b108ceae1cfb46dfb34e3aa7c9f28606」 、
 「メールアドレス」 : 「[email protected]」 、
 「名前」 ： 「ミゲル・ジェンセン」
 「役割」 : 「編集者」 、
 「権限」 : [ 「コンテンツインデックス」 、 「コンテンツ作成」 、 「コンテンツ削除」 ]
 },
 {
 "id" : "c2349776bd364fac9debf397e3f4538a" ,
 「メールアドレス」 : 「[email protected]」 、
 「名前」 : 「グレッグ・ハウエル」
 「役割」 : 「エージェント」 、
 「許可」 : [ 「連絡先インデックス」 ]
 },
 {
 「id」 : 「73b612c40a2044718123d476e45a2245」 、
 「メール」 : 「[email protected]」 、
 「名前」 ： 「レナード・ウェイド」
 「役割」 : 「エージェント」 、
 「権限」 : [ 「連絡先インデックス」 、 「連絡先作成」 、 「連絡先削除」 ]
 },
 {
 "id" : "9455a30af8e141ba905a27e7855babde" ,
 「メールアドレス」 : 「[email protected]」
 「名前」 ： 「アレックス・コリンズ」
 「役割」 : 「エージェント」 、
 「許可」 : [ 「連絡先インデックス」 ]
 }
 ]

ステップ4: Reactロールを追加する

サンプルユーザーを作成したら、ユーザーのロールと権限に基づいたアクセス管理を設定するために、React Roleライブラリをインストールする必要があります。React Roleをインストールするには、プロジェクトフォルダで以下のコマンドを実行してください。

React Role をインストールした後、PermifyProvider コンポーネントを使用してアクセス チェックを制御するすべての構造を App.js ファイルでラップする必要があります。

さらに、App.js ファイルでは、ログイン ページで localStorage に保存したユーザー情報をチェックして、システムにログインしたユーザーを確認し、それをプロパティとしてホーム ページに送信します。

 ...
 "@permify/react-role" からPermifyProviderをインポートします。
 関数App (){
 const [ user 、 setUser ] = useState ( null );
 使用効果(() => {
 setUser ( JSON.parse (localStorage.getItem ( " user" )));
 }, []);
 戻る（
 <パーミファイプロバイダー>
 { user === null ? < ログイン/> : < ホームユーザー= { user } /> }
 </PermifyProvider>
 ）;
 }
 デフォルトアプリをエクスポートします。

ホームページでは、ユーザーが管理者、編集者、または連絡先作成権限を持っている場合、「連絡先を作成」ボタンが表示されるようにする必要があります。ユーザーの役割と権限を制御するには、React RolesライブラリのHasAccessコンポーネントを使用する必要があります。

HasAccess コンポーネントは、3 つの異なるプロパティを使用して、ユーザーが特定の要素にアクセスできるかどうかを確認します。

• ロール: ロールごとにコンポーネントの可用性を設定します。
• 権限: 権限を付与することでコンポーネントの可用性を設定します。
• renderAuthFailed: このボタンにアクセスできない場合は、代わりに何を使用すればよいですか?

 ...
 "@permify/react-role" からHasAccess をインポートします。
 ...
 関数Home ( props ) {
 ...
 戻る（
 ...
 アクセス権限
ロール= {[ "管理者" , "編集者" ]}
 権限= "連絡先作成"
 レンダリング認証失敗= { null }
 >
 < div className = "button create-btn" > 連絡先を作成</ div >
 </アクセスあり>
 ...
 ）;
 }
 デフォルトのホームをエクスポートします。

ソースコードの可読性と理解度を高めるため、一部のコードは省略しています。これには、テーブルに偽のデータを表示するためのリクエストや、独自の設定が含まれます。完全なソースコードをご覧になりたい場合は、GitHubリポジトリ（https://github.com/erenolgun/react-role-demo）をご覧ください。

ステップ5: テスト

これでアプリケーションをテストできます。まず、メールアドレスが[email protected]で管理者権限を持つLouise Walkerとしてログインします。そのため、Louiseには「連絡先を作成」ボタンが表示されます。

次に、プロキシロールを持つGreg Howellとしてログインします。彼のロールでは、renderAuthFilledプロパティが{null}に設定されているため、「連絡先を作成」ボタンは表示されません。

最後に、プロキシとしてLeonard Wadeとしてログインしてみましょう。ただし、彼には連絡先作成権限も付与されています。通常、プロキシの役割のため、Leonardには「連絡先を作成」ボタンは表示されません。しかし、連絡先作成権限により、権限属性がcontact-createに設定されているため、連絡先作成ボタンにアクセスできます。

この時点で、ユーザーのIDと権限の確認が完了しました。Permify の使用方法の詳細については、公式ドキュメント（https://docs.permify.co/）をご覧ください。

Git リポジトリ: https://github.com/Permify/permify。