当前位置: 首页 > 软件库 > Web应用开发 > Web框架 >

ngx-auth-firebaseui

授权协议 MIT License
开发语言 JavaScript
所属分类 Web应用开发、 Web框架
软件类型 开源软件
地区 不详
投 递 者 史烨
操作系统 跨平台
开源组织
适用人群 未知
 软件概览

ngx-auth-firebaseui - Open Source Library for Angular Web Apps to integrate a material user interface for firebase authentication.

Angular UI component for firebase authentication.This library is an angular module (including angular components and services) that allows to authenticateyour users with your firebase project. NgxAuthFirebseUI is compatible withangular material and angular flexLayout.

If you prefer to develop with bootstrap rather than with material design, please check this project @firebaseui/ng-bootstrap

Built by and for developers ❤️

Do you have any question or suggestion ? Please do not hesitate to contact us!Alternatively, provide a PR | open an appropriate issue here

If you like this project, support ngx-auth-firebaseuiby starring and sharing it ��

Table of Contents

ngx-auth-firebaseui vs firebaseui-web

Features ngx-auth-firebaseui firebaseui
Sign Up ✔️ ✔️
Sign In ✔️ ✔️
Sign In Anonymously ✔️ ✔️
Sign In with Google ✔️ ✔️
Sign In with Apple ✔️ ✔️
Sign In with Facebook ✔️ ✔️
Sign In with Twitter ✔️ ✔️
Sign In with Github ✔️ ✔️
Sign In with Microsoft ✔️ ✔️
Sign In with Yahoo ✔️ ✔️
Sign In with Phonenumber ✔️
Sign out ✔️
Sign in/up progress indicator ✔️
Password Strength indicator ✔️
Forgot/Reset Password ✔️
Password Strength Meter ✔️
Delete account ✔️
Login Authentication Guard ✔️
User Profile ✔️
Check whether user's email is verified ✔️
Edit user's display name (incl. validation) ✔️
Edit user's email (incl. validation) ✔️
Edit user's phone number (incl. validation) ✔️
Configure your favorite auth provider in runtime ✔️
Sync user'auth with Firestore read more ✔️
Animations ✔️
Angular v2-8 friendly ✔️
Internationalization (i18n) ✔️ ✔️
Ionic/cordova support �� @firebaseui/ionic-auth
Real time form validation ✔️
Easy to integrate ✔️
Support Server Side Rendering ✔️
Support SPA without further config ✔️
Support Safari private browsing ✔️ ⁉️
AWESOME ✔️ ⁉️

Why to use ngx-auth-firebaseui ?

Library's components

  • <ngx-auth-firebaseui> used for the authentication process see more
  • <ngx-auth-firebaseui-register> standalone registration component to create new accounts see more
  • <ngx-auth-firebaseui-login> standalone login component to use already created accounts see more
  • <ngx-auth-firebaseui-providers> used to display only buttons for providers like google, facebook, twitter, github, microsoft and yahoo see more
  • <ngx-auth-firebaseui-user> used to display/edit the data of the current authenticated user in form of a material card see more
  • <ngx-auth-firebaseui-avatar> used to display/edit the data of the current authenticated user in the toolbar see more

Supported Providers:

  • anonymously
  • email and password (traditional)
  • google
  • apple
  • facebook
  • twitter
  • github
  • Microsoft
  • Yahoo
  • phone number ��

Supported Processes and Actions:

Supported Angular Guards

  • LoggedInGuard used to protect angular routes from unauthenticated users (with fallback routes via NgxAuthFirebaseUIConfig)

the full tutorial guide can be found here

Demo | Features | Examples

take a look at live example with firestore's synchronization here


Screenshots - Browser

  • sign in

v8

in combination with ngx-auth-firebaseui-user

v7

  • Sign up - registration

before

after

demo outlook

Screenshots

row layout

Please note: when the view port is getting too small, the layout will beautomatically change to column

| User Profile

when logged in

in edit mode

Screenshots - Reset Password

  • Before

  • After

Screenshot - i18n - multiple languages


Peer Dependencies - please make sure that peerDependencies are installed if you are not using the schematics

"peerDependencies": {
    "@angular/core": "^11.x",
    "@angular/animations": "^11.x",
    "@angular/cdk": "^11.x",
    "@angular/flex-layout": "^11.0.0-beta.33",
    "@angular/forms": "^11.x",
    "@angular/material": "^11.x",
    "@angular/fire": "6.x",
    "firebase": "8.x",
  }

NOTE:

v1.x should be used with angular v7 projectsv3.x should be used with angular v8 projectsv4.x should be used with angular v9/10 projectsv5.x should be used with angular v11 projects

help!


Dependencies

