angularjs - 除非强制刷新，否则 Braintree Dropin UI 不适用于 Ionic Framework

Question

我在 Ionic 框架内使用 Braintree dropin UI 遇到了一个非常奇怪的行为。

所以我使用解决方案:Can't create Braintree client token with customer ID首次创建逻辑和回头客。

$http({
          method: 'POST',
          url: 'http://localhost:3000/api/v1/token',
          data: {
            customerId: braintreeReturnCustomerId
          }
        })

当我在客户端 View 中传入 customerId 时。在我的 nodejs 服务器中，我有一个逻辑来检查 customerId 是否未定义。如果未定义，则为首次客户。如果customerId有值，就是回头客。像这样非常直接:

app.post('/api/v1/token', jsonParser, function (request, response) {

var customerId = request.body.customerId;

 if (customerId == undefined) {

   gateway.clientToken.generate({}, function (err, res) {
    if (err) throw err;
     response.json({
      "client_token": res.clientToken
    });
  });
  } else {
    console.log ("using exsiting customer!");
    gateway.clientToken.generate({
        customerId: customerId
    }, function (err, res) {
    if (err) throw err;
    response.json({
      "client_token": res.clientToken
     });
   });
 }


 });

我的客户在 ionic View 中。所以当我第一次付款时，它知道它是第一次用户，然后为我生成 customerId 并将其存储在我的数据库中。都好。然后不刷新(因为 Ionic 应用程序在状态更改时不刷新)，我进入不同的状态并返回支付状态，它不显示商店信用卡。甚至我的服务器都记录了 customerId，我确定服务器代码正在运行 gateway.clientToken.generate({customerId: customerId} ...

如果我像使用一样在 View 中强制刷新

$window.location.reload(true);

在第一次付款成功后，或者我只是在我的 chrome 浏览器中手动刷新页面(就像我在 Ionic Serve 中一样)，付款 Dropin UI 页面将显示第一次付款时的商店信用卡。

我尝试禁用像“cache: false”这样的 View 缓存。但这没有帮助。我必须强制刷新才能使 Dropin UI 第二次工作。我认为是 dropin UI 中的 javascript 代码导致了这个问题，但我不知道如何解决...

Answer 1

_{完全披露:我在 Braintree 工作。如果您还有任何疑问，请随时联系support .}

您发布的方法非常不安全，因为它容易受到 Insecure Direct Object Reference 的攻击( OWASP Top 10 ) 并且很容易导致恶意用户进行跨用户收费。您实际上已经允许任何用户使用您的服务器为任何客户生成客户端 token 。

相反，您应该只在服务器上生成 token ，以避免用户代理选择其他用户的 ID。然后根据用户的凭据登录提供客户 ID，并且不允许他们传入要在 clientToken 生成期间使用的参数。有many guides online on how to build authentication .但是一旦您在服务器上创建了用户，您就可以:

if (userSession == undefined) {
    //or force login if you want them to sign up for your site before buying things
    gateway.clientToken.generate({}, function (err, res) {
        if (err) throw err;
        response.json({
            "client_token": res.clientToken
        });
    });
} else {
    console.log ("using exsiting customer!");
    gateway.clientToken.generate({
        customerId: userSession.user.BraintreeId
    }, function (err, res) {
        if (err) throw err;
        response.json({
            "client_token": res.clientToken
        });
    });
}

无论您做什么，都不要在生产中按原样使用此代码。在您重建以修复此漏洞之前，我不建议调试前端，因为方法会大不相同。但是，如果您再次回到这个问题，看起来可能有 an open issue related this behavior .