尽管用户单击按钮启动，但浏览器弹出窗口被阻止

Question

我在我的网站上有一个按钮，允许用户通过Yodlee/Plaid使用弹出的登录屏幕登录到他们的银行。问题是弹出窗口被safari和chrome手机屏蔽了。弹出窗口在桌面上工作。我读到过safari和chrome会阻止所有弹出窗口，如果用户没有点击按钮启动弹出窗口，或者弹出窗口从点击事件开始超过一秒。

我的问题是，在启动弹出窗口之前，我的前端必须调用我的后端来检索令牌。所有这些都需要超过一秒钟的时间，因此，阻止弹出窗口。我对JS还很陌生，如果能提供任何解决这个问题的意见，我将非常感激。

null

//makes call to backend to get yodlee access token 
function getAccessToken(){
    $.ajax({
        url: "/request/access-token",
        headers: {'X-CSRFToken': csrf_token},
        type: "POST",
        data: {'id': uuid},
        dataType: "json",
        context: document.body,
        success: function(data){
            var accessToken = data['access_token'];
            openFastLink();
      }
    });
}

//opens fastlink popup
function openFastLink(){
    window.fastlink.open({
      fastLinkURL: 'https://fl4.prod.yodlee.com.au/...',
      accessToken: 'Bearer ' + accessToken,
      forceIframe: true,
      iframeScrolling: true,
      params: {
        configName : 'Aggregation'
      },
      onSuccess: function (data) {
        alert('account linked!')
      }
    },
    'container-fastlink');
}

<button onclick="getAccessToken">Link Account</button>

null

Answer 1

您的单击不是激活open，ajax返回是。

如果您确信用户将需要访问令牌，只需获取它

我没有做一个实际的代码段，因为它不会在这里运行。

$(function() {
  let accessToken;

  $.ajax({
    url: "/request/access-token",
    headers: {
      'X-CSRFToken': csrf_token
    },
    type: "POST",
    data: {
      'id': uuid
    },
    dataType: "json",
    context: document.body,
    success: function(data) {
      accessToken = data['access_token'];
      $("#linkAccount").show()
    }
  });


  //opens fastlink popup
  $("#linkAccount").on("click", function() {
    window.fastlink.open({
        fastLinkURL: 'https://fl4.prod.yodlee.com.au/...',
        accessToken: 'Bearer ' + accessToken,
        forceIframe: true,
        iframeScrolling: true,
        params: {
          configName: 'Aggregation'
        },
        onSuccess: function(data) {
          $("#linkAccount").hide()
          $("#linked").show()
        }
      },
      'container-fastlink');
  });
});

.hide {
  display: none;
}

<button type="button" id="linkAccount" class="hide">Link Account</button>
<div id="linked" class="hide">Account linked</div>