ngx-auth-firebaseui - 用于Angular Web应用的开源库，集成了Firebase认证的Material用户界面

用于firebase认证的Angular UI组件。这个库是一个Angular模块（包含Angular组件和服务），允许您使用Firebase项目对用户进行身份验证。NgxAuthFirebaseUI与angular material和angular flexLayout兼容。

如果您更喜欢使用bootstrap而不是material design进行开发，请查看这个项目@firebaseui/ng-bootstrap

由开发者为开发者而构建 :heart:

您有任何问题或建议吗？请不要犹豫，联系我们！或者，提供PR | 在这里开启适当的问题

如果您喜欢这个项目，请通过加星:star:和分享:loudspeaker:来支持ngx-auth-firebaseui

ngx-auth-firebaseui vs firebaseui-web

功能	ngx-auth-firebaseui	firebaseui
注册	:heavy_check_mark:	:heavy_check_mark:
登录	:heavy_check_mark:	:heavy_check_mark:
匿名登录	:heavy_check_mark:	:heavy_check_mark:
谷歌登录	:heavy_check_mark:	:heavy_check_mark:
苹果登录	:heavy_check_mark:	:heavy_check_mark:
Facebook登录	:heavy_check_mark:	:heavy_check_mark:
Twitter登录	:heavy_check_mark:	:heavy_check_mark:
Github登录	:heavy_check_mark:	:heavy_check_mark:
微软登录	:heavy_check_mark:	:heavy_check_mark:
雅虎登录	:heavy_check_mark:	:heavy_check_mark:
手机号登录	:x:	:heavy_check_mark:
退出登录	:heavy_check_mark:	:x:
登录/注册进度指示器	:heavy_check_mark:	:x:
密码强度指示器	:heavy_check_mark:	:x:
忘记/重置密码	:heavy_check_mark:	:x:
密码强度计	:heavy_check_mark:	:x:
删除账户	:heavy_check_mark:	:x:
登录认证守卫	:heavy_check_mark:	:x:
用户资料	:heavy_check_mark:	:x:
检查用户邮箱是否已验证	:heavy_check_mark:	:x:
编辑用户显示名称（包括验证）	:heavy_check_mark:	:x:
编辑用户邮箱（包括验证）	:heavy_check_mark:	:x:
编辑用户手机号（包括验证）	:heavy_check_mark:	:x:
在运行时配置您喜欢的认证提供商	:heavy_check_mark:	:x:
将用户认证与Firestore同步了解更多	:heavy_check_mark:	:x:
动画效果	:heavy_check_mark:	:x:
兼容Angular v2-13	:heavy_check_mark:	:x:
国际化（i18n）	:heavy_check_mark:	:heavy_check_mark:
Ionic/cordova支持	:soon: @firebaseui/ionic-auth	:x:
实时表单验证	:heavy_check_mark:	:x:
易于集成	:heavy_check_mark:	:x:
支持服务器端渲染	:heavy_check_mark:	:x:
无需额外配置即可支持SPA	:heavy_check_mark:	:x:
支持Safari隐私浏览	:heavy_check_mark:	:interrobang:
超赞	:heavy_check_mark:	:interrobang:

为什么使用ngx-auth-firebaseui？

:gift_heart: 它使用了基于Google Material概念和组件的响应式和无障碍Web设计UX/UI（支持桌面、平板和移动视图），包括流畅的动画，以提供更好的用户体验。
:lipstick: 选择您自己的主题！随时更改主要、强调和警告颜色（例如支持浅色和深色主题）
:ship: 非常易于在基于Angular的项目中使用（使用angular-cli创建的项目）
:soon: 可选配置
:recycle: 在运行时配置您的认证提供商
:recycle: 为每个需要Firebase项目/应用认证的项目提供可重用组件。
:customs: 内置反馈机制，以snackbar的形式在发生错误或任何重要事件时提供反馈。
:sos: 能够退出登录，甚至完全删除账户
:ghost: 您的客户不想在您的项目中创建账户？让他匿名登录！
:busts_in_silhouette: 用户资料组件，通过<ngx-auth-firebaseui-user></ngx-auth-firebaseui-user>使用ngx-auth-firebaseui-user显示用户数据
:zap: 更新用户资料功能
:fire: 自动将用户认证与FIRESTORE同步
:muscle: 忘记密码功能！让您的用户轻松找回密码
:tada: 支持SSR - 服务器端渲染
支持i18n

库组件

<ngx-auth-firebaseui> 用于认证过程了解更多
<ngx-auth-firebaseui-register> 独立的注册组件，用于创建新账户了解更多
<ngx-auth-firebaseui-login> 独立的登录组件，用于使用已创建的账户了解更多
<ngx-auth-firebaseui-providers> 用于仅显示Google、Facebook、Twitter、Github、微软和雅虎等提供商的按钮了解更多
<ngx-auth-firebaseui-user> 用于以Material卡片形式显示/编辑当前已认证用户的数据了解更多
<ngx-auth-firebaseui-avatar> 用于在工具栏中显示/编辑当前已认证用户的数据了解更多

支持的提供商：

