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

> Auth0 でユーザーを認証するために、シングルページアプリケーション（SPA）が OpenID Connect（OIDC）および OAuth 2.0 の Implicit Grant Flow を使用して API とやり取りするアーキテクチャシナリオについて説明します。

# API を利用するシングルページアプリケーション（SPA）

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

また、タイムシートエントリを記録し、API を使って一元化されたタイムシートデータベースに送信するためのシングルページアプリケーション (SPA) も構築します。

<Info>
  ### 要点

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

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

ExampleCo はコンサルティング系のスタートアップ企業です。現在、従業員は約 100 名で、いくつかの業務を外部の委託業者に委託しています。従業員と外部委託業者は全員、毎週タイムシートを記入する必要があります。

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

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

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

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

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

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

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