Firebase身份验证网站:如何验证电子邮件地址 [英] Firebase authentication web: how to verify email address

问题描述

我是Web的Firebase身份验证的新手.我设法获得了一份注册表单，但是在发送电子邮件以验证用户的电子邮件地址时遇到了问题.该用户已正常创建并出现在我的控制台中，但未发送验证电子邮件，并且我在Chrome中收到以下错误:

I'm new to Firebase Authentication for the web. I managed to get a signup form working but I am running into problems with sending the email to verify the users email address. The user is created as normal and appears in my console but no verification email is sent and I get the following error in Chrome:

未捕获的TypeError:无法读取null的属性"sendEmailVerification"

Uncaught TypeError: Cannot read property 'sendEmailVerification' of null

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

Here is the code I have so far:

"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
})();

我还没有找到有关如何执行此操作的简单示例，文档仅提供了代码，但没有提供放置位置的信息.我感谢您的帮助.谢谢.

I haven't found a straightforward example on how to do this and the docs just provide the code but no info on where put it. I appreciate your help. Thank you.

已解决:感谢您的帮助.现在正在工作.这是完整的工作代码:

RESOLVED: Thank you for your help. It's working now. Here's the full working code:

"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
 })();

推荐答案

@Nagaraj N的解决方案是正确的，您还可以如下修改代码:

@Nagaraj N's solution is correct, you can also modify your code as follows:

    // 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.
    })`

这篇关于Firebase身份验证网站:如何验证电子邮件地址的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！