Spring social facebook + api + angularjs (How to call from angular & # 8594; spring api & # 8594; redirect to facebook login)

Question

This may be a problem with the angular! I am very new to the interface and angular.

I have an angularjs sign in a service that calls the URL / signin / facebook / 'to log in, it seems that the backend is redirected correctly and calls the oauth facebook, but I got the following error.

[Angularjs mark 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 the link directly from the browser console from this error, it authenticates perfectly!

 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 would suggest to call facebook auth, javascript should call the same host '/ signin / facebook /' and then the backend should make a facebook authentication call ???

Update # 02 15 / Oct / 2014

1) I updated the code to allow cross origin, but still getting the same error. 2) when I re-read the error again, it actually says that “facebook” does not have the “Access-Control-Allow-Origin” header on the requested resource.

So the question is, how should I 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 '/ signin / facebook /', it seems to be working fine.

Redirection # 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 Z3a3rt1G3P84ONaCrsUO-LuM0_bpvROzWzno0pK9_lf-KI5JhqBvWWRGuWGEKz1FKl816rbrEP_nmh97BBM5oW3IYbvjuhKSghINp2ilADgLabMFTC76zN41HRjWE7X1bXGLaXY3EtQG61R5FGo7QV-W9iWtH3PCZw4gP_DByiDdUrObo1OsECWSkdh6q7a-EsuJ_QZe5zqQJbhEf2GHal5AC9YU & state = 00d8c7ee-e178-4d2b-bc86-500505d5eac2 # _ = _ with status:? 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 Z3a3rt1G3P84ONaCrsUO-LuM0_bpvROzWzno0pK9_lf-KI5JhqBvWWRGuWGEKz1FKl816rbrEP_nmh97BBM5oW3IYbvjuhKSghINp2ilADgLabMFTC76zN41HRjWE7X1bXGLaXY3EtQG61R5FGo7QV-W9iWtH3PCZw4gP_DByiDdUrObo1OsECWSkdh6q7a-EsuJ_QZe5zqQJbhEf2GHal5AC9YU & state = 00d8c7ee-e178-4d2b-bc86-500505d5eac2 # _ = _? 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 

Answer 1

Although late, but I think it can help to some extent.

Spring Social APIs handle all of this out of the box. I created an example application that uses Spring -social and AngularJS. This is a very simple thread, but it can help.

spring-social-angularjs-sample

Answer 2

You need to allow requests outside your domain (this is the security mechanism that your browser uses that blocks requests by default for external domain addresses - read ).

you probably need to configure a rule that allows the client to access Facebook - you need to add to your server configuration (not in angular)

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

Answer 3

The problem is with cross-origin requests, not authentication itself. In spring social or security modules, there is no specific configuration for handling facebook or any other provider. Answering one of your doubts - yes, the backend should process the whole dance, you do not need to do anything from your interface, except to call the authentication address.

First, try authenticating through your server using the facebook API, making the same call as your angular client, but using the Advanced REST client for Chrome. See the result.

Then I will start by correctly implementing CORS filters in your case. To verify that CORS is working, at least to some extent, create a controller to handle the POST request and send it from Angular. Check it out first without using the Facebook API. If you cannot send POST, it means that you need to change the CORS filters before using the facebook API for authentication.

If your simple POST works (or, moreover, if it is not), please refer to the Tomcat documentation for implementing the Cors Filter directories http://tomcat.apache.org/tomcat-7.0-doc/config/filter.html# CORS_Filter . They provide a custom filter configuration that should allow you to get rid of any feed problems (you can add another heading to the headings allowed by the feed, "Authorization").

If none of the above helps you, let me know.