> ## Documentation Index
> Fetch the complete documentation index at: https://translations.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.
> SPA + API アーキテクチャ シナリオ向けの Auth0 の設定
# Auth0 の設定（SPA + API）
このセクションでは、[Auth0 Dashboard](https://manage.auth0.com/#) で必要な設定をすべて確認します。
## API を作成する
Dashboard の [APIs セクション](https://manage.auth0.com/#/apis) に移動し、**Create API** ボタンをクリックします。
API について、次の情報を入力します。
* **名前**: API のわかりやすい名前です。機能には影響しません。
* **識別子**: API の一意の識別子です。URL を使用することを推奨しますが、公開されている URL である必要はありません。Auth0 が実際に API を呼び出すことはありません。この値は後から変更できません。
* **署名アルゴリズム**: トークンの署名に使用するアルゴリズムです。使用可能な値は `HS256` と `RS256` です。RS256 を選択すると、トークンはテナントの秘密鍵で署名されます。署名アルゴリズムの詳細については、[Signing Algorithms](/ja/docs/get-started/applications/signing-algorithms) を参照してください。
必要な情報を入力し、**Create** ボタンをクリックします。
## Scopes を設定する
アプリケーションを作成したら、認可時にアプリケーションがリクエストできる Scopes を設定する必要があります。
API の設定で、Permissions タブに移動します。このセクションでは、このビジネスケースで使用するスコープ `read:timesheets`、`create:timesheets`、`delete:timesheets`、`approve:timesheets` を追加できます。
## アプリケーションを作成する
Auth0 には、4 つのアプリケーションタイプがあります。
* **Native App** (モバイルアプリまたはデスクトップアプリで使用) 、
* **Single-Page Web App**、
* **Regular Web App**、
* **Machine to Machine App** (CLI、デーモン、またはバックエンドで実行されるサービスで使用) 。
このシナリオでは SPA 用の新しいアプリケーションを作成するため、アプリケーションタイプには Single-Page Application を使用します。
新しいアプリケーションを作成するには、[Dashboard](https://manage.auth0.com/#) に移動し、左側の [Applications](https://manage.auth0.com/#/applications) メニューをクリックします。次に、**+ Create Application** ボタンをクリックします。
アプリケーションの名前を設定し (ここでは `Timesheets SPA` を使用します) 、タイプとして `Single-Page Web App` を選択します。
**Create** をクリックします。
ひとまず、これで完了です。SPA の実装が完了したら、Dashboard に戻ってこのアプリケーションの設定を開き、構成にいくつか変更を加えます。
## Authorization Extension を設定する
テナントに Authorization Extension がインストールされていることを確認してください。手順の詳細については、[Authorization Extension のドキュメント](/ja/docs/customize/extensions/authorization-extension)を参照してください。
### Permissions を定義する
ここでは、すでに定義したスコープ `read:timesheets`、`create:timesheets`、`delete:timesheets`、`approve:timesheets` に対応する、必要な Permissions を定義します。
Authorization Extension で **Permissions** タブをクリックし、次に **Create Permission** ボタンをクリックします。
ダイアログで、各権限の詳細を入力します。
権限の名前が、対応するスコープと完全に一致していることを確認してください。
続けて、残りのすべてのスコープについて権限を作成します。
### ロールを定義する
次に、2 つのロール `employee` と `manager` を設定します。
**Roles** タブに移動し、**Create Role** ボタンをクリックして、**Timesheets SPA** アプリケーションを選択します。
**Name** と **Description** に `Employee` を設定し、`delete:timesheets`、`create:timesheets`、`read:timesheets` の権限を選択します。**Save** をクリックします。
次に、同じ手順で `Manager` ロールを作成し、すべての権限を選択してください。
### ユーザーをロールに割り当てる
すべてのユーザーを、`Manager` または `Employee` のいずれかのロールに割り当てる必要があります。
これを行うには、Authorization Extension の **ユーザー** タブを開き、ユーザーを選択します。
ユーザー情報の画面で、**ロール** タブを開きます。**Add Role to User** をクリックし、適切なロールを選択します。
### Authorization Extension の設定
Authorization Extension の Rule が公開済みであることも確認する必要があります。
そのためには、Authorization Extension の右上にあるユーザーアバターをクリックし、**Configuration** を選択します。
**Permissions** が有効になっていることを確認してから、**Publish Rule** をクリックします。
### トークンのスコープを検証する Rule を作成する
このプロセスの最後の手順は、アクセストークン に含まれるスコープが、ユーザーに割り当てられた権限に基づいて有効かどうかを確認する Rule を作成することです。ユーザーに対して無効なスコープは、アクセストークンから削除する必要があります。
Auth0 Dashboard で、**Rules** タブに移動します。Authorization Extension によって作成された Rule が表示されるはずです。**Create Rule** ボタンをクリックし、**Empty Rule** テンプレートを選択します。Rule には、たとえば **Access Token Scopes** という名前を付けてから、次のコードを指定します。
```javascript lines theme={null}
function (user, context, callback) {
var permissions = user.permissions || [];
var requestedScopes = context.request.body.scope || context.request.query.scope;
var filteredScopes = requestedScopes.split(' ').filter( function(x) {
return x.indexOf(':') < 0;
});
var allScopes = filteredScopes.concat(permissions);
context.accessToken.scope = allScopes.join(' ');
callback(null, user, context);
}
```
上記のコードにより、すべてのアクセストークンには、ユーザーの権限に基づいて有効な、正しい形式のスコープ (例: `action:area` または `delete:timesheets`) のみが含まれるようになります。完了したら、**Save** ボタンをクリックします。
Rules は Rules ページに表示されている順に実行されるため、新しく作成した Rule が Authorization Extension の Rule より下に配置され、Authorization Extension の Rule の後で実行されるようにしてください。