Xumm-oauth2-pkce本地正常，部署至服务器后失效求助

问题描述 #

实现XUMM钱包移动端基础登录功能时，本地环境运行完全正常，但部署至服务器后功能失效。

相关代码 #

import "./App.css";
import { XummPkce } from "xumm-oauth2-pkce";

function App() {
  const xumm = new XummPkce(my-api);

  // Xumm events start
  async function connect() {
    xumm.authorize().catch((e) => console.log("e", e));
  }

  xumm.on("error", (error) => {
    console.log("error", error);
  });

  xumm.on("success", async () => {
    const state = await xumm.state();
    console.log("success");
    console.log(state.me.account);
    // setWalletAddres(state.me.account);
  });

  xumm.on("retrieved", async () => {
    const state = await xumm.state();
    console.log("retrieved");
    console.log(state.me.account);
    // setWalletAddres(state.me.account);
  });
  //Xumm events end

  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <button onClick={connect}> Test </button>
      </header>
    </div>
  );
}

export default App;

日志对比 #

服务器部署环境控制台日志 #

Xumm OAuth2 PKCE Authorization Code Flow lib.

Remember JWT

XummPkce attached to window

本地localhost环境控制台日志（多一行关键输出） #

Xumm OAuth2 PKCE Authorization Code Flow lib.

Remember JWT

XummPkce attached to window
XUMM SDK: Running in browser

排查方向与解决方案 #

• 校验XUMM开发者平台配置：确保服务器部署的域名已添加到XUMM开发者后台的「Allowed Origins / Redirect URLs」列表中，本地localhost通常默认允许，但生产域名容易遗漏配置。
• 强制使用HTTPS：XUMM SDK在生产环境要求网站必须使用HTTPS（localhost例外），如果服务器部署的是HTTP协议，SDK会静默终止流程，不会触发后续事件。
• 确认API密钥一致性：检查生产环境是否使用了正确的XUMM API密钥，避免本地与生产环境密钥不一致导致权限验证失败。
• 排查跨域请求拦截：打开浏览器开发者工具「Network」面板，查看是否有XUMM授权相关的请求被跨域策略拦截，需确保服务器配置了正确的CORS规则。
• 调整SDK初始化时机：在React组件中，建议在useEffect钩子中初始化XummPkce，确保DOM就绪后再绑定SDK实例，避免因初始化时机过早导致SDK无法正确挂载到window对象：

  import { useEffect, useState } from 'react';
  import "./App.css";
  import { XummPkce } from "xumm-oauth2-pkce";
  
  function App() {
    const [xumm, setXumm] = useState(null);
  
    useEffect(() => {
      const xummInstance = new XummPkce('your-api-key');
      
      xummInstance.on("error", (error) => console.log("error", error));
      xummInstance.on("success", async () => {
        const state = await xummInstance.state();
        console.log("success", state.me.account);
      });
      xummInstance.on("retrieved", async () => {
        const state = await xummInstance.state();
        console.log("retrieved", state.me.account);
      });
  
      setXumm(xummInstance);
    }, []);
  
    async function connect() {
      xumm?.authorize().catch((e) => console.log("e", e));
    }
  
    return (
      <div className="App">
        <header className="App-header">
          <button onClick={connect}> Test </button>
        </header>
      </div>
    );
  }
  
  export default App;
  

• 检查浏览器存储权限：XUMM SDK依赖localStorage存储JWT，在生产环境中部分浏览器可能限制存储权限，可在控制台执行localStorage.getItem('xumm-oauth2-pkce')验证是否能正常读取数据。

内容的提问来源于stack exchange，提问作者Piotr F