【PWA学习与实践】(4) 解决FireBase login验证失败问题

42次阅读

共计 3122 个字符,预计需要花费 8 分钟才能阅读完成。

《PWA 学习与实践》系列文章已整理至 gitbook – PWA 学习手册,文字内容已同步至 learning-pwa-ebook。转载请注明作者与出处。
本文是《PWA 学习与实践》系列的第四篇。是我在测试其他 demo 时遇到的一个问题,算是一篇 TroubleShooting。
PWA 作为时下最火热的技术概念之一,对提升 Web 应用的安全、性能和体验有着很大的意义,非常值得我们去了解与学习。对 PWA 感兴趣的朋友欢迎关注《PWA 学习与实践》系列文章。
引言
在前一篇文章《让你的 WebApp 离线可用》中,我们使用 Service Worker 来做缓存与离线支持。是有一个重要的问题:Service Worker 必须要在 HTTPS 协议下才能运行(或者 localhost)。当然,对于一些只有前端资源(不涉及后端服务)的 demo,我们完全可以将这些前端(静态资源)托管在一个 HTTPS 服务下,使得 Service Worker 可以使用。我选择了 google 的 FireBase 来托管 demo(其实 github page 也是个不错的选择)。
使用 FireBase 非常简单,只需要 firebase login –>firebase init–>firebase deploy 即可。但是在 firebase login 的过程中,遇到了一些问题。这篇文章主要总结了我在 firebase login 遇到的问题及解决方式:

无法获取 authorization code
Authentication Error: Your credentials are no longer valid.

有需要的朋友可以继续看。
首先,如果你对 firebase 完全不了解,下面会有一段非常简短的介绍。
什么是 FireBase
前段时间学习 PWA,在跟着官方教程完成 demo 后,想要在手机上测试一下效果。然而,遇到的一个问题就是:PWA 需要 HTTPS 协议(或者使用 localhost)。
这就需要我们有一个 HTTPS 的服务,并在其上面部署我们本地写好的 demo。而官方 demo 的最后,推荐使用 firebase 来托管你的代码。

在 FireBase 的众多使用场景中,Develop -> Hosting(托管)就是我需要用到的了。然而,在执行 firebase login(账号登录)过程中,却遇到了一些问题。
问题一:在浏览器登录账号后,无反应(无法获取 authorization code)
最开始,我在 CLI 中输入 firebase login,选择 y 后,CLI 会需要一个 authorization code;而浏览器会打开并提示你进行登录。

这里我用 google 账户进行授权登录。然而,在授权之后,却迟迟没有响应(无法得到 authorization code)。这时候,我发现浏览器显示,似乎是在等待 localhost 进行响应。
解决这个问题的方法就是:在登录时,使用 firebase login –no-localhost 进行登录。
重新使用 firebase login –no-localhost 登录。这里我选择了 google 账号进行登录,重复上面的过程:

这次,你就会在浏览器中获得一串 authorization code 值:

将它粘贴到 CLI 中即可。【问题一】解决!
问题二:Error: Authentication Error: Your credentials are no longer valid.
然而,在 CLI 中输入 authorization code 之后,在等待了较长时间的验证后,CLI 中报出了如下错误:

这是怎么回事呢?通过查阅一些资料发现,这很可能是你在电脑上使用“翻墙”工具所导致的。firebase-tool 依赖的 npm 包(faye-websocket)中,未开启代理的相关设置,因此无法进行验证。
解决这个问题的方法有两种:
方法一:在路由器上设置代理,而非本机
有些文章指出,通过在路由器上设置代理,而非在本机开启代理,可以避免这个问题。不过由于一些原因,暂时还没有尝试这种方式,不过通过一些反馈来看,应该是一个有效的方法。
方法二:(hack) 修改代码与相关环境变量
该方法较第一种方法来看,会稍微“硬”那么一些。具体的操作方式如下:

设置环境变量 http_proxy,我本机的代理使用的是 1087 端口。export http_proxy=http://localhost:1087

修改 faye-websocket,开启代理配置。faye-websocket 是 firebase 依赖的一个 WebSocket 库,需要为其 client.js 添加如下配置:

var Client = function(_url, protocols, options) {
options = options || {};
// 添加 proxy 配置
options.proxy = {
origin: ‘http://localhost:1087’,
};

}
如果你是全局安装的 firebase-tools,你可以通过如下方法找到 client.js
NODE_PATH=`npm prefix -g`
// client.js 的位置
$NODE_PATH/lib/node_modules/firebase-tools/node_modules/firebase/node_modules/faye-websocket/lib/faye/websocket/client.js

设置环境变量 NODE_TLS_REJECT_UNAUTHORIZED。export NODE_TLS_REJECT_UNAUTHORIZED=0

重新登录,firebase login –no-localhost,重复之前的操作。你会发现,登录成功!

【问题二】解决!
p.s. 针对这个问题,github 上也有一个 issue:Unable to deploy behind a proxy。
此外,如果你使用了代理,推荐使用全局代理的方式,使你的 CLI 也使用代理。
写在最后
最后,还是回到我开发 PWA 时的需求。文章最开始提到了,我是为了在移动端测试 PWA demo 的效果,所以使用 FireBase 来托管资源。当然,除了 FireBase,还有下面两个办法:

使用 github page。由于 github 全站都是运行在 HTTPS 下,因此在 github page 上托管的静态站点可以使用 Service Worker;
使用 localhost/127.0.0.1。了解 PWA 的话,你会知道除了 HTTPS 之外,也可以使用 localhost(这一设计是为了方便本机调试)。

本文是《PWA 学习与实践》系列中的第四篇。这篇文章并没有探讨 PWA 中实际的技术,而是记录了我在开发、调试 P 过程与遇到的问题。可能有朋友也会遇到类似问题,因此记录下来和大家分享。
在下一篇文章中,我们还是会回到 PWA 背后的技术,来了解一下,如何使用 Push API 来实现后端服务向客户端进行消息推送。
《PWA 学习与实践》系列文章

第一篇:2018,开始你的 PWA 学习之旅
第二篇:10 分钟学会使用 Manifest,让你的 WebApp 更“Native”
第三篇:从今天开始,让你的 WebApp 离线可用
第四篇:TroubleShooting: 解决 FireBase login 验证失败问题(本文)
第五篇:与你的用户保持联系: Web Push 功能
第六篇:How to Debug? 在 chrome 中调试你的 PWA
第七篇:增强交互:使用 Notification API 来进行提醒
第八篇:使用 Service Worker 进行后台数据同步
第九篇:PWA 实践中的问题与解决方案
第十篇:Resource Hint – 提升页面加载性能与体验
第十一篇:从 PWA 离线工具集 workbox 中学习各类离线策略(写作中…)

正文完
 0