Auth0 の Lock に氏名欄を追加してみた

Auth0 でサインアップ時に氏名も入力させたいので、どうすればいいか試してみました。 入力された情報を他のシステムに渡すためには、token に含むのがいいかと思ってそれも含めて検証。

データベース作成

メールとパスワードのベーシック認証は、保存用のデータベースの作成が必要。

Connections - Database で DB 作成。

アプリケーションとデータベースの接続

アプリケーションを作成して、データベースと接続が必要。

Applications - MyApp - Connections にて Database と接続。

ユニバーサルログイン利用

ユニバーサルログインを利用。

Universal Login - Login - Customzize Login Page オン。

カスタマイズして氏名の入力欄を追加。

    // 氏名の入力欄追加
    var options = {
      additionalSignUpFields: [
      {
        name: "family_name",
        placeholder: "Enter your family name"
      },
      {
        name: "given_name",
        placeholder: "Enter your given name"
      }
      ]
    }

    // 第３引数に options を渡すように変更
    var lock = new Auth0Lock(config.clientID, config.auth0Domain, options);

Rules 拡張

Rules を利用して、token を拡張する。

Rules - Create Rule で新しいルール作成。

function (user, context, callback) {
  if (user.user_metadata.family_name) {
    context.idToken['family_name'] = user.user_metadata.family_name;
    context.idToken['given_name'] = user.user_metadata.given_name;
  }
  callback(null, user, context);
}

確認と所感

サインインして発行されてる token を https://jwt.io/ か base64 -D で中身確認して、情報の追加を確認。

とりあえず試すことできたけど、JavaScript 苦手なのが辛い。 user.family_name に保存したつもりが user.user_metadata だったり、カスタマイズした Lock がエラーはいてちゃんとサインアップできなかったり、Rules でワーニング出たり...そのあたりは本実装するなら JavaScript まじめに勉強するところからだ。 Lock のカスタマイズが必要ってことは、認証の本質から外れるんで、多用すべきではないんだろうなーという印象を受けました。