spring social facebook + api + angularjs（如何从 angular 调用 -> spring api -> 重定向到 facebook 登录）

Posted 2023-02-24

【中文标题】spring social facebook + api + angularjs（如何从 angular 调用 -> spring api -> 重定向到 facebook 登录）

【英文标题】：spring social facebook + api + angularjs (How to call from angular -> spring api -> redirect to facebook login)

【发布时间】：2014-12-03 18:13:02

【问题描述】：

这可能只是 angularjs 的问题！我对前端和 angularjs 很陌生。

我有一个 angularjs 登录服务，它调用 url '/signin/facebook/' 来登录，似乎后端被正确重定向并调用了 facebook oauth，但我收到了以下错误。

[Angularjs登录服务]

app.factory('fbSigninService', function($http)
    return
        fb_signin:function(scope) 
            var $promise=$http.post('/signin/facebook/',JSON.stringify(scope));
        
    
);

[错误]

XMLHttpRequest cannot load https://www.facebook.com/v1.0/dialog/oauth?client_id=xxxxxxxxxxxxxxx&respon…t%3A8080%2Fsignin%2Ffacebook%2F&state=12431991-7555-4ed4-90b9-728e11c721f0. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8080' is therefore not allowed access.

所以当我从错误的浏览器控制台直接点击链接时，它通过了很好的身份验证！

https://www.facebook.com/v1.0/dialog/oauth?client_id=xxxxxxxxxxxxxxx&respon…t%3A8080%2Fsignin%2Ffacebook%2F&state=12431991-7555-4ed4-90b9-728e11c721f0

更新 #01

我不认为，javascript 假设调用 facebook auth，javascript 应该调用同一个主机 '/signin/facebook/' 然后后端应该调用 facebook auth ？？？

2014 年 10 月 15 日更新 #02

1) 我已更新代码以允许跨源，但仍然出现相同的错误。 2）当我再次重新阅读错误时，它实际上是在说“facebook”没有“Access-Control-Allow-Origin”标头出现在请求的资源上。

所以问题是，我应该如何从 angularjs -> java api -> 重定向到 facebook 登录页面调用？

[Java]

response.setHeader("Access-Control-Allow-Origin", "*");
response.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE");
response.setHeader("Access-Control-Max-Age", "3600");
response.setHeader("Access-Control-Allow-Headers", "x-requested-with");

[标题]

Request URL:http://localhost:8080/index.html
Request Method:GET
Status Code:200 OK
Request Headersview source
Accept:text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8
Accept-Encoding:gzip,deflate,sdch
Accept-Language:en-US,en;q=0.8
Cache-Control:max-age=0
Connection:keep-alive
Cookie:JSESSIONID=3BA4D9DBF38686F2AA527BF408D28EC1
Host:localhost:8080
User-Agent:Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Ubuntu Chromium/31.0.1650.63 Chrome/31.0.1650.63 Safari/537.36
Response Headersview source
Access-Control-Allow-Headers:x-requested-with
Access-Control-Allow-Methods:POST, GET, OPTIONS, DELETE
Access-Control-Allow-Origin:*
Access-Control-Max-Age:3600
Cache-Control:no-cache, no-store, max-age=0, must-revalidate
Content-Length:1839
Content-Type:text/html
Date:Wed, 15 Oct 2014 23:15:01 GMT
Expires:0
Last-Modified:Wed, 08 Oct 2014 22:10:40 GMT
Pragma:no-cache
Server:Apache-Coyote/1.1
X-Application-Context:application
X-Content-Type-Options:nosniff
X-Frame-Options:DENY
X-XSS-Protection:1; mode=block

更新 #03

我正在使用 Advance REST 客户端调用“/signin/facebook/”，它似乎工作正常。

重定向 #1

To:https://www.facebook.com/v1.0/dialog/oauth?client_id=273118692865062&response_type=code&redirect_uri=http%3A%2F%2Flocalhost%3A8080%2Fconnect%2Ffacebook&state=00d8c7ee-e178-4d2b-bc86-500505d5eac2 with status: 302 Show explanation HTTP/1.1 302 Found
Redirection information has not been cached.
Server: Apache-Coyote/1.1 
Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: POST, GET, OPTIONS, DELETE
Access-Control-Max-Age: 3600
Access-Control-Allow-Headers: x-requested-with
X-Content-Type-Options: nosniff
X-XSS-Protection: 1; mode=block
Cache-Control: no-cache, no-store, max-age=0, must-revalidate 
Pragma: no-cache 
Expires: 0 
X-Frame-Options: DENY
X-Application-Context: application
Location: https://www.facebook.com/v1.0/dialog/oauth?client_id=273118692865062&response_type=code&redirect_uri=http%3A%2F%2Flocalhost%3A8080%2Fconnect%2Ffacebook&state=00d8c7ee-e178-4d2b-bc86-500505d5eac2 
Content-Language: en-US 
Content-Length: 0 
Date: Thu, 16 Oct 2014 21:50:21 GMT 

