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

Auth0を使用すると、アプリケーションに手軽に認証を追加することができます。このガイドは、単純なJavaScriptを使用するシングルページアプリケーション（SPA）にAuth0 SPA SDKを使ってAuth0を統合し、認証の追加とユーザープロファイル情報の表示を行う方法について説明します。

このクイックスタートを使用するには、以下の手順に従います：

  • Auth0の無料アカウントにサインアップするか、Auth0にログインします。

  • 統合したいプロジェクトを用意します。または、ログインした後に、サンプルアプリケーションを表示してダウンロードすることもできます。

1

Auth0を構成する

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

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

対話型のセレクターを使ってAuth0アプリケーションを新規作成するか、統合したいプロジェクトを表す既存のアプリケーションを選択します。Auth0のすべてのアプリケーションには英数字からなる一意のクライアントIDが割り当てられており、アプリケーションのコードがSDKを通じてAuth0 APIを呼び出す際に使用されます。

このクイックスタートを使って構成されたすべての設定は、Dashboardのアプリケーションを自動更新します。今後、アプリケーションの管理もDashboardで行えます。

代わりに完了済みの構成を見てみたい場合は、サンプルアプリケーションをご覧ください。

Callback URLを構成する

Callback URLとは、Auth0がユーザーを認証後にリダイレクトするアプリケーション内URLです。設定されていない場合、ユーザーはログイン後にアプリケーションに戻りません。

ログアウトURLを構成する

ログアウトURLとは、Auth0がユーザーをログアウト後にリダイレクトするアプリケーション内URLです。設定されていない場合、ユーザーはアプリケーションからログアウトできず、エラーを受け取ります。

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

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

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>

Was this helpful?

/

3

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

Auth0 SPA SDKで提供されているAuth0クライアントの新規インスタンスを作成し、このクイックスタートで前に作成したAuth0アプリケーションの詳細を提供します。

ユーザーが以前にログインしている場合、クライアントはページの読み込み時に認証状態を更新します。ページが更新されても、ユーザーはこれまでと変わらずログインされます。

4

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

Auth0アプリケーションの構成、Auth0 SPA SDKの追加、Auth0クライアントの作成が完了したら、プロジェクトのためにログインをセットアップする必要があります。これを実現するには、SDKのloginWithRedirect()メソッドを使用して、ユーザーをAuth0のユニバーサルログインページにリダイレクトします。ここでAuth0はユーザーを認証することができます。ユーザーが認証に成功すると、このクイックスタートで前にセットアップしたCallback URLへリダイレクトされます。

アプリケーションで選択時にloginWithRedirect()を呼び出すログインボタンを作成します。

checkpoint.header

アプリケーションにログインできるようになります。

アプリケーションを実行し、ログインボタンを選択します。以下の点を確認します：

  • ユーザー名とパスワードを使って、ログインまたはサインアップできる

  • アプリケーションによってAuth0ユニバーサルログインページにリダイレクトされる

  • 認証用にAuth0にリダイレクトされる

  • 認証した後、Auth0はユーザーをアプリケーションにリダイレクトで戻す

  • コンソールでAuth0に関連したエラーを受け取らない

5

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

ブラウザーでアプリケーションプロセスへとリダイレクトで戻されると、アプリケーションはAuth0からのコールバックを検出した場合にのみ、Auth0クライアントでhandleRedirectCallback()関数を呼び出します。これを実行する1つの方法は、codeとstateのクエリパラメーターが検出されたときに、handleRedirectCallback()のみを呼び出すことです。

コールバックの処理に成功すると、パラメーターはURLから削除されます。これによって、次回ページが読み込まれても、コールバックハンドラーがトリガーされることはありません。

checkpoint.header

Auth0からのコールバックが正しく処理されます。

アプリケーションを実行し、ログインボタンをもう一度選択します。以下の点を確認します：

  • 認証した後、Auth0はアプリケーションにリダイレクトで戻される。

  • クエリパラメータがURLから削除される。

6

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

プロジェクトにログインしたユーザーには、ログアウトする方法も必要です。Auth0クライアントには、アプリからユーザーをログアウトするのに使用できるlogout()メソッドが用意されています。ユーザーはログアウトすると、Auth0ログアウトエンドポイントにリダイレクトされてから、即座に、アプリケーションとこのクイックスタートで先ほどセットアップしたログアウトURLへとリダイレクトで戻されます。

アプリケーションで選択時にlogout()を呼び出すログアウトボタンを作成します。

checkpoint.header

アプリケーションからログアウトできるようになります。

アプリケーションを実行し、ログインし、ログアウトボタンを選択します。以下の点を確認します：

  • Auth0のログアウトエンドポイントにリダイレクトされている。

  • Auth0がアプリケーションと正しいログアウトURLへのリダイレクトで戻される。

  • アプリケーションにログインしていない。

  • コンソールでAuth0に関連したエラーを受け取らない。

7

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

ユーザーがログインやログアウトできるようになったら、認証済みのユーザーに関連付けられたプロファイル情報を取得できるようにしたいと考えるはずです。たとえば、ログインしたユーザーの名前やプロフィール写真を表示することで、ユーザーインターフェイスをパーソナライズできるようになりたいかもしれません。

Auth0 SPA SDKは、Auth0クライアントによって公開されたgetUser()関数を介してユーザー情報を提供します。Auth0クライアントは、ユーザーが認証されているかどうかを確認することができるisAuthenticated()関数も公開します。これを使って、たとえば、UI要素を表示・非表示にするかを判断することができます。インタラクティブパネルでコードを確認し、これらの関数の使用方法の例をチェックします。

checkpoint.header

ユーザープロファイル情報を表示することができるようになります。

アプリケーションを実行して次の点を確認します：

  • ログイン後にユーザー情報が正しく表示される。

  • ログアウト後にユーザー情報が表示されない。

Next Steps

Excellent work! If you made it this far, you should now have login, logout, and user profile information running in your application.

This concludes our quickstart tutorial, but there is so much more to explore. To learn more about what you can do with Auth0, check out:

  • Auth0 Dashboard - Learn how to configure and manage your Auth0 tenant and applications
  • auth0-spa-js SDK - Explore the SDK used in this tutorial more fully
  • Auth0 Marketplace - Discover integrations you can enable to extend Auth0’s functionality

Did it work?

Any suggestion or typo?

Edit on GitHub
Sign Up

Sign up for an or to your existing account to integrate directly with your own tenant.