
Okta
オクタ
Auth0との連携アプリケーションを1から作成してみた
はじめに
Auth0では、アプリケーションとの連携で、アプリケーションのタイプやプラットフォームごとに必要となるチュートリアルを公開しています。
https://auth0.com/docs/quickstarts
今回は、アプリケーションタイプとして「Single Page Application」、プログラミング言語として「JavaScript」を対象とし、Auth0が提供するチュートリアルに沿って、Auth0との連携アプリケーションを1から作成してみたいと思います。
本ページ記載の手順を通じて最終的に実現するアプリケーション及びAuth0連携動作は、以下の通りとなります。
- トップページ(ウェルカムページ)

- [Log in]ボタンクリック時(Auth0によるユーザ認証へリダイレクト)
![[Log in]ボタンクリック時(Auth0によるユーザ認証へリダイレクト)](/business/security/okta/image/okta_auth0_application_dr02.png)
- ログイン完了画面

- [Log out]ボタンクリック時(トップページへリダイレクト)
![[Log out]ボタンクリック時(トップページへリダイレクト)](/business/security/okta/image/okta_auth0_application_dr04.png)
なお、Auth0にて提供されているサンプルアプリケーションにて連携動作を確認したい場合は、[Auth0とサンプルアプリケーションの連携設定方法(リンク)]をご参照ください。
前提
本ページに記載する機能及び設定に関する内容は、2022年10月現在の情報となります。
事前準備
以降の設定を行う前に、以下のご準備をお願いします。
- MacOSまたはWindows PC
- Node.js, Node Package Managerのインストール
- Auth0無料トライアルアカウントの発行(参考: [Auth0トライアル利用方法(リンク)])
設定概要
今回ご紹介する設定手順は、以下の流れとなります。
- Auth0設定
- Auth0におけるアプリケーション作成及び設定
- アプリケーション設定
- アプリケーションのセットアップ
- Webサーバの構築
- Auth0 SDKの初期化
- 認証状態の評価設定導入
- アプリケーションへのログイン動作の導入
- アプリケーションからのログインアウト動作の導入
- アプリケーションへログイン後のページにユーザ情報を表示
ここから、具体的な設定と動作確認手順をご紹介します。
Auth0におけるアプリケーションの作成及び設定
Auth0を用いてアプリケーションの認証機能を実現するために、まずはAuth0側でアプリケーションの連携設定を行います。今回は、JavaScriptによるSingle Page Applicationsを対象として手順をご紹介します。
![Auth0管理画面にログインし、Activityの[Create Application]をクリック](/business/security/okta/image/okta_auth0_application_dr05.png)
- Name:任意の名前を設定(日本語設定可、後で変更も可)
- Choose an application type:「Single Page Web Applications」を選択
![作成するアプリケーションの設定項目が表示されるので、以下を設定し、[Create]をクリック](/business/security/okta/image/okta_auth0_application_dr06.png)


- Allowed Callback URLs(Auth0へログイン後にリダイレクト可能なURLのホワイトリスト)
- Allowed Logout URLs(Auth0からログアウト後にリダイレクト可能なURLのホワイトリスト)
- Allowed Web Origins(Auth0 APIにリクエストするオリジンURLのホワイトリスト)

![画面下の[Save Changes]をクリックし、設定保存](/business/security/okta/image/okta_auth0_application_dr10.png)
アプリケーションのセットアップ
まずは、Auth0と連携するアプリケーションのHTML/CSS/JavaScriptファイル及び保存フォルダの作成、更にはAuth0テナントドメイン及びClient IDを記載した環境情報ファイルを作成します。設定手順は以下の通りです。





Webサーバの構築
次に、Node.jsを用いたWebサーバ起動方法について説明します。設定手順は以下の通りです。






Auth0 SDKの初期化
次に、Auth0 SDKの初期化設定を導入します。設定及び動作確認手順は下記の通りです。





