ゲームソリューション部の新屋です。 Auth0はいいものだと兼ねてから聞いていましたが、実際に試したことはありませんでした。
Auth0はいわゆるIDaasと呼ばれる認証プラットフォームです。サービス開始からもう久しく、DeveloperIOにも既に数多くの記事がありますね。
https://dev.classmethod.jp/tags/auth0/
この記事では、ノーコードでAuth0のデフォルト認証方法であるメールアドレス+パスワード認証が動くところを確認することができます。
前提
アカウント作成
- アカウント作成と同時にテナントも作成されます。
- テナントが何かについては以下を参照ください。
ローカル実行環境
- Mac Ventura M2
- Node.js v20.5.0
- npm 9.8.0
今回は、Auth0から提供されているSPAのVanilaJSのサンプルプログラムを利用します。
パスワード認証
アプリケーション作成
テナント管理画面から
Applications → Create Application → QuickStart → Single-Page App → JavaScript → Download Sample
と操作し、アプリケーションと対応するサンプルプログラムをダウンロードします。
Callback URLを設定します。
Callback URLとは、ログイン後に表示したい画面のURLです。
今回は http://localhost:3000/ を設定します。
テナント管理画面から
Applications → Default App → Settings → Allowed Callback URLs, Allowed Logout URLs → Save Changes
なぜCallback URLが必要かについては後日また記事化しようと思います（もう世の中に沢山ありますが）
サンプルプログラムを起動します。
さきほどダウンロードしたファイルを解凍して 01-login に移動
# path/to/01-login
$ npm i
$ npm run start適当なユーザーアカウントを作成してログインしてみます。
http://localhost:3000にアクセスして
Login → サインアップ → 適当なメールアドレス, パスワード → アプリの認証許可
これでログインできました。物凄く簡単ですね！
まとめ
簡単なのは理解できましたが、このまま実際の開発に組み込むことはできません。 ログイン画面はどの程度カスタマイズできるのか、ユーザーやトークンがどのように管理されているのか、二要素認証やソーシャルログイン等
引き続き、記事化しようと思います。
次回は、パスワードレスの認証をやってみます。
15
