如何使用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

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

1. 用户在您的客户端应用程序中输入用户名和密码
2. 客户端应用程序将用户名和密码发送到您的服务器
3. 服务器检查用户名和密码，如果正确，则使用admin 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 })
  })
})