the @angular-material-extensions/password-strength is usedto indicate how secure is the provided password when registering a new firebase user e.g:

(1) Installation

1. Install via ng add. (Recommended)

If Angular Material Design is not setup, just run ng add @angular/material learn more

Now add the library via the angular schematics

ng add ngx-auth-firebaseui
  • ✔️ peer dependencies will be automatically added the package.json and installed
  • ✔️ ngx-auth-firebaseui 's module will be automatically imported to the root module (just replace PUT_YOUR_FIREBASE_API_KEY_HERE with your firebase api key)
  • ✔️ ngx-auth-firebaseui 's assets will be automatically added the angular.json file

2. Install via npm. (Alternative)

Install above dependencies via npm.

Now install ngx-auth-firebaseui via:

npm install --save ngx-auth-firebaseui

Install the dependencies @angular-material-extensions/password-strength via:

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 deps

npm i -s firebase @angular/fire

-> continue by following the instructions here

Once installed you need to import the main module:

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

The only remaining part is to list the imported module in your application module. The exact method will be slightlydifferent for the root (top-level) module for which you should end up with the code similar to (notice NgxAuthFirebaseUIModule .forRoot()):

and then from your Angular AppModule:

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

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

// Import your library
import { NgxAuthFirebaseUIModule } from 'ngx-auth-firebaseui';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';

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

    // Specify the ngx-auth-firebaseui library as an import
    NgxAuthFirebaseUIModule.forRoot({
                    apiKey: 'your-firebase-apiKey',
                    authDomain: 'your-firebase-authDomain',
                    databaseURL: 'your-firebase-databaseURL',
                    projectId: 'your-firebase-projectId',
                    storageBucket: 'your-firebase-storageBucket',
                    messagingSenderId: 'your-firebase-messagingSenderId'
                }),
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Other modules in your application can simply import NgxAuthFirebaseUIModule:

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

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

SystemJS

Note:If you are using SystemJS, you should adjust your configuration to point to the UMD bundle.In your systemjs config file, map needs to tell the System loader where to look for ngx-auth-firebaseui:

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

(2) Configuration

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

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

// Import your library
import { NgxAuthFirebaseUIModule } from 'ngx-auth-firebaseui';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';

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

    // Specify the ngx-auth-firebaseui library as an import
    NgxAuthFirebaseUIModule.forRoot(
                {
                  apiKey: 'your-firebase-apiKey',
                  authDomain: 'your-firebase-authDomain',
                  databaseURL: 'your-firebase-databaseURL',
                  projectId: 'your-firebase-projectId',
                  storageBucket: 'your-firebase-storageBucket',
                  messagingSenderId: 'your-firebase-messagingSenderId'
                },
                 () => 'your_app_name_factory',
                {
                  enableFirestoreSync: true, // enable/disable autosync users with firestore
                  toastMessageOnAuthSuccess: false, // whether to open/show a snackbar message on auth success - default : true
                  toastMessageOnAuthError: false, // whether to open/show a snackbar message on auth error - default : true
                  authGuardFallbackURL: '/loggedout', // url for unauthenticated users - to use in combination with canActivate feature on a route
                  authGuardLoggedInURL: '/loggedin', // url for authenticated users - to use in combination with canActivate feature on a route
                  passwordMaxLength: 60, // `min/max` input parameters in components should be within this range.
                  passwordMinLength: 8, // Password length min/max in forms independently of each componenet min/max.
                  // Same as password but for the name
                  nameMaxLength: 50,
                  nameMinLength: 2,
                  // If set, sign-in/up form is not available until email has been verified.
                  // Plus protected routes are still protected even though user is connected.
                  guardProtectedRoutesUntilEmailIsVerified: true,
                  enableEmailVerification: true, // default: true
                  useRawUserCredential: true, // If set to true outputs the UserCredential object instead of firebase.User after login and signup - Default: false
                }),
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }


(3) Usage

Once the library is imported, you can use its components, directives and pipes in your Angular application:

<ngx-auth-firebaseui></ngx-auth-firebaseui> see the usage

<ngx-auth-firebaseui-login></ngx-auth-firebaseui-login> see the usage

<ngx-auth-firebaseui-register></ngx-auth-firebaseui-register> see the usage

<ngx-auth-firebaseui-providers></ngx-auth-firebaseui-providers> see the usage

<ngx-auth-firebaseui-user></ngx-auth-firebaseui-user> see the usage

<ngx-auth-firebaseui-avatar></ngx-auth-firebaseui-avatar> see the usage

API

<ngx-auth-firebaseui></ngx-auth-firebaseui> see the api

<ngx-auth-firebaseui-login></ngx-auth-firebaseui-login> see the api

<ngx-auth-firebaseui-register></ngx-auth-firebaseui-register> see the api

