ブログ | NGINX

OpenID Connect と NGINX Plus を使用して既存のアプリケーションへのユーザー認証を行う

NGINX-F5 水平黒タイプ RGB の一部
リアム・クリリー サムネイル
リアム・クリリー
2016 年 9 月 7 日公開

JWT サポートを使用して既存のアプリケーションに SSO を提供する

[編集者– この投稿では、認証に暗黙的フローをサポートする OpenID Connect プロバイダーで NGINX Plus を使用する方法について説明します。 情報は技術的には正しいが、一部のアクション（ 使用して クローン リファレンス実装の更新により、公開鍵を取得するなどの処理は不要になりました。 現在の実装については、 GitHub リポジトリをご覧ください。

NGINX Plus R15以降では、OpenID Connect認可コードフローの依存当事者として NGINX Plus を使用することもできます。

OAuth 2.0 は、Web サイトやアプリケーションへの認証の柔軟性とユーザー エクスペリエンスを大きく変革しました。 しかし、その名前にもかかわらず、 OAuth 2.0 仕様では、エンドユーザーの ID の検証についてはほとんど言及されておらず、シングル サインオン (SSO) については何も言及されていません。 ここでOpenID Connect が登場します。これは本質的に、OAuth 2.0 アクセス トークンで ID 情報を伝達する欠けている部分です。

OpenID Connect ID トークンは、JSON Web Token (JWT) 仕様に準拠しています。 JWT (発音は「ジョット」) トークンはコンパクトで受け渡しが簡単で、ID 情報を記述するための共通のコア スキーマを提供します。 JWT の優れた点は、API クライアントの認証からエンタープライズ アプリケーションへの SSO の提供まで、ほぼすべての ID ユース ケースに適用できることです。 実際、Google Apps を使用する多くの組織は、Google を ID プロバイダとして利用して、エンタープライズ アプリケーションに SSO を提供できます。 ただし、OpenID Connect と JWT を使用すると、既存の Web アプリケーションへの認証や SSO の提供に使用できなくなるわけではありません。

NGINX Plus R10以降にはネイティブ JWT サポートが含まれており、NGINX Plus はトークンを検証し、アプリケーションが簡単に使用できる方法で、認証されたユーザーの ID を使用してアップストリーム リクエストを装飾できます。 このブログ記事では、NGINX Plus のネイティブ JWT サポートを使用して、アプリケーション自体に変更を加えることなく、既存のアプリケーションで SSO を有効にする方法を説明します。 ID プロバイダーとして Google を使用し、アプリケーションを表すシンプルな Web サイトを使用します。 エンドツーエンドのフローは次のようになります。

NGINX Plus は、Google ベースの SSO に OAuth 2.0 と OpenID Connect を使用してユーザー ID を検証します。

Web アプリケーションで OpenID Connect を有効にする

この例には、NGINX Plus 構成と HTML ログイン ページという 2 つのコンポーネントがあります。

NGINX Plus の設定

JWT を検証するための NGINX Plus の設定は非常にシンプルです。

server { listen 80;
root /var/www/public_html;

location /private/ {
auth_jwt "Google アカウント" token=$cookie_auth_token;
auth_jwt_key_file /etc/nginx/google_certs.jwk;
}
}

locationブロックは、 /private/で始まる URL へのすべてのリクエストを認証する必要があることを指定します。 auth_jwtディレクティブは、返される認証レルムを定義します（401 ) 認証が失敗した場合、およびリクエスト内で NGINX Plus が JWT を見つけることができる場所を示します。 この場合、 auth_tokenという名前の Cookie でトークンが見つかるものと想定されます。 デフォルトでは、NGINX Plus は、AJAX アプリケーションや API クライアントで一般的なAuthorizationヘッダーを使用して、クライアントが JWT をBearer Tokenとして提示することを想定していますが、この例のように、他の HTTP ヘッダー、クエリ文字列引数、または Cookie から JWT を取得することもできます。

auth_jwt_key_fileディレクティブは、NGINX に JWT の署名要素を検証する方法を指示します。 署名の検証により、JWT が Google によって発行され、それ以降変更されていないことが保証されます。 Google は公開鍵を公開し、定期的に更新します。 最新のキーセットを維持するには、このサンプルのcrontabエントリのように、 cron(8)を使用してキーを1時間ごとに取得します。

