> ## 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 の設定 (SPAs + API)

このセクションでは、[Auth0 Dashboard](https://manage.auth0.com/#) で必要な設定を一通り確認します。

<div id="create-the-api">
  ## API を作成する
</div>

ダッシュボードの[APIs セクション](https://manage.auth0.com/#/apis)に移動し、**Create API**ボタンをクリックします。

API の作成時に、次の情報の入力を求められます。

* **Name**: API のわかりやすい名前です。機能には影響しません。
* **Identifier**: API の一意の識別子です。URL を使用することをおすすめしますが、公開されている URL である必要はありません。Auth0 からこの API が呼び出されることはありません。この値は後から変更できません。
* **<Tooltip tip="署名アルゴリズム: トークンが改ざんされていないことを保証するために、トークンに電子署名する際に使用するアルゴリズム。" cta="用語集を見る" href="/docs/ja-jp/glossary?term=Signing+Algorithm">署名アルゴリズム</Tooltip>**: トークンの署名に使用するアルゴリズムです。使用可能な値は `HS256` と `RS256` です。RS256 を選択すると、トークンはテナントの秘密鍵で署名されます。署名アルゴリズムの詳細については、[Signing Algorithms](/docs/ja-jp/get-started/applications/signing-algorithms)を参照してください。

<Frame>
  <img src="https://mintcdn.com/translations/pvjQqAy3EB2TK6NP/docs/images/cdy7uua7fh8z/4kIH4BQc4vDel2zhJ6lwCE/094cff6e8e1788c39796eb28ab1925ca/2024-06-27_14-50-24.png?fit=max&auto=format&n=pvjQqAy3EB2TK6NP&q=85&s=ba2b5abee5018b4b55bd3e136e6673ac" alt="Dashboard - Applications - APIs - Create API - Popup" width="624" height="736" data-path="docs/images/cdy7uua7fh8z/4kIH4BQc4vDel2zhJ6lwCE/094cff6e8e1788c39796eb28ab1925ca/2024-06-27_14-50-24.png" />
</Frame>

必要な情報を入力し、**Create**ボタンをクリックします。

<div id="configure-the-scopes">
  ## スコープを設定する
</div>

アプリケーションを作成したら、認可時にアプリケーションが要求できるスコープを設定する必要があります。

API の設定で、`Permissions` タブに移動します。このセクションでは、このユースケースに必要なスコープ `read:timesheets`、`create:timesheets`、`delete:timesheets`、`approve:timesheets` を追加できます。

<Frame>
  <img src="https://mintcdn.com/translations/xwVvTWJUElMm5YAK/docs/images/cdy7uua7fh8z/xxMOKezob6gNHJ0CcKhcg/ccbb9bbab29576a96ed8425329ecffb4/dashboard-apis-edit_view-permissions.png?fit=max&auto=format&n=xwVvTWJUElMm5YAK&q=85&s=b9f2abf9032519ff3382e45a2f73596b" alt="ダッシュボード - Applications - APIs - Permissions" width="1260" height="784" data-path="docs/images/cdy7uua7fh8z/xxMOKezob6gNHJ0CcKhcg/ccbb9bbab29576a96ed8425329ecffb4/dashboard-apis-edit_view-permissions.png" />
</Frame>

<div id="create-the-application">
  ## アプリケーションを作成する
</div>

Auth0 には、4 種類のアプリケーションがあります。

* **Native App** (モバイルアプリまたはデスクトップアプリで使用) 、
* **Single-Page Web App**、
* **Regular Web App**、
* **Machine to Machine App** (CLI、デーモン、またはバックエンドで実行されるサービスで使用) 。

このシナリオでは SPA 用に新しい Application を作成するため、アプリケーションの種類として Single-Page Application を使用します。

新しい Application を作成するには、[dashboard](https://manage.auth0.com/#) に移動し、左側の [Applications](https://manage.auth0.com/#/applications) メニューをクリックします。次に、**+ Create Application** ボタンをクリックします。

Application の名前を設定し (ここでは `Timesheets SPA` を使用します) 、種類として `Single-Page Web App` を選択します。

**Create** をクリックします。

これでひとまず完了です。SPA の実装が終わったら、ダッシュボードに戻ってこの Application の設定を開き、構成にいくつか変更を加えます。

<div id="configure-the-authorization-extension">
  ## Authorization Extension を設定する
</div>

お使いのテナントに Authorization Extension がインストールされていることを確認してください。手順の詳細については、[Authorization Extension のドキュメント](/docs/ja-jp/customize/extensions/authorization-extension)を参照してください。

<div id="define-permissions">
  ### 権限を定義する
</div>

ここでは、すでに定義したスコープ (`read:timesheets`、`create:timesheets`、`delete:timesheets`、`approve:timesheets`) に基づいて、必要な権限を定義します。

Authorization Extension で **Permissions** タブをクリックし、次に **Create Permission** ボタンをクリックします。

ダイアログで、各権限の詳細を入力します。

権限名は、対応するスコープと完全に一致していることを確認してください。

<Frame>
  <img src="https://mintcdn.com/translations/6GE5Z24GDCZehiJ9/docs/images/cdy7uua7fh8z/6G4X14X3A73IDRwOrkmttq/e0c20c44a32e0b39a6d8fb72731ffbaf/create-permission.png?fit=max&auto=format&n=6GE5Z24GDCZehiJ9&q=85&s=8d4494794edc7f100262161e743f40a5" alt="Dashboard - Extensions - Authorization Extension - Create Permission" width="1264" height="794" data-path="docs/images/cdy7uua7fh8z/6G4X14X3A73IDRwOrkmttq/e0c20c44a32e0b39a6d8fb72731ffbaf/create-permission.png" />
</Frame>

続けて、残りのすべてのスコープについても権限を作成します。

<div id="define-roles">
  ### ロールを定義する
</div>

次に、2 つのロール `employee` と `manager` を設定します。

**Roles** タブを開き、**Create Role** ボタンをクリックして、**Timesheets SPA** アプリケーションを選択します。

**Name** と **Description** に `Employee` を設定し、`delete:timesheets`、`create:timesheets`、`read:timesheets` の権限を選択します。**Save** をクリックします。

続いて、同じ手順で `Manager` ロールを作成し、すべての権限が選択されていることを確認します。

<div id="assign-users-to-roles">
  ### ユーザーをロールに割り当てる
</div>

すべてのユーザーを、`Manager` または `Employee` のいずれかのロールに割り当てる必要があります。

これを行うには、Authorization Extension の **Users** タブに移動して、ユーザーを選択します。

ユーザー情報画面で **Roles** タブに移動します。**Add Role to User** をクリックし、適切なロールを選択します。

<div id="configuring-the-authorization-extension">
  ### Authorization Extension の設定
</div>

Authorization Extension のルールが公開されていることも確認してください。

そのためには、Authorization Extension の右上にあるユーザーアバターをクリックし、**Configuration** を選択します。

**Permissions** が有効になっていることを確認してから、**Publish Rule** をクリックします。

<div id="create-a-rule-to-validate-token-scopes">
  ### トークンのスコープを検証する Rule を作成する
</div>

このプロセスの最後の手順は、<Tooltip tip="アクセストークン: API へのアクセスに使用される、不透明文字列または JWT 形式の認可資格情報。" cta="用語集を見る" href="/docs/ja-jp/glossary?term=Access+Token">アクセストークン</Tooltip>に含まれるスコープが、ユーザーに割り当てられた権限に基づいて有効かどうかを確認する Rule を作成することです。ユーザーに対して有効でないスコープは、アクセストークンから削除する必要があります。

<Tooltip tip="Auth0 Dashboard: サービスを設定するための Auth0 の主要な製品です。" cta="用語集を見る" href="/docs/ja-jp/glossary?term=Auth0+Dashboard">Auth0 Dashboard</Tooltip>で **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** ボタンをクリックします。

Rule は Rules ページに表示されている順序で実行されるため、新しく作成した Rule が Authorization Extension の Rule より下に配置され、Authorization Extension の Rule の後に実行されるようにしてください。