<ngx-auth-firebaseui-providers></ngx-auth-firebaseui-providers> see the api

<ngx-auth-firebaseui-user></ngx-auth-firebaseui-user> see the api

<ngx-auth-firebaseui-avatar></ngx-auth-firebaseui-avatar> see the api

EXTRA TIP: Login Authentication Guard

If you want to prevent a route to be accessed from non authorized users, you canuse a built in LoggedInGuard angular router guard.

  1. enter the fallback url in the NgxAuthFirebaseUIConfig under authGuardFallbackURL
  2. enter the logged in url in the NgxAuthFirebaseUIConfig under authGuardLoggedInURL
import {NgxAuthFirebaseUIModule} from 'ngx-auth-firebaseui';


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

if the user is logged in, he will be redirected to examples/logged-in route (per example),otherwise he will be redirected to the examples/logged-out route

  1. import the LoggedInGuard in your router module
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 {
}

Other Angular Libraries


Support

Built by and for developers ❤️ we will help you ��


Youtube Videos

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

Sponsors

This project is supported by jetbrains with 1 ALL PRODUCTS PACK OS LICENSE incl. webstorm

Best angular and firebase stuff by Jeff Delaney on firebase.io

check this out


License

Copyright (c) 2019-2021 Anthony Nahas. Licensed under the MIT License (MIT)

  • ngx_lua模块的原理: 1、每个worker(工作进程)创建一个Lua VM,worker内所有协程共享VM; 2、将Nginx I/O原语封装后注入 Lua VM,允许Lua代码直接访问; 3、每个外部请求都由一个Lua协程处理,协程之间数据隔离; 4、Lua代码调用I/O操作等异步接口时,会挂起当前协程(并保护上下文数据),而不阻塞worker; 5、I/O等异步操作完成时还原相关协程上下

  • 常见的认证方案 1. HTTP Auth Authentication 这是HTTP提供的一个用于权限控制和认证的通用框架,其中最常用的HTTP认证方案就是HTTP Basic Authentication [ 鉴权流程 ] 客户端发送一需要权限验证的请求,服务端返回未授权,需要授权。 客户端发送带有认证信息的请求,服务端验证并返回结果。 [ 加解密过程 ] // 加密过程 let email =

  • 在ngx_module.h中引用了两个至关重要的外部变量 1 2 extern ngx_module_t *ngx_modules[]; extern char *ngx_module_names[]; ngx_modules跟ngx_module_names定义在ngx_modules.c中,这个文件并不存在于nginx源码中,在编译时执行configure动态生成。ngx_

  • --输出响应内容体;(内容体结束后没有换行符;) ngx.print("aaaaaaaaaaaaaa") --输出响应内容体;(内容体结束后,输出一个换行符;) ngx.say("aaaaaaaaaaaaaaa")

  • ngx_http_auth_basic_module 实现基于⽤用户的访问控制,使⽤用basic机制进⾏行行⽤用户认证 指令: 5.1 auth_basic Syntax: auth_basic string | off; Default: auth_basic off; Context: http, server, location, limit_except 5.2 auth_basic_us

  • ngx.var ngx.var 需预定义方可使用, 一般都写在 ngx 或 openresty 的conf 内 ngx.var; 在conf内可以使用set 方式创建变量; ngx.var 可以定义在location内,也可以定义在server 内; 在lua 代码使用时,需要 ngx.var.xxx 引用; ngx.var.xxx = nil 表示删除。 server { $

 相关资料
  • ngx-weui 是一个使用 Angular 构建的 WeUI 组件。 在线示例以及API文档。

  • ngx-fastdfs 是 nginx + lua +fastdfs 实现分布式图片实时动态压缩。 install 进入docker目录docker build -t  fastdfs:dev . 使用 docker -idt -p 80:80 fastdfs:dev /bin/bash进入容器执行/etc/rc.local 测试 进入容器执行test目录下的./test.sh或者直接执行下面脚本

  • ngx-markdown ngx-markdown is an Angular library that combines... Marked to parse markdown to HTML Prism.js for language syntax highlight Emoji-Toolkit for emoji support KaTeX for math expression rende

  • ngx-admin Who uses ngx-admin?| Documentation | Installation Guidelines | Angular templates New! Material theme for ngx-admin Material admin theme is based on the most popular Angular dashboard templat

  • @sweetalert2/ngx-sweetalert2 Official SweetAlert2 integration for Angular This is not a regular API wrapper for SweetAlert (which already works very well alone), it intends to provide Angular-esque ut

  • ngx-dropzone A lightweight and highly customizable Angular dropzone component for file uploads. For a demo see DEMO. And the CODE for the demo. Install $ npm install --save ngx-dropzone Usage // in ap