Plaid Link初始化后点击按钮持续加载无响应问题求助

问题原因 #

1. 协议限制：Plaid Link不支持file://协议，直接打开本地HTML文件时，Link无法发起正常网络请求，导致页面无限加载。
2. 模板语法错误：原模板中onLoad方法里的console.log语句缺少闭合单引号，会引发控制台语法错误。

修复方案 #

1. 修改Go代码，启动本地HTTP服务器

替换原代码中创建临时文件和休眠的逻辑，改为启动简单HTTP服务器提供页面，确保运行在HTTP协议下：

package main

import (
    "context"
    _ "embed"
    "html/template"
    "log"
    "net/http"

    "github.com/plaid/plaid-go/plaid"
    "github.com/vrischmann/envconfig"
)

type config struct {
    PlaidApi struct {
        ClientId string `envconfig:"PLAID_CLIENT_ID"`
        Secret   string `envconfig:"PLAID_SECRET"`
    }
}

//go:embed token.html.tmpl
var tokenPage string

func main() {
    cfg := config{}

    if err := envconfig.Init(&cfg); err != nil {
        log.Fatalf("failed to load config from environment: %s", err)
    }

    ctx := context.TODO()
    plaidCfg := plaid.NewConfiguration()
    plaidCfg.UseEnvironment(plaid.Development)
    cli := plaid.NewAPIClient(plaidCfg)
    phoneNumber := "+1 888 888-8888"
    user := plaid.LinkTokenCreateRequestUser{
        ClientUserId: "1",
        PhoneNumber:  &phoneNumber,
    }
    request := plaid.NewLinkTokenCreateRequest(
        "Personal Finance App",
        "en",
        []plaid.CountryCode{plaid.COUNTRYCODE_US},
        user,
    )
    request.SetProducts([]plaid.Products{plaid.PRODUCTS_TRANSACTIONS})
    request.SetSecret(cfg.PlaidApi.Secret)
    request.SetClientId(cfg.PlaidApi.ClientId)
    linkTokenCreateResp, _, err := cli.PlaidApi.LinkTokenCreate(ctx).LinkTokenCreateRequest(*request).Execute()
    if err != nil {
        if pErr, err := plaid.ToPlaidError(err); err == nil {
            log.Printf("Error from plaid: %s", pErr.ErrorMessage)
        }
        log.Fatalf("failed to get link request: %s", err.Error())
    }
    log.Printf("link token: %s", linkTokenCreateResp.GetLinkToken())

    tmplate, err := template.New("token.html").Parse(tokenPage)
    if err != nil {
        log.Printf("Html tmplate:\n%s", tokenPage)
        log.Fatalf("Failed to create HTML template: %s", err)
    }

    // 启动本地HTTP服务器，提供渲染后的页面
    http.HandleFunc("/", func(w http.ResponseWriter, r *http.Request) {
        data := struct {
            LinkToken string
        }{LinkToken: linkTokenCreateResp.LinkToken}
        if err := tmplate.Execute(w, data); err != nil {
            log.Printf("template data: %#v", data)
            log.Printf("html template:\n%#v", tokenPage)
            http.Error(w, "Failed to render token page", http.StatusInternalServerError)
        }
    })

    log.Println("Server running at http://localhost:8080")
    log.Fatal(http.ListenAndServe(":8080", nil))
}

2. 修复模板中的语法错误

修正onLoad方法里的console.log语句，补充缺失的闭合单引号：

<button id="link-button">Link Account</button>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.plaid.com/link/v2/stable/link-initialize.js"></script>
<script type="text/javascript">
(async function($) {
  var handler = Plaid.create({
    token: "{{ .LinkToken }}",
    onLoad: function() {
        console.log("link token: '{{ .LinkToken }}'")
    },
    onSuccess: function(public_token, metadata) {
        console.log("Success!");
    },
    onExit: function(err, metadata) {
      if (err != null) {
          console.log(err);
      }
    },
    onEvent: function(eventName, metadata) {}
  });

  $('#link-button').on('click', function(e) {
    handler.open();
  });
})(jQuery);
</script>

验证步骤 #

1. 运行修改后的Go代码，控制台会输出服务器地址http://localhost:8080
2. 在浏览器中访问该地址，点击"Link Account"按钮，即可正常加载Plaid Link界面

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