はじめに

firebase/firebaseui-web による Firebase Authentication の認証 UI でパスワードの強度チェック(文字数や文字種のルール設定)を行う方法。

TL;DR

  • JS で正規表現を使ってバリデーション
  • 付け焼き刃(フロントでの対処のみ)なので注意
この記事が参考になった方
ここかここからチャージや購入してくれると嬉しいです(ブログ主へのプレゼントではなく、ご自身へのチャージ)
欲しいもの / Wish list

目次

  1. はじめに
  2. TL;DR
  3. 環境・条件
  4. 詳細
    1. 動作イメージ
    2. 対応方法
    3. ざっくり解説
  5. まとめ
  6. その他・メモ
  7. 参考文献

環境・条件

CDN の v3.5.2, v4.7.3 で動作確認済み

1
2
3
4
5
6
7
<!-- v3.5.2 -->
<script src="https://www.gstatic.com/firebasejs/ui/3.5.2/firebase-ui-auth__ja.js"></script>
<link type="text/css" rel="stylesheet" href="https://cdn.firebase.com/libs/firebaseui/3.5.2/firebaseui.css" />

<!-- v4.7.3 -->
<script src="https://www.gstatic.com/firebasejs/ui/4.7.3/firebase-ui-auth__ja.js"></script>
<link type="text/css" rel="stylesheet" href="https://www.gstatic.com/firebasejs/ui/4.7.3/firebase-ui-auth.css" />

詳細

動作イメージ

パスワード入力欄に、入力規則(バリデーションルール)を追加表示。

制限を満たしてなければメッセージ表示

対応方法

以下の JS を実行する、実装は適当なので注意。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
function isValidPassword(password) {
  return !!password?.match(/^(?=.*?[a-z])(?=.*?[A-Z])(?=.*?\d)[a-zA-Z\d]{8,100}$/)
}

function newPasswordInputListener(event) {
  if (event?.target?.name !== 'newPassword') {
    return;
  }

  const submitButton = document.querySelector('.firebaseui-id-page-password-sign-up button[type="submit"]');
  const password = event?.target?.value;
  const passwordErrorNotice = document.querySelector('.firebaseui-new-password-component .firebaseui-error');
  if (!isValidPassword(password)) {
    passwordErrorNotice.classList.remove('firebaseui-hidden');
    passwordErrorNotice.style.display = 'block';
    if (!passwordErrorNotice.innerText.includes('パスワードを正しい形式で入力してください。')) {
      if (passwordErrorNotice.innerText) {
        passwordErrorNotice.innerText += `\n`
      }
      passwordErrorNotice.innerText += `パスワードを正しい形式で入力してください。`
    }
    submitButton.disabled = true;
  } else {
    passwordErrorNotice.classList.add('firebaseui-hidden');
    passwordErrorNotice.style.display = '';
    submitButton.disabled = false;
  }
}

// 新規登録時のパスワードチェック
document.addEventListener('input', newPasswordInputListener, true);

/**
 * 新規登録時のパスワード用 Label を変更
 */
function addNewPasswordDescription() {
  // 新規登録以外
  if (!document.querySelector('.firebaseui-id-page-password-sign-up')) {
    return;
  }

  // 追加済み
  if (document.querySelector('.new-password-description')) {
    return;
  }

  // パスワードの注意事項を追加
  const div = document.createElement('div');
  div.className = 'new-password-description';
  div.innerText = `半角英小文字・大文字・数字を組合せて8〜100字で入力してください。記号も使用できます。 (例: r74bm480, 08MAy1b6 など)`;
  document.querySelector('.firebaseui-new-password-component .firebaseui-error-wrapper').prepend(div);

  // submit 無効化
  const submitButton = document.querySelector('.firebaseui-id-page-password-sign-up button[type="submit"]');
  submitButton.disabled = true;
}
setInterval(addNewPasswordDescription, 500);

CSS

1
2
3
4
5
6
.new-password-description {
  font-size: 0.7rem;
  color: #333;
  margin-top: -15px;
  margin-bottom: 15px;
}

ざっくり解説

firebase/firebaseui-web の挙動を確認して以下のような処理を追加。

  • 登録(Signup)時とログイン(Signin)時のパスワード入力フォームの name は異なる
    • 登録(Signup)時: password
    • ログイン(Signin)時: newPassword
  • input イベントで newPassword だったら正規表現による検証を行う
  • 500msec ごとにパスワードの入力規則追記用の処理を実行
    • .firebaseui-id-page-password-sign-up が新規登録時のコンテナクラス
    • 説明文追加したら保存ボタン(Submit button)の disabled=true
    • キャンセルして再表示とかあるので、常時起動

雑な実装なのでイケてない点が多々あるが「とりあえずカジュアルに脆弱なパスワードを防ぎたい」とかであればありかなと。

まとめ

  • JS で正規表現を使ってバリデーション
  • 付け焼き刃(フロントでの対処のみ)なので注意

その他・メモ

以下も参考になるかも

参考文献

関連記事

この記事が参考になった方
ここかここからチャージや購入してくれると嬉しいです(ブログ主へのプレゼントではなく、ご自身へのチャージ)
欲しいもの / Wish list