Firebase提供的身份验证服务库（适用于Angular8）

2 年 ago

文, 翔

3 minutes

ng8-o2-auth-fb 是一个基于Firebase的认证服务库（适用于Angular 8）。

MIT License

ng8-o2-auth-fb 是一个用于使用Firebase认证服务的服务库，它是使用Angular8开发的。

获取Firebase的Config数据的方法（日语）

如何获取Firebase配置数据（英文）

这是全源代码：
https://github.com/Ohtsu/ng8-o2-auth-fb-project

简述

デバッグ・モードを選択すると、コンソールでログイン状態などを取得できます。

必不可少的环境

@angular/fire

图书馆运行环境版本

firebase : 6.1.6

安装方式

要安装这个库，只需在npm上进行以下安装。

$ npm i ng8-o2-auth-fb

注册方法

这个库中注册了以下的方法。

メソッド機能引数戻り値isAuthenticated()認証状態を取得なしtrue: 認証済み　false: 未認証getLoginState()現在のユーザ情報を取得なしuserデータgetCurrentUser()現在のユーザ情報を取得なしuserデータsetUserData(user)現在のユーザ情報をFirebaseに保存userデータ登録結果loginEmail(email: string, password: string)ログインemail, passwordreturn setUserData(user)signUp(email, password)ユーザ登録email, passwordreturn setUserData(user)loginGoogle()Googleアカウントでログインなしreturn setUserData(user)loginFacebook()Facebookアカウントでログインなしreturn setUserData(user)loginTwitter()Twitterアカウントでログインなしreturn setUserData(user)loginGithub()GitHubアカウントでログインなしreturn setUserData(user)forgotPassword(passwordResetEmail)パスワードの再発行emailなし

另外，上述的用户数据具有以下结构。该格式将保存在Firebase的Firestore数据库的用户目录下。请注意，如果未启用Firestore数据库，则无法使用此功能。

export interface User {
    uid: number;
    email: string;
    displayName: string;
    emailVerified: boolean;
    photoURL?: string;
    providerId?: string;
    isAnonymous?: boolean;
}

设定可行的环境变量

在此库中可以设置的环境变量如下所示。
这些变量需要在 Angular 项目的 environments/environment.ts 文件中指定。

変数名意味debugModetrue: consoleに認証情報を出力　false: 出力しないredirectPath.afterLoginPathログイン後のパスredirectPath.signInPathログインのパスredirectPath.registerUserPathユーザ登録のパスredirectPath.dashboardPathダッシュボード・ページのパス(通常のトップページ）redirectPath.forgotPasswordPathパスワードを失念した場合のパスmessage.forgotPasswordEmailSentパスワード再発行時のメッセージmessage.logoutログアウト時のメッセージ

另外，请注意由于版本更新可能会随时增加环境变量，敬请谅解。


  o2AuthService: {
    debugMode: true,
    redirectPath: {
      afterLoginPath: '/',
      signInPath: 'sign-in',
      registerUserPath: 'register-user',
      dashboardPath: 'dashboard',
      forgotPasswordPath: 'forgot-password',
      verifyEmailPath: 'verify-email-address'
    },
    message: {
      sendChangeEmail: 'Sent email',
      logout: 'Logout',
      forgotPasswordEmailSent: 'Password reset email sent, check your inbox',
      resetPasswordEmailSent: 'Password update email sent'
    }
  },

范例项目

由于这个库已经在GitHub上注册了一个示例项目，因此请参考该源代码以获取有关详细使用方法的信息。需要注意的是，在该示例项目中，使用了Angular Material的功能。包括邮件格式检查，密码字符长度检查和确认密码匹配等功能都依赖于Angular Material。

然而，本服务库是独立于组件的，所以如果您是使用Bootstrap进行开发，当然就可以在Bootstrap的功能中实现类似的功能。

此外，本库的源代码也保存在projects目录下，可以进行参考。

安装示例项目

首先，进入特定的目录。然后在该目录中创建一个克隆，具体操作如下。

$ git clone https://github.com/Ohtsu/ng8-o2-auth-fb-project.git

作成された ng8-o2-auth-fb-project に移動し、”npm install”を実行します。

$ cd ng8-o2-auth-fb-project
$ npm install

設定環境变量。

在启动服务器之前，您需要在Firebase上创建一个帐号，并将该信息设定为环境变量。

另外，还需要确保能够使用 Firestore 作为数据库。

将环境变量设置在environments/environment.ts文件中。

export const environment = {
  production: false,
  firebase: {
    apiKey: '-- You need to set this param--',
    authDomain: '-- You need to set this param--',
    databaseURL: '-- You need to set this param--',
    projectId: '-- You need to set this param--',
    storageBucket: '-- You need to set this param--',
    messagingSenderId: '-- You need to set this param--'
  },

  o2AuthService: {
    debugMode: true,
    redirectPath: {
      afterLoginPath: '/',
      signInPath: 'sign-in',
      registerUserPath: 'register-user',
      dashboardPath: 'dashboard',
      forgotPasswordPath: 'forgot-password',
      verifyEmailPath: 'verify-email-address'
    },
    message: {
      sendChangeEmail: 'Sent email',
      logout: 'Logout',
      forgotPasswordEmailSent: 'Password reset email sent, check your inbox',
      resetPasswordEmailSent: 'Password update email sent'
    }
  }
};

启动本地服务器

请按以下方式启动本地服务器。

$ ng s -o

浏览器将显示默认页面。

First Page

undefined

Login Page

undefined

Check Email format

在输入电子邮件时，将检查是否存在非法的电子邮件地址。

undefined

Check Password length

点击注册按钮后，将会显示以下页面。还会检查密码的最低长度（6个字符）。

undefined

Check Password matching

在显示中也进行密码和确认密码的检查。

undefined

Debug Mode

如果将环境变量的debugMode设置为true，您可以在控制台上获取以下信息。

o2AuthService: {
    debugMode: true,

undefined

示例项目的运行环境

node.js : 10.15.3

文献参考

https://www.udemy.com/angular5-l/

修改历史

2019.5.31 version 0.6 uploaded

版权

2019年版权所有：大津修一（DigiPub Japan）

执照

MIT (麻省理工学院) 版权所有, 大津修一

✖

将在 10 秒后关闭

bannerAds