Question

我正在尝试使用Facebook登录用户。我使用Facebook Javascript SDK来获取令牌，该令牌使用Node.js发送到API以进行用户登录。我在按钮内使用隐藏的形式发布该令牌。现在，用户单击“使用Facebook登录”按钮。它显示了他们的个人资料已登录并收集了他们的facebook令牌（以隐藏形式放置），然后他们按下了提交按钮，该按钮通过POST将其个人资料和令牌提交到API。

表单如下：

<form id="fbForm" action="/FBLogin" method="post">
  <fb:login-button 
     scope="public_profile,email" onlogin="checkLoginState();"
     data-max-rows="1" data-size="large" data-button-type="continue_with" 
     data-show-faces="false" data-auto-logout-link="false" data-use-continue-as="true">
  </fb:login-button>
  <input type="hidden" name="fbtokeninput" />

  <button type="submit">Login with Facebook</button>
</form>

使用javascript sdk的Facebook应用登录如下（但没有form.submit()行）：

FB.getLoginStatus(function(response) {
  statusChangeCallback(response);
});

function checkLoginState() {
  FB.getLoginStatus(function(response) {
    statusChangeCallback(response);
  });
}

function statusChangeCallback(response) {
console.log('statusChangeCallback');
console.log(response);

if (response.status === 'connected') {
    FB.api('/me', function (response) {
        console.log(response);

        var fbtoken = response.authResponse.accessToken
        document.getElementById('fbtokeninput').value = fbtoken;

        setTimeout(function() {document.getElementById("fbForm").submit();}, 1000);
    });
} else {
    //error message
}

}

现在这可以正常工作，但是我不希望用户必须单击第二个“提交”按钮来登录。我的主要问题是setTimeout(function() {document.getElementById("fbForm").submit();}, 1000);行。这是行不通的，只是没有延迟的常规提交行也不行。

您如何使用JavaScript将此类表单正确提交/发布到API？

Answer 1

您实际上没有表单（带有输入字段和其他内容），所以不要尝试提交表单。相反，只需使用AJAX POST请求（fetch API，axios，...）将令牌提交到您的服务器即可。

Facebook登录后提交带有POST请求的表单

1 个答案: