Chrome 扩展弹出窗口中的 Firebase 身份验证答案

【问题标题】：Firebase authentication in Chrome Extension popupChrome 扩展弹出窗口中的 Firebase 身份验证
【发布时间】：2016-05-03 02:09:01
【问题描述】：

我正在尝试获取身份验证（电子邮件/密码）以在 Chrome 扩展程序中工作。如果我将身份验证代码放在后台脚本中，我似乎工作得很好。但是我似乎无法让它作为浏览器操作脚本工作。

我使用以下代码作为扩展的基础：https://github.com/firebase/firebase-chrome-extension

我将 browser_action.js 更改为：

Firebase.enableLogging(true);
var f = new Firebase('https://myapp.firebaseio.com/');

f.authWithPassword({    
    email    : "a@b.cd",
    password : "1234"
}, function(error, authData) {
    if (error) {
        alert("Login Failed!", error);
} else {
    alert("Authenticated successfully with payload:", authData);
}
});

并且我保持现有的 browser_action.html 不变：

<!doctype html>


<style type="text/css">
    #mainPopup {
        padding: 10px;
        height: 200px;
        width: 400px;
        font-family: Helvetica, Ubuntu, Arial, sans-serif;
    }
    h1 {
        font-size: 2em;
    }
</style>

<div id="mainPopup">
<h1>Firebase test!</h1>
<p>Clicks: <span id="contents"></span></p>
</div>

<script type="text/javascript" src="https://cdn.firebase.com/v0/firebase.js"></script>
<script src="browser_action.js"></script>

当我加载扩展并单击图标时，它会在控制台中显示以下错误：

Uncaught TypeError: f.authWithPassword is not a function

如果我将 firebase 代码和身份验证代码移动到 background.js 文件中，它会起作用并提醒我它已成功通过身份验证。

我做错了什么或者为什么这不可能？

【问题讨论】：

标签： javascript google-chrome-extension firebase firebase-authentication

【解决方案1】：

该示例 chrome 扩展已 3 年未更新，因此其 Firebase 版本已过时。将browser_action.html中的https://cdn.firebase.com/v0/firebase.js替换为https://cdn.firebase.com/js/client/2.2.1/firebase.js，应该就能成功使用authWithPassword了。

【讨论】：

我是个白痴 :') ...我认为 v0 意味着它总是会获得最新版本的库。我错了XD

【解决方案2】：

对于自 2016 年 7 月以来遇到此问题的任何人，Firebase 提供了一组关于如何为 Chrome 扩展程序设置身份验证的更新说明（在他们的示例中，他们使用 Google 身份验证）。在看到这篇文章之前，我跳过了一堆箍……希望能节省一些时间。 https://github.com/firebase/quickstart-js/tree/master/auth/chromextension

【讨论】：

问题是，该代码示例也已过时：在自述文件中，作者引用了 Firebase 控制台中不再存在的 UI 元素：来自外部项目的白名单客户端 ID（可选）。