Firebase Auth重定向登录后自定义参数的持久化与获取策略

本文旨在解决firebase auth重定向登录过程中，无法直接通过`getredirectresult`获取自定义参数的问题。核心策略是利用浏览器`localstorage`在重定向前持久化所需参数，并在用户成功登录并重定向回应用后，从`localstorage`中检索这些参数，从而实现跨页面状态传递。

在构建现代Web应用时，用户身份验证是不可或缺的一环。Firebase Authentication提供了强大且易于集成的身份验证服务，其中包括通过OAuth提供商（如Google、Facebook等）进行重定向登录。然而，开发者有时需要在重定向登录流程中传递自定义状态或参数，例如用户在登录前正在执行的特定操作，以便在登录成功后恢复该操作。尽管Firebase Auth的setCustomParameters方法允许在发起重定向时设置自定义参数，但这些参数通常不会直接包含在getRedirectResult的返回结果中，这给状态管理带来了挑战。

挑战：getRedirectResult与自定义参数

当使用signInWithRedirect方法发起登录时，可以通过provider.setCustomParameters()设置一些OAuth提供商支持的自定义参数，例如prompt: 'select_account'或自定义的state值。

import { getAuth, GoogleAuthProvider, signInWithRedirect } from 'firebase/auth';

const provider = new GoogleAuthProvider();
provider.setCustomParameters({
  prompt: 'select_account',
  state: 'saveAction', // 尝试传递自定义状态
});

// 发起重定向登录
await signInWithRedirect(getAuth(), provider);

登录后复制

用户完成第三方认证后，会被重定向回应用。此时，我们通常会调用getRedirectResult来获取登录凭据和用户信息。然而，经验证，getRedirectResult的返回对象中并不包含通过setCustomParameters设置的自定义参数，尤其是我们期望用于应用内部逻辑的state。

解决方案：利用浏览器LocalStorage持久化自定义参数

由于Firebase Auth的getRedirectResult无法直接提供这些自定义参数，最实用的解决方案是在发起重定向之前，将所需参数存储在浏览器本地存储（localStorage）中，待重定向完成后再从localStorage中检索。

标签： javascript java js json go 编码 浏览器 app facebook ai win google