使用OAuth 2.0的Facebook javascript授权模式对话框 [英] Facebook javascript authorization modal dialog with OAuth 2.0
问题描述
我可以在老式学校做
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
<div id="fb-root"></div>
<script type="text/javascript" src="http://connect.facebook.net/de_DE/all.js"></script>
<script type="text/javascript">
function init(){
FB.init({
appId : 'MY_APP_ID',
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true, // parse XFBML
channelUrl : 'http://MY_WEBSPACE/facebook-iframe/channel.html' // custom channel
});
setupApp();
}
function setupApp() {
FB.getLoginStatus(
function(response) {
if (!response.session) {
FB.ui({method: "permissions.request", "perms": ''} , getUserId);
} else {
// the user previously authorized the app
getUserId(response);
window.location = "fanAuthorized.php";
}
});
return false;
}
function getUserId(data){
if(data.status !== 'notConnected' || data.session !== null){
// the user has just authorized the app
userId = data.session.uid;
accessToken = data.session.access_token;
window.location = "fanAuthorized.php";
} else {
// the user has just denied to authorize the app
window.location = "fanUnauthorized.php";
}
}
init();
</script>
</body>
</html>
切换到OAuth 2会使我陷入困境.我尝试了以下方法:
Switching to OAuth 2 gets me stuck. I tried the following:
<!DOCTYPE html>
<html xmlns:fb="https://www.facebook.com/2008/fbml">
<head>
</head>
<body>
<div id="fb-root"></div>
<script>
window.fbAsyncInit = function() {
FB.init({ appId: 'MY_APP_ID',
status: true,
cookie: true,
xfbml: true,
oauth: true
});
function updatePage(response) {
if (response.authResponse) {
// user is already logged in and connected
window.location = "fanAuthorized.php";
} else {
// user is not connected or logged out
FB.login(function(response) {
if (response.authResponse) {
window.location = "fanAuthorized.php";
} else {
// user has just cancelled login or denied permission
window.location = "fanUnauthorized.php";
}
}, {scope:''});
}
}
// run once with current status and whenever the status changes
FB.getLoginStatus(updatePage);
FB.Event.subscribe('auth.statusChange', updatePage);
};
(function() {
var e = document.createElement('script'); e.async = true;
e.src = document.location.protocol
+ '//connect.facebook.net/de_DE/all.js';
document.getElementById('fb-root').appendChild(e);
}());
</script>
</body>
</html>
此代码将我的模式对话框授权转换为弹出对话框授权，并且在没有用户交互的情况下，弹出窗口被浏览器阻止.我希望在没有用户交互的情况下畅通无阻地进行授权对话，并停留在当前页面(我的Facebook粉丝页面)上.有没有办法做到这一点?预先感谢！
This code turns my modal dialog authorization into a popup dialogue authorization and without user interaction the popup gets blocked by the browser. I would like the authorization dialogue come up unblocked without user interaction and stay on the current page (my facebook fanpage). Is there a way to do that? Thanks in advance!
似乎我已经设法以非弹出方式实现授权对话框.授权对话框将在没有用户交互的情况下在同一窗口中打开(而不是模式对话框)，并且不会被浏览器阻止.用户授权该应用后，他将被重定向到他刚来自的Facebook扇页iframe中的同一标签.然后，该应用会识别出用户已连接.如果用户取消授权，他将被重定向到扇页的墙.现在是代码:
Seems I've managed to implement the authorization dialog the non-pop-up-way. The authorization dialog opens without user interaction in the same window (not as a modal dialog) and doesn't get blocked by the browser. After the user has authorized the app he gets redirected to the same tab in the facebook fanpage iframe where he just came from. The app then recognizes that the user is connected. If the user cancels the authorization he gets redirected to the wall of the fanpage. And now the code:
fanPage.php
fanPage.php
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
</head>
<body>
<!-- Initialize Facebook authorization dialogue -->
<?php $app_id = "MY_APP_ID"; ?>
<div id="fb-root"></div>
<script type="text/javascript" src="http://connect.facebook.net/de_DE/all.js"></script>
<script type="text/javascript">
<!--
function init(){
FB.init({
appId : '<?php echo $app_id; ?>',
status : true, // check login status
cookie : true, // enable cookies to allow the server to access the session
xfbml : true, // parse XFBML
channelUrl : 'http://MY_WEBSPACE/facebook-iframe/channel.html', // custom channel
oauth : true // enable OAuth
});
FB.getLoginStatus(function(response) {
if (response.status !== 'connected') {
var api_key = "<?php echo $app_id; ?>";
var canvas_page = escape("http://apps.facebook.com/MY_APP/");
var redirect = 'https://www.facebook.com/login.php?api_key=' + api_key
+ '&extern=1&fbconnect=1&v=1.0'
+ '&next=' + canvas_page + 'fanAuthorized.php'
+ '&cancel_url=' + canvas_page + 'fanUnauthorized.php';
self.parent.location = redirect;
} else {
window.alert("You are connected!");
}
});
}
init();
//-->
</script>
</body>
</html>
fanUnauthorized.php
fanUnauthorized.php
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<script type="text/javascript">
<!--
top.location.href='http://www.facebook.com/pages/MY_FANPAGE_NAME/MY_FANPAGE_ID';
//-->
</script>
<body>
</body>
</html>
fanAuthorized.php
fanAuthorized.php
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
</head>
<script type="text/javascript">
<!--
top.location.href='http://www.facebook.com/pages/MY_PAGE_NAME/MY_PAGE_ID?sk=app_MY_APP_ID;
//-->
</script>
<body>
</body>
</html>
，如果您想知道channel.html的全部内容，这里是:
and if you are wondering what the channel.html is all about - here it is:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en_US">
<head>
<title> </title>
</head>
<body>
<script type="text/javascript" src="http://connect.facebook.net/en_US/all.js"></script>
</body>
</html>
推荐答案
我已经更新了我的问题.到现在为止，我非常确定，无法使用FB.ui，JQueryUI Dialog或类似的东西在模态层中显示授权对话框.
I updated my question already a while ago. By now I am quite certain that there is no way to show the authorization dialog in a modal layer anymore by using FB.ui, JQueryUI Dialog or anything similar.
这篇关于使用OAuth 2.0的Facebook javascript授权模式对话框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
