如何使用 React 在 Firebase 中创建自定义令牌？

Question

我正在尝试创建一个自定义令牌来使用用户名登录用户。我已经阅读了一些文档https://firebase.google.com/docs/auth/admin/create-custom-tokens#web ，该文档通过如何为用户提供用户名而不是用户名链接到我电子邮件？，我发现我需要添加

使用 Firebase Admin SDK 创建自定义令牌

和

在客户端上使用自定义令牌登录

目前，我可以根据文档了解需要包含哪些内容，但我不确定这将在源代码中的位置。在哪里添加文档中的代码？这是 userUser.js 文件的源代码，以防有帮助。

import { useEffect, useState } from "react";
import { useRouter } from "next/router";
import firebase from "firebase/app";
import "firebase/auth";

import initFirebase from "../../config";
import {
  removeUserCookie,
  setUserCookie,
  getUserFromCookie,
} from "./userCookie";

initFirebase();

export const mapUserData = async (user) => {
  const { uid, email } = user;
  const token = await user.getIdToken(true);
  return {
    id: uid,
    email,
    token,
  };
};

const useUser = () => {
  const [user, setUser] = useState();
  const router = useRouter();

  // this is most likely where the custom token for
  // username goes
  const logout = async () => {
    return firebase
      .auth()
      .signOut()
      .then(() => {
        router.push("/");
      })
      .catch((e) => {
        console.error(e);
      });
  };

  useEffect(() => {
    const cancelAuthListener = firebase
      .auth()
      .onIdTokenChanged(async (userToken) => {
        if (userToken) {
          const userData = await mapUserData(userToken);
          setUserCookie(userData);
          setUser(userData);
        } else {
          removeUserCookie();
          setUser();
        }
      });

    const userFromCookie = getUserFromCookie();
    if (!userFromCookie) {
      return;
    }
    setUser(userFromCookie);
    return () => cancelAuthListener;
  }, []);

  return { user, logout };
};

export { useUser };

任何帮助将不胜感激。

Answer 1

您只能在服务器环境中使用管理 SDK（例如在 Firebase Functions 或其他服务器中） - 您不能在使用 React 的客户端环境中使用它。从概念上讲，其工作方式是：

1. 用户在您的客户端应用程序中输入用户名和密码
2. 客户端应用程序将用户名和密码发送到您的服务器
3. 服务器检查用户名和密码，如果正确，则使用管理 SDK 创建自定义令牌并将其发送回客户端应用程序
4. 客户端应用程序使用该自定义令牌登录 Firebase

所以它看起来像这样（注意 - 我在这里不处理任何错误，但你会想要）：

// client.js
const sendToServer = (username, password) => {
  // Step 1 - client sends the username/password to the cloud function
  return axios.post(`${myCloudFunctionUrl}/login`, {
    username,
    password
  }).then((response) => {
    // Step 5 - the client logs the user in with the custom token
    return firebase.auth().signInWithCustomToken(response.data.token)
  }).then(() => {
    // Step 6 - the user is now logged in and redirected to the dashboard
    router.push("/dashboard")
  })
}

// server.js (using Firebase Functions, but use whatever back end you want)
exports.login = functions.https.onRequest((req, res) => {
  const {username, password} = req.body
  // Step 2 - function verifies the username and password and gets the user's uid for the custom token
  return verifyUserInDatabase(username, password).then((uid) => {
    // Step 3 - the server creates a custom token
    return admin.auth().createCustomToken(uid)
  }).then((token) => {
    // Step 4 - the server sends the token back in its response
    res.json({ token })
  })
})