これから始めるAuth0 – ノンコーディングでサンプルアプリケーションを動かそう！ #Auth0JP

サンプルアプリケーションの起動までをご紹介！

ここ最近、弊社ではAuth0のハンズオンセミナーを月1回開催しております。毎回多くの方にご応募いただき、Auth0は昨今、注目度の高いサービスであると実感します。

ハンズオンセミナーでは、Auth0を初めて使う方向けに「アカウントの登録」から「サンプルアプリケーションの起動」までの手順をご紹介しております。せっかくなので、その手順をブログでご紹介します。

ノンコーディング で行えますので、エンジニアではない方もぜひ試してみてください！

アカウントの登録

まずは以下のサイトにアクセスし、右上の「サインアップ」をクリックします。

• https://auth0.com/jp/

サインアップは、以下の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を何らかの方法でインストールしている場合は不要です。

• https://nodejs.org/ja/download/

ターミナルを開き、先ほどダウンロードしたサンプルアプリケーションのディレクトリに移動します。例えばmacOSの場合（ダウンロード先を変更していない場合）は以下になります。

$ cd ~/Downloads/01-login

以下を実行し、サンプルアプリケーションの起動に必要なモジュールをインストールします（Yarnを使われている場合は適宜読み替えてください）。

$ npm install

次に以下のコマンドでサンプルアプリケーションを起動します。

$ npm start

ブラウザで http://localhost:3000 を開くと、サンプルアプリケーションが表示されます。

右上の「Login」をクリックすると、Auth0のログイン画面が表示されます。デフォルトでは「メールアドレス＆パスワードで登録」または「Googleでログイン」が有効になっています。

ログインフォームはタブで分かれており「Sign Up」タブで新規登録できます。新規登録してみましょう。

新規登録後、以下のような認可画面が表示されます。こちらは、ログイン済みのユーザー情報をサンプルアプリケーションで使えるようにして良いか、確認を求める画面です。許可します。

ログインが成功し、サンプルアプリケーションの画面に戻ってきました。

右上のアイコンをクリックすると、プロフィール確認画面に遷移できます。

まとめ

サンプルアプリケーションの起動まで、ノンコーディングで行えるところが素敵ですよね。ぜひ試してみてください。

これからもAuth0のビギナー向けの記事を精力的に書いていきたいと思います！