spring social facebook + api + angularjs (How to call from angular -> spring api -> redirect to facebook login)

Question

It might be just angularjs issue! I am very new to the frontend and angularjs.

I have an angularjs sign in service which calls the url '/signin/facebook/' to sign in, it seems the backend is redirected correctly and calling the facebook oauth but I got the follow error.

[Angularjs sign in service]

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

[error]

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.

so when I click on the link directly from the browser's console from the error, it authenticated fine!

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

Update #01

I don't think, javascript suppose to call the facebook auth, the javascript should call the same host '/signin/facebook/' and then the backend should make the facebook auth call???

Update #02 15/Oct/2014

1) I have updated the code to allow cross origin but still getting the same error. 2) when I re-read the error again, it actually saying "facebook"'s doesnt' have 'Access-Control-Allow-Origin' header is present on the requested resource.

So the question is, how am I supposed to call from angularjs -> java api -> redirect to facebook login page?

[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");

[Headers]

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

Update #03

I am using the Advance REST client to call the '/signin/facebook/', it seems working fine.

Redirect #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

Redirect #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

Redirect #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

Look into CORS, browser won't let script access to another site's URL — aarosil, Oct 08 '14 at 23:12
but its facebook auth? am I doing the right way or everyone has to change that? first, i am not supposed to call the facebook from the script. it should call the same host '/signin/facebook/' and the backend should make the facebook auth call. — Jaxox, Oct 09 '14 at 03:49
True, something else must be wrong then. can't say exactly what from this limited code. Probably you are attempting to load that URL somewhere, instead of redirecting the user to it so they can login to facebook? XMLHttpRequest definitely indicate browser errror not backend — aarosil, Oct 09 '14 at 04:17
is there a bottom line? did u find an answer? i have the same issue :-( seems to be impossible as Spring Social works with Spring MVC with redirections, but Angular is SPA which does not get along with redirects. — OhadR, May 19 '16 at 18:50

score 4 · Answer 1 · answered Sep 11 '15 at 06:08

4

Though am late but I think it can help to an extent.

Spring-social APIs handle all this out of the box. I have created a sample app which uses Spring-social and AngularJS. Its a very basic flow but may help.

spring-social-angularjs-sample

answered Sep 11 '15 at 06:08

Rites

2,242
5
28
44

2

can u drop a few lines (here or in your GitHub) what is the solution? This is very challenging as Spring Social works with Spring MVC with redirections, while Angular is SPA which does not get along with redirects. what is the part of RestConnectController? what it does? and other controllers? and what the front-end (angular) calls to? thanks! – OhadR May 19 '16 at 19:04

score 0 · Answer 2 · edited May 23 '17 at 11:58

0

You need to allow requests to outside of your domain (this is a security mechanism enforced by your browser which blocks by default requests to foreign domain addresses - read).

you probably need to configure a rule to allow your client to access Facebook - needs to be added in your server's configuration (not in angular)

how to fix? - django, node, apache, iis, ...

edited May 23 '17 at 11:58

Community

1
1

answered Oct 08 '14 at 23:14

Jossef Harush Kadouri

32,361
10
130
129

i want to make sure, the facebook auth is handled correctly, can you see my update on the question? – Jaxox Oct 09 '14 at 03:53

score 0 · Answer 3 · answered Oct 16 '14 at 07:49

The issue is with cross-origin requests, not the authentication itself. There is no specific configuration in spring social or security modules to handle facebook or any other provider. Answering one of your doubts - yes, the backend should handle all of the dance, you do not have to do anything from your front-end apart from calling the authentication address.

At first, try to authenticate through your server against facebook API by doing the same call as you do from your angular client but using Advanced REST client for Chrome. See the outcome.

Then, I would start with proper implementation of CORS filters in your case. To test that CORS is working at least to some extent, create a controller to handle a POST request and send one from Angular. Test it first without using the Facebook API. If you cannot send a POST, this means you have to change your CORS filters before you proceed with using facebook API for authentication.

If your simple POST works (or, moreover, if it doesn't) please refer to Tomcat documentation for the catalina implementation of Cors Filter http://tomcat.apache.org/tomcat-7.0-doc/config/filter.html#CORS_Filter . They provide sample configuration of filters which should allow you to get rid of any cors issues (you can add one more header to the cors allowed headers, "Authorization").

If none of these above help you, let me know.

I am using the Advance REST client to call the '/signin/facebook/', it seems working fine. and the http POST work fine too. can you show me how you use the angularjs to call the auth dance? — Jaxox, Oct 16 '14 at 22:00
I do not use angular to call the api. Like I said, it's just a simple get (or should be a single POST in your case). Login with Facebook — Adam Soliński, Oct 18 '14 at 13:32
ok thanks, I thought you are using Angular. the spring social has the demo project for html call. — Jaxox, Oct 20 '14 at 17:23

spring social facebook + api + angularjs (How to call from angular -> spring api -> redirect to facebook login)

Update #01

Update #02 15/Oct/2014

Update #03

3 Answers3

Linked