Auth0を用いたVue.jsアプリへのログイン機能導入方法 メモ

• 認証基盤サービス(IDaaS)のAuth0を使ってVue.jsアプリにログイン機能を追加する方法についてメモする。

事前準備

• Auth0 アカウント登録＋ログイン
  • 無料トライアル版で実施

アプリケーション登録+サンプル取得

• ダッシュボード/アプリケーション管理画面より「Create Application」を選択
  • https://manage.auth0.com/dashboard/us/{YOUR_TENANT_ID}/applications
• アプリケーション名を入力し、「Single Page Application」を選択して「Create」を押下
• 使用言語として「Vue」を選択
• 「Download Sample」を選択し、Vue.jsサンプルを取得
• ダッシュボード/アプリケーション管理画面より作成したアプリケーションを選択し、以下の項目にhttp://localhost:3000を入力し、保存する。
  • Allowed Callback URLs
  • Allowed Logout URLs
  • Allowed Web Origins

SDKインストール

npm install @auth0/auth0-vue

動作確認

• ダウンロードしたサンプルディレクトリで以下のコマンドを実行する。

  npm run serve
  

  ※http://localhost:3000でアプリが起動する。

• http://localhost:3000にアクセスし、「Login」を押下

  

• 下記Auth0ログイン画面が表示されるので、ログインする。

  

参考情報

• Vue: Login