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

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将这种类型的表单正确提交/POST到API？

Answer 1

您实际上没有表单(包含输入字段等)，所以不要尝试提交表单。相反，只需使用AJAX POST请求(获取API、axios…)将Token提交到服务器。