Hamamatsu.js #10 Auth0ハンズオン フォロー記事

2020.12.05 に開催された、Hamamatsu.js #10で行ったAuth0ハンズオンのフォロー記事です。

ハンズオン記事

Auth0 Vue SDK Quickstarts: Login

準備

前準備として下記を設定しておきます。

1. Auth0のアカウント登録
2. npmのインストール
3. Vue-CLIのインストール

Configure Auth0

Auth0の設定をします。
アカウント登録した時に作成された、Default App→Settingを選んで下記を設定します。

・Configure Callback URLs
　→ http://localhost:3000
・Configure Logout URLs
　→ http://localhost:3000
・Configure Allowed Web Origins
　→ http://localhost:3000

・Application PropertiesのApplication Type
　→ Single Page Aplication を選択します。

設定が終わったらSAVE CHANGESを押下して保存します。

Create a Sample Application

Vueサンプルアプリケーションを作成します。チュートリアルを通して、ここで作成したVueサンプルアプリケーションにAuth0ログイン認証を追加していきます。

・Vue CLIをインストール
・vue create アプリ名 でサンプルアプリを作成
・cd アプリ名
・vue add router　でVueルーターを追加
・Auth0 Client SDK をインストール

ここまで出来たら、アプリを実行して確認します。
→ PORT=3000 npm run serve

Create an Authentication Wrapper

Auth0のSDKを利用した認証用のラッパーを作成して、それをVueから利用できるように設定していきます。

・srcフォルダにauthフォルダを作成
・index.jsを作成してサンプルコードをコピペ
・プロジェクトルートフォルダにauth_config.jsonを作成
　clientIdとdomainの値をDefault App→Setting→Basic Informationからコピーして設定します。
・src/main.jsにチュートリアルの通りにコードを上書きします。

Log in to the App

src/views/Home.vueファイルにログイン・ログアウトボタンを追加します。

・テンプレート部分をサンプルコードで置き換えます。
・Home.vueファイルのスクリプト部分を書き換えて、ログイン・ログアウトメソッドを追加します。

スクリプト部分は下記のようになっていればOK。

<script>
// @ is an alias to /src
import HelloWorld from '@/components/HelloWorld.vue'

export default {
 name: "home",
 components: {
   HelloWorld
 },
 methods: {
   // Log the user in
   login() {
     this.$auth.loginWithRedirect();
   },
   // Log the user out
   logout() {
     this.$auth.logout({
       returnTo: window.location.origin
     });
   }
 }
};

</script>

ここまでで、ログイン出来るか確認します。ホームからLog inボタンを押下すると、Auth0の認証画面が表示されます。

認証が完了すると、ホーム画面にリダイレクトされて、Log outボタンが表示されていることを確認できたら認証部分の実装は完了です。

Display the User's Profile

ユーザー認証後のページに、ユーザープロファイルを表示します。

src/views フォルダーにProfile.vueファイルを作成します。

touch ./views/Profile.vue

コードをコピペでOK。

Add a route to the Profile component

ユーザープロファイルページへのルーティングを追加します。

router/index.jsにルーティングを追加します。

// Profile.vue を読み込み
import Profile from "../views/Profile.vue";
・・・
const router = new VueRouter({
 mode: 'history',
 routes: [
   {
     path: '/',
     name: 'Home',
     component: Home
   },
   {
     path: '/about',
     name: 'About',
     component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
   },

   // NEW - add the route to the /profile component
   {
     path: "/profile",
     name: "profile",
     component: Profile
   }
 ]
});
・・・​

App.vueにプロファイルページへのリンクを追加します。

プロファイルページへのリンクは、ユーザーが認証されている時にのみ表示されるように設定します。

<router-link v-if="$auth.isAuthenticated" to="/profile">Profile</router-link>

Secure the Profile Page

プロファイルページを保護します。

URL(http://localhost:3000/profile)を打ち込むとプロファイルページに直接アクセス出来てしまいます。
※実際は、ユーザー認証がされていないとプロファイルページにアクセスしてもユーザープロファイル情報は表示されません。

ページのアクセス自体を防止するためにauthGuard.jsを追加します。

・src/auth フォルダーに authGuard.jsを作成します。

authGuardが実装されると、ログインしていない場合に/profileに直接アクセスすると、Auth0の認証画面にリダイレクトされます。

認証前

認証後

こんな画面が表示されて、プロファイル画面を表示させるとユーザープロファイルが表示されればOKです。

お疲れ様でした。

参考

Auth0: Secure access for everyone. But not just anyone.

Auth0 Docs

Auth0 Single-Page App Quickstarts