Javascript 如何在不使用标准按钮的情况下让Facebook登录正常工作
我正在尝试这样做,当用户点击我网站上的“提交”按钮时,Facebook会检查用户是否通过身份验证,如果没有,就会弹出一个弹出窗口,提示他们进行身份验证(而不是在网站上放置标准的Facebook按钮) 当我完全按照教程操作时,它可以正常工作,但是当我试图在单击按钮(而不是标准按钮)时将其修改为工作时,它停止工作。没有错误消息,页面只是没有注意到任何Javascript——Javascript 如何在不使用标准按钮的情况下让Facebook登录正常工作,javascript,facebook,facebook-javascript-sdk,Javascript,Facebook,Facebook Javascript Sdk,我正在尝试这样做,当用户点击我网站上的“提交”按钮时,Facebook会检查用户是否通过身份验证,如果没有,就会弹出一个弹出窗口,提示他们进行身份验证(而不是在网站上放置标准的Facebook按钮) 当我完全按照教程操作时,它可以正常工作,但是当我试图在单击按钮(而不是标准按钮)时将其修改为工作时,它停止工作。没有错误消息,页面只是没有注意到任何Javascript——console.logs甚至都没有出现。谢谢你看。以下是HTML文件: <!DOCTYPE html> <ht
console.log
s甚至都没有出现。谢谢你看。以下是HTML文件:
<!DOCTYPE html>
<html>
<head>
<title>Vote</title>
<link href="https://istrauss6.neocities.org/style.css" rel="stylesheet" type="text/css">
</head>
<body>
<script>
window.fbAsyncInit = function() {
FB.init({
appId : '1560520617436290',
autoLogAppEvents : true,
xfbml : true,
version : 'v5.0'
});
};
</script>
<script async defer src="https://connect.facebook.net/en_US/sdk.js"></script>
<!--{% extends "boring.html"%}-->
<!--{% block title %} Vote {% endblock %}-->
<!--{% block main %}-->
<form action = "/insert_vote" method = "post" onsubmit="">
<div action = "/insert_vote" method = "post" onsubmit="">
<div class="smalltext">
{% for dict_item in vote_choices %}
<input type="radio" name="options" padding="10px" margin="10px" id="{{ dict_item['id'] }}"
value="{{ dict_item['id'] }}"> {{ dict_item['choice'] }} </input><br>
{% endfor %}
</div>
<br>
<button onclick="myFunction()">Submit</button>
<script>
function myFunction() {
FB.getLoginStatus(function(response) {
if (response.status === 'connected') {
// The user is logged in and has authenticated your
// app, and response.authResponse supplies
// the user's ID, a valid access token, a signed
// request, and the time the access token
// and signed request each expire.
var uid = response.authResponse.userID;
var accessToken = response.authResponse.accessToken;
} else if (response.status === 'not_authorized') {
// The user hasn't authorized your application. They
// must click the Login button, or you must call FB.login
// in response to a user gesture, to launch a login dialog.
FB.login(function(response) {
if (response.authResponse) {
console.log('Welcome! Fetching your information.... ');
FB.api('/me', function(response) {
console.log('Good to see you, ' + response.name + '.');
});
} else {
console.log('User cancelled login or did not fully authorize.');
}
});
}
});
}
</script>
</div>
</form>
</body>
</html>
投票
window.fbAsyninit=函数(){
FB.init({
appId:'156520617436290',
自动假肢:对,
xfbml:是的,
版本:“v5.0”
});
};
{投票选择中的dict_项目百分比%}
{{dict_item['choice']}}
{%endfor%}
提交
函数myFunction(){
FB.getLoginStatus(函数(响应){
如果(response.status===“已连接”){
//用户已登录并已验证您的身份
//app和response.authResponse提供
//用户ID、有效访问令牌、签名
//请求,以及访问令牌的时间
//和签名的请求都将过期。
var uid=response.authResponse.userID;
var accessToken=response.authResponse.accessToken;
}else if(response.status===“未授权”){
//用户尚未授权您的应用程序。他们
//必须单击“登录”按钮,否则必须调用FB.Login
//响应用户手势,启动登录对话框。
FB.登录(功能(响应){
if(response.authResponse){
log('欢迎!获取您的信息…);
FB.api('/me',函数(响应){
log(“很高兴见到你,+response.name+”);
});
}否则{
log('用户取消登录或未完全授权');
}
});
}
});
}
您很可能只是在这里遇到了弹出窗口阻止程序…您在异步FB.getLoginStatus
的回调中调用了FB.login
,因此浏览器看不到用户单击按钮和试图打开弹出窗口之间的直接连接,因此它阻止了弹出窗口,因为它似乎是“未经请求的”。在点击按钮之前检查登录状态,或者直接调用FB.login
——如果用户已经授权了你的应用程序,弹出窗口将立即自动关闭。我尝试切换它,以便提交在最后,而不是开始,但在DOM(或脚本?)中的位置相同与弹出窗口是否被阻止无关。您需要调用FB。直接在单击处理程序中登录,将其包装到任何其他异步操作中都会被阻止。