[Обучение и практика PWA] (4) Решить проблему сбоя аутентификации при входе в FireBase

внешний интерфейс Командная строка PWA Firebase
[Обучение и практика PWA] (4) Решить проблему сбоя аутентификации при входе в FireBase

Серия статей «Обучение и практика PWA» организована в видеgitbook — учебное пособие по PWA, текстовое содержимое было синхронизировано сlearning-pwa-ebook. При перепечатке просьба указывать автора и источник.

Эта статья«Обучение и практика PWA»Четвертый в серии. Это проблема, с которой я столкнулся при тестировании других демонстраций, и это устранение неполадок.

Как одна из самых популярных технических концепций в настоящее время, PWA имеет большое значение для повышения безопасности, производительности и удобства веб-приложений, и она очень достойна нашего понимания и изучения. Друзья, интересующиеся PWA, могут обратить внимание на серию статей "PWA Learning and Practice".

введение

в предыдущем посте«Как сделать ваше веб-приложение доступным в автономном режиме»В , мы используем Service Worker для кэширования и автономной поддержки. Есть важный вопрос:Service Worker должен работать по протоколу HTTPS (или локальному хосту).. Конечно, для некоторых демонстраций, которые имеют только интерфейсные ресурсы (не связанные с серверными службами), мы можем разместить эти интерфейсные (статические ресурсы) в службе HTTPS, чтобы Service Worker мог их использовать. я выбрал гуглFireBaseРазместить демонстрацию (на самом деле, страница github также является хорошим выбором).

Использовать FireBase очень просто, нужно толькоfirebase login -->firebase init-->firebase deployВот и все. Но когдаfirebase loginВ процессе возникли некоторые проблемы. Эта статья в основном суммирует моиfirebase loginВозникшие проблемы и решения:

  1. Не удалось получить код авторизации
  2. Authentication Error: Your credentials are no longer valid.

Нуждающиеся друзья могут продолжать смотреть.

Во-первых, если вы ничего не знаете о firebase, вот очень краткое введение.

Что такое FireBase

Я изучил PWA некоторое время назад, и после официального руководства по завершению демо-версии я хочу проверить эффект на своем мобильном телефоне. Однако есть одна проблема: для PWA требуется протокол HTTPS (или используйте localhost).

Для этого нам нужно иметь службу HTTPS и развернуть на ней нашу локально написанную демонстрацию. В конце официальной демонстрации рекомендуется использовать firebase для размещения вашего кода.

FireBase的各种功能与服务

Среди многих сценариев использования FireBase мне нужно использовать «Разработка -> Хостинг». Однако при выполненииfirebase login(Вход в учетную запись), но возникли некоторые проблемы.

Вопрос 1: После входа в аккаунт в браузере нет ответа (невозможно получить код авторизации)

Сначала я набрал в CLIfirebase login,выберитеyПосле этого CLI потребует код авторизации, а браузер откроется и предложит авторизоваться.

Здесь я использую учетную запись Google для авторизации входа в систему. Однако после авторизации нет ответа (не в состоянии получить код авторизации). В это время я обнаружил, что браузер показал, что казалось, что ждалlocalhostРеагировать.

Решение этой проблемы: при входе используйтеfirebase login --no-localhostчтобы залогиниться.

повторное использованиеfirebase login --no-localhostАвторизоваться. Здесь я выбираю учетную запись Google для входа и повторяю описанный выше процесс:

На этот раз вы получите строку значений кода авторизации в браузере:

authorization code

Вставьте его в CLI. [Вопрос 1] Решено!

Вопрос 2: Ошибка: Ошибка аутентификации: Ваши учетные данные больше не действительны.

Однако, после ввода кода авторизации в CLI, после длительного ожидания проверки, в CLI сообщается следующая ошибка:

Что тут происходит? Изучив некоторую информацию, выяснилось, что это, вероятно, вызвано использованием инструмента «через стену» на вашем компьютере. В пакете npm (faye-websocket), от которого зависит firebase-tool, настройки прокси не включены, поэтому проверку выполнить невозможно.

Есть два способа решить эту проблему:

Способ 1: настройте прокси на роутере, а не на машине

В некоторых статьях указано, что этой проблемы можно избежать, установив прокси на роутере, а не включив его локально. Однако по некоторым причинам этот метод еще не опробован, но, по некоторым отзывам, он должен быть эффективным.

Способ 2: (взломать) изменить код и связанные переменные среды

Этот метод немного «сложнее», чем первый. Конкретный метод работы заключается в следующем:

  1. Установить переменные средыhttp_proxy, мой локальный прокси использует порт 1087.export http_proxy=http://localhost:1087
  2. Измените faye-websocket и включите конфигурацию прокси. faye-websocket — это библиотека WebSocket, от которой зависит firebase.Вам нужно добавить следующую конфигурацию в его 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

【Вопрос 2】Решено!

p.s. На гитхабе тоже есть тема по этому поводу:Unable to deploy behind a proxy.

Кроме того, если вы используете прокси, рекомендуется использовать глобальный прокси, чтобы ваш CLI также использовал прокси.

напиши в конце

Наконец, вернемся к моим потребностям при разработке PWA. Как упоминалось в начале статьи, я использовал FireBase для размещения ресурсов, чтобы проверить влияние демонстрации PWA на мобильную сторону. Разумеется, помимо FireBase есть еще два следующих метода:

  1. Используйте страницу github. Так как github вся станция работает под HTTPS, и поэтому на статическом сайте страницы github вы можете использовать Service Worker;

  2. Используйте локальный хост/127.0.0.1. Если вы разбираетесь в PWA, то будете знать, что помимо HTTPS вы также можете использовать localhost (это сделано для облегчения локальной отладки).

Эта статья«Обучение и практика PWA»Четвертый в серии. В этой статье не рассматривается реальная технология PWA, а описывается процесс разработки, отладки P и проблемы, с которыми я столкнулся. Некоторые друзья также могут столкнуться с подобными проблемами, поэтому записывайте их и делитесь ими с вами.

В следующей статье мы вернемся к технологии PWA, чтобы понять,Как использовать Push API для отправки сообщений от серверных служб клиентам.

Серия статей "Обучение и практика PWA"

Категории