これから始めるAuth0 – ノンコーディングでサンプルアプリケーションを動かそう！ #Auth0JP
サンプルアプリケーションの起動までをご紹介！
ここ最近、弊社ではAuth0のハンズオンセミナーを月1回開催しております。毎回多くの方にご応募いただき、Auth0は昨今、注目度の高いサービスであると実感します。
ハンズオンセミナーでは、Auth0を初めて使う方向けに「アカウントの登録」から「サンプルアプリケーションの起動」までの手順をご紹介しております。せっかくなので、その手順をブログでご紹介します。
ノンコーディング で行えますので、エンジニアではない方もぜひ試してみてください！
アカウントの登録
まずは以下のサイトにアクセスし、右上の「サインアップ」をクリックします。
サインアップは、以下の4つの方式から選びます。
- Email / Passwordによる登録
- GitHubアカウントの利用
- Googleアカウントの利用
- Microsoftアカウントの利用
アカウントの登録が終わったら、次は早速テナントの作成です。
テナントの作成は ドメイン名 と リージョン を決めるだけです。
ドメイン名はランダムで入力された状態になりますが、自由に決められます。全世界でユニークである必要があります。
リージョンは以下から決めます。なお、こちらは後から変更ができません。
| 表示名 | リージョン |
|---|---|
| ??AU | オーストラリア |
| ??EU | ヨーロッパ |
| ??US | アメリカ |
次にアカウント情報を設定します。アカウントの種類は「Company」または「Personal」を選びます。どちらを選ぶかによって、以下の登録項目が変わります。こちらは、Auth0を使う上でのUXをより適切に調整するために使用されます。どちらを選択するかによって機能差が出るものではありません。
以下のようにAuth0のダッシュボードが表示されます。これでアカウント登録（ついでにテナント作成）が完了しました。
アプリケーションの作成
次に、Auth0を使ってログインするサンプルアプリケーションを作成してみましょう。Auth0のダッシュボードから「CREATE APPLICATION」をクリックします。
以下のように作成するアプリケーションの設定項目が表示されます。
アプリケーションの名前は自由に付けましょう（日本語でも問題ありません）。あとで変更が可能です。アプリケーションの種類は、それぞれ以下のような意味合いがあります。
| 種類 | 説明 |
|---|---|
| Native | iOSアプリやAndroidアプリなどのネイティブアプリ |
| Single Page Applications | AngularやReact、Vueなどのシングルページで構成されるWebアプリ（SPA） |
| Regular Web Applications | サーバーサイドと共存する、従来型のWebアプリ |
| Machine to Machine Applications | IoTデバイスなどで使える、Shell Scriptからログインする場合 |
今回は「Single Page Applications」を選択します。
サンプルアプリケーションのダウンロード
アプリケーションの作成後は「Quick Start」タブが表示されているかと思います。こちらからサンプルアプリケーションがダウンロードできます。
サンプルアプリケーションは テナント・アプリケーション設定が埋め込まれたソースコード をダウンロードできます。つまり ソースコードを修正する必要がありません。
サンプルアプリケーションは、以下から好きなフレームワークのものを選ぶことができます。
- Angular（Angular 2系以上）
- AngularJS（Angular 1系）
- JavaScript
- React
- Vue
「JavaScript」は、特にSPA向けのフレームワークなどを使わずに書かれています。ソースコードもシンプルで理解しやすいので、こちらを選択します。
説明が右側と左側に分かれて表示されています。左側はすでに存在するアプリケーションに追加で組み込む場合、右側は新規にサンプルアプリケーションをダウンロードする場合の手順になります。右側の「DOWNLOAD SAMPLE」をクリックします。なお、Zipファイルとしてダウンロードされますので解凍しておいてください。
必要な手順が記載されていますが、本記事で解説するので一旦飛ばし、一番下の「DOWNLOAD」をクリックします。
アプリケーションの設定
次にタブを「Settings」に切り替え、アプリケーションの設定を少し行います。
| 設定項目 | 説明 | 設定値 |
|---|---|---|
Allowed Callback URLs |
ログイン後にリダイレクトするURLのホワイトリスト | http://localhost:3000 |
Allowed Web Origins |
Auth0 APIにリクエストするオリジンURLのホワイトリスト | http://localhost:3000 |
Allowed Logout URLs |
ログアウト後にリダイレクトするURLのホワイトリスト | http://localhost:3000 |
最後に、一番下にある「SAVE」を忘れずにクリックしましょう。
サンプルアプリケーションの起動
いよいよサンプルアプリケーションの起動です。
まずサンプルアプリケーションのローカル起動にはNode.jsの実行環境が必要ですので、以下よりLTS（推奨版）をダウンロード＆インストールしておきます。すでにNode.jsを何らかの方法でインストールしている場合は不要です。
ターミナルを開き、先ほどダウンロードしたサンプルアプリケーションのディレクトリに移動します。例えばmacOSの場合（ダウンロード先を変更していない場合）は以下になります。
$ cd ~/Downloads/01-login
以下を実行し、サンプルアプリケーションの起動に必要なモジュールをインストールします（Yarnを使われている場合は適宜読み替えてください）。
$ npm install
次に以下のコマンドでサンプルアプリケーションを起動します。
$ npm start
ブラウザで http://localhost:3000 を開くと、サンプルアプリケーションが表示されます。
右上の「Login」をクリックすると、Auth0のログイン画面が表示されます。デフォルトでは「メールアドレス＆パスワードで登録」または「Googleでログイン」が有効になっています。
ログインフォームはタブで分かれており「Sign Up」タブで新規登録できます。新規登録してみましょう。
新規登録後、以下のような認可画面が表示されます。こちらは、ログイン済みのユーザー情報をサンプルアプリケーションで使えるようにして良いか、確認を求める画面です。許可します。
ログインが成功し、サンプルアプリケーションの画面に戻ってきました。
右上のアイコンをクリックすると、プロフィール確認画面に遷移できます。
まとめ
サンプルアプリケーションの起動まで、ノンコーディングで行えるところが素敵ですよね。ぜひ試してみてください。
これからもAuth0のビギナー向けの記事を精力的に書いていきたいと思います！