0 * * * * wget https://www.googleapis.com/oauth2/v3/certs -O /etc/nginx/google_certs.jwk

HTML ベースのログイン ページ

この例をシンプルかつわかりやすくするために、アプリケーション全体を構築するわけではありません。 代わりに、次の基本的な HTML を使用してログイン ページを作成します。 HTML ファイルは/var/www/public_html/index.htmlと呼ばれます (これは、NGINX Plus 構成で定義したルートパスと一致します)。

<html>
<head>
<meta http-equiv="cache-control" content="no-cache" />
<meta http-equiv="expires" content="0" />
<title>NGINX OpenID Connect デモ</title>
<script src="https://apis.google.com/js/platform.js" async defer></script>
<meta name="google-signin-scope" content="profile email">
    <meta name="google-signin-client_id" 
content="クライアントID.apps.googleusercontent.com">
<script src="/js.cookie.js"></script>
</head>
<body>
<h2>NGINX OpenID Connect デモ</h2>
<hr/>
<h3>Google アカウントでログインし、<a href="/private/">プライベート エリア</a> にアクセスします。</h3>
<table><tr><td>
<div class="g-signin2" data-onsuccess="onSignIn" data-theme="dark"></div></td>
<script>
function onSignIn(googleUser) {
var profile = googleUser.getBasicProfile();
Cookies.set('auth_token', googleUser.getAuthResponse().id_token);
document.getElementById('google_signout').innerHTML = '<a href="#" onclick="signOut();"><img src="' + profile.getImageUrl() + '" width=32 height=32>サインアウト</a>';
};
関数 signOut() {
var auth2 = gapi.auth2.getAuthInstance();
auth2.signOut().then(function () {
Cookies.remove('auth_token');
document.getElementById('google_signout').innerHTML = '';
});
}
</script>
<td><div id="google_signout"></div></td>
</tr></table>
<hr/>
</body>
</html>

ブロック内の 2 つの重要な依存関係を強調表示しました。

  • <meta name="google‑signin‑client_id"> タグ – 使用しています Google の OAuth 2.0 JavaScript API OAuth 2.0 エンドユーザーの同意と認証プロセスを実行します。 これにより、ログイン ボタンが提供され、ログインしているかどうかを検出できます。 ウェブサイトが Google によって認証されるためには、OAuth 2.0 クライアント ID を作成し、それをこのタグのコンテンツ属性として提供して、クライアント IDプレースホルダーを置き換える必要があります。 新しい OAuth 2.0 クライアント ID を作成する手順については、この記事の下部にある付録を参照してください。
  • <script src="/js.cookie.js"> タグ – OAuth 2.0 アクセス トークンから ID トークンを抽出し、Web サイトに送信する Cookie を作成できる Cookie パーサーが必要です。 Cookies.setの行は、このタグに含まれているJavaScript Cookieライブラリを使用してこれを実現します。

これらの要素が整うと、Google のログイン メカニズムを備えたパブリック ホームページと、NGINX Plus によって保護されたプライベート エリアが完成します。 プライベートエリアにはコンテンツを作成していないので、404アクセスしようとするとエラーが発生することが予想されます。

さらに読む

高度な JWT 機能の詳細については、 「JWT と NGINX Plus を使用した API クライアントの認証」を参照してください。 JWT から取得したユーザー ID 情報を使用して認証されたリクエストをプロキシし、JWT クレームをログに記録し、複数の ID プロバイダーをサポートする方法について説明します。

NGINX Plus のネイティブ JWT サポートについて詳しく知るには、今すぐ30 日間の無料トライアルを開始するか、お問い合わせください。

付録 – Google OAuth 2.0 クライアント ID の作成

[編集者– 公開時点で Google API GUI を正確に表現するためにあらゆる努力を払っていますが、GUI は非常に動的であり、メニュー オプションや場所は変更される可能性があります。 これらの手順を参考にして、必要に応じて現在の GUI に合わせて調整してください。

  1. https://console.developers.google.com/apis/dashboardで Google API ダッシュボードにアクセスします。

    開くページは、Google API の履歴によって異なります。 アカウントを作成し、使用条件に同意し、これらの手順に示されていないその他の手順を実行する必要がある場合があります。

    次のスクリーンショットは、ダッシュボードの左上隅を示しています。 Google APIロゴの右側にある単語をクリックします (以前にプロジェクトを作成したことがある場合は、 Projectという単語の代わりにそのプロジェクトの名前が表示されることがあります)。 プロジェクトの作成を選択します。

    Google OAuth 2.0 クライアント ID を作成するときは、API Manager ダッシュボードの左上隅にある Google API ロゴの横にあるドロップダウン メニューから [プロジェクトの作成] を選択します。

     

  2. 新しいプロジェクトを作成します。 ここで、新しいプロジェクトはNGINX OpenIDと呼ばれます。 [作成]ボタンをクリックすると、プロジェクトが作成されたことを示す通知が表示されるまで数秒かかることがあります。

    Google OAuth 2.0 クライアント ID を作成するときは、新しいプロジェクトの名前を指定します。

     

  3. プロジェクトで Google+ API を有効にします。 OAuth 2.0 認証および ID サービスを提供します。

    (API Manager ダッシュボードがウィンドウのメイン部分にまだ表示されていない場合は、画面の左側のナビゲーション領域で[ダッシュボード]をクリックします。)

    Google+ API を有効にする最初の手順は、 [API を有効にする]ボタンをクリックすることです。

    Google OAuth 2.0 クライアント ID を作成するときは、API Manager ダッシュボード画面で「API を有効にする」ボタンをクリックします。

     

  4. Google+ API (ソーシャル APIセクション内) をクリックします。

     

  5. [有効にする]ボタンをクリックします。

     

  6. プロジェクトの資格情報を作成するには、画面の左側のナビゲーション領域で「資格情報」をクリックし、 「資格情報の作成」ボタンをクリックします。

    ドロップダウン メニューでOAuth クライアント ID を選択します。

    Google OAuth 2.0 クライアント ID を作成するときは、作成する認証情報の種類として「OAuth クライアント ID」を選択します。

     

  7. Web アプリケーションのラジオ ボタンを選択します。 「承認された JavaScript オリジン」フィールドに、NGINX Plus がインストールされているホストの URL と、 「Web アプリケーションで OpenID Connect を有効にする」でlistenディレクティブのパラメータとして指定したポート番号 (例: mydomain.example.com:80 ) を指定します。 この例では localhost を使用していますが、実際の NGINX Plus インスタンスのホスト名とポートを入力する必要があります。

    [作成]ボタンをクリックします (作成プロセスを開始するには、複数回クリックする必要がある場合があります)。

     

  8. OAuth クライアントウィンドウがポップアップ表示され、クライアント ID とクライアント シークレットが報告されます。 クライアントIDをコピーして コンテンツ の属性 <メタ名="google-signin-client_id"> アプリ内のタグ（ハイライト表示された クライアントID プレースホルダーは上記に表示されています。 クライアントシークレットは必要ありません。

    Google OAuth 2.0 クライアント ID が正常に作成されると、クライアント シークレットとともに「OAuth クライアント」ウィンドウに表示されます。

     

  9. メインの「認証情報」画面で、 「OAuth 同意画面」をクリックします。 メールアドレスと製品名を入力してください（他のすべてのフィールドはオプションです）。

     

資格情報を使用するサンプルアプリケーションの作成に関するセクションに戻る

NGINX Plus のネイティブ JWT サポートについて詳しく知るには、今すぐ30 日間の無料トライアルを開始するか、お問い合わせください。

F5 NGINX に関するブログ投稿をもっと読む ›

「このブログ投稿には、入手できなくなった製品やサポートされなくなった製品が参照されている場合があります。 利用可能な F5 NGINX 製品およびソリューションに関する最新情報については、 NGINX 製品ファミリーをご覧ください。 NGINX は現在 F5 の一部です。 以前の NGINX.com リンクはすべて、F5.com の同様の NGINX コンテンツにリダイレクトされます。"