Facebook服务器端登录,CORS(跨源资源共享)

huangapple go评论90阅读模式
英文:

Facebook server-side login, CORS

问题

我正在实现一个带有FB服务器端登录的网站,简化步骤如下:

  1. 一个简单的按钮触发JS脚本,调用我的后端API https://localhost/fblogin

     function sendFbLoginData() {
         $.get("https://localhost/fblogin", function(data, status) {});
     }
    
  2. 在后端处理程序的 /fblogin 中,用户被重定向到FB登录对话框以请求权限和访问令牌。

     func (ct *LoginController) FbLogin() {
         url := "https://www.facebook.com/dialog/oauth?client_id=xxx&redirect_uri=https://localhost/fboauth2cb&response_type=code&scope=public_profile"
         ct.Redirect(url, 302)
         return
     }
    
  3. 浏览器控制台显示错误消息:

     XMLHttpRequest cannot load https://www.facebook.com/dialog/oauth?client_id=xxx&redirect_ur…e_type=code&scope=public_profile. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'https://localhost' is therefore not allowed access.
    

通过搜索我意识到这是一个CORS问题。由于我无法更改Facebook的行为,我该如何解决这个问题?或者从根本上说,我是否以错误的方式进行了fb服务器端登录?

附注:我的环境是AWS + Beego(使用golang)。

英文:

I'm implementing a web site with FB server-side login as simplified steps below:

  1. A simple button triggers JS script which calls my backend API https://localhost/fblogin

    function sendFbLoginData() {
        $.get("https://localhost/fblogin", function(data, status) {});
    }
    
  2. In the backend handler of /fblogin the user is redirected to FB login dialog for requesting permissions and access token.

    func (ct *LoginController) FbLogin() {
        url := "https://www.facebook.com/dialog/oauth?client_id=xxx&redirect_uri=https://localhost/fboauth2cb&response_type=code&scope=public_profile"
        ct.Redirect(url, 302)
    	return
    }
    
  3. At browser console shows error msg:

    XMLHttpRequest cannot load https://www.facebook.com/dialog/oauth?client_id=xxx&redirect_ur…e_type=code&scope=public_profile. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'https://localhost' is therefore not allowed access.
    

After googling I realize this is a CORS problem. Since I cannot change Facebook's behavior, how do I deal with this problem? or fundamentally I do fb server-side login in a wrong way?

ps. my env is AWS + Beego (golang)

答案1

得分: 2

你不能在JavaScript中请求https://www.facebook.com/dialog/oauth?...并等待其结果;该页面是为了在浏览器中显示,以便Facebook可以要求用户提供其凭据和允许在你的应用程序中使用其帐户。

所以,你应该使用类似以下的代码,而不是:

    $.get("https://localhost/fblogin", function(data, status) {});

你应该使用以下代码:

    location = "https://localhost/fblogin";
英文:

You cannot ask for https://www.facebook.com/dialog/oauth?... from JavaScript and wait for its results; that page is intended to be shown in a browser, so that Facebook can ask the user for its credentials and permission to use his account in your app.

So, instead of:

    $.get("https://localhost/fblogin", function(data, status) {});

you should use something like:

    location = "https://localhost/fblogin";

答案2

得分: 0

在Facebook的应用设置中,在设置选项卡中(类似于https://developers.facebook.com/apps/{app-id}/settings/),你应该将站点URL设置为https://localhost/,这样它才能将其识别为有效的重定向。

英文:

in your app settings in Facebook in settings tab (somewhere like https://developers.facebook.com/apps/{app-id}/settings/)you should set your site URL to https://localhost/ so it can recognize it as a valid redirect

huangapple
  • 本文由 发表于 2014年12月31日 12:42:43
  • 转载请务必保留本文链接:https://go.coder-hub.com/27716212.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定