Я могу сделать это oldschool:
<!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 застревает. Я попробовал следующее:
<!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). Есть способ сделать это? Заранее спасибо!
UPDATE:
Кажется, мне удалось реализовать диалоговое окно авторизации без всплывающих окон. Диалог авторизации открывается без участия пользователя в том же окне (не как модальное диалоговое окно) и не блокируется браузером. После того, как пользователь авторизовал приложение, он перенаправляется на ту же вкладку в фрейм-странице Facebook, где он только что появился. Затем приложение распознает, что пользователь подключен. Если пользователь отменяет авторизацию, он перенаправляется на стену фан-страницы. А теперь код:
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
<!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
<!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 - вот оно:
<!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>