> ## 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.

> Single-Page Applications (SPA) が OpenID Connect (OIDC) と OAuth 2.0 Implicit Grant Flow を使用して API と連携し、Auth0 でユーザーを認証するアーキテクチャシナリオを説明します。

# API を利用する Single-Page Applications (SPA)

このシナリオでは、ExampleCo という架空の会社向けにタイムシート API を構築します。この API では、従業員または契約社員のタイムシート エントリを追加できます。

また、タイムシート エントリを記録し、API を使って一元管理されたタイムシートデータベースに送信する Single-Page Applications (SPA) も構築します。

<Info>
  ### 要点

  * Auth0 は、API endpoint へのアクセスを保護する手段として API の authentication と Authorization を提供します ([API Authentication and Authorization](/docs/ja-jp/get-started/architecture-scenarios/spa-api/part-1#api-authentication-and-authorization) を参照)
  * SPA のユーザーを認可するために、Auth0 は Implicit Grant をサポートしています ([Implicit Grant](/docs/ja-jp/get-started/architecture-scenarios/spa-api/part-1#implicit-grant) を参照)
  * SPA と API の両方を Auth0 Dashboard で設定する必要があります ([Auth0 Configuration](/docs/ja-jp/get-started/architecture-scenarios/spa-api/part-2#auth0-configuration) を参照)
  * Authorization Extension を使用してユーザー permissions を適用できます ([Configure the Authorization Extension](/docs/ja-jp/get-started/architecture-scenarios/spa-api/part-2#configure-the-authorization-extension) を参照)
  * API は、API の呼び出し時に有効な access token が HTTP Authorization header で渡されるようにすることで保護されます ([Implement the API](/docs/ja-jp/get-started/architecture-scenarios/spa-api/part-3#implement-the-api) を参照)
  * auth0.js library を使用して SPA のユーザーを認可し、API の呼び出しに使用できる有効な access token を取得できます ([Authorize the User](/docs/ja-jp/get-started/architecture-scenarios/spa-api/part-3#authorize-the-user) を参照)
  * SPA は、API の呼び出し時に HTTP Authorization header で access token を渡すことができます ([Call the API](/docs/ja-jp/get-started/architecture-scenarios/spa-api/part-3#call-the-api) を参照)
  * SPA は、ユーザーに付与された scopes に基づいて、UI 要素を条件付きで表示できます ([Display UI Elements Conditionally Based on Scope](/docs/ja-jp/get-started/architecture-scenarios/spa-api/part-3#display-ui-elements-conditionally-based-on-scope) を参照)
</Info>

<div id="the-premise">
  ## 前提
</div>

ExampleCoはコンサルティング業を営むスタートアップ企業です。現在、従業員は約100名おり、加えて一部の業務を外部の契約業者に委託しています。従業員と外部契約業者は全員、毎週タイムシートを提出する必要があります。

同社はタイムシート用のアプリケーションを構築しており、このシナリオについては[Regular Web Apps 向けシングルサインオン](/docs/ja-jp/get-started/architecture-scenarios/sso-for-regular-web-apps)で取り上げました。社内の従業員はこのweb appを使ってタイムシートを入力していますが、同社はこれをSPAに置き換えたいと考えています。このアプリは、タイムシート エントリを入力し、APIを使ってそのデータを一元管理されたタイムシートデータベースに送信するために使用されます。また、このアプリでは、管理者がタイムシート エントリを承認することもできます。

<div id="goals-requirements">
  ## 目標と要件
</div>

ExampleCo は、柔軟性の高いソリューションを構築したいと考えています。現時点でタイムシートの入力に必要なのは SPA のみですが、将来的には営業チーム向けのモバイルアプリなど、さらに多くのアプリケーションをローンチする予定です。そのため同社は、このサーバープロセスだけでなく、将来のすべてのアプリケーションからも勤務時間を記録できるよう、単一の Timesheets API を開発することにしました。それに対応できるだけの柔軟性を備えたセキュリティアーキテクチャを整備したいと考えています。ExampleCo は、アプリケーションのコードとビジネスロジックの大部分を、異なるアプリケーション間で共有できるようにしたいと考えています。

許可されたユーザーとアプリケーションのみが Timesheets API にアクセスできるようにする必要があります。

この SPA を使用するユーザーは 2 種類です。従業員とマネージャーです。従業員は自分のタイムシート エントリの読み取り、作成、削除を行える必要があり、マネージャーはそれに加えてタイムシートを承認できる必要があります。

<div id="learn-more">
  ## 詳細はこちら
</div>

* [ソリューションの概要 (SPAs + API)](/docs/ja-jp/get-started/architecture-scenarios/spa-api/part-1)
* [Auth0 の設定 (SPAs + API)](/docs/ja-jp/get-started/architecture-scenarios/spa-api/part-2)
* [API と SPA の設定 (SPAs + API)](/docs/ja-jp/get-started/architecture-scenarios/spa-api/part-3)
* [Node.js API の実装 (SPAs + API)](/docs/ja-jp/get-started/architecture-scenarios/spa-api/api-implementation-nodejs)
* [Angular 2 SPA の実装 (SPAs + API)](/docs/ja-jp/get-started/architecture-scenarios/spa-api/spa-implementation-angular2)
* [まとめ (SPAs + API)](/docs/ja-jp/get-started/architecture-scenarios/spa-api/part-4)