メインコンテンツへスキップ
Auth0を使用すると、アプリケーションに手軽に認証を追加することができます。このガイドは、単純なJavaScriptを使用するシングルページアプリケーション（SPA）にAuth0 SPA SDKを使ってAuth0を統合し、認証の追加とユーザープロファイル情報の表示を行う方法について説明します。このクイックスタートを使用するには、以下の手順に従います：
このクイックスタートでは、ReactやAngularなどのフレームワークを使用しているのでなく、単純なJavaScriptアプリケーションにAuth0を追加しているものとします。
1

Auth0を構成する

Auth0のサービスを利用するには、Auth0 Dashboadでセットアップしたアプリケーションが必要です。Auth0アプリケーションは、開発中のプロジェクトに対してどのように認証が動作して欲しいかを構成する場所です。

​
アプリケーションを構成する

対話型のセレクターを使ってAuth0アプリケーションを新規作成するか、統合したいプロジェクトを表す既存のアプリケーションを選択します。Auth0のすべてのアプリケーションには英数字からなる一意のクライアントIDが割り当てられており、アプリケーションのコードがSDKを通じてAuth0 APIを呼び出す際に使用されます。このクイックスタートを使って構成されたすべての設定は、Dashboardのアプリケーションを自動更新します。今後、アプリケーションの管理もDashboardで行えます。代わりに完了済みの構成を見てみたい場合は、サンプルアプリケーションをご覧ください。

​
Callback URLを構成する

Callback URLとは、Auth0がユーザーを認証後にリダイレクトするアプリケーション内URLです。設定されていない場合、ユーザーはログイン後にアプリケーションに戻りません。
サンプルプロジェクトに沿って進めている場合は、http://localhost:3000に設定してください。

​
ログアウトURLを構成する

ログアウトURLとは、Auth0がユーザーをログアウト後にリダイレクトするアプリケーション内URLです。設定されていない場合、ユーザーはアプリケーションからログアウトできず、エラーを受け取ります。
サンプルプロジェクトに沿って進めている場合は、http://localhost:3000に設定してください。

​
Allowed Web Origins（許可されているWebオリジン）を構成する

［Allowed Web Origin（許可されているWebオリジン）］とは、認証フローにアクセスすることを許可して欲しいURLです。これにはプロジェクトのURLが含まれている必要があります。適切に設定されていない場合、プロジェクトが認証トークンを暗黙でリフレッシュできず、ユーザーがアプリケーションを再び訪問した時、またはページを再読み込みした時にログアウトした状態になってしまいます。
サンプルプロジェクトに沿って進めている場合は、http://localhost:3000に設定してください。
2

Auth0 SPA SDKを追加する

JavaScriptアプリで、Auth0の認証・認可を手軽に実装できるように、Auth0はSPA SDK（auth0-spa-js）を提供しています。Auth0 SPA SDKはNPMパッケージとして、またはCDNからインストールすることができます。このクイックスタートの目的上、CDNを使用します。HTMLページにこのスクリプトタグを含めます。
<script src="https://cdn.auth0.com/js/auth0-spa-js/2.0/auth0-spa-js.production.js"></script>
3

Auth0クライアントを作成する

Auth0 SPA SDKで提供されているAuth0クライアントの新規インスタンスを作成し、このクイックスタートで前に作成したAuth0アプリケーションの詳細を提供します。ユーザーが以前にログインしている場合、クライアントはページの読み込み時に認証状態を更新します。ページが更新されても、ユーザーはこれまでと変わらずログインされます。
4

アプリケーションにログインを追加する

Auth0アプリケーションの構成、Auth0 SPA SDKの追加、Auth0クライアントの作成が完了したら、プロジェクトのためにログインをセットアップする必要があります。これを実現するには、SDKのloginWithRedirect()メソッドを使用して、ユーザーをAuth0のユニバーサルログインページにリダイレクトします。ここでAuth0はユーザーを認証することができます。ユーザーが認証に成功すると、このクイックスタートで前にセットアップしたCallback URLへリダイレクトされます。アプリケーションで選択時にloginWithRedirect()を呼び出すログインボタンを作成します。
チェックポイント
アプリケーションにログインできるようになります。アプリケーションを実行し、ログインボタンを選択します。以下の点を確認します：
  • ユーザー名とパスワードを使って、ログインまたはサインアップできる
  • アプリケーションによってAuth0ユニバーサルログインページにリダイレクトされる
  • 認証用にAuth0にリダイレクトされる
  • 認証した後、Auth0はユーザーをアプリケーションにリダイレクトで戻す
  • コンソールでAuth0に関連したエラーを受け取らない
