メインコンテンツへスキップ
Auth0を使用すると、アプリケーションに認証を追加することができます。このガイドは、VueアプリケーションにAuth0 Vue SDKを使ってAuth0を統合し、認証の追加とユーザープロファイル情報の表示を行う方法について説明します。
このクイックスタートは、Vue 3アプリケーションでAuth0 Vueを使用するために設計されています。Vue 2を使用している場合は、Auth0 SPA SDKを使ったVue 2チュートリアルを確認するか、「例を挙げて説明するVue.js認証2」ガイドを参照してください。
このクイックスタートを使用するには、以下の手順に従います：
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 Vue SDKをインストールする

Vue 3アプリで、Auth0の認証・認可を手軽に実装できるように、Auth0はVue SDKを提供しています。ターミナルで以下のコマンドを実行してAuth0 Vue SDKをインストールします：
  cd <your-project-directory>
  npm install @auth0/auth0-vue

​
プラグインを登録する

SDKが機能するには、以下のプロパティを使ってVueアプリケーションでプラグインを登録する必要があります。
  • domain：Auth0テナントのドメインです。この値は、Auth0 Dashboardにあるアプリケーションの［Settings（設定）］の［Domain（ドメイン）］フィールドにあります。カスタムドメインを使用している場合は、この値をカスタムドメインの値に設定してください。
  • clientId：このクイックスタートで前にセットアップした、Auth0アプリケーションのIDです。Auth0 Dashboardにあるアプリケーションの［Settings（設定）］の［Client ID（クライアントID）］フィールドで確認してください。
  • authorizationParams.redirect_uri：ユーザー認証の後、Auth0にユーザーをリダイレクトして欲しいアプリケーション内URLです。このクイックスタートで前にセットアップしたCallback URLと呼応します。この値は、Auth0 Dashboardにあるアプリケーションの［Settings（設定）］の［Callback URLs（コールバックURL）］フィールドにあります。コードに入力した値と前にセットアップした値は必ず一致させてください。異なった場合はユーザーにエラーが表示されます。
プラグインは、provideとapp.config.globalPropertiesの両方を使ってSDKを登録します。これによって、Composition APIとOptions APIの両方が有効になります。
チェックポイント
プラグインが構成されました。アプリケーションを実行して次の点を確認します：
  • SDKが正しく初期化している
  • アプリケーションがAuth0に関連したエラーを投入していない
3

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

次に、プロジェクト用のログインを設定します。useAuth0の返り値に表示されたSDKのloginWithRedirect関数を使用します。これには、コンポーネントのsetup関数でアクセスすることができます。ユーザーはAuth0ユニバーサルログインページにリダイレクトされ、ユーザーの認証後、このクイックスタートで前に設定したCallback URLにリダイレクトされます。

​
Options APIの使用

Options APIでは、thisアクセサを通じてグローバル$auth0プロパティからの同じloginWithRedirectメソッドを使用することができます。
チェックポイント
Auth0ユニバーサルログインからログインできるようになります。ログインボタンをクリックして次の点を確認します：
  • VueアプリケーションによってAuth0ユニバーサルログインページにリダイレクトされる
  • ログインまたはサインアップできる
  • Auth0が、プラグインを構成するために使ったauthorizationParams.redirect_uriの値を使用し、アプリケーションへリダイレクトする。
4

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

プロジェクトにログインしたユーザーには、ログアウトする方法も必要です。ユーザーがログアウトすると、アプリケーションによってAuth0 logoutエンドポイントにリダイレクトされてから、指定されたlogoutParams.returnToパラメーターにリダイレクトされます。useAuth0の返り値に表示されたlogout関数を使用します。これには、コンポーネントのsetup関数でアクセスすることができ、ユーザーをアプリケーションからログアウトします。

​
Options APIの使用

Options APIでは、thisアクセサを通じてグローバル$auth0プロパティからの同じlogoutメソッドを使用することができます。
チェックポイント
アプリケーションを実行してログアウトボタンをクリックし、次の点を検証します：
  • VueアプリケーションによってlogoutParams.returnToアドレスにリダイレクトされる
  • アプリケーションにログインしていない
5

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

次に、認証ユーザーに関連するプロファイル情報を取得する方法を構成します。たとえば、ログインしたユーザーの名前やプロフィール写真をプロジェクトに表示したいかもしれません。ユーザーが認証を行うと、SDKはユーザーのプロファイル情報を抽出し、メモリ内に保存します。アプリケーションは、リアクティブなuserプロパティを使ってユーザープロファイルにアクセスすることができます。このプロパティにアクセスするには、コンポーネントのsetup関数を確認し、userAuth0返り値を見つけます。userプロパティには、ユーザーIDに関する機微な情報が含まれています。これは、ユーザーの認証ステータスに基づいてのみ利用できます。エラーを防ぐため、常に以下を行ってください：
  • Vueがuserプロパティを使用するコンポーネントを呼び出す前に、isAuthenticatedプロパティを使用してAuth0がユーザーを認証したかどうかを定義する。
  • isAuthenticatedプロパティにアクセスする前に、isLoadingがfalseであることをチェックして、SDKの読み込みが完了したことを確認する。

​
Options APIの使用

Options APIでは、アクセサthisを通じてグローバル$auth0プロパティからの同じリアクティブなuser、isLoading、およびisAuthenticatedプロパティを使用します。
チェックポイント
以下の点を確認します：
  • ログイン後、コンポーネント内のuserやその他のユーザープロパティをすべて正しく表示できる

​
次のステップ

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