Firebase Web登录由托管公司托管的域



我已经在电脑上本地设置了一个Firebase Web登录,并使用电子邮件/密码登录。我想在我的域名上实现它,它由一家网络托管公司托管,所以我的域名和所有目录都有密码保护。

这可能吗?我在哪里/如何配置它?

我已经提供了我的当前设置作为一个片段。

firebase.auth().onAuthStateChanged(function(user) {
if (user) {
// User is signed in.
document.getElementById('signed-in').style.display = "block";
document.getElementById('sign-in').style.display = "none";
} else {
// No user is signed in.
document.getElementById('signed-in').style.display = "none";
document.getElementById('sign-in').style.display = "initial";}
});
const form = document.getElementById("sign-in-form");
form.addEventListener("submit", login);
function login(event) {
event.preventDefault();
let email = document.getElementById("email").value;
let password = document.getElementById("password").value;
firebase.auth().signInWithEmailAndPassword(email, password).catch(function(error) {
// Handle Errors here.
var errorCode = error.code;
var errorMessage = error.message;

document.getElementById('error-message').textContent = errorMessage;
document.getElementById('error-message-div').style.display = "block";

});
}
body, html {
font-family: 'Nunito', sans-serif;
color: #999;
}
a {
color: #57b846;
text-decoration: none;
}
a:hover {
color: black;
}
#wrapper {
margin: 0;
position: absolute;
padding-bottom: 50px;
top: 50%;
left: 50%;
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
width: 500px;
border-radius: 20px;
box-shadow: 0px 3px 20px 0px; #000;
}
#sign-in-header {
padding: 10px;
color: white;
font-weight: 700;
text-align: center;
background-color: #57b846;
border-radius: 20px 20px 0 0;
}
#sign-in-body {
box-sizing: border-box;
padding: 50px 50px 0 50px;
}
input {
outline: none;
box-sizing: border-box;
font-weight: 600;
font-size: 15px;
color: #1b3815;
line-height: 1.2;
width: 100%;
height: 55px;
background: #ebebeb;
border: none;
border-radius: 25px;
padding: 0 35px 0 35px;
}
#email {
margin-bottom: 15px;
}
input[type=submit] {
color: white;
background-color: #57b846;
padding: 0 35px 0 35px;
margin-bottom: 15px;
cursor: pointer;
margin-top: 20px;
}
input[type=submit]:hover {
background-color: #2e7522;
}
#forgot-password {
text-align: right;
}
#signed-in {
display: none;
}
#error-message-div {
box-sizing: border-box;
font-weight: 600;
font-size: 15px;
color: #D8000C;
width: 100%;
background: #FFBABA ;
border: none;
padding: 10px;
border-radius: 5px;
}
#error-message-div {
display: none;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Login - The Meadow</title>
<link href="https://fonts.googleapis.com/css?family=Nunito:400,600,700&display=swap" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<section>
<div id="wrapper">
<div id="sign-in">
<div id="sign-in-header">
<h1>Sign In</h1>
</div>
<div id="sign-in-body">
<form id="sign-in-form">
<input type="text" id="email" name="email" placeholder="E-mail"><br>
<input type="password" id="password" name="password" placeholder="Password"><br><br>
<div id="forgot-password">Forgot <a href="#">Username / Password?</a></div>
<input type="submit" value="SIGN IN">
</form>
<div id="error-message-div"><strong><span id="error-message"></span></strong></div>
</div>
</div>
<div id="signed-in">You are signed in</div>
</div>
</section>
<!-- The core Firebase JS SDK is always required and must be listed first -->
<script src="https://www.gstatic.com/firebasejs/7.9.1/firebase-app.js"></script>
<!-- TODO: Add SDKs for Firebase products that you want to use
https://firebase.google.com/docs/web/setup#available-libraries -->
<script src="https://www.gstatic.com/firebasejs/7.9.1/firebase-analytics.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.9.1/firebase-auth.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.9.1/firebase-firestore.js"></script>
<script>
// Your web app's Firebase configuration
var firebaseConfig = {
apiKey: "AIzaSyBHoY2Vjhw6fbI6abd_osRzbkfgAZA5yt4",
authDomain: "fir-web-login-3b6c2.firebaseapp.com",
databaseURL: "https://fir-web-login-3b6c2.firebaseio.com",
projectId: "fir-web-login-3b6c2",
storageBucket: "fir-web-login-3b6c2.appspot.com",
messagingSenderId: "569718654639",
appId: "1:569718654639:web:51b3518dc6a0096c58765a",
measurementId: "G-G034W12YF0"
};
// Initialize Firebase
firebase.initializeApp(firebaseConfig);
firebase.analytics();
</script>

<script src="index.js"></script>
</body>
</html>

Firebase身份验证可以在任何托管提供商上使用。

它也可以用于任何自定义域,无论您在哪里注册该域。只需确保将自定义域添加到Firebase身份验证控制台中的授权域列表中即可。

最新更新