【PWA學習與實踐】(4) 解決FireBase login驗證失敗問題

AlienZHOU發表於2018-04-10

《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遇到的問題及解決方式：

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

有需要的朋友可以繼續看。

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

什麼是FireBase

前段時間學習PWA，在跟著官方教程完成demo後，想要在手機上測試一下效果。然而，遇到的一個問題就是：PWA需要HTTPS協議（或者使用localhost）。

這就需要我們有一個HTTPS的服務，並在其上面部署我們本地寫好的demo。而官方demo的最後，推薦使用firebase來託管你的程式碼。

FireBase的各種功能與服務

在FireBase的眾多使用場景中，Develop -> Hosting（託管）就是我需要用到的了。然而，在執行firebase login（賬號登入）過程中，卻遇到了一些問題。

問題一：在瀏覽器登入賬號後，無反應（無法獲取authorization code）

最開始，我在CLI中輸入firebase login，選擇y後，CLI會需要一個authorization code；而瀏覽器會開啟並提示你進行登入。

【PWA學習與實踐】(4) 解決FireBase login驗證失敗問題

這裡我用google賬戶進行授權登入。然而，在授權之後，卻遲遲沒有響應（無法得到authorization code）。這時候，我發現瀏覽器顯示，似乎是在等待localhost進行響應。

解決這個問題的方法就是：在登入時，使用firebase login --no-localhost進行登入。

重新使用firebase login --no-localhost登入。這裡我選擇了google賬號進行登入，重複上面的過程：

【PWA學習與實踐】(4) 解決FireBase login驗證失敗問題

【PWA學習與實踐】(4) 解決FireBase login驗證失敗問題

【PWA學習與實踐】(4) 解決FireBase login驗證失敗問題

這次，你就會在瀏覽器中獲得一串authorization code值：

authorization code

將它貼上到CLI中即可。【問題一】解決！

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

然而，在CLI中輸入authorization code之後，在等待了較長時間的驗證後，CLI中報出瞭如下錯誤：

【PWA學習與實踐】(4) 解決FireBase login驗證失敗問題

這是怎麼回事呢？通過查閱一些資料發現，這很可能是你在電腦上使用“翻牆”工具所導致的。firebase-tool依賴的npm包（faye-websocket）中，未開啟代理的相關設定，因此無法進行驗證。

解決這個問題的方法有兩種：

方法一：在路由器上設定代理，而非本機

有些文章指出，通過在路由器上設定代理，而非在本機開啟代理，可以避免這個問題。不過由於一些原因，暫時還沒有嘗試這種方式，不過通過一些反饋來看，應該是一個有效的方法。

方法二：(hack) 修改程式碼與相關環境變數

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

  1. 設定環境變數http_proxy，我本機的代理使用的是1087埠。export http_proxy=http://localhost:1087
  2. 修改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
複製程式碼

  1. 設定環境變數NODE_TLS_REJECT_UNAUTHORIZED。export NODE_TLS_REJECT_UNAUTHORIZED=0

  2. 重新登入，firebase login --no-localhost，重複之前的操作。你會發現，登入成功！

image.png

【問題二】解決！

p.s. 針對這個問題，github上也有一個issue：Unable to deploy behind a proxy。

此外，如果你使用了代理，推薦使用全域性代理的方式，使你的CLI也使用代理。

寫在最後

最後，還是回到我開發PWA時的需求。文章最開始提到了，我是為了在移動端測試PWA demo的效果，所以使用FireBase來託管資源。當然，除了FireBase，還有下面兩個辦法：

  1. 使用github page。由於github全站都是執行在HTTPS下，因此在github page上託管的靜態站點可以使用Service Worker；

  2. 使用localhost/127.0.0.1。瞭解PWA的話，你會知道除了HTTPS之外，也可以使用localhost（這一設計是為了方便本機除錯）。

本文是《PWA學習與實踐》系列中的第四篇。這篇文章並沒有探討PWA中實際的技術，而是記錄了我在開發、除錯P過程與遇到的問題。可能有朋友也會遇到類似問題，因此記錄下來和大家分享。

在下一篇文章中，我們還是會回到PWA背後的技術，來了解一下，如何使用Push API來實現後端服務向客戶端進行訊息推送。

《PWA學習與實踐》系列文章

相關文章