Ember-firebaseui 是一个集成了 Firebase Authentication 和 FirebaseUI 的 Ember.js 组件库。本文将介绍如何在 Ember.js 项目中使用 Ember-firebaseui 及其国际化和自定义主题等功能。
1. 安装
使用 npm 安装 Ember-firebaseui：
$ npm install ember-firebaseui
2. 添加 Firebase 配置
在使用 FirebaseUI 之前，需要先在 Firebase 控制台中创建一个项目，并开启 Authentication 功能。在控制台中获取到项目的配置信息，包括 apiKey、authDomain 等等。
在项目根路径下的 config/environment.js 文件中添加 Firebase 配置信息：
firebase: {
apiKey: '...',
authDomain: '...',
// ... 其他配置
},3. 使用 Ember-firebaseui
3.1 基本使用方法
在需要使用 Firebase Authentication 功能的地方添加 <EmberFirebaseUi /> 组件：
<EmberFirebaseUi />
3.2 国际化
Ember-firebaseui 内置了英文、中文和日文三种语言，对于其他语言需要自行添加。
首先，在 FirebaseUI 实例化之前配置 FirebaseUI 提供的 firebaseui.auth.lang.languageCodeMap：
firebaseui.auth.lang.languageCodeMap['zh-CN'] = { ... };然后，为 <EmberFirebaseUi /> 组件添加 locale 属性即可：
<EmberFirebaseUi @locale="zh-CN" />
3.3 自定义主题
Ember-firebaseui 使用了 Google 的 Material Design 风格，想要自定义主题可以通过在 config/environment.js 文件中添加 UI 配置信息：
-- -------------------- ---- -------
----------- -
-- --- ----
------ -
-- ------
------------- ----------
-- ---------
--------------- ----------
-- ------
----------- ------------ ------------
--
--3.4 使用重定向进行 OAuth 登录
Firebase Authentication 支持 Google、Facebook、Twitter、GitHub、Microsoft 和 Yahoo 等 OAuth 提供商。在使用这些提供商进行 OAuth 登录时，需要在 Firebase 控制台进行相关设置，并将响应的重定向 URI 添加到 Firebase 项目的授权域名列表中。
在使用 OAuth 重定向登录时，由于 Firebase Authentication 需要往页面 URL 添加参数，在 Ember.js 项目中需要在 router.js 文件中添加一个路由来处理 Firebase Authentication 的重定向请求：
-- -------------------- ---- -------
-- -------------
--------------------- -
-------------------------
---
-- ------------------------
------ ----- ---- -----------------------
------ -------- ---- ---------------
------ ------- --------------
----------------------- -
-- ------------------------------- --- -------- -- ---------------------------------- -
------ --------------------------------------------------------------- -- -
---------------------------
---
-
-
---4. 示例代码
-- -------------------- ---- -------
-- ------------------------
------ ---------- ---- --------------------
------ - -------- - ---- ----------------
------ ------- -------------------
----- ------------------- -
------ ----------------------------
---
----- -------------------- ---- -------
----- ----------------------- ----
----- ------------------
-------------------------------------------
------- -------- ----------------------------
--------
------- -------- ---------------------------
-------
----- ---------------
---- --------------
----------------
---------------
----------------------
--------------
----------------------- ----------------
--------------------- ----------------
--
------
--------- -------------------- ---- -------
-- ------------------------------
------ ---------- ---- --------------------
------ -------- ---- ---------------
------ ------- -------------------
--------- ---------
-------------- ------
--------- ------------------- -
------ -
----------------- ----
-------------- -
---------------------------------------------
-----------------------------------------------
----------------------------------------------
-
--
---
-------- -
--------------- -
------------------------- ------
--
---------------- -
------------------------- -------
--
--
---5. 总结
本文介绍了如何使用 Ember.js 中的 npm 包 Ember-firebaseui 实现 Firebase Authentication 功能的集成，包括基本用法、国际化、自定义主题和 OAuth 登录等功能示例。感谢您的阅读，希望对您有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066e16a563576b7b1eca91