[JavaScript+Firebase]基于Google Firebase的无后台web端注册与登录

最近帮一个留学生用户做一个基于firebase的社交平台

查找了很多资料，国内很少有人使用firebase，大部分都是用的MUI+野狗

我也是费了很大的力气，看了好久官方的文档，简单实现了登录和注册功能，我这里使用的是邮箱+密码登录的方式

点击这个，并开始使用

登录方法选择 电子邮件

然后就可以开始写代码了

首先是注册，我这里是我自己写的一个简单demo

<html>
    <head>
        <title>
            注册
        </title>
    </head>
    <body>
    <input id="email"><br><br>
    <button onclick="isEmail()">邮箱</button><br><br>
    <input id="pass"><br><br>
    <button onclick="">注册</button>
    <script src="https://www.gstatic.com/firebasejs/4.12.1/firebase.js"></script>
    <script>
    // Initialize Firebase
    var config = {
        apiKey: "AIzaSyA6y2HXzNynwp0jZMG-xNK_5h1IF1816mA",
        authDomain: "test-d88eb.firebaseapp.com",
        databaseURL: "https://test-d88eb.firebaseio.com",
        projectId: "test-d88eb",
        storageBucket: "",
        messagingSenderId: "63953921461"
    };
    firebase.initializeApp(config);
    function isEmail() {
        Email = document.getElementById("email").value;
        Password = document.getElementById("pass").value;
        if (Email.search(/^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/) != -1)
        {

        }//return true;
        else
        {
            alert("Error Email!");
            return flase;
        }
        if(Password!="")
        {
            firebase.auth().createUserWithEmailAndPassword(Email, Password).catch(function(error) {
                var errorCode = error.code;
                var errorMessage = error.message;
                alert("Failed to register!"+errorMessage);
            });
            alert("Welcome to join us.");
        }
        else
        {
            alert("The password can not be empty!")
        }
    }
 </script>
    </body>
</html>

firebase.auth().createUserWithEmailAndPassword 用于注册，参数就是邮箱和密码

接下来是登录

<html>
    <head>
        <title>
            登录
        </title>
    </head>
    <body>
    <input id="email"><br><br>
    <button onclick="isEmail()">登录</button><br><br>
    <input id="pass"><br><br>
    <button onclick="">注册</button>
    <script src="https://www.gstatic.com/firebasejs/4.12.1/firebase.js"></script>
    <script>
    // Initialize Firebase
    var config = {
        apiKey: "AIzaSyA6y2HXzNynwp0jZMG-xNK_5h1IF1816mA",
        authDomain: "test-d88eb.firebaseapp.com",
        databaseURL: "https://test-d88eb.firebaseio.com",
        projectId: "test-d88eb",
        storageBucket: "",
        messagingSenderId: "63953921461"
    };
    firebase.initializeApp(config);
    function isEmail() {
        Email = document.getElementById("email").value;
        Password = document.getElementById("pass").value;
        if (Email.search(/^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/) != -1)
        {

        }//return true;
        else
        {
            alert("Error Email!");
            return flase;
        }
        if(Password!="")
        {
            firebase.auth().signInWithEmailAndPassword(Email, Password).catch(function(error) {
                var errorCode = error.code;
                var errorMessage = error.message;
                alert("Login failed!"+errorMessage);
            });
        }
        else
        {
            alert("The password can not be empty!")
        }
    }
    firebase.auth().onAuthStateChanged(function(user) {
    if (user) {
        // User is signed in.
        var displayName = user.displayName;
        var email = user.email;
        var emailVerified = user.emailVerified;
        var photoURL = user.photoURL;
        var isAnonymous = user.isAnonymous;
        var uid = user.uid;
        var providerData = user.providerData;
        alert("Login successful");
        alert(displayName+"|"+email+"|"+emailVerified+"|"+photoURL+"|"+isAnonymous+"|"+uid+"|"+providerData)
    } else {
        // User is signed out.
        // ...
    }
    });
    </script>
    </body>
</html>

firebase.auth().signInWithEmailAndPassword(Email, Password) 用于登录，参数一目了然

firebase.auth().onAuthStateChanged(function(user) 这个函数用于检测登录状态，每次登录状态变化都会调用这个函数

经过我的测试，这个函数有点类似检测cookies的意思，可以检测当前的登录状态

 

posted @ 2018-04-19 23:10  leeli73  阅读(3375)  评论(0)    收藏  举报