0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

Firebaseでメール認証を行う

Last updated at Posted at 2020-06-25

※2020/07/02加筆&修正(あいまいだったターゲットをWebアプリのJavascriptに限定)

下記サイトを参考に実施、公式ドキュメントには書かれていない、具体的な手順がのっていて、ほぼコピペでOK。
[JS] Firebaseの覚書 ① メールアドレス認証…(a)

※IDトークンの更新はNGだったので『location.href』でリロード(URLパラメータは削除)

理解を深めるために、下記の公式のドキュメントを参照
Firebase Authentication…(b)

具体的に実装したのは下記
(1)メール&パスワード新規登録
(2)ログイン処理
(3)ログアウト処理
(4)表示名の変更
(5)パスワード変更
(6)パスワードリセット
(7)メール変更
(8)ユーザー削除
※(5)(6)はハマったので詳細記述

(5)パスワード変更の詳細
  credentialの取得は(a)を参考に、パスワード変更は(b)を参考に実施

    user.reauthenticateWithCredential(credential).then(function() {
        console.log('パスワード変更の認証はOK')
        user.updatePassword(password1).then(function() {
            alert('パスワードの変更を完了しました');
        }).catch(function(error) {
            alert('メールアドレスの変更に失敗しました(' + error.message +')');
        });
   }).catch(function(error) {
        alert('パスワード変更認証に失敗しました(' + error.message +')');
   });

(6)パスワードリセットの詳細
 【参考】
   Firebase Web - Reset password doesn't work?を参考に実施((a)(b)とも記載ない箇所あり)
 【手順】
 (A)入力されたメールアドレスにパスワードリセットメールを送信
 (B)メールにリンクされたURL先でパスワードを入力し下記を実行

(A)入力されたメールアドレスにパスワードリセットメールを送信

        let email = document.querySelector('#email').value;
        if(email != ''){
            firebase.auth().sendPasswordResetEmail(email).then(function() {
                alert('パスワードリセットメールを送信しました。')
            }).catch(function(error) {
                alert('パスワードリセットメールの送信に失敗しました。(' + error.message + ')')
            });
        }

(B)メールにリンクされたURL先でパスワードを入力し下記を実行

            let password = document.querySelector('#password').value; //画面からパスワード取得
            let oobCode = getUrlParam('oobCode'); //urlからoobCodeを取得する関数取得(中身は省略)
            if(oobCode){
                if((password != '') && (password == password2)){
                    resetPassword(oobCode,password)//,'login.html?reset=true');
                }else{
                    alert('パスワードを正しく入力して下さい。確認用と一致していないことが考えられます');                   
                }
            }else{
                alert('oobCodeが正しくありません')
            }  


        var resetPassword = function(oobCode,password){
            firebase.auth().confirmPasswordReset(oobCode, password).then(() => {
                 console.log('password updated')
            }).catch(error => {
                 console.log(error.code, error.message)
            })
        }  
0
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?