重定向 #2

To:http://localhost:8080/connect/facebook?code=AQCq9wnl_LeecAuWkR0D2252YZICiuWiaFeSUqISaUzQ7vfHHWI1sMsqSWO5kpgUQG0URi5NI52UX3zBpKTwj7rnnzQKOnxjUbyxwN-Z3a3rt1G3P84ONaCrsUO-LuM0_bpvROzWzno0pK9_lf-KI5JhqBvWWRGuWGEKz1FKl816rbrEP_nmh97BBM5oW3IYbvjuhKSghINp2ilADgLabMFTC76zN41HRjWE7X1bXGLaXY3EtQG61R5FGo7QV-W9iWtH3PCZw4gP_DByiDdUrObo1OsECWSkdh6q7a-EsuJ_QZe5zqQJbhEf2GHal5AC9YU&state=00d8c7ee-e178-4d2b-bc86-500505d5eac2#_=_ with status: 302 Show explanation HTTP/1.1 302 forced.302
Redirection information has not been cached.
status: 302 forced.302
version: HTTP/1.1
cache-control: private, no-cache, no-store, must-revalidate
content-length: 0
content-security-policy: default-src *;script-src https://*.facebook.com http://*.facebook.com https://*.fbcdn.net http://*.fbcdn.net *.facebook.net *.google-analytics.com *.virtualearth.net *.google.com 127.0.0.1:* *.spotilocal.com:* 'unsafe-inline' 'unsafe-eval' https://*.akamaihd.net http://*.akamaihd.net *.atlassolutions.com chrome-extension://lifbcibllhkdhoafpjfnlhfpfgnpldfl;style-src * 'unsafe-inline';connect-src https://*.facebook.com http://*.facebook.com https://*.fbcdn.net http://*.fbcdn.net *.facebook.net *.spotilocal.com:* https://*.akamaihd.net wss://*.facebook.com:* ws://*.facebook.com:* http://*.akamaihd.net https://fb.scanandcleanlocal.com:* *.atlassolutions.com http://attachment.fbsbx.com https://attachment.fbsbx.com;
content-type: text/html; charset=utf-8
date: Thu, 16 Oct 2014 21:50:21 GMT
expires: Sat, 01 Jan 2000 00:00:00 GMT
facebook-api-version: v1.0
location: http://localhost:8080/connect/facebook?code=AQCq9wnl_LeecAuWkR0D2252YZICiuWiaFeSUqISaUzQ7vfHHWI1sMsqSWO5kpgUQG0URi5NI52UX3zBpKTwj7rnnzQKOnxjUbyxwN-Z3a3rt1G3P84ONaCrsUO-LuM0_bpvROzWzno0pK9_lf-KI5JhqBvWWRGuWGEKz1FKl816rbrEP_nmh97BBM5oW3IYbvjuhKSghINp2ilADgLabMFTC76zN41HRjWE7X1bXGLaXY3EtQG61R5FGo7QV-W9iWtH3PCZw4gP_DByiDdUrObo1OsECWSkdh6q7a-EsuJ_QZe5zqQJbhEf2GHal5AC9YU&state=00d8c7ee-e178-4d2b-bc86-500505d5eac2#_=_
pragma: no-cache
strict-transport-security: max-age=15552000; preload
x-content-type-options: nosniff
x-fb-debug: ESLliRqmaFv9DBXraKZN4X3FRH36D8lnMegz7e9Udqv5aECkJwU7DiWbQ+g+d9X4G+30cP27b3nCs9BsDIlM6w==
x-frame-options: DENY
x-xss-protection: 0

重定向#3

