【PWA學(xué)習(xí)與實(shí)踐】(4) 解決FireBase login驗(yàn)證失敗問題

本文是《PWA學(xué)習(xí)與實(shí)踐》系列的第四篇。是我在測試其他demo時(shí)遇到的一個(gè)問題，算是一篇TroubleShooting。

PWA作為今年最火熱的技術(shù)概念之一，對提升Web應(yīng)用的安全、性能和體驗(yàn)有著很大的意義，非常值得我們?nèi)チ私馀c學(xué)習(xí)。

本系列文章《PWA學(xué)習(xí)與實(shí)踐》會逐步拆解PWA背后的各項(xiàng)技術(shù)，通過實(shí)例代碼來講解這些技術(shù)的應(yīng)用方式。也正是因?yàn)镻WA中技術(shù)點(diǎn)眾多、知識細(xì)碎，因此我在學(xué)習(xí)過程中，進(jìn)行了整理，并產(chǎn)出了《PWA學(xué)習(xí)與實(shí)踐》系列文章，希望能帶大家全面了解PWA中的各項(xiàng)技術(shù)。對PWA感興趣的朋友歡迎關(guān)注。

引言

在前一篇文章《讓你的WebApp離線可用》中，我們使用Service Worker來做緩存與離線支持。是有一個(gè)重要的問題：Service Worker必須要在HTTPS協(xié)議下才能運(yùn)行（或者localhost）。當(dāng)然，對于一些只有前端資源（不涉及后端服務(wù)）的demo，我們完全可以將這些前端（靜態(tài)資源）托管在一個(gè)HTTPS服務(wù)下，使得Service Worker可以使用。我選擇了google的FireBase來托管demo（其實(shí)github page也是個(gè)不錯(cuò)的選擇）。

使用FireBase非常簡單，只需要firebase login -->firebase init-->firebase deploy即可。但是在firebase login的過程中，遇到了一些問題。這篇文章主要總結(jié)了我在firebase login遇到的問題及解決方式：

  1. 無法獲取authorization code
  2. Authentication Error: Your credentials are no longer valid.

有需要的朋友可以繼續(xù)看。

首先，如果你對firebase完全不了解，下面會有一段非常簡短的介紹。

什么是FireBase

前段時(shí)間學(xué)習(xí)PWA，在跟著官方教程完成demo后，想要在手機(jī)上測試一下效果。然而，遇到的一個(gè)問題就是：PWA需要HTTPS協(xié)議（或者使用localhost）。

這就需要我們有一個(gè)HTTPS的服務(wù)，并在其上面部署我們本地寫好的demo。而官方教程的最后，推薦使用firebase來托管你的代碼。

FireBase的各種功能與服務(wù)

在FireBase的眾多使用場景中，Develop -> Hosting（托管）就是這個(gè)PWA demo需要用到的了。然而，在執(zhí)行firebase login（賬號登錄）過程中，卻碰到了一些問題。

問題一：在瀏覽器登錄賬號后，無反應(yīng)（無法獲取authorization code）

最開始，我在CLI中輸入firebase login，選擇y后，CLI會需要一個(gè)authorization code；而瀏覽器會打開并提示你進(jìn)行登錄。

這里我用google賬戶進(jìn)行授權(quán)登錄。然而，在授權(quán)之后，卻遲遲沒有響應(yīng)（無法得到authorization code）。這時(shí)候，我發(fā)現(xiàn)瀏覽器顯示，似乎是在等待localhost進(jìn)行響應(yīng)。

解決這個(gè)問題的方法就是：在登錄時(shí)，使用firebase login --no-localhost進(jìn)行登錄。

重新使用firebase login --no-localhost登錄。這里我選擇了google賬號進(jìn)行登錄，重復(fù)上面的過程：

這次，你就會在瀏覽器中獲得一串a(chǎn)uthorization code值：

authorization code

將它粘貼到CLI中即可?！締栴}一】解決！

問題二：Error: Authentication Error: Your credentials are no longer valid.

然而，在CLI中輸入authorization code之后，在等待了較長時(shí)間的驗(yàn)證后，CLI中報(bào)出了如下錯(cuò)誤：

這是怎么回事呢？通過查閱一些資料發(fā)現(xiàn)，這很可能是你在電腦上開啟代理工具所導(dǎo)致的。firebase-tool依賴的某個(gè)npm包（faye-websocket）中，未開啟相關(guān)的代理設(shè)置，因此無法進(jìn)行驗(yàn)證。

解決這個(gè)問題的方法有兩種：

方法一：在路由器上設(shè)置代理，而非本機(jī)

有些文章指出，通過在路由器上設(shè)置代理，而非在本機(jī)開啟代理，可以避免這個(gè)問題。不過由于一些原因，暫時(shí)還沒有嘗試這種方式，不過通過一些反饋來看，應(yīng)該是一個(gè)有效的方法。

方法二：(hack) 修改代碼與相關(guān)環(huán)境變量

該方法較第一種方法來看，會稍微“硬”那么一些。具體的操作方式如下：

  1. 設(shè)置環(huán)境變量http_proxy，我本機(jī)的代理使用的是1087端口。export http_proxy=http://localhost:1087
  2. 修改faye-websocket，開啟代理配置。faye-websocket是firebase依賴的一個(gè)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

  1. 設(shè)置環(huán)境變量NODE_TLS_REJECT_UNAUTHORIZED。export NODE_TLS_REJECT_UNAUTHORIZED=0

  2. 重新登錄，firebase login --no-localhost，重復(fù)之前的操作。你會發(fā)現(xiàn)，登錄成功！

image.png

【問題二】解決！

p.s. 針對這個(gè)問題，github上也有一個(gè)issue：Unable to deploy behind a proxy。此外，推薦使用全局代理的方式，是你的CLI也使用代理。

寫在最后

最后，還是回到我開發(fā)PWA時(shí)的需求。文章最開始提到了，我是為了在移動端測試PWA demo的效果，所以使用FireBase來托管資源。當(dāng)然，除了FireBase，還有下面兩個(gè)辦法：

  1. 使用github page。由于github全站都是運(yùn)行在HTTPS下，因此在github page上托管的靜態(tài)站點(diǎn)可以使用Service Worker；

  2. 使用localhost/127.0.0.1。了解PWA的話，你會知道除了HTTPS之外，也可以使用localhost（這一設(shè)計(jì)是為了方便本機(jī)調(diào)試）。因此，可以使用代理，把你的移動設(shè)備連上它。這樣，你在移動設(shè)備上就可以通過127.0.0.1來訪問你在電腦上這個(gè)PWA demo的web server了。同時(shí)由于是localhost/127.0.0.1，因此也能夠支持Service Worker的功能了。

本文是《PWA學(xué)習(xí)與實(shí)踐》系列中的第四篇。這篇文章并沒有探討PWA中實(shí)際的技術(shù)，而是記錄了我在開發(fā)、調(diào)試P過程與遇到的問題?？赡苡信笥岩矔龅筋愃茊栴}，因此記錄下來和大家分享。

在下一篇文章中，我們還是會回到PWA背后的技術(shù)，來了解一下，如何使用Push API來實(shí)現(xiàn)后端服務(wù)向客戶端進(jìn)行消息推送。

《PWA學(xué)習(xí)與實(shí)踐》系列文章

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容