Logo
Project Icon

ngx-auth-firebaseui

Angular Material UI组件库用于Firebase身份验证

AngularFirebase认证开源库用户界面Github开源项目

ngx-auth-firebaseui是一个开源Angular库,提供Material Design风格的Firebase身份验证UI组件。该库支持多种登录方式,包括电子邮件、Google和Facebook等,并具备用户管理功能。它易于集成,支持国际化,可与Firestore同步,为开发者提供完整的身份验证解决方案。该库整合了Firebase身份验证服务和Angular Material设计,简化了开发流程。它支持多种身份验证方式,提供用户管理界面,并可与Firestore数据库同步。ngx-auth-firebaseui的易用性和功能完整性,使其成为Angular项目中实现Firebase身份验证的理想选择。

访问官网访问官网GithubGithub文档文档
介绍相关项目

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

npm版本 演示 文档: typedoc codecov CircleCI分支 加入Gitter聊天室 npm Greenkeeper徽章 许可证 GitHub分叉 GitHub星标 GitHub关注者 Twitter链接 Twitter关注 Awesome

用于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-firebaseuifirebaseui
注册: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？

库组件

  • <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:

支持的流程和操作：

支持的Angular守卫

  • LoggedInGuard 用于保护Angular路由不被未认证用户访问（通过NgxAuthFirebaseUIConfig配置回退路由）
- [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-user 组合使用

ngx-auth-firebaseui 登录

  • 注册

之前

ngx-auth-firebaseui 注册

之后

ngx-auth-firebaseui 注册

演示外观

ngx-auth-firebaseui 注册

截图

行布局

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

ngx-auth-firebaseui 注册

| 用户资料

登录时

ngx-auth-firebaseui 用户资料组件

编辑模式

ngx-auth-firebaseui 编辑用户组件

截图 - 重置密码

  • 之前

移动端的ngx-auth-firebaseui

  • 之后

移动端的ngx-auth-firebaseui

截图 - i18n - 多语言

移动端的ngx-auth-firebaseui

对等依赖 - 如果您没有使用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-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 路由守卫。

  1. 在 NgxAuthFirebaseUIConfig 的 authGuardFallbackURL 中输入回退 URL
  2. 在 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 路由

  1. 在路由模块中导入 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 {
}

其他 Angular 库

支持

由开发者构建，为开发者服务 :heart: 我们将帮助你 :punch:

YouTube 视频

https://www.youtube.com/watch?v=qP5zw7fjQgo&feature=emb_logo&ab_channel=Fireship https://www.youtube.com/watch?v=KpfJCEvpS9g&t=2s&ab_channel=JsWiz

谁在使用 ngx-mailto？有哪些很棒的应用？

  1. Nahaus.de

你的项目或应用是否未被列出？请向我提交 PR 以将其发布在 README 中

赞助商

jetbrains logo

本项目得到 jetbrains 的支持，提供了 1 个包含 webstorm 在内的所有产品包开源许可证。

fireship.io logo

Jeff Delaney 在 firebase.io 上提供最好的 Angular 和 Firebase 内容

查看 这个

许可证

版权所有 (c) 2019-2022 Anthony Nahas。根据 MIT 许可证 (MIT) 授权

相关项目
项目侧边栏1项目侧边栏2
推荐项目
Project Cover

豆包MarsCode

豆包 MarsCode 是一款革命性的编程助手，通过AI技术提供代码补全、单测生成、代码解释和智能问答等功能，支持100+编程语言，与主流编辑器无缝集成，显著提升开发效率和代码质量。

Project Cover

AI写歌

Suno AI是一个革命性的AI音乐创作平台，能在短短30秒内帮助用户创作出一首完整的歌曲。无论是寻找创作灵感还是需要快速制作音乐，Suno AI都是音乐爱好者和专业人士的理想选择。

Project Cover

有言AI

有言平台提供一站式AIGC视频创作解决方案，通过智能技术简化视频制作流程。无论是企业宣传还是个人分享，有言都能帮助用户快速、轻松地制作出专业级别的视频内容。

Project Cover

Kimi

Kimi AI助手提供多语言对话支持，能够阅读和理解用户上传的文件内容，解析网页信息，并结合搜索结果为用户提供详尽的答案。无论是日常咨询还是专业问题，Kimi都能以友好、专业的方式提供帮助。

Project Cover

阿里绘蛙

绘蛙是阿里巴巴集团推出的革命性AI电商营销平台。利用尖端人工智能技术，为商家提供一键生成商品图和营销文案的服务，显著提升内容创作效率和营销效果。适用于淘宝、天猫等电商平台，让商品第一时间被种草。

Project Cover

吐司

探索Tensor.Art平台的独特AI模型，免费访问各种图像生成与AI训练工具，从Stable Diffusion等基础模型开始，轻松实现创新图像生成。体验前沿的AI技术，推动个人和企业的创新发展。

Project Cover

SubCat字幕猫

SubCat字幕猫APP是一款创新的视频播放器，它将改变您观看视频的方式！SubCat结合了先进的人工智能技术，为您提供即时视频字幕翻译，无论是本地视频还是网络流媒体，让您轻松享受各种语言的内容。

Project Cover

美间AI

美间AI创意设计平台，利用前沿AI技术，为设计师和营销人员提供一站式设计解决方案。从智能海报到3D效果图，再到文案生成，美间让创意设计更简单、更高效。

Project Cover

稿定AI

稿定设计 是一个多功能的在线设计和创意平台，提供广泛的设计工具和资源，以满足不同用户的需求。从专业的图形设计师到普通用户，无论是进行图片处理、智能抠图、H5页面制作还是视频剪辑，稿定设计都能提供简单、高效的解决方案。该平台以其用户友好的界面和强大的功能集合，帮助用户轻松实现创意设计。

使用协议隐私政策广告服务
投诉举报邮箱: service@vectorlightyear.com
@2024 懂AI·鲁ICP备2024100362号-6·鲁公网安备37021002001498号