前回に引き続き、FirebaseAuth を使ったログイン認証でアカウントに複数の認証プロバイダをリンクさせることを試していたときのこと
既存のユーザーアカウントに紐付けたい認証プロバイダの認証情報をリンクさせるには、リンク先となるプロバイダ（既存の方）に一度ログインするようユーザーに促す必要があり、選択肢としてはポップアップ ウィンドウをユーザーに表示するか、プロバイダのログインページにリダイレクトすることによりログインを促すことができる
このうちポップアップ ウィンドウを表示させようとしたときに問題がおきた
それはポップアップブロックが生じてしまうこと
ポップアップブロック
Google Chromeでは、悪質な迷惑広告を取り締まる理由でポップアップの自動表示がデフォルトでブロックされており、このログイン用のポップアップウィンドウも漏れなくブロックされてしまう
このブロックを解除するにはユーザーが自分の意思でポップアップを許可するように操作するしかない
Chrome でポップアップをブロックまたは許可する - パソコン - Google Chrome ヘルプ
これでは当然ユーザーのハードルが上がってしまうので、プロバイダのログインページにリダイレクトする方法にした方がよさそう
Facebookアカウントを新たに紐づける場合の実装例が下のリンクにあるが、
https://firebase.google.com/docs/auth/web/facebook-login?hl=ja#account-exists-with-different-credential-%E3%82%A8%E3%83%A9%E3%83%BC%E3%81%AE%E5%87%A6%E7%90%86
こちらではsignInWithPopup(provider) というポップアップ出す方の実装例になっているので
linkWithRedirect(provider) というリダイレクトさせる方を使う
ユーザーがログインしたら、元のページにリダイレクトされるので、ページが読み込まれるときに getRedirectResult を呼び出すことによって、ログイン結果を取得する
こんな感じ
firebase.auth().getRedirectResult().then(function(result) { if (result.credential) { // Accounts successfully linked. var credential = result.credential; var user = result.user; // ... } }).catch(function(error) { // Handle Errors here. // ... });