5

Auth0からのコールバックを処理する

ブラウザーでアプリケーションプロセスへとリダイレクトで戻されると、アプリケーションはAuth0からのコールバックを検出した場合にのみ、Auth0クライアントでhandleRedirectCallback()関数を呼び出します。これを実行する1つの方法は、codeとstateのクエリパラメーターが検出されたときに、handleRedirectCallback()のみを呼び出すことです。コールバックの処理に成功すると、パラメーターはURLから削除されます。これによって、次回ページが読み込まれても、コールバックハンドラーがトリガーされることはありません。
チェックポイント
Auth0からのコールバックが正しく処理されます。アプリケーションを実行し、ログインボタンをもう一度選択します。以下の点を確認します：
  • 認証した後、Auth0はアプリケーションにリダイレクトで戻される。
  • クエリパラメータがURLから削除される。
6

アプリケーションにログアウトを追加する

プロジェクトにログインしたユーザーには、ログアウトする方法も必要です。Auth0クライアントには、アプリからユーザーをログアウトするのに使用できるlogout()メソッドが用意されています。ユーザーはログアウトすると、Auth0ログアウトエンドポイントにリダイレクトされてから、即座に、アプリケーションとこのクイックスタートで先ほどセットアップしたログアウトURLへとリダイレクトで戻されます。アプリケーションで選択時にlogout()を呼び出すログアウトボタンを作成します。
SDKによってisAuthenticated()関数が公開されることで、ユーザーが認証されているかどうかを確認することができます。isAuthenticated()関数の値に基づいて、条件付きでログインボタンとログアウトボタンを表示することができます。または、シングルボタンを使って、ログインとログアウトの両方のボタンと条件付きレンダリングを組み合わせることができます。
チェックポイント
アプリケーションからログアウトできるようになります。アプリケーションを実行し、ログインし、ログアウトボタンを選択します。以下の点を確認します：
  • Auth0のログアウトエンドポイントにリダイレクトされている。
  • Auth0がアプリケーションと正しいログアウトURLへのリダイレクトで戻される。
  • アプリケーションにログインしていない。
  • コンソールでAuth0に関連したエラーを受け取らない。
7

ユーザープロファイル情報を表示する

ユーザーがログインやログアウトできるようになったら、認証済みのユーザーに関連付けられたプロファイル情報を取得できるようにしたいと考えるはずです。たとえば、ログインしたユーザーの名前やプロフィール写真を表示することで、ユーザーインターフェイスをパーソナライズできるようになりたいかもしれません。Auth0 SPA SDKは、Auth0クライアントによって公開されたgetUser()関数を介してユーザー情報を提供します。Auth0クライアントは、ユーザーが認証されているかどうかを確認することができるisAuthenticated()関数も公開します。これを使って、たとえば、UI要素を表示・非表示にするかを判断することができます。インタラクティブパネルでコードを確認し、これらの関数の使用方法の例をチェックします。
チェックポイント
ユーザープロファイル情報を表示することができるようになります。アプリケーションを実行して次の点を確認します：
  • ログイン後にユーザー情報が正しく表示される。
  • ログアウト後にユーザー情報が表示されない。

​
次のステップ

成功です！ここまで来れば、アプリケーションにログイン、ログアウト、ユーザープロファイル情報が備わっているはずです。これでクイックスタートチュートリアルは終了ですが、機能はまだまだたくさんあります。Auth0でできることについて詳しくは、以下をご覧ください。
  • Auth0 Dashboard - Auth0のテナントやアプリケーションを構成して管理する方法について説明します
  • auth0-spa-js SDK - このチュートリアルで使用されているSDKをより詳しく説明します
  • Auth0 Marketplace - Auth0の機能性を拡張できる各種の統合を見つけられます
⌘I