匿名
邮箱和密码（传统方式）
谷歌
苹果
Facebook
Twitter
Github
微软
雅虎
手机号 :soon:

支持的流程和操作：

注册
登录
匿名登录 | 使用谷歌、苹果、Facebook、Twitter、Github、微软、雅虎登录
退出登录
创建新账户时使用@angular-material-extensions/password-strength验证密码强度
忘记/重置密码
发送邮箱验证
删除用户账户
编辑用户资料，如邮箱、姓名、（头像 :soon:）和手机号
Firestore自动同步 :fire:
在检查服务条款和隐私政策之前不允许用户创建新账户 - 更多信息请查看这里

支持的Angular守卫

LoggedInGuard 用于保护Angular路由不被未认证用户访问（通过NgxAuthFirebaseUIConfig配置回退路由）

<a name="requirements"/> - [Angular Material 主题](https://material.angular.io/guide/getting-started#step-4-include-a-theme) - [Angular Material 图标](https://material.angular.io/guide/getting-started#step-6-optional-add-material-icons)

完整的教程指南可以在这里找到

演示 | 功能 | 示例

查看与Firestore同步的实时示例点击这里

截图 - 浏览器 <ngx-auth-firebaseui></ngx-auth-firebaseui>

与 ngx-auth-firebaseui-user 组合使用

之前

之后

演示外观

截图 <ngx-auth-firebaseui-provider></ngx-auth-firebaseui-providers>

行布局

请注意：当视口变得太小时，布局将自动更改为列

<ngx-auth-firebaseui-user></ngx-auth-firebaseui-user> | 用户资料

登录时

编辑模式

截图 - 重置密码

之前

之后

截图 - i18n - 多语言

对等依赖 - 如果您没有使用schematics，请确保安装了对等依赖

"peerDependencies": {
    "@angular/core": "^13.x",
    "@angular/animations": "^13.x",
    "@angular/cdk": "^13.x",
    "@angular/flex-layout": "^13.0.0-beta.38",
    "@angular/forms": "^13.x",
    "@angular/material": "^13.x",
    "@angular/fire": "7.x",
    "firebase": "9.x",
  }

注意：

v1.x 应与 angular v7 项目一起使用
v3.x 应与 angular v8 项目一起使用
v4.x 应与 angular v9/10 项目一起使用
v5.x 应与 angular v11 项目一起使用
v6.x 应与 angular v12/13 项目一起使用
v7.x 应与 angular v14 项目一起使用

需要帮助！

依赖

Angular (需要 Angular 2 或更高版本，使用 13.x 开发) - 显然
@angular-material-extensions/password-strength

@angular-material-extensions/password-strength 用于在注册新的 firebase 用户时指示提供的密码有多安全，例如：

(1) 安装

1. 通过 ng add 安装。（推荐）

如果尚未设置 Angular Material Design，只需运行 ng add @angular/material 了解更多

现在通过 angular schematics 添加库

ng add ngx-auth-firebaseui

:heavy_check_mark: 对等依赖将自动添加到 package.json 并安装
:heavy_check_mark: ngx-auth-firebaseui 的模块将自动导入到根模块（只需将 PUT_YOUR_FIREBASE_API_KEY_HERE 替换为您的 firebase api 密钥）
:heavy_check_mark: ngx-auth-firebaseui 的资产将自动添加到 angular.json 文件

2. 通过 npm 安装。（替代方案）

通过 npm 安装上述依赖。

现在通过以下方式安装 ngx-auth-firebaseui：

npm install --save ngx-auth-firebaseui

通过以下命令安装依赖 @angular-material-extensions/password-strength：

npm install --save @angular-material-extensions/password-strength

npm i -s @angular/material @angular/cdk @angular/flex-layout @angular/forms @angular/animations @angular/router

Firebase 依赖

npm i -s firebase @angular/fire

→ 继续按照此处的说明进行操作 链接

安装完成后，你需要导入主模块：

import { NgxAuthFirebaseUIModule } from 'ngx-auth-firebaseui';

剩下的唯一步骤是在你的应用程序模块中列出导入的模块。对于根（顶级）模块，具体方法会略有不同，你应该得到类似以下的代码（注意 NgxAuthFirebaseUIModule.forRoot()）：

然后在你的 Angular AppModule 中：

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';

// 导入你的库
import { NgxAuthFirebaseUIModule } from 'ngx-auth-firebaseui';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,

    // 将 ngx-auth-firebaseui 库指定为导入项
    NgxAuthFirebaseUIModule.forRoot({
                    apiKey: '你的-firebase-apiKey',
                    authDomain: '你的-firebase-authDomain',
                    databaseURL: '你的-firebase-databaseURL',
                    projectId: '你的-firebase-projectId',
                    storageBucket: '你的-firebase-storageBucket',
                    messagingSenderId: '你的-firebase-messagingSenderId'
                }),
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

你的应用程序中的其他模块可以简单地导入 NgxAuthFirebaseUIModule：

import { NgxAuthFirebaseUIModule } from 'ngx-auth-firebaseui';

@NgModule({
  declarations: [OtherComponent, ...],
  imports: [NgxAuthFirebaseUIModule, ...],
})
export class OtherModule {
}

SystemJS

注意：如果你使用的是 SystemJS，你应该调整你的配置以指向 UMD 包。在你的 systemjs 配置文件中，map 需要告诉 System 加载器在哪里查找 ngx-auth-firebaseui：

map: {
  'ngx-auth-firebaseui': 'node_modules/ngx-auth-firebaseui/bundles/ngx-auth-firebaseui.umd.js',
}

(2) 配置

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';

// 导入你的库
import { NgxAuthFirebaseUIModule } from 'ngx-auth-firebaseui';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,

    // 将 ngx-auth-firebaseui 库指定为导入项
    NgxAuthFirebaseUIModule.forRoot(
                {
                  apiKey: '你的-firebase-apiKey',
                  authDomain: '你的-firebase-authDomain',
                  databaseURL: '你的-firebase-databaseURL',
                  projectId: '你的-firebase-projectId',
                  storageBucket: '你的-firebase-storageBucket',
                  messagingSenderId: '你的-firebase-messagingSenderId'
                },
                 () => '你的应用名称工厂',
                {
                  enableFirestoreSync: true, // 启用/禁用用户与 firestore 的自动同步
                  toastMessageOnAuthSuccess: false, // 是否在身份验证成功时打开/显示 snackbar 消息 - 默认：true
                  toastMessageOnAuthError: false, // 是否在身份验证错误时打开/显示 snackbar 消息 - 默认：true
                  authGuardFallbackURL: '/loggedout', // 未经身份验证用户的 URL - 与路由上的 canActivate 功能结合使用
                  authGuardLoggedInURL: '/loggedin', // 已经过身份验证用户的 URL - 与路由上的 canActivate 功能结合使用
                  passwordMaxLength: 60, // 组件中的 `min/max` 输入参数应在此范围内。
                  passwordMinLength: 8, // 表单中密码长度的最小/最大值，独立于每个组件的最小/最大值。
                  // 与密码相同，但用于名称
                  nameMaxLength: 50,
                  nameMinLength: 2,
                  // 如果设置，在电子邮件验证之前，登录/注册表单不可用。
                  // 即使用户已连接，受保护的路由仍然受到保护。
                  guardProtectedRoutesUntilEmailIsVerified: true,
                  enableEmailVerification: true, // 默认：true
                  useRawUserCredential: true, // 如果设置为 true，在登录和注册后输出 UserCredential 对象而不是 firebase.User - 默认：false
                }),
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

(3) 使用方法

一旦导入了库，你就可以在你的 Angular 应用程序中使用其组件、指令和管道：

`<ngx-auth-firebaseui></ngx-auth-firebaseui>` 查看使用方法

`<ngx-auth-firebaseui-login></ngx-auth-firebaseui-login>` 查看使用方法

`<ngx-auth-firebaseui-register></ngx-auth-firebaseui-register>` 查看使用方法

`<ngx-auth-firebaseui-providers></ngx-auth-firebaseui-providers>` 查看使用方法

`<ngx-auth-firebaseui-user></ngx-auth-firebaseui-user>` 查看使用方法

`<ngx-auth-firebaseui-avatar></ngx-auth-firebaseui-avatar>` 查看使用方法

API

`<ngx-auth-firebaseui></ngx-auth-firebaseui>` 查看API

`<ngx-auth-firebaseui-login></ngx-auth-firebaseui-login>` 查看API

`<ngx-auth-firebaseui-register></ngx-auth-firebaseui-register>` 查看API

`<ngx-auth-firebaseui-providers></ngx-auth-firebaseui-providers>` 查看API

`<ngx-auth-firebaseui-user></ngx-auth-firebaseui-user>` 查看API

`<ngx-auth-firebaseui-avatar></ngx-auth-firebaseui-avatar>` 查看API

额外提示：登录认证守卫

如果你想阻止未授权用户访问某个路由，可以使用内置的 LoggedInGuard Angular 路由守卫。

在 NgxAuthFirebaseUIConfig 的 authGuardFallbackURL 中输入回退 URL
在 NgxAuthFirebaseUIConfig 的 authGuardLoggedInURL 中输入登录后的 URL

import {NgxAuthFirebaseUIModule} from 'ngx-auth-firebaseui';

NgxAuthFirebaseUIModule.forRoot(firebaseKey, firebaseAppNameFactory,
    {
      authGuardFallbackURL: 'examples/logged-out',
      authGuardLoggedInURL: 'examples/logged-in',
    }),

如果用户已登录，他将被重定向到 examples/logged-in 路由（以此为例），否则他将被重定向到 examples/logged-out 路由

在路由模块中导入 LoggedInGuard

import {NgModule} from '@angular/core';
import {Routes, RouterModule} from '@angular/router';

import {LoggedInGuard} from 'ngx-auth-firebaseui';

const routes: Routes = [
  {
    path: '',
    redirectTo: 'home',
    pathMatch: 'full'
  },
  {
    path: 'secured',
    loadChildren: 'app/secured/secured.module#SecuredModule',
    canActivate: [LoggedInGuard]
  }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule {
}