sendSignInLinkToEmail の 後続の処理が動かない

7506 ワード
Chrome Safari sendSignInLinkToEmail Firebase auth Chrome テキストリンク

事象

firebase の認証で、メールリンクを使用するとき、ローカルストレージに情報が書き込まれず、毎回遷移先の画面でメールアドレスを入力させるポップアップが表示されていた。
以上は chrome で行った時で、試しに safari で動かすと、メールすら飛ばず、コンソールにエラーメッセージが表示されていた。

今思えば、chrome でもメールが届かないこともあった気がする。

原因

ボタンが submit タイプだったから。

環境とプログラム

各種バージョン

chrome : バージョン: 84.0.4147.89（Official Build） （64 ビット）
safari : バージョン13.1.2 (15609.3.5.1.3)
<script defer src="https://www.gstatic.com/firebasejs/7.17.1/firebase-auth.js"></script>

ログイン画面（関連する箇所を抜粋）

document.getElementById('li').addEventListener('click', () => {
   const mail = document.getElementById('mail').value;
   const v = {
      url: 'https://sample.com/welcome.html',
      handleCodeInApp: true
   };

   firebase.auth().sendSignInLinkToEmail(mail, v)
      .then(() => {
         window.localStorage.setItem('emailForSignIn', mail);
      })
      .catch((err) => {
         console.log(err);
      });
});

<form>
  <input type="email" id="u1">
  <p>
    <button id="li">ログイン</button>
  </p>
</form>

遷移先（参考）

if (firebase.auth().isSignInWithEmailLink(window.location.href)) {
   var email = window.localStorage.getItem("emailForSignIn");
   if (!email) {
      email = window.prompt("確認のため、メールアドレスを入力してください");
   }
   firebase.auth().signInWithEmailLink(email, window.location.href)
      .then(function (result) {
         window.localStorage.removeItem("emailForSignIn");
      })
      .catch(function (err) {
         console.log(err);
      });
}

対応方法

他のやり方もあるとは思いますが、ボタンのタイプを指定した。

<form>
  <input type="email" id="u1">
  <p>
    <button type="button" id="li">ログイン</button>
  </p>
</form>
UVA-12105 Bigger is Better(デジタルdp構想+プリアンブルゼロの判断)
PHP関連シリーズ-PHP異常詳細