Firebase 入门 - 身份验证
firebase示例
由 Mux 主办的 DEV 全球展示挑战赛：展示你的项目！
注：我并非 Firebase 的合作伙伴。
什么是 Firebase？
Firebase是 Google 提供的一系列工具，包括云数据库、身份验证、托管和无服务器函数等，可用于 Web 和移动应用。Firebase 的一大优势在于，用户可以先使用免费套餐，只有当项目达到一定的使用量后才需要付费。
在这篇文章中，我将介绍如何实现身份验证的基础知识。
创建项目
“项目”是 Firebase 对您的网站/应用及其与 Firebase 服务之间连接的称呼。您可以从firebase.google.com登录（右上角），然后点击“前往控制台”（也在右上角）。
控制台
控制台是存放所有项目的地方。将项目添加到帐户后，它们就会显示在这里。选择项目卡片将带您进入该项目的控制面板——您可以在这里调整项目的设置。
添加项目
添加项目非常快捷。点击“添加项目”卡片，输入项目名称，根据需要调整位置，并接受条款和条件（当然，请务必在阅读后再接受）——就这么简单！
关于免费项目的说明
现在或许应该提一下，每个项目都有自己的计划，所以您不必担心项目数量过多而超出免费层级的限制（尽管允许的免费项目数量有限制 -更多详情）。
连接到我们的网页
在使用 Firebase 服务之前，我们需要在页面和 Firebase 之间建立链接。为此，请点击看起来像 HTML 结束标签的图标（从左数第三个白色背景的图标）：
在这里，您可以添加应用程序的昵称（可以是任何名称），还可以根据需要添加托管（通过 Firebase 部署您的网站 - 本文不会介绍托管，因此我没有选中此项）。
点击“注册应用”后，您将获得一个 HTML 代码块和说明，以便将其添加到您的末尾<body>（但在尝试使用 Firebase 之前）。
我将把这段代码添加到一个模板 HTML 文件中（index.html）：
请注意，您需要添加提供的 firebaseConfig 对象值。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Firebase Example</title>
</head>
<body>
<div id="firebaseui-auth-container">
<!-- This is where the Login ui will load -->
</div>
<!-- The core Firebase JS SDK is always required and must be listed first -->
<script src="https://www.gstatic.com/firebasejs/6.3.3/firebase-app.js"></script>
<!-- TODO: Add SDKs for Firebase products that you want to use
https://firebase.google.com/docs/web/setup#config-web-app -->
<script src="https://www.gstatic.com/firebasejs/6.3.3/firebase-auth.js"></script>
<script>
// Your web app's Firebase configuration
var firebaseConfig = {
REPLACE THIS WITH THE CODE PROVIDED BY FIREBASE
};
// Initialize Firebase
firebase.initializeApp(firebaseConfig);
</script>
</body>
</html>
简要分析
此代码块加载 Firebase，类似于您使用 jQuery 的方式。
<!-- The core Firebase JS SDK is always required and must be listed first -->
<script src="https://www.gstatic.com/firebasejs/6.3.3/firebase-app.js"></script>
此代码块将被替换为您希望页面加载的其他服务。在本例中，我们将加载身份验证服务：
<!-- TODO: Add SDKs for Firebase products that you want to use
https://firebase.google.com/docs/web/setup#config-web-app -->
<script src="https://www.gstatic.com/firebasejs/6.3.3/firebase-auth.js"></script>
最后，此代码块将详细信息提供给 Firebase，从而建立与您的项目之间的连接。这就像打电话给朋友，等待他们接听。一旦他们接听，您就可以滔滔不绝地讲个不停了！
<script>
// Your web app's Firebase configuration
var firebaseConfig = {
REPLACE THIS WITH THE CODE PROVIDED BY FIREBASE
};
// Initialize Firebase
firebase.initializeApp(firebaseConfig);
</script>
现在我们的项目已经创建好了，让我们添加身份验证功能。
验证
许多应用都希望利用身份验证系统的强大功能，但要理清与各种服务的连接并启用邮箱登录可能非常繁琐。幸运的是，Firebase 可以帮你省去很多麻烦，让你轻松地从一个服务开始，并随着时间的推移添加其他服务。
启用身份验证
要启用身份验证，请点击身份验证卡片或从左侧导航栏选择“身份验证”，然后在页面加载后点击“设置登录方式”。您可以在这里设置用户可以使用的身份验证提供商。
在本教程中，我将介绍电子邮件/密码和 Google，因为这是我过去使用过的两种选项。
电子邮件/密码
这是最基本的登录选项，允许用户使用邮箱/密码注册/登录。启用此选项非常简单，只需在登录提供商列表中点击“邮箱/密码”，然后切换第一个开关，再点击“保存”即可。
Google 登录
这将允许用户使用他们的 Google 帐户登录（类似于您登录 Firebase 的方式）。与电子邮件/密码登录类似，您可以将启用开关切换为“已启用”，但这里多了一个步骤。您需要添加一个支持邮箱，该邮箱必须是有效的 Gmail 帐户。这是为了方便用户在需要时提交支持邮件。
其他选项
对于外部服务，有关连接到服务提供商的详细信息，请参阅相应的文档（链接在此）：
身份验证用户界面
现在我们已经设置好了与 Firebase 的连接，接下来需要添加用户界面。我将使用Firebase UI，这需要添加以下内容：
// ...
// Initialize Firebase
firebase.initializeApp(firebaseConfig);
</script>
<!-- Firebase UI -->
+ <script src="https://cdn.firebase.com/libs/firebaseui/3.5.2/firebaseui.js"></script>
+ <link
+ type="text/css"
+ rel="stylesheet"
+ href="https://cdn.firebase.com/libs/firebaseui/3.5.2/firebaseui.css"
+ />
+ <script src="./auth.js"></script>
</body>
</html>
这些添加项将加载我们需要的 Firebase UI 信息，但我们需要告诉它要使用什么配置（这就是该auth.js文件的作用所在）。
Auth.js
首先，我们需要auth.js在与文件相同的目录中创建它index.html。
其中auth.js，我们将添加以下内容：
// 1) Create a new firebaseui.auth instance stored to our local variable ui
const ui = new firebaseui.auth.AuthUI(firebase.auth());
// 2) These are our configurations.
const uiConfig = {
callbacks: {
signInSuccessWithAuthResult(authResult, redirectUrl) {
return true;
},
uiShown() {
document.getElementById('loader').style.display = 'none';
},
},
signInFlow: 'popup',
signInSuccessUrl: 'signedIn',
signInOptions: [
firebase.auth.EmailAuthProvider.PROVIDER_ID,
firebase.auth.GoogleAuthProvider.PROVIDER_ID,
// Additional login options should be listed here
// once they are enabled within the console.
],
};
// 3) Call the 'start' method on our ui class
// including our configuration options.
ui.start('#firebaseui-auth-container', uiConfig);
现在，如果您index.html在浏览器中打开该文件，您应该会在页面上看到以下加载信息：
🎉 恭喜！您的身份验证界面已准备就绪！（不过，它需要部署到服务器上才能正常工作；例如，如果您之前已配置过 Firebase Hosting）
文章来源：https://dev.to/terabytetiger/getting-started-with-firebase-authentication-2bg7