Firebase 的身份验证 API

在之前的课程中，我们已在官方 Firebase 网站上创建了一个 Firebase 项目。现在，我们将实现 Firebase 类的接口，以实现该类与 Firebase 认证 API 之间的通信。在接下来的课程中，我们将使用 Firebase 类的接口来配合 React 组件。

启用认证功能

首先，我们需要在 Firebase 官网激活一种可用的认证方式。请按以下步骤操作：

• 进入项目的 Firebase 控制台，在 开发 部分点击 认证 选项。
• 选择 登录方法 菜单项。
• 将 邮箱/密码 认证方式设置为 已启用。

设置认证 API

其次，我们将为 Firebase 类实现认证 API。为此，首先需要导入并实例化负责所有认证功能的 Firebase 包。

请在 src/components/Firebase/ 目录下的 firebase.js 文件中进行如下修改：

1import app from 'firebase/app';
2import 'firebase/auth';
3
4const config = {
5  apiKey: process.env.REACT_APP_API_KEY,
6  authDomain: process.env.REACT_APP_AUTH_DOMAIN,
7  databaseURL: process.env.REACT_APP_DATABASE_URL,
8  projectId: process.env.REACT_APP_PROJECT_ID,
9  storageBucket: process.env.REACT_APP_STORAGE_BUCKET,
10  messagingSenderId: process.env.REACT_APP_MESSAGING_SENDER_ID,
11};
12
13class Firebase {
14  constructor() {
15    app.initializeApp(config);
16
17    this.auth = app.auth();
18  }
19}
20
21export default Firebase;

接下来，我们将逐步定义所有认证功能作为类的方法，这些方法将作为 Firebase 类与 Firebase API 之间的通信通道。

注册

首先，注册（创建用户）函数接收邮箱和密码作为参数，并调用 Firebase 官方 API 接口来创建新用户：

1import app from 'firebase/app';
2import 'firebase/auth';
3
4const config = { ... };
5
6class Firebase {
7  constructor() {
8    app.initializeApp(config);
9
10    this.auth = app.auth();
11  }
12
13  // *** 认证 API ***
14
15  doCreateUserWithEmailAndPassword = (email, password) =>
16    this.auth.createUserWithEmailAndPassword(email, password);
17}
18
19export default Firebase;

登录

我们还将设置 登录 函数，它同样接收邮箱和密码作为参数：

1import app from 'firebase/app';
2import 'firebase/auth';
3
4const config = { ... };
5
6class Firebase {
7  constructor() {
8    app.initializeApp(config);
9
10    this.auth = app.auth();
11  }
12
13  // *** 认证 API ***
14
15  doCreateUserWithEmailAndPassword = (email, password) =>
16    this.auth.createUserWithEmailAndPassword(email, password);
17
18  doSignInWithEmailAndPassword = (email, password) =>
19    this.auth.signInWithEmailAndPassword(email, password);
20}
21
22export default Firebase;

错误处理

由于这些接口是异步调用的，后续需要进行结果处理。同时也要妥善处理可能出现的错误。

例如，尚未注册的用户无法登录，此时 Firebase API 会返回错误。对于 登出 函数，我们无需传入任何参数，因为 Firebase 会自动识别当前已认证的用户。

如果当前没有用户处于登录状态，调用此函数将不会产生任何效果。

1import app from 'firebase/app';
2import 'firebase/auth';
3
4const config = { ... };
5
6class Firebase {
7  constructor() {
8    app.initializeApp(config);
9
10    this.auth = app.auth();
11  }
12
13  // *** 认证 API ***
14
15  doCreateUserWithEmailAndPassword = (email, password) =>
16    this.auth.createUserWithEmailAndPassword(email, password);
17
18  doSignInWithEmailAndPassword = (email, password) =>
19    this.auth.signInWithEmailAndPassword(email, password);
20
21  doSignOut = () => this.auth.signOut();
22}
23
24export default Firebase;

重置/修改密码

此外，还有两个用于重置和修改已登录用户密码的认证方法：

1import app from 'firebase/app';
2import 'firebase/auth';
3
4const config = { ... };
5
6class Firebase {
7  constructor() {
8    app.initializeApp(config);
9
10    this.auth = app.auth();
11  }
12
13  // *** 认证 API ***
14
15  doCreateUserWithEmailAndPassword = (email, password) =>
16    this.auth.createUserWithEmailAndPassword(email, password);
17
18  doSignInWithEmailAndPassword = (email, password) =>
19    this.auth.signInWithEmailAndPassword(email, password);
20
21  doSignOut = () => this.auth.signOut();
22
23  doPasswordReset = email => this.auth.sendPasswordResetEmail(email);
24
25  doPasswordUpdate = password =>
26    this.auth.currentUser.updatePassword(password);
27}
28
29export default Firebase;

至此，我们就完成了为 React 组件提供的 Firebase 认证接口，使其能够连接到 Firebase API。

---

在下一节课中，我们将运行并验证应用的 Firebase 认证功能。