> ## Documentation Index
> Fetch the complete documentation index at: https://auth0.generaltranslation.app/llms.txt
> Use this file to discover all available pages before exploring further.
# Auth0構成（SPA + API）
> SPA + APIアーキテクチャのシナリオでのAuth0の構成
このセクションでは、[Auth0 Dashboard](https://manage.auth0.com/#)での適用が必要なすべての設定を確認します。
## APIを作成する
ダッシュボードの[APIセクション](https://manage.auth0.com/#/apis)に移動し、**［Create API（APIの作成）］** ボタンをクリックします。
APIについて、以下の詳細を入力するよう求められます。
* **［Name（名前）］** ：APIのフレンドリー名。いずれの機能にも影響しません。
* **［Identifier（識別子）］** ：APIに一意の識別子。URLの使用を推奨していますが、公開されたURLである必要はありません。Auth0がこのAPIを呼び出すことはありません。この値は後から変更することはできません。
* **［Signing Algorithm（署名アルゴリズム）］** ：トークンの署名に使用するアルゴリズム。使用可能な値は`HS256`と`RS256`です。RS256を選択すると、トークンはテナントの秘密鍵で署名されます。署名アルゴリズムの詳細については、「[署名アルゴリズム](/docs/ja-JP/ja-jp/get-started/applications/signing-algorithms)」を参照してください。
必要な情報を入力し、**［Create（作成）］** ボタンをクリックします。
## スコープを構成する
アプリケーションが作成されたら、認可の際にアプリケーションが要求できるスコープを構成する必要があります。
APIの設定で、［Permissions（アクセス許可）］タブに移動します。このセクションでは、ビジネスケースのスコープ（`read:timesheets`、`create:timesheets`、`delete:timesheets`、`approve:timesheets`）を追加することができます。
## アプリケーションを作成する
Autho0には、アプリケーションの種類が4つあります。
* **ネイティブアプリ** （モバイルまたはデスクトップアプリで使用）
* **シングルページWebアプリ**
* **通常のWebアプリ**
* **マシンツーマシンアプリ** （CLI、デーモン、またはバックエンドで実行中のサービスで使用）
このシナリオでは、SPA用に新しいアプリケーションを作成するため、シングルページアプリケーションのタイプを選びます。
新しいアプリケーションを作成するには、[ダッシュボード](https://manage.auth0.com/#)に移動し、左側のメニューにある［[Applications](https://manage.auth0.com/#/applications)（アプリケーション）］をクリックします。**［+ Create Application（アプリケーションの作成）］** ボタンをクリックします。
アプリケーションの名前を設定し（ここでは`Timesheets SPA`とします）、タイプに`Single-Page Web App`を選択します。
**［Create（作成）］** をクリックします。
今のところは以上です。SPA実装を完了したら、ダッシュボードとこのアプリケーションの設定をもう一度確認し、構成にいくつかの変更を加えます。
## 認可拡張機能を設定する
テナントにAuthorization Extension（認可拡張機能）がインストールされていることを確認する必要があります。確認方法の詳細については、「[認可拡張機能](/docs/ja-JP/ja-jp/customize/extensions/authorization-extension)」のドキュメントを参照してください。
### アクセス許可を定義する
次に、すでに定義済みのスコープ（`read:timesheets`、`create:timesheets`、`delete:timesheets`、`approve:timesheets`）に従って、必要なアクセス許可を定義する必要があります。
認可拡張機能で **［Permissions（アクセス許可）］** タブをクリックし、**［Create Permission（アクセス許可の作成）］** ボタンをクリックします。
ダイアログで、各アクセス許可の詳細を指定します。
アクセス許可の名前が、対応するスコープと完全に同一であることを確認します。
引き続き、残りのすべてのスコープにアクセス許可を作成します。
### ロールを定義する
次に、従業員とマネージャーという2つのロールを構成しましょう。
**［Roles（ロール）］** タブで、**［Create Role（ロールの作成）］** ボタンをクリックし、**［Timesheets SPA（タイムシートSPA）］** アプリケーションを選択します。
**［Name（名前）］** と **［Description（説明）］** を`Employee`に設定し、`delete:timesheets`、`create:timesheets`、および`read:timesheets`のアクセス許可を選択します。**［Save（保存）］** をクリックします。
次に、同じ手順で`Manager`ロールを作成し、すべてのアクセス許可が選択されていることを確認します。
### ユーザーをロールに割り当てる
すべてのユーザーを`Manager`または`Employee`ロールに割り当てる必要があります。
認可拡張機能の **［Users（ユーザー）］** タブに移動し、ユーザーを選択します。
ユーザー情報画面で、**［Roles（ロール）］** タブに移動します。**［Add Role to User（ユーザーにロールを追加）］** ボタンをクリックし、適切なロールを選択します。
### 認可拡張機能を構成する
また、認可拡張機能に関するルールが公開されていることも確認する必要があります。
これを実行するには、認可拡張機能の右上にあるユーザーアバターをクリックして、**［Configuration（構成）］** を選択します。
**［Permissions（アクセス許可）］** が有効であることを確認し、**［Publish Rule（ルールの公開）］** をクリックします。
### トークンのスコープを検証するルールを作成する
このプロセスの最後のステップでは、ユーザーに割り当てられたアクセス許可に基づいて、アクセストークンに含まれるスコープが有効であることを確認するルールを作成します。ユーザーに無効なすべてのスコープは必ず、アクセストークンから削除します。
Auth0 Dashboardで、**［Rules（ルール）］** タブに移動します。認可拡張機能によって作成されたルールが表示されているはずです。**［Create Role（ルールの作成）］** ボタンをクリックし、**［Empty 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（ルール）］ページに表示されている順番に実行されます。そのため、作成した新しいルールが認可拡張機能のルールより下に来るようにしてください。そうすれば、認可拡張機能のルールより後に実行されます。