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

Question

我的网站上有一个按钮，允许用户使用弹出式登录屏幕通过 Yodlee/Plaid 登录他们的银行。问题是移动设备上的 safari 和 chrome 都阻止了弹出窗口。弹出窗口在桌面上工作。我已经读过，如果用户没有单击按钮来启动它们，或者如果它们从单击事件开始的时间超过一秒，则 safari 和 chrome 会阻止所有弹出窗口。

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

//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>

Answer 1

您的点击没有激活打开，ajax返回是。

如果您确定用户需要访问令牌，请获取它

我没有制作实际的 sn-p，因为它不会在这里运行。

$(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>