(2025/04/23)タイトルに「エラー」と表記していましたが、「ログ」に修正しました。
現象
Identity Platform/Firebase Authenticationを使用して多要素認証にSMS認証の登録を実装する場合、PhoneAuthProvider.verifyPhoneNumber()で表題のログがブラウザのコンソールに出て失敗することがあります。
Failed to initialize reCAPTCHA Enterprise config. Triggering the reCAPTCHA v2 verification.実装はGoogleのスニペットどおりですが、web8とweb9で実行結果に違いが出たりします。
| 対象 | 結果 |
|---|---|
| web8 (namespaced) | 期待どおり成功 |
| web9 (modular) | 失敗 |
調査
Googleのドキュメントにはこのような現象についての記述は見当たりません。
ネットで検索してみると、redditの記事「Firebase Phone Auth reCAPTCHA Error」が見つかりました。他の記事はこの記事の別言語版と、リンク切れのみでしたので、実質たった1つです。
この記事ではReact Nativeで発生しているようですが、私が発生を確認したのはweb9 + Angularの組み合わせです。またこの記事は多要素認証ではなく電話認証のようです。しかし発生している現象はほぼ同じの様子です。この記事でも解決はしていません。
解決
手がかりが全くないので、思い当たるところを勘で変更して動作を確認するという地味な作業を繰り返し、解決方法にたどり着けました。
失敗していた実装は以下のような感じです。MultiFactorUserインスタンスをあらかじめ取得しておき、それを使いまわしていました。
class MfaComponent {
multiFactorUser: MultiFactorUser;
...
constructor(...) {
...
this.multiFactorUser = multiFactor(ログインユーザのUser);
...
}
sendSms() {
this.multiFactorUser.getSesstion() ←ここが原因
.then((multifactorsession) => {
const options = {
phoneNumber: 電話番号,
session: multifactorsesstion,
};
const provider = new PhoneAuthProvider(auth);
provider.verifyPhoneNumber(options, recaptcha).then((verificationid) => {
...
});
MultiFactorUserインスタンスを必要な時に取得するように変更することで、成功するようになりました。
class MfaComponent {
...
constructor(...) {
...
}
sendSms() {
multiFactor(ログインユーザのUser).getSesstion() ←修正
.then((multifactorsession) => {
const options = {
phoneNumber: 電話番号,
session: multifactorsesstion,
};
const provider = new PhoneAuthProvider(auth);
provider.verifyPhoneNumber(options, recaptcha).then((verificationid) => {
...
});
最後に
無事SMSは送信できるようになったものの、表題のログは出続けています。このログがPhoneAuthProvider.verifyPhoneNumber()が期待動作しなかったことと関係あるのかは不明です。動作には影響してなさそうですが、ちょっと不安です。
