Hamamatsu.js #10 Auth0ハンズオン フォロー記事
2020.12.05 に開催された、Hamamatsu.js #10で行ったAuth0ハンズオンのフォロー記事です。
ハンズオン記事
準備
前準備として下記を設定しておきます。
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です。
お疲れ様でした。