これから始める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のビギナー向けの記事を精力的に書いていきたいと思います!