Chromebookに開発環境をセットアップして、Auth0 のサンプルアプリケーションでログインを試す
先日、「Go_SaaS 三種の神器オンボーディングセミナー 1 〜東京〜 」を聴講してきました。
ここで紹介されていた3つのうちの1つ 、認証・認可プラットフォームであるAuth0のサンプルアプリケーションを、Chromebookだけで試してみようというのが今回の趣旨です。
なおこの記事は、Linux（ベータ）が有効になっていることを前提とします。僕はPixelbookで試しました。
下準備―開発環境のセットアップ
まずは必要な開発環境のセットアップが必要です。ちゃんとオフィシャルな解説ページがあって、そこを参照しながら進めましょう。
Dockerです。今回用いるAuth0のサンプルアプリケーションはDocker環境で動くようになっているので（それ故、セットアップがすぐ終わって動作試験ができます）、まずはDockerをインストールします。
Auth0の設定
未登録の方は、Auth0にサインアップして、諸々自由に試せる環境を手に入れましょう。ログイン試験用のアカウントも作っておくといいでしょう。
テナントを一個作り、アプリケーションを作成します。
左側のメニューから「Applications」を選び、右側、オレンジ色のボタン「Create Application」を押下します。
Create Application 画面に遷移するので、名前とApplication Typeを選択しましょう。今回、Typeは 「Single page web applications」としました。
Applicationの雛形めいたものができあがると、遷移した先で「What technology are you using for your web app?」と聞かれるので、今回はVueを選びます。
すると Quick Start が表示されます。今回はサンプルアプリケーションを試したいので、「DOWNLOAD SAMPLE」をクリックしてダウンロードしましょう。
こういうふうに設定してね、起動してね、っていう解説とダウンロードボタンが表示されます。ボタンを押下して、vuejs-01-login.zip を取得してください。Chromebookでは「ファイル」アプリで マイファイル → ダウンロード 内にあるのが確認できるので、展開した上で マイファイル → Linuxファイル に移動しておきましょう。
「ターミナル」アプリを開いて、先程コピーしたフォルダまで移動して、下記コマンドでサンプルアプリケーションを起動します。
~/auth0/01-login$ sudo sh exec.sh（sudoが不要になる設定をしていない場合）sudo が必要なので忘れないようにしましょう。コンテナのビルドが始まるので、ちょっとだけ時間がかかります。
その間に、Auth0側の設定をしましょう。Settings タブに移動して、
- Callback URL → http://localhost:3000/callback
- Allowed Web Origins → http://localhost:3000
- Allowed Logout URLs → http://localhost:3000
と設定します。
ここまでで設定は完了です。
ログインを試す
さて実際に、Chromebookローカルで動いているアプリケーションと、Auth0との連携を試してみましょう。
まずは
http://localhost:3000/をChromeブラウザで開いてみましょう。
右上の「Login」を押下すると、Auth0でのログイン画面に遷移します。
連携したサービスのアカウント、もしくはメールアドレスとパスワードでログインすると、ローカルで動いているアプリケーションに戻ります。
右上、ログインボタンがあった箇所が、アカウントのアイコンに変わっているのが確認できると思います。
ここまでで動作確認まで含め完了です。開発といえばMacかLinux、もしくはWindows機が必要だと思われがちですが、Chromebookでもできるぞってことがわかりました。冒頭でリンクしたChromebook Developer Toolbox の解説はかなり充実してて、見てみるだけでも色々できるんだなと思えます。
今回はCrostini（Linuxベータ）対応のChromebookをお持ちで、かつ認証・認可に関心がある人向けの記事ですが、開発環境のセットアップはもっと多くの人の役に立つと思います。
Chromebookをお持ちの方、是非試してみてください。
