Firebase身份验证网络:如何验证电子邮件地址

时间:2017-05-17 12:17:37

标签: javascript email firebase firebase-authentication verification

我是网络Firebase身份验证新手。我设法得到一个注册表单,但我遇到了发送电子邮件以验证用户电子邮件地址的问题。用户按正常方式创建并显示在我的控制台中,但未发送任何验证电子邮件 我在Chrome中收到以下错误:

  

未捕获的TypeError:无法读取null

的属性“sendEmailVerification”

这是我到目前为止的代码:

"use strict";

(function () {

    // initialize firebase
    var config = {
        apiKey: "//api key",
        authDomain: "// etc",
        databaseURL: "// etc",
        projectId: "// etc",
        storageBucket: "// etc",
        messagingSenderId: "// etc"
    };
    firebase.initializeApp(config);

    // get the login form elements from HTML
    var txtEmail = document.getElementById('txtEmail');
    var txtPassword = document.getElementById('txtPassword');
    var btnLogin = document.getElementById('btnLogin');
    var btnSignUp = document.getElementById('btnSignUp');
    var btnLogout = document.getElementById('btnLogout');

    // add login event
    btnLogin.addEventListener('click', function (e) {
        // get email and pass
        var email = txtEmail.value;
        var pass = txtPassword.value;
        var auth = firebase.auth();
        // sign in 
        var promise = auth.signInWithEmailAndPassword(email, pass);
        promise.catch(function (e) {
            return console.log(e.message);
        });
    });

    // add signup event. the signup button sends user email and pass to firebase
    btnSignUp.addEventListener('click', function (e) {
        // get email and pass
        // TODO: validate email - check it is real
        var email = txtEmail.value;
        var pass = txtPassword.value;
        var auth = firebase.auth();
        var user = firebase.auth().currentUser;

        // sign in 
        var promise = auth.createUserWithEmailAndPassword(email, pass);
        promise.catch(function (e) {
            return console.log(e.message);
        }).then(function(){user.sendEmailVerification().then(function() {
          // Email sent.
        }, function(error) {
          // An error happened.
        })
                          }); // end verification
    }); // end sign up button event listener

    // show logout button when user is logged in
    // TODO: make sure the login form clears the credentials on logout
    btnLogout.addEventListener('click', function (e) {
        firebase.auth().signOut();
    });

    // realtime authentication listener
    firebase.auth().onAuthStateChanged(function (firebaseUser) {
        if (firebaseUser) {
            console.log(firebaseUser);
            btnLogout.classList.remove('hide');
            btnSignUp.classList.add('hide');
            btnLogin.classList.add('hide');
        } else {
            console.log('not logged in');
            btnLogout.classList.add('hide');
            btnSignUp.classList.remove('hide');
            btnLogin.classList.remove('hide');
        } // end if statement
    }); // end function
})();

我还没有找到关于如何执行此操作的直接示例,文档只是提供代码,但没有关于放置它的位置的信息。我感谢您的帮助。谢谢。

解决: 谢谢您的帮助。它现在正在运作。这是完整的工作代码:

"use strict";

(function () {

// initialize firebase 
 var config = {
 apiKey: "",
 authDomain: "",
 databaseURL: "",
 projectId: "",
 storageBucket: "",
 messagingSenderId: ""
 };
 firebase.initializeApp(config);

// get the login form elements from HTML
 var txtEmail = document.getElementById('txtEmail');
 var txtPassword = document.getElementById('txtPassword');
 var btnLogin = document.getElementById('btnLogin');
 var btnSignUp = document.getElementById('btnSignUp');
 var btnLogout = document.getElementById('btnLogout');

// login event
 btnLogin.addEventListener('click', function (e) {
 // get email and pass
 var email = txtEmail.value;
 var pass = txtPassword.value;
 var auth = firebase.auth();
 // sign in
 var promise = auth.signInWithEmailAndPassword(email, pass);
 promise.catch(function (e) {
 return console.log(e.message);
 });
 });

// add signup event. the signup button sends user email and pass to firebase
 btnSignUp.addEventListener('click', function (e) {
 // get email and pass
 // TODO: validate email - check it is real
 var email = txtEmail.value;
 var pass = txtPassword.value;
 var auth = firebase.auth();
 var user = firebase.auth().currentUser;

// create user and sign in
 var promise = auth.createUserWithEmailAndPassword(email, pass);
 promise.then(function(user) {
 user.sendEmailVerification().then(function() {
 // Email sent.
 }, function(error) {
 // An error happened.
 });
 }); 
 }); // end sign up button event listener

// show logout button when user is logged in
 btnLogout.addEventListener('click', function (e) {
 firebase.auth().signOut();
 });

// realtime authentication listener
 firebase.auth().onAuthStateChanged(function (firebaseUser) {
 if (firebaseUser) {
 console.log(firebaseUser);
 btnLogout.classList.remove('hide');
 btnSignUp.classList.add('hide');
 btnLogin.classList.add('hide');
 } else {
 console.log('not logged in');
 btnLogout.classList.add('hide');
 btnSignUp.classList.remove('hide');
 btnLogin.classList.remove('hide');
 } // end else statement
 }); // end function
 })();

3 个答案:

答案 0 :(得分:0)

firebase.auth()。currentUser将为null / undefined,直到您通过身份验证。请尝试发送电子邮件,如下所述。

firebase.auth().onAuthStateChanged(function (firebaseUser) {
        if (firebaseUser) {
          firebaseUser.sendEmailVerification().then(function() {
            // Email sent.
          }, function(error) {
            // An error happened.
          })
            ....

        } else {
            ....
        }
    });

答案 1 :(得分:0)

@Nagaraj N的解决方案是正确的,您也可以按如下方式修改您的代码:

    // sign in 
    var promise = auth.createUserWithEmailAndPassword(email, pass);
    promise.then(function(user) {// You are forgetting this reference.
      user.sendEmailVerification();
      // You can also call this.
      firebase.auth().currentUser.sendEmailVerification();
      // Email sent.
    }, function(error) {
      // An error happened.
    })`

答案 2 :(得分:0)

// sign in 
var promise = auth.createUserWithEmailAndPassword(email, pass);
promise.then(function(authData) {// You are forgetting this reference.
    authData.user.sendEmailVerification();
}, function(error) {
    // An error happened.
})

enter code here createUserWithEmailAndPassword返回authData,因此您需要authData,用户才能发送电子邮件验证。