To:http://localhost:8080/connect/facebook#_=_ with status: 302 Show explanation HTTP/1.1 302 Found
Redirection information has not been cached.
Server: Apache-Coyote/1.1 
Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: POST, GET, OPTIONS, DELETE
Access-Control-Max-Age: 3600
Access-Control-Allow-Headers: x-requested-with
X-Content-Type-Options: nosniff
X-XSS-Protection: 1; mode=block
Cache-Control: no-cache, no-store, max-age=0, must-revalidate 
Pragma: no-cache 
Expires: 0 
X-Frame-Options: DENY
X-Application-Context: application
Location: http://localhost:8080/connect/facebook 
Content-Language: en-US 
Content-Length: 0 
Date: Thu, 16 Oct 2014 21:50:21 GMT 

【问题讨论】：

查看 CORS，浏览器不允许脚本访问其他站点的 URL

但它的 facebook 身份验证？我做对了还是每个人都必须改变它？首先，我不应该从脚本中调用 facebook。它应该调用同一个主机'/signin/facebook/'，并且后端应该进行 facebook auth 调用。

是的，那肯定有其他问题。不能从这个有限的代码中准确地说出什么。可能您正试图在某处加载该 URL，而不是将用户重定向到它以便他们可以登录到 Facebook？ XMLHttpRequest 肯定表示浏览器错误不是后端

有底线吗？你找到答案了吗？我有同样的问题 :-( 似乎是不可能的，因为 Spring Social 与带有重定向的 Spring MVC 一起工作，但 Angular 是 SPA，它不能与重定向相处。

【参考方案1】：

虽然迟到了，但我认为它可以在一定程度上有所帮助。

Spring-social API 开箱即用地处理所有这些。我创建了一个使用 Spring-social 和 AngularJS 的示例应用程序。这是一个非常基本的流程，但可能会有所帮助。

spring-social-angularjs-sample

【讨论】：

你可以删除几行（这里或在你的 GitHub 中）什么是解决方案？这是非常具有挑战性的，因为 Spring Social 与带有重定向的 Spring MVC 一起使用，而 Angular 是与重定向不兼容的 SPA。 RestConnectController 的部分是什么？它能做什么？和其他控制器？前端（角度）调用什么？谢谢！

【参考方案2】：

问题在于跨域请求，而不是身份验证本身。 spring 社交或安全模块中没有特定的配置来处理 facebook 或任何其他提供程序。回答您的一个疑问 - 是的，后端应该处理所有的舞蹈，除了调用身份验证地址之外，您无需从前端做任何事情。

首先，尝试通过您的服务器对 facebook API 进行身份验证，方法是执行与您从 Angular 客户端执行相同的调用，但使用适用于 Chrome 的高级 REST 客户端。看看结果。

然后，我将从在您的情况下正确实施 CORS 过滤器开始。为了测试 CORS 至少在某种程度上可以工作，创建一个控制器来处理一个 POST 请求并从 Angular 发送一个。在不使用 Facebook API 的情况下先对其进行测试。如果您无法发送 POST，这意味着您必须在继续使用 facebook API 进行身份验证之前更改您的 CORS 过滤器。

如果您的简单 POST 有效（或者，如果无效），请参阅 Tomcat 文档以了解 Cors Filter http://tomcat.apache.org/tomcat-7.0-doc/config/filter.html#CORS_Filter 的 catalina 实现。它们提供了过滤器的示例配置，可以让您摆脱任何 cors 问题（您可以在 cors 允许的标头中添加一个标头，“授权”）。

如果以上这些都不能帮助你，请告诉我。

【讨论】：

我正在使用 Advance REST 客户端调用“/signin/facebook/”，它似乎工作正常。 http POST 也可以正常工作。你能告诉我你是如何使用 angularjs 来调用 auth dance 的吗？

我不使用angular来调用api。就像我说的那样，这只是一个简单的获取（或者在您的情况下应该是一个 POST）。 somehost.com:1000/myApp/auth/facebook"><img class="icon" src="images/fb.png"> 用 Facebook 登录跨度>

好的，谢谢，我以为你在使用 Angular。 spring social 有 html 调用的演示项目。

【参考方案3】：

您需要允许对域外的请求（这是您的浏览器强制执行的一种安全机制，默认情况下会阻止对外部域地址的请求 - read）。

您可能需要配置一个规则以允许您的客户端访问 Facebook - 需要在您的服务器配置中添加（而不是 Angular）

如何解决？ - django, node, apache, iis, ...

【讨论】：

我想确认一下，facebook auth 得到了正确处理，你能看到我对这个问题的更新吗？