認証状態の評価設定導入
Auth0へのログイン有無については、auth0.isAuthenticated()メソッドから確認でき、[Log in][Log out]ボタンの有効/無効化に利用できます。設定及び動作確認手順は以下の通りです。

![サーバ起動後、Webブラウザでhttp://localhost:3000を開き、ウェルカムメッセージが表示され、[Log in]ボタンが有効かつ[Log out]ボタンが無効であることを確認](/business/security/okta/image/okta_auth0_application_dr31.png)
アプリケーションへのログイン動作の導入
Auth0へログイン認証をリダイレクトさせるには、auth0.loginWithRedirect()メソッドを用います。設定及び動作確認手順は以下の通りです。
![app.jsファイル:[Log in]ボタンをクリックした際にAuth0へログイン認証をリダイレクトするようにlogin関数を追加](/business/security/okta/image/okta_auth0_application_dr32.png)
![以下コマンドにてサーバ起動後、Webブラウザでhttp://localhost:3000を開き、[Log in]ボタンをクリック](/business/security/okta/image/okta_auth0_application_dr33.png)
![以下コマンドにてサーバ起動後、Webブラウザでhttp://localhost:3000を開き、[Log in]ボタンをクリック](/business/security/okta/image/okta_auth0_application_dr34.png)



![再度サーバを起動し、Auth0におけるユーザ認証後のリダイレクトページで[Log out]ボタンが有効化されていること、URLがhttp://localhost:3000になっていることを確認](/business/security/okta/image/okta_auth0_application_dr38.png)
アプリケーションからのログインアウト動作の導入
ログアウト処理の設定を追加します。設定及び動作確認手順は下記の通りです。
![app.jsファイル:[Log out]ボタンクリック時の動作処理を追加するため、logout関数の追加、auth0.logout ()メソッドを用いてAuth0からのログアウト処理を実施](/business/security/okta/image/okta_auth0_application_dr39.png)
![サーバを起動し、Auth0におけるユーザ認証後のリダイレクトページで[Log out]ボタンをクリック](/business/security/okta/image/okta_auth0_application_dr40.png)
![[Log in]ボタンが有効化されることを確認](/business/security/okta/image/okta_auth0_application_dr41.png)
アプリケーションへログイン後のページにユーザ情報を表示
ユーザがログインするたびに、アクセストークンとIDトークンを取得できます。また、ログインユーザのプロファイル情報は、IDトークンから抽出することができます。ここでは、Auth0におけるユーザ認証後にリダイレクトしたページで、ログインユーザのアクセストークンとプロファイル情報を表示するように設定します。設定手順及び動作確認は以下の通りです。



![[Log out]ボタンをクリックすることで、ユーザのアクセストークンとプロファイル情報が非表示となることを確認](/business/security/okta/image/okta_auth0_application_dr45.png)
まとめ
本ページ内の設定手順にて利用したAuth0のメソッドは、以下の通りです。
メソッド | 説明 | 参照手順 |
createAuth0Client | Auth0クライアントの作成 | Auth0 SDKの初期化 |
auth0.isAuthenticated | Auth0へ認証済み有無を確認 | 認証状態の評価設定導入 |
auth0.loginWithRedirect | Auth0のログイン画面へ遷移 | アプリケーションへのログイン動作の導入 |
auth0.handleRedirectCallback | Auth0からの認証結果をコールバック | |
auth0.logout | Auth0からログアウト実行 | アプリケーションからのログインアウト動作の導入 |
auth0.getTokenSilently | Auth0へログインしたユーザのアクセストークンの取得 | アプリケーションへログイン後のページにユーザ情報を表示 |
auth0.getUser | Auth0へログインしたユーザのプロファイル情報の取得 |
本ページの解説が、Auth0とアプリケーションとの連携に必要となる設定やAuth0の仕組みの理解に役立てば幸いです。
お問い合わせ・資料請求
株式会社マクニカ Okta 担当
- TEL:045-476-2010
- E-mail:okta@macnica.co.jp
平日 9:00~17:00