使用 Javascript 中的 Plaid QuickStart 示例

Question

我正在尝试获取 Plaid 在 Javascript 中工作的示例。我遵循文档中的代码，但我无法让它工作。

首先，我在 Node.js 中生成链接令牌。

{
  expiration: '2022-12-07T20:17:05Z',
  link_token: 'link-sandbox-85d50492-cb3b-4046-af2c-faefc1510af5',
  request_id: 'ruUVcZ39O2cEF9J'
}

然后，我使用此代码将此令牌发送到前端 JS 示例。

<script src="https://cdn.plaid.com/link/v2/stable/link-initialize.js"></script>
<script type="text/javascript">
window.onload = async function(e) {
    var handler = Plaid.create({
    // Create a new link_token to initialize Link
    token: "link-sandbox-85d50492-cb3b-4046-af2c-faefc1510af5",
    receivedRedirectUri: "https://localhost:3000/", // window.location.href,
    onLoad: function() {
        // Optional, called when Link loads
    },
    onSuccess: function(public_token, metadata) {

    },
    onExit: function(err, metadata) {

    },
    onEvent: function(eventName, metadata) {

    }
    });

    document.getElementById("plaidButton").onclick = function(e) {
        handler.open();
    }
}
</script> 
<button id="plaidButton">Create Link</button>

当我单击按钮调用handler.open()时，出现此错误。 React Quickstart 示例对我来说工作正常，但我无法让它在普通 Javascript 中工作。

Blocked a frame with origin "https://localhost:3000" from accessing a frame with origin "https://cdn.plaid.com". Protocols, domains, and ports must match.
Failed to load resource: the server responded with a status of 400 (Bad Request)
Error: oauth uri does not contain a valid oauth_state_id query parameter. Request ID: hWvHyyooyWiCmlw

我在 https://localhost:3000 本地运行此示例，我还将其设置为我在 Plaid 中的重定向 uri 之一。

Answer 1

至少有一个问题是 receivedRedirectUri 不应在第一次初始化 Link 时设置。 从 OAuth 重定向返回后，第二次初始化 Link 时使用它。

至于 CORS 问题（阻止来源为“https://localhost:3000”的框架访问来源为“https://cdn.plaid.com”的框架...）我不确定 -您复制和粘贴的代码看起来很好，当我在本地运行它时，我没有收到该错误，因此问题可能出在您未在此处显示的内容中。

有关 JavaScript 中的完整工作示例，请查看https://github.com/plaid/tiny-quickstart/tree/main/vanilla_js