当使用firebase auth的重定向登录（如googleauthprovider）时，通过`setcustomparameters`设置的自定义参数（例如`state`）无法直接通过`getredirectresult`获取。本文将介绍一种实用的解决方案，利用浏览器`localstorage`在重定向前后持久化并检索这些自定义参数，从而在用户登录成功后继续处理相关业务逻辑，确保数据在页面跳转间的完整传递。
背景问题
在使用Firebase Authentication进行第三方服务（如Google）的重定向登录流程时，开发者经常需要传递一些自定义状态或参数，以便在用户成功登录并重定向回应用后，能够根据这些参数执行后续操作。例如，用户在执行特定操作（如注册）时被要求登录，登录成功后需要知道此前用户正在进行的是“注册”操作。
Firebase Auth的GoogleAuthProvider等提供了setCustomParameters方法来设置这些参数：
const provider = new GoogleAuthProvider();provider.setCustomParameters({ prompt: 'select_account', state: 'saveAction', // 期望传递的自定义参数});await signInWithRedirect(getAuth(), provider);
然而，在用户完成登录并重定向回应用后，通过getRedirectResult方法获取的认证结果对象中，并不能直接访问到这些通过setCustomParameters设置的自定义参数。这给需要依赖这些参数的应用逻辑带来了挑战。
解决方案：利用LocalStorage持久化自定义参数
由于Firebase Auth本身不提供直接在getRedirectResult中读取自定义参数的机制，一种有效的变通方案是利用浏览器的localStorage来在重定向前后持久化这些参数。localStorage允许在浏览器会话之间存储数据，即使页面刷新或关闭后数据依然存在，这非常适合解决重定向带来的状态丢失问题。
1. 在发起重定向登录前存储自定义参数
在调用signInWithRedirect发起重定向登录之前，将需要传递的自定义参数存储到localStorage中。为了方便存储复杂的对象，建议使用JSON.stringify()将其转换为字符串。
// 定义需要传递的自定义参数const customParams = { action: "user_registration", source: "homepage" };// 将参数存储到 localStorage，使用一个唯一的键名// 建议将对象转换为 JSON 字符串进行存储localStorage.setItem("myAppCustomAuthParams", JSON.stringify(customParams));// 配置 Firebase 认证提供者const provider = new GoogleAuthProvider();provider.setCustomParameters({ prompt: 'select_account', // 注意：此处设置的 state 参数与 localStorage 存储的参数是独立的， // 仅用于向 OAuth 提供者传递信息，不会在 getRedirectResult 中返回给应用 state: 'firebase_auth_state_identifier', });// 发起重定向登录const auth = getAuth();await signInWithRedirect(auth, provider);
说明：
localStorage.setItem(“myAppCustomAuthParams”, JSON.stringify(customParams))：将包含自定义业务逻辑的参数对象序列化为JSON字符串，并以”myAppCustomAuthParams”为键名存储。provider.setCustomParameters({ state: ‘…’ })：这里的state参数是OAuth 2.0协议的一部分，主要用于防止CSRF攻击，并且由OAuth服务提供商处理。它与我们希望在应用内部传递的自定义业务参数是不同的概念，getRedirectResult不会返回它。因此，我们不能依赖它来传递业务参数。
2. 在重定向登录成功后检索参数
用户完成登录并被重定向回应用后，在处理getRedirectResult结果的同时，从localStorage中检索之前存储的自定义参数。
import { getAuth, getRedirectResult } from "firebase/auth";const auth = getAuth();// 在应用加载时或适当的时机调用，以处理重定向结果getRedirectResult(auth) .then((result) => { if (result) { // 用户已成功登录并重定向回应用 const user = result.user; const credential = GoogleAuthProvider.credentialFromResult(result); const accessToken = credential.accessToken; console.log("用户已登录:", user); // 从 localStorage 中检索之前存储的自定义参数 const storedParamsString = localStorage.getItem("myAppCustomAuthParams"); if (storedParamsString) { try { const retrievedParams = JSON.parse(storedParamsString); console.log("检索到的自定义参数:", retrievedParams); // 根据 retrievedParams 执行后续的业务逻辑，例如完成用户注册流程 if (retrievedParams.action === "user_registration") { console.log("用户正在完成注册流程..."); // 调用相应的注册完成API或更新UI } } catch (error) { console.error("解析自定义参数失败:", error); } finally { // 无论成功与否，一旦使用完毕，应立即清除 localStorage 中的数据 localStorage.removeItem("myAppCustomAuthParams"); } } else { console.log("未找到自定义参数。"); } } else { // 没有重定向结果，可能是用户直接访问页面或未完成登录 console.log("没有待处理的重定向认证结果。"); } }) .catch((error) => { // 处理登录过程中可能出现的错误 console.error("重定向登录失败:", error); // 清理 localStorage 以防万一 localStorage.removeItem("myAppCustomAuthParams"); });
说明：
localStorage.getItem(“myAppCustomAuthParams”)：获取存储的JSON字符串。JSON.parse(storedParamsString)：将JSON字符串解析回JavaScript对象。localStorage.removeItem(“myAppCustomAuthParams”)：非常重要！ 在参数使用完毕后，务必从localStorage中清除它。这有助于防止意外行为、减少存储空间占用，并提高安全性，特别是当参数包含敏感信息时。
完整示例代码
import { getAuth, GoogleAuthProvider, signInWithRedirect, getRedirectResult } from "firebase/auth";import { initializeApp } from "firebase/app";// 您的 Firebase 配置const firebaseConfig = { apiKey: "YOUR_API_KEY", authDomain: "YOUR_AUTH_DOMAIN", projectId: "YOUR_PROJECT_ID", storageBucket: "YOUR_STORAGE_BUCKET", messagingSenderId: "YOUR_MESSAGING_SENDER_ID", appId: "YOUR_APP_ID"};// 初始化 Firebaseconst app = initializeApp(firebaseConfig);const auth = getAuth(app);// --- 登录前：存储参数并发起重定向 ---async function initiateLoginWithCustomParams() { const customParams = { action: "complete_order", orderId: "ORD123456", returnUrl: "/dashboard" }; // 存储自定义参数到 localStorage localStorage.setItem("myAppCustomAuthParams", JSON.stringify(customParams)); console.log("自定义参数已存储:", customParams); const provider = new GoogleAuthProvider(); // 这里的 state 仅用于 OAuth 协议，不会在 getRedirectResult 中返回给应用 provider.setCustomParameters({ prompt: 'select_account' }); try { await signInWithRedirect(auth, provider); // 重定向发生，此行之后的代码不会执行 } catch (error) { console.error("发起重定向登录失败:", error); // 如果发起重定向失败，也应该清理 localStorage localStorage.removeItem("myAppCustomAuthParams"); }}// --- 登录后：处理重定向结果并检索参数 ---async function handleRedirectResultAndParams() { try { const result = await getRedirectResult(auth); if (result) { // 用户已成功登录 const user = result.user; console.log("用户成功登录:", user.displayName, user.email); // 从 localStorage 检索自定义参数 const storedParamsString = localStorage.getItem("myAppCustomAuthParams"); if (storedParamsString) { try { const retrievedParams = JSON.parse(storedParamsString); console.log("成功检索到自定义参数:", retrievedParams); // 根据检索到的参数执行业务逻辑 if (retrievedParams.action === "complete_order") { console.log(`正在完成订单 ${retrievedParams.orderId}...`); // 模拟业务逻辑 setTimeout(() => { alert(`订单 ${retrievedParams.orderId} 已完成，即将跳转到 ${retrievedParams.returnUrl}`); window.location.href = retrievedParams.returnUrl; }, 1000); } } catch (parseError) { console.error("解析自定义参数失败:", parseError); } finally { // 清理 localStorage 中的参数 localStorage.removeItem("myAppCustomAuthParams"); console.log("自定义参数已从 localStorage 清除。"); } } else { console.log("未找到任何存储的自定义参数。"); } } else { console.log("没有待处理的重定向认证结果。"); } } catch (error) { console.error("处理重定向登录结果失败:", error); // 发生错误时也尝试清理 localStorage localStorage.removeItem("myAppCustomAuthParams"); }}// 在应用初始化时调用，检查并处理重定向结果handleRedirectResultAndParams();// 示例：触发登录的按钮点击事件// document.getElementById('signInButton').addEventListener('click', initiateLoginWithCustomParams);
注意事项
安全性： localStorage中的数据并非加密存储，任何可以访问用户浏览器的人都可以读取。因此，不应在localStorage中存储高度敏感的信息（如用户的密码、私钥等）。对于业务参数，确保其不包含机密数据。数据类型： localStorage只能存储字符串。存储JavaScript对象时，必须使用JSON.stringify()进行序列化；读取时，使用JSON.parse()进行反序列化。键名唯一性： 为localStorage中的键名选择一个足够独特且具有描述性的名称，以避免与其他应用或库的数据发生冲突。清理数据： 使用完localStorage中的数据后，务必调用localStorage.removeItem()将其清除。这不仅能避免数据残留，也能防止因旧数据导致意外行为。错误处理： 在解析localStorage中的JSON字符串时，应使用try…catch块来处理JSON.parse()可能抛出的错误，以增强应用的健壮性。sessionStorage： 如果自定义参数仅需在当前浏览器会话中有效（即浏览器关闭后即失效），可以考虑使用sessionStorage代替localStorage。其API与localStorage相同。
总结
尽管Firebase Auth的getRedirectResult不直接返回setCustomParameters设置的自定义参数，但通过巧妙地结合浏览器localStorage，我们可以有效地在重定向登录流程中持久化和检索所需的业务参数。这种方法简单、可靠，能够确保应用在用户登录成功后，依然能够根据上下文信息执行正确的后续操作，从而提供更流畅的用户体验。在实施时，请务必注意数据的安全性、及时清理以及适当的错误处理。
以上就是在Firebase认证重定向登录后读取自定义参数的策略的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1541034.html
微信扫一扫 
支付宝扫一扫 
