はじめに

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