前段
Firebase Authentication、便利ですよね。各種主要な認証をポチポチっと様々なプラットフォームで実現できる、素晴らしい。
ただ、電話番号認証でOTPのAutofillをやる際には🤔となったのでメモ書き。
やったこと
きっかけとして何がやりたかったかというと、電話番号認証で認証コードがSMSで届いたら入力フォームにタップ一発でシュッとコードが入って欲しかった。
どんな挙動かというとこちらの記事内のGIFを見るとわかります。
で、これを実現しようと思うと以下のようなコードを書く必要がある。
<input autocomplete="one-time-code"/>
これだけ。スンバラシイ。
意気揚々とiOS/Androidで挙動確認してみたところ、iOS x Safariは想定通りにうま〜く動いてくれました。やったぜ。
ただし、Android x Chromeで試したところなんとまぁ動かない。
首をひねりながら調べていたところ、先程のサイトをよく読むと「Androidでは日本語のメッセージでの発動を確認できなかった」と・・・
Firebase Authenticationから届いてるメッセージはたしかに日本語で、それが原因かいなと対応策を探すことに。
暫く調べているとこんな記事が👀
ここでWebOTP APIの存在を知ることに。コード書けばいいのね〜と書いて試してみました。
ちなみに navigator.credentials.get は localhost か HTTPS の場合のみしか動かないのでご注意を。
で、やってみましたがこりゃまた動かない。どのように動かないかというと navigator.credentials.get で取れてくるべきOTPが取れずtimeoutエラー・・・
またまたなんでじゃと首を傾げていましたが、そもそもFirebase Authenticationから降ってくるメッセージってWebOTP APIの形式に合っているのか？と疑問に。
ちなみに欲しい形式は以下に載ってるように
Your OTP is: 123456. @web-otp.glitch.me #12345
な感じ。
どうなってるのかFirebaseのGitHub探った方が早いかなと調べたところ、こんな感じのissueが。
あー・・・これはサポートされてませんね・・・
というわけでFirebase Authentication側で対応してくれないことには実現できないのかーと敗北しました😇
※もし「いや！出来るよ！」という方がいらっしゃいましたらコメントに書いてもらえると助かります・・・🙇
