在彈出窗口中成功登錄貝寶后，將重定向URL參數傳遞回主窗口

Question

我必須在React SPA應用程序中實現“與Paypal連接”功能。

通過使用Paypal提供的代碼來實現登錄

paypal.use( ["login"], function(login) {
        login.render ({
            "appid": MYAPPID,
            "authend": "sandbox",
            "scopes": <SCOPES>,
            "containerid": "paypalButton",
            "locale": "en-us",
            "returnurl": <RETURN_URL>
        });
    });

這將打開一個新的彈出窗口，這完全是我無法控制的。 彈出窗口打開Paypal登錄表單，成功登錄后，該表單將重定向到<RETURN_URL> 。

所有這些都在彈出窗口中發生。 由於這是SPA，因此我不想刷新頁面。

我需要的是一種關閉重定向彈出窗口的方法，同時還保留從Paypal傳遞回給它的URL參數，並將該信息（URL參數）傳輸到主應用程序窗口。

這有可能嗎？ 我所知道的，貝寶文檔已經過時了。

Answer 1

有很多共享數據的方法。 我假設您的{RETURN_URL}和SPA位於同一來源。 我想出了兩種方法在您的SPA和彈出窗口之間進行通信。

1）如果您需要的瀏覽器和版本（caniuse）支持該API，請使用廣播頻道API 。 沒有Safari，而且Edge有限！ Polyfill也存在。

這是一些示例代碼，您可以用來嘗試不同的方法。 兩頁（一個是您的SPA，另一個是您提供的PayPal在完成時發送給您的RETURN_URL）。

您的SPA index.html ：

<html>
  <head>
    <title>My SPA</title>
  </head>
  <body>
    <script>
      const bc = new BroadcastChannel("my_spa_listener");
      window.open("./newpage.html?some=true&query=hi&params=cat", "_new");
      bc.onmessage = function(ev) {
        console.log("Got a message from the pop-up: ", ev.data);
      };
    </script>
  </body>
</html>

彈出窗口newpage.html ：

<html>
  <head>
    <title>PayPal redirected me here</title>
  </head>
  <body>
    <script>
      setTimeout(function() {
        const bc = new BroadcastChannel("my_spa_listener");
        bc.postMessage(window.location.search);
        bc.close();
        window.close();
      }, 2500);
    </script>
  </body>
</html>

2）好的舊localStorage 。 您幾乎可以在任何地方使用它！

index.html ：

const targetKey = "popup-queryparams";
window.addEventListener("storage", function(ev) {
    if (ev.key === targetKey) {
        console.log("Got the data: ", ev.newValue);
        // clear key in case it conatins sensitive info
        localStorage.removeItem(targetKey);
    }
});
window.open("./newpage.html?some=true&query=hi&params=cat", "_new");

然后在彈出窗口中，在關閉窗口之前，只需執行以下操作：

localStorage.setItem("popup-queryparams", window.location.search);

在彈出窗口中成功登錄貝寶后，將重定向URL參數傳遞回主窗口

問題描述

1 個解決方案

解決方案1
2 已采納 2019-07-31 22:40:20

在彈出窗口中成功登錄貝寶后，將重定向URL參數傳遞回主窗口

問題描述

1 個解決方案

解決方案1 2 已采納 2019-07-31 22:40:20

解決方案1
2 已采納 2019-07-31 22:40:20