Javascript Facebook 登录和 iframe 重定向
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3457620/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Facebook Login and Iframe redirection
提问by Hyman
I am building an Facebook IFrame App. I am using the below javascript code to request user to login and allow permissions for the application, after which they are supposed to be redirected to the iframe app. The code works correctly. But, I have two issues with it.
我正在构建 Facebook IFrame 应用程序。我使用下面的 javascript 代码请求用户登录并允许应用程序的权限，之后他们应该被重定向到 iframe 应用程序。代码工作正常。但是，我有两个问题。
a. as soon as the app loads in IFrame, it redirects to a page (http://www.facebook.com/connect/uiserver.php?app_id=......) and displays a large facebook icon. When I click this icon it redirects to facebook login page. I want my app to redirect to the login page directly instead of showing the inbetween facebook icon page.
一种。一旦应用程序在 IFrame 中加载，它就会重定向到一个页面 ( http://www.facebook.com/connect/uiserver.php?app_id=......) 并显示一个大的 Facebook 图标。当我单击此图标时，它会重定向到 Facebook 登录页面。我希望我的应用程序直接重定向到登录页面，而不是显示中间的 facebook 图标页面。
b. When the user clicks 'Allow' button for the requested permission in facebook, the page redirects to my main site (http://www.mysite.com) instead of the iframe application(http://apps.facebook.com/myapp).
湾 当用户在 facebook 中单击“允许”按钮以获得请求的权限时，页面重定向到我的主站点 ( http://www.mysite.com) 而不是 iframe 应用程序 ( http://apps.facebook.com/myapp）。
I have pasted my javascript below, this works with above quirks.
我在下面粘贴了我的 javascript，这适用于上述怪癖。
var api_key = 'xxxxxxxxxxxxxxx';
var channel_path = 'xd_receiver.htm';
FB_RequireFeatures(["Api"], function () {
FB.Facebook.init(api_key, channel_path);
var api = FB.Facebook.apiClient;
// require user to login
api.requireLogin(function (exception) {
FB.Connect.showPermissionDialog("publish_stream");
});
});
Help much appreciated.
非常感谢帮助。
回答by beagleknight
I have remembered something!
我想起了一件事！
You must use target="_top"in all your links and redirections in a iframe application!
您必须target="_top"在 iframe 应用程序中的所有链接和重定向中使用！
Hope I help you.
希望我能帮到你。
回答by Hyman
Thanks for your answers. I used the solution posted by McKAMEY(Facebook API: FB.Connect.requireSession issues) with few changes, and it works as intended, without showing the intermediate facebook icon page, and also it redirects after authentication to the iframe app correctly.
感谢您的回答。我使用了 McKAMEY（Facebook API：FB.Connect.requireSession 问题）发布的解决方案，几乎没有更改，它按预期工作，没有显示中间 facebook 图标页面，并且在身份验证后正确重定向到 iframe 应用程序。
I have posted below the working solution in case someone needs it.
我已经在工作解决方案下面发布了以防有人需要它。
var api_key = 'xxxxxxxxxxxx';
var channel_path = './xd_receiver.htm';
var canvas_url = "http://apps.facebook.com/myappxxxx/"// ensure your canvasurl has a '/' at the end!
function Initialize() {
FB_RequireFeatures(["Api"], function () {
FB.Facebook.init(api_key, channel_path);
FB.ensureInit(function () {
FB.Connect.ifUserConnected(
function () {
var uid = FB.Connect.get_loggedInUser();
if (!uid) {
authRedirect();
return;
}
},
authRedirect);
});
});
}
function authRedirect() {
//This is the Sample URL Structure for redirecting to facebook
//http://www.facebook.com/connect/uiserver.php?
//app_id=XXXXXXXXXXXXX&
//next=xxxxxxxxxx_success_url_here_XXXXXXX&
//display=page&
//perms=XXXXXX_comma_seperated_permissions_list_hereXXXXXX&
//fbconnect=1&
//method=permissions.request
window.top.location.href = "http://www.facebook.com/connect/uiserver.php?app_id=" + encodeURIComponent(api_key) + "&next=" + encodeURIComponent(canvas_url) + "&display=page&perms=publish_stream&fbconnect=1&method=permissions.request";
}
Initialize();
回答by kzap
Note on redirecting within a frame to the Facebook login page. You have to use javascript to redirect the entire page since the login page passed the X-Frame-Options:DENY header and modern browsers will prevent you from sending the user to the URL if that header is present. Solution is to use javascript::window.top.location = ''; to redirect the whole page
关于在框架内重定向到 Facebook 登录页面的注意事项。您必须使用 javascript 来重定向整个页面，因为登录页面通过了 X-Frame-Options:DENY 标头，如果该标头存在，现代浏览器将阻止您将用户发送到 URL。解决方案是使用 javascript::window.top.location = ''; 重定向整个页面
回答by zcourts
I'm not sure on the middle page between redirection but what does your apps canvas and connect url point to? The redirection after login should go to that page unless you have this overridden somewhere in your code. Change the urls in the settings on fb to apps.facebook.com/myapp if that's not what its set to.
我不确定重定向之间的中间页面，但是您的应用程序画布和连接 url 指向什么？登录后的重定向应该转到该页面，除非您在代码中的某处覆盖了它。如果这不是它的设置，请将 fb 上设置中的 url 更改为 apps.facebook.com/myapp。
回答by beagleknight
You may use the new Facebook Graph API (http://developers.facebook.com/docs/api) to handle authentication. First, you must check if you have the access_token:
您可以使用新的 Facebook Graph API ( http://developers.facebook.com/docs/api) 来处理身份验证。首先，您必须检查您是否拥有access_token：
$access_token = $_REQUEST['access_token'];
if($access_token != NULL) {
...
}
else {
// the following javascript
}
And the javascript is:
和 javascript 是：
<script type="text/javascript">
top.location.href = '<?= "https://graph.facebook.com/oauth/authorize?client_id=".$appid."&redirect_uri=".$appurl."oauth_redirect" ?>'
</script>
You must have a file oauth_redirect.phplike this:
你必须有一个oauth_redirect.php这样的文件：
<?php
$code=$_REQUEST['code'];
$url = "http://graph.facebook.com/oauth/access_token?client_id=".$appid."&redirect_uri=".$appurl."oauth_redirect&client_secret=".$appsecret."&code=$code";
$curl = curl_init();
// SET URL FOR THE POST FORM LOGIN
curl_setopt($curl, CURLOPT_URL,$url);
curl_setopt($curl, CUPROPT_SSL_VERIFYPEER, true);
curl_setopt($curl, CUPROPT_SSL_VERIFYHOST, true);
curl_setopt($curl, CURLOPT_FOLLOWLOCATION ,1);
curl_setopt($curl, CURLOPT_HEADER ,0);
curl_setopt($curl, CURLOPT_RETURNTRANSFER ,1);
// EXECUTE 1st REQUEST (LOGIN)
$response = curl_exec ($curl);
?>
<script type="text/javascript">
top.location.href = '<?= $appurl."?".$response ?>';
</script>
Finally, you can return to your index page (the $appurlvariable) and test if the user has permission testing access_tokenpresence.
最后，您可以返回到您的索引页面（$appurl变量）并测试用户是否具有权限测试access_token存在。
Hope it helps!
希望能帮助到你！
