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が含まれている必要があります。適切に設定されていない場合、プロジェクトが認証トークンを暗黙でリフレッシュできず、ユーザーがアプリケーションを再び訪問した時、またはページを再読み込みした時にログアウトした状態になってしまいます。

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の両方が有効になります。

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

Options APIの使用

Options APIでは、thisアクセサを通じてグローバル$auth0プロパティからの同じloginWithRedirectメソッドを使用することができます。

プロジェクトにログインしたユーザーには、ログアウトする方法も必要です。ユーザーがログアウトすると、アプリケーションによってAuth0 logoutエンドポイントにリダイレクトされてから、指定されたlogoutParams.returnToパラメーターにリダイレクトされます。

useAuth0の返り値に表示されたlogout関数を使用します。これには、コンポーネントのsetup関数でアクセスすることができ、ユーザーをアプリケーションからログアウトします。

Options APIの使用

Options APIでは、thisアクセサを通じてグローバル$auth0プロパティからの同じlogoutメソッドを使用することができます。

次に、認証ユーザーに関連するプロファイル情報を取得する方法を構成します。たとえば、ログインしたユーザーの名前やプロフィール写真をプロジェクトに表示したいかもしれません。ユーザーが認証を行うと、SDKはユーザーのプロファイル情報を抽出し、メモリ内に保存します。アプリケーションは、リアクティブなuserプロパティを使ってユーザープロファイルにアクセスすることができます。このプロパティにアクセスするには、コンポーネントのsetup関数を確認し、userAuth0返り値を見つけます。

userプロパティには、ユーザーIDに関する機微な情報が含まれています。これは、ユーザーの認証ステータスに基づいてのみ利用できます。エラーを防ぐため、常に以下を行ってください：

• Vueがuserプロパティを使用するコンポーネントを呼び出す前に、isAuthenticatedプロパティを使用してAuth0がユーザーを認証したかどうかを定義する。

• isAuthenticatedプロパティにアクセスする前に、isLoadingがfalseであることをチェックして、SDKの読み込みが完了したことを確認する。

Options APIの使用

Options APIでは、アクセサthisを通じてグローバル$auth0プロパティからの同じリアクティブなuser、isLoading、およびisAuthenticatedプロパティを使用します。