京都のシステム開発・ホームページ制作会社　株式会社Nextat（ネクスタット）

こんにちは。
ニシザワです。

以前書いた、Firebaseが使い勝手よすぎたの続きで
Firebaseの認証を使ってメールアドレスでの認証を作ってみました。
 

コンソールにてメール/パスワードを許可

まずは、Firebaseのコンソールから認証を許可します。
コンソール>Authentication>ログイン方法>メール/パスワード

 

HTMLにボタンを追加

認証の入力フィールドとボタンを追加します。
今回はtwitter bootstrapのmodalを使っています。

    <button type="button" hidden id="sign-in-email" class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-color-text--white" data-toggle="modal" data-target="#myModal">
        <i class="material-icons">account_circle</i>Sign-in with email
    </button>
    <!-- Modal -->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel">Sign in with email</h4>
                </div>
                <div class="modal-body">
                    <label for="sign-in-email-address">メールアドレス</label><input type="text" id="sign-in-email-address"><br>
                    <label for="sign-in-password">パスワード</label><input type="password" id="sign-in-password">
                </div>
                <div id="account-error-message">

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    <button type="button" id="create-account-with-email" class="btn btn-primary">create account</button>
                    <button type="button" id="sign-in-account-with-email" class="btn btn-primary">sign in</button>
                </div>
            </div>
        </div>
    </div>

main.jsに必要処理を追加

FriendlyChat関数に下記を追加

    this.signInEamilButton = document.getElementById('sign-in-email');
    this.email = document.getElementById('sign-in-email-address');
    this.password = document.getElementById('sign-in-password');
    this.createAccountEmailButton.addEventListener('click', this.createAccountEmail.bind(this));
    this.signInAccountEmailButton.addEventListener('click', this.signInEmail.bind(this));

アカウント作成部分を追加

    FriendlyChat.prototype.createAccountEmail = function () {
        var result = firebase.auth().createUserWithEmailAndPassword(this.email.value, this.password.value).catch(function(error) {
            $('#account-error-message').html(error.message);
        });
    };

アカウント認証部分を追加

    FriendlyChat.prototype.signInEmail = function () {
        firebase.auth().signInWithEmailAndPassword(this.email.value, this.password.value).then(function(success){
            $('#myModal').modal('hide'); //成功時
        }).catch(function(error) {
            $('#account-error-message').html(error.message); //失敗時
        });
    };

onAuthStateChangedにパスワード認証の場合はdisplayNameが入ってこないのでメールアドレスを表示するように変更

    var userName = user.displayName;
    if(user.providerData[0].providerId == 'password'){
        userName = user.email;
    }

これで、新しい認証が追加されて、メールとパスワードの認証ができるようになります。 次は、パスワードリセットの部分を作ってみたいと思います。 以上。