Xumm-oauth2-pkce 在本地主機上工作，當我部署到服務器時停止

Question

我在這個問題上慢慢失去了理智，我想在移動設備上進行基本的 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;

我注意到當我從網站打開時，控制台給了我 3 行：

Xumm OAuth2 PKCE Authorization Code Flow lib.

Remember JWT

XummPkce attached to window

但是當我在本地主機上打開時，我得到 4 行，上面的 3 行，加上：

XUMM SDK: Running in browser

任何幫助將不勝感激，因為我正在慢慢發瘋。

Answer 1

根據您的消息，我知道您正在移動設備上進行測試並期待重定向？

你能檢查一下這個例子嗎： https ://oauth2-pkce-demo.xumm.dev/jsmodule

該頁面的源代碼非常干凈，適用於移動重定向和桌面。

在移動設備上簽名后，成功/檢索事件處理程序也會在重定向時觸發。

另一件要檢查的事情：你提到你在你的服務器上運行它（可能是服務器端呈現？） 。 請確保 Xumm SDK 必須在客戶端運行。 如果構建以某種方式導致代碼試圖在后端而不是前端運行，它將無法工作。

要強制在客戶端運行 Xumm 代碼，您可以參考window.xumm而不僅僅是xumm 。

---

編輯（回復：回復評論）

它能夠處理新選項卡，但如果該選項卡位於不同的瀏覽器中，或者例如您離開嵌入式瀏覽器（社交媒體應用程序等）然后返回到您的常用瀏覽器，它將無法正常工作。

PKCE 流程依賴於存儲在本地/會話存儲中的安全參數。 您可以通過將此選項添加到構造函數來嘗試隱式流程：

{ implicit: true }

（作為構造函數的第二個參數）。

如果那仍然不起作用：您是否檢查了我的建議：

1. 服務器端呈現（？）
2. 在模板（head）中嘗試 CDN 並參考 window.xumm？

Answer 2

如果有人遇到同樣的問題，請將您的 xumm-oauth2-pkce 更新到 2.6.0。 這解決了我的問題。

如果您不想更新，另一種解決方案是將 CDN 到 xumm-oauth2-pkce 到 (head) 在您的 index.html 中的公用文件夾中，並在同一文件中偵聽 xumm 事件。