Angular7使用Firebase的身份验证服务库

2 年 ago

科, 雅

3 minutes

ng7-o2-auth-fb是一个由Firebase提供的用于Angular7的认证服务库。

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

请观看视频解释

完整的源代码可以在以下链接中找到：https://github.com/Ohtsu/ng7-o2-auth-firebase-project。

简要概述

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

必须的环境

@angular/fire

图书馆的运行环境版本。

firebase : 5.7.3

安装方法

要安装此库，请使用npm执行以下命令进行安装。

$ npm i ng7-o2-auth-fb

注册方法 lù

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

メソッド機能引数戻り値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/ng7-o2-auth-firebase-project.git

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

$ cd ng7-o2-auth-firebase-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'
    }
  }
};