Существование BaaS (бэкенд как услуга) значительно упрощает разработку веб-приложений и мобильных приложений. Это сэкономит вам много времени на решение проблем с внутренней архитектурой, масштабированием и доступностью. Некоторые из них также выполняют за вас сложные задачи, такие как аутентификация. Firebase — один из самых известных провайдеров BaaS.

firebaseui В разделе firebase есть бесплатная библиотека пользовательского интерфейса с открытым исходным кодом. Он используется разработчиками для процесса аутентификации пользователя при регистрации/входе. С firebaseui интегрируйте вход с социальным IdP (поставщиком идентификационной информации), таким как Facebook, Google и Apple, больше не мучайтесь.

Все хорошо, пока ваше приложение не должно поддерживать язык, отличный от английского.

Когда вы выполняете поиск по термину «локализация» в репозитории firebaseui, вы можете видеть, что это тема, которую разработчики продолжают задавать с 2016 года.

Механизм многоязычной поддержки firebaseui заключается в загрузке локализованной двоичной версии из CDN для каждого языка. Это означает, что для статического веб-сайта или большинства SPA в настоящее время, когда страница загружается, язык firebaseui фиксируется. Есть обходные пути, чтобы сделать его более динамичным. Например, некоторые могут создать тег ‹script› во время выполнения, чтобы загрузить другую локализованную сборку через CDN. Однако после загрузки firebaseui в большинстве случаев требуется перезагрузка всей страницы для смены языка.

Этот подход применим только к JavaScript.

Почему?

Это связано с тем, что вам необходимо установить пакет firebaseui по умолчанию npm для ввода текста. В противном случае код типа «new firebaseui.auth.AuthUI()» не сможет скомпилироваться. А при использовании пакета npm по умолчанию локализованная версия CDN, загруженная с помощью динамически созданного тега ‹script›, не будет иметь никакого эффекта. При отображении атрибут «lang» по-прежнему имеет значение «en».

Хотя он был написан на Angular и имеет определенные типы. Кажется, что firebaseui не слишком удобен для пользователя TypeScript, по крайней мере, не в локализации. Согласно «README.md» из репозитория firebaseui, у нас остались только два варианта: загрузить и собрать локализованный пакет firebaseui самостоятельно. .

Оригинальный README.md на GitHubпредоставляет шаги по созданию локализованной библиотеки JavaScript и модуля npm. Однако мы используем TypeScript и импорт модуля ES, и я обнаружил, что раздел сборки локализованного модуля ES отсутствует. Поэтому я создал эту проблему.

Следующие инструкции о том, как я успешно собрал и использовал версию для традиционного китайского языка (используя zh-TW как LANGUAGE_CODE) firebaseui в моем проекте TypeScript Vue изначально был в моем патче README.md. Поскольку владелец репозитория попросил удалить раздел комментарий в моем запросе на вытягивание, сказав, что это очень уникальный вариант использования, поэтому я разместил его здесь и надеюсь, что это поможет другим разработчикам в будущем:

1. Следуйте инструкциям в README репозитории firebaseui, чтобы создать локализованную версию на вашем компьютере.

2. Убедитесь, что выполнены все следующие команды:

npm run build build-npm-zh-TW
npm run build build-esm-zh-TW
npm run build build-js-zh-TW

3. Теперь у вас есть все готовые файлы в папке `dist`. Создайте папку с именем «firebaseui» в исходной папке вашего проекта (например, «src»). Ваша структура папок должна выглядеть так:

+-_src
| +-_firebaseui
|   +-_dist

4. Скопируйте «package.json» из репозитория «firebaseui» в «src/firebaseui» вашего проекта.

5. В папке «src/firebaseui/dist»
удалите «npm.js», «npm__en.js», «firebaseui.js», «firebaseui__en.js», «esm.js», «esm__en.js».

Затем переименуйте «npm__zh_tw.js» в «npm.js»,
«firebaseui__zh_tw.js» в «firebaseui .js» и
«esm__zh_tw.js» в «esm.js».

6. Теперь вы иметь локальный локализованный пакет firebaseui в вашем проекте. Теперь вы можете импортировать его следующим образом:

import * as firebaseui from "./firebaseui";

Вы увидите, что визуализированный firebaseui теперь на традиционном китайском языке.

Как тогда сменить язык?

Unfortunately, true dynamic language change from SPA without reload is not possible for firebaesui at the moment.

В проекте JavaScript можно попробовать: (Не проверено)
1. Динамически удалить тег firebaseui ‹script›
2. Создать новый тег ‹script› с `src`, указывающим на новую языковую версию. 3. Прикрепите новый тег ‹script› обратно к DOM.
4. Вызовите AuthUI.reset(), а затем AuthUI.start().

В проекте TypeScript это будет немного сложно и многословно:
— Дублировать приложение для каждого языка с единственными отличиями в папке `src/firebaseui/dist`.
— Использовать настройку MPA вместо SPA для совместного использования как можно больше кода
 – Отделите поток аутентификации от основной логики приложения, чтобы свести область воздействия к минимуму.
 – Для сложного варианта использования может потребоваться серверная поддержка для управления состоянием между страницами.

🎉 Если у вас есть другие решения, поделитесь ими в комментариях. 😀