Cookie を使用したシングルページアプリ（SPA）の認証

バックエンドサーバーを使用して、Cookie でシングルページアプリ（SPA）を認証する方法を説明します。

シングルページアプリ (SPA) の保護は難しいことがあります。ただし、SPA が次の条件を満たしている場合は、Cookie を使って認証することで実装を簡素化できます。

• 独自のバックエンド経由でクライアントに配信される。
• バックエンドと同じドメインを使用している。
• 認証が必要な API 呼び出しをバックエンドに対して行う。

ここでは、このアプローチの概要と、Node.js を使用した実装例を紹介します。

​

仕組み

以下の手順では、トークンがどのように取得され、利用されるかを示します。このアプローチでは、従来のAuthorization Code Flow with Proof Key for Code Exchangeの代わりに、Implicit Flow with Form Postを使用します。これは、アクセス先が自分自身のリソースである場合、Form Post Response Mode のほうが login をより簡単に実装できるためです。

1. ユーザーがブラウザーで保護されたルートにアクセスするか、認証ステップの開始が必要な操作を行います (たとえば Login ボタンをクリックするなど)
2. ブラウザーのクライアントは、ユーザーが行った操作に応じて、バックエンド上の/loginルート、または保護されたルートにリダイレクトされます
3. バックエンドは、認可サーバーの/authorizeエンドポイントへのリクエストを作成し、ブラウザーのクライアントをそこへリダイレクトします
4. ユーザーは、認可サーバーが提示する方法で認証を求められます
5. 認可サーバーは、URL エンコードされたフォーム POST として、トークンをリダイレクトURIに送信します。バックエンドは、ボディーデータを解析することでそれらのトークンを取得できます。

この時点で、ユーザーは認証されており、バックエンドは必要なトークンを保持しています。これで、クライアント側でこの状態を表す Cookie を作成できます。その後、クライアントブラウザーは SPA を提供するルートにリダイレクトされ、同時に認証 Cookie も受け取ります。

以後、AJAX 呼び出しで API 呼び出しが行われるたびに、この Cookie がクライアントとバックエンドの間でやり取りされます。各リクエストで、バックエンドは Cookie がまだ有効かどうかを検証し、有効であればリクエストの処理を続行します。

​

無効または欠落しているCookie

この方法を実装する際は、認証Cookieが無効な場合や存在しない場合への対応が必要です。クライアントからバックエンドへのAPI呼び出しはバックグラウンドで行われるため、ユーザーに再認証が必要であることを示すサーバーからの応答は、クライアント側で処理しなければなりません。

次のサンプルアプリケーションでは、このケースを、API呼び出しの結果が302 Redirectになった場合にユーザーに再認証を促すという単純な方法で処理しています。302が発生するのは、Cookieのバリデーションに失敗すると、サーバーが認可サーバーの認可エンドポイントへリダイレクトしようとし、その応答をクライアントに返すためです。

​

例

このサンプルアプリケーションでは、Node.js と Express を使用して、上記の概念を実演します。

​

前提条件

• この手順を進めるには、最新バージョンの Node がインストールされていることを確認してください。

• Node をインストールしたら、ソースコードをダウンロードまたはクローン して、ターミナルでプロジェクトフォルダを開いてください。

  # SSH を使用してチュートリアルのリポジトリをクローンします
  git clone [e-mail]:auth0-blog/spa-cookie-demo
  # ... または、HTTPS を使用する場合:
  git clone https://github.com/auth0-blog/spa-cookie-demo.git
  # プロジェクトのディレクトリに移動します
  cd spa-cookie-demo
  

• master ブランチは、認証を追加する前のアプリケーションの状態を表します。アプリケーションの最終版を参照したい場合は、with-oidc ブランチをチェックアウトしてください。 git checkout with-oidc

​

Node.jsアプリを初期化する

ターミナルで npm install を実行し、アプリケーションの依存関係をインストールします。アプリケーションを実行するには、npm run dev を実行します。これにより Express サーバーが起動します。ブラウザーで http://localhost:3000 にアクセスすると、アプリケーションを表示できます。

開発サーバーでは nodemon を使用しているため、ファイルの変更を検出すると自動的に再起動します。

​

アプリケーションを試す

http://localhost:3000 でアプリケーションを開いた状態で、Call API ボタンをクリックします。画面にメッセージが表示されます。

ログインしていなくても API を呼び出せたことに注目してください。これを修正するために、API を呼び出す前にユーザーの認証を必須にするミドルウェアを追加しましょう。

​

環境を設定する

アプリケーションで認証を機能させるには、express-openid-connect にいくつかの環境変数が必要です。このアプリケーションでは、これらの変数を .env ファイルで指定できます。プロジェクトのルートディレクトリに .env ファイルを作成し、次の内容を設定します。

.env

ISSUER_BASE_URL="<YOUR OIDC URL>"
CLIENT_ID="<YOUR OIDC CLIENT ID>"
BASE_URL="http://localhost:3000"
APP_SESSION_SECRET="<YOUR SECRET VALUE>"

​

Auth0 でアプリを設定する

1. Auth0 Dashboard > アプリケーション > アプリケーション に移動し、Create Application をクリックします。

2. 新しいアプリケーションに名前を付け、従来型Webアプリケーション を選択して、Create をクリックします。

3. 新しいアプリの 設定 で、Allowed Callback URLs に http:/localhost:3000/callback を追加します。

4. Allowed Logout URLs に http:/localhost:3000 を追加します。

5. 変更を保存 をクリックします。

6. Auth0 Dashboard > Authentication > Social に移動し、いくつかのソーシャル接続を設定します。接続 タブの アプリケーション オプションで、それらをこのアプリで有効にします。この例では、ユーザー名/パスワードのデータベース接続、Facebook、Google、X を使用します。

7. 設定 画面で、上部にあるドメインと Client ID を控えておきます。

8. アプリケーションで設定する必要がある値が 2 つあります。.env ファイルをもう一度開き、これらの値を設定します。

​

アプリを実行する

1. サーバーと環境の設定が完了したら、アプリケーションを開いているブラウザーウィンドウを探します。ブラウザーを閉じてサーバーも停止している場合は、アプリケーションを再起動するためにターミナルで次を実行します。 npm run dev
2. ブラウザーで http://localhost:3000 を開きます。見た目はこれまでと同じですが、今回は Call API ボタンをクリックすると、ユーザーがログインしていないという警告が表示されます。また、API 呼び出しが拒否されるため、以前のように “Hello, World” メッセージは表示されません。
3. Log in now をクリックしてログインします。認証が完了するとアプリに戻り、ログイン状態が反映された UI が表示されます。再度 Call API ボタンを押してサーバーに API 呼び出しを行うと、今度は正常に動作します。
4. ページ上部の Profile リンクをクリックすると、ID トークンから取得したユーザー情報が表示されます。

​

詳細はこちら

• Implicit Flow with Form Post
• セキュリティ
• SameSite Cookie 属性の変更