I am trying to do Facebook authentication in same window of my web application's login page.
I am using following code when user clicked login button to go to authentication page.
function loginUsingOAUTH()
{
top.location = 'https://graph.facebook.com/oauth/authorize?client_id=839846246064537&scope=email&redirect_uri=http://www.olcayertas.com/testqa/result.html';
}
1) After authentication Facebook redirects me to my redirect url and returns a parameter "code".
At this point I want to access Facebook user information but I don't know how to do that.
What is this "code" parameter for?
2) Is there any other way to access user information?
3) Do you have any other advice facebook authentication with same window login?
Thank you in advance for your help
When you get the code you should make a server side request to get an access token and than pass the access token to user. It is explained in Facebook Developer page:
Exchanging code for an access token
To get an access token, make an HTTP GET request to the following
OAuth endpoint:
GET https://graph.facebook.com/v2.3/oauth/access_token?
client_id={app-id}
&redirect_uri={redirect-uri}
&client_secret={app-secret}
&code={code-parameter}
This endpoint has some required parameters:
client_id. Your app's IDs
redirect_uri. This argument is required and must be the same as the original request_uri that you used when starting the OAuth login
process.
client_secret. Your unique app secret, shown on the App Dashboard. This app secret should never be included in client-side code or in
binaries that could be decompiled. It is extremely important that it
remains completely secret as it is the core of the security of your
app and all the people using it.
code. The parameter received from the Login Dialog redirect above.
Response
The response you will receive from this endpoint will be returned in
JSON format and, if successful, is
{“access_token”: <access-token>, “token_type”:<type>, “expires_in”:<seconds-til-expiration>}
If it is not successful, you will receive an explanatory error
message.
Related
App description:
User can sign up with credentials and get authorization and refresh token from a server, they're saved respectively in session and local storage. Axios is configured to intercept 401 status response and then make a new request to separete endpoint with refresh token as a payload. Server verify refresh token and respond with new authorization token that is set as a default header to every axios request. User can also login with social accounts (fb, g+, github) which are implemented using passport lib.
Task description:
As a logged user I can connect my current account with my social account. This case is included in passport documentation.
Problem description:
Requests to route specified in documentation:
app.get('/connect/twitter',
passport.authorize('twitter-authz', { failureRedirect: '/account' })
);
can be done only by redirection with <a href='/connect/twitter'>,
XMLHttpRequest is not possible due to CORS error (eg. example). And this is a problem, I can't send auth token using simple redirection so server can't decode token and get local user info and so can't add updated user data (with social account data) to database..
Source code
Http address
PS. Sorry for bad english, I will appreciate any help!
note : i have only 1 account gmail / channel
im creating page index.html for upload video to youtube with this ref : https://developers.google.com/youtube/v3/code_samples/javascript .
and running well ..
and the problem is : before uploading video , i must login google for auth .. which is the account is based from my browser ..
question : i need auto login / set email + password. (no prompt from google , because i wanna setting this for upload into 1 same channel / 1 account gmail) for index.html.
so, if PC-A , PC-B or PC-C , access http://example.com/index.html .. they can upload video without login with their accounts.
Thanks.
For offline access, you can setup a backend server accessible from PC-A, PC-B & PC-C which will store a refresh_token with the scope https://www.googleapis.com/auth/youtube, check this documentation about OAuth2.0 for Web server. You can test with Oauth 2.0 Playground.
This refresh token will be used to request a new access token. With this access token, you can request Google API such as upload video depending on the scope you specified (in this case https://www.googleapis.com/auth/youtube)
Then, you will have 2 options :
the client request an access token, the server generates one, and send the access token back to the client browser so that it performs request in client side
the client upload video to your server, the server generates an access token (or reuse one) and make the Google API request from server side
Note that the access token periodically expires, when an access token becomes invalid (eg call return status code 401), you have to refresh it, see this
Currently I'm facing the following problem:
I'm building an application with a standalone login view.
Let's assume they both run on different domains. My login view communicates with a REST service on the server that issues a JWT token.
With this issued token the user should now be able to view (be forwarded to) the application. But this application - as mentioned - runs on another domain (or subdomain, maybe).
In my mind I tried the following:
Token is issued by the server. A hash is stored in a database and the hash is issued to the user. The hash is transferred to the application via URL and the applications checks the hash.
Token is issued by the server. The token is transferred to the user. When the user now opens the application (or is forwarded to...) the token should be transferred there, too. I have no clue how to do...
Both are not ideal ways, i know. But I really don't know how I can achieve that...
I hope anyone is able to help me with my thinkings?
If anything is unclear, just comment.
Thanks in advance!
Facebook, Twitter, Google, etc. offer OAuth by redirecting (302 Redirect Request). Basically your app starts if user has a valid token everything is fine, else it will open the Login-Page from the Identity Provider (e.g. Google) and return the token, if the login was successful.
This graphic shows the general steps:
https://www.soapui.org/soapui/media/images/stories/oauth2/oauth2flow.png
Hope this helps.
Lets assume you have two services in 2 different domains. One is your identity provider which generates tokens and holds the token <--> user assignment (we call it: idp.my.company). The other one is any application that does stuff but needs to login via idp.my.company (we call it app.my.company).
You have two scenarios:
1. Login without having a token aquired before.
2. Login with token.
Request GET: app.my.company
Response 302: Moved to: idp.my.company
Take a look which redirection type follows your needs (307 maybe)
https://en.wikipedia.org/wiki/URL_redirection
You need to add an information where to redirect back. In this case app.my.company.
[This happens automatically because of the Redirect] GET: idp.my.company/login.html.
Response 200 OK: idp.my.company/login.html
The User will now see the Login-Page of your IDP-Service and perform a Login.
Request POST: idp.my.company/login.html (or whatever)
The User posts his credentials to aquire a token
Response 302 Redirect: If login is successful, return token and now redirect to the origin site (app.my.company) which you provided earlier.
Request GET: app.my.company/afterlogin.html
The header contains a valid token
Response 200 Ok: Now the app.my.company service needs to check if the token is valid and if true return 200 Ok otherwise redirect again to IDP (start over at step 2).
This should be it. There could be errors but you should have a consistent picture of the process and get a grasp on how to implement it. Those steps cover scenario 1 and 2.
I am using the OAuth server flow for Google.
It starts with the user clicking a link that runs javascript to open a popup with the following request in the URI which is all working great:
var endpoint = "https://accounts.google.com/o/oauth2/auth";
endpoint = endpoint + "?scope="+encodeURIComponent(googlecalendar.SCOPES);
endpoint = endpoint + "&redirect_uri="+encodeURIComponent("https://myserver/google/");
endpoint = endpoint + "&response_type=code";
endpoint = endpoint + "&access_type=offline";
endpoint = endpoint + "&approval_prompt=force";
endpoint = endpoint + "&client_id="+encodeURIComponent(googlecalendar.CLIENT_ID);
endpoint = endpoint + "&state="+encodeURIComponent(googlecalendar.USER_ID);
On the server side, I get the state which contains the user_id for my DB and the authorisation code.
Now I want to exchange the authorisation code for access token (and renew token). This will be a HTTP request with a redirect URI, no state parameter is included.
The problem is that when I get those, I will need to store them against a user in my DB, but I don't have any way to check which user the callback is for.
The best I was able to come up with is using the token to query the google user's identity it belongs to but this still won't help me to find the user in the DB.
Can anyone help me with this flow? There must be some way to do. I don't want to use client libraries because later when I need to create watchers the PHP client library does not include this for the calendar API.
Short Answer
Despite the presence of a redirect parameter, the access token will generate a standard 200 response, not a 301 redirect. Depending on how you issue and handle the request/response, you can preserve your state.
More Detailed Answer
According to section 4.1.4 of the OAuth 2.0 spec document (RFC 6749), the response to an Access Token Request should be an "HTTP/1.1 200 OK".
In other words, the server will not perform a redirect, meaning you can issue a request and process the response in the same scope (either in the client or server, whatever your situation), so your database user ID need only be in local memory.
This is different from the Authorization Request, which is supposed to result in an "HTTP/1.1 302 Found" (redirect). See section 4.1.2.
So why is the redirect_uri parameter required?
According to section 4.1.3, the server must:
ensure that the "redirect_uri" parameter is present if the "redirect_uri" parameter was included in the initial authorization request as described in Section 4.1.1, and if included ensure that their values are identical.
In other words, the redirect_uri acts as a sort of secret or password which the server must use to verify the access token request. If the client fails to provide a redirect_uri parameter, or the parameter value is different from the original request, then the server must reject the access token request.
We are working on application, where my friend is working on server side (spring) and he created REST api, and I'm creating client with angularJS. REST and client webpage are on different domains, so I had to faced Same-origin policy - I handled this with php proxy and everything works fine. Until yesterday - now we had authentication service (spring-security) and I have no idea how to login into REST. I can login when I simple write service adress into browser, but I cant get response I need when calling from JS.
When I'm sending simple get request, in response I'm getting HTML code with login page. I putted <form> to login on my page (taken from response, so it's exacly the same as on '/login' page, I just added full action adress), but after send data I'm getting error page with this message:
HTTP Status 403 - Invalid CSRF Token 'blah-blah-many-numbers-and-letters' was found on the request parameter '_csrf' or header 'X-CSRF-TOKEN'.
I'm not changing this CSRF token, so perhaps I don't know the proper way to handle this (now it's sending as paramaeter in POST from form - _csrf is hidden input with value attribute given by server).
So after this too long introduction, my question is: how to login into REST service (through spring-security) from angularJS controller? What is wrong in my way of doing this? (something has to be wrong, because it's not working ;)).
(Sorry for my english mistakes, I'm affraid there are many of them)
Angular have built-in support for CSRF but it use another name for CSRF Token.
If you already have CSRF Token repository in spring webservice, what have you to do is to change CSRF Token header name to XSRF-TOKEN.
You will find whole instruction how to solve your problem on https://spring.io/blog/2015/01/12/the-login-page-angular-js-and-spring-security-part-ii.
You can use Stateless authentication using server signed token i.e.JSON web token(JWT) for securing REST API's and using angularjs for client side implementation.
Please find the below link as reference for implementing the same:
http://blog.jdriven.com/2014/10/stateless-spring-security-part-1-stateless-csrf-protection/
Github:https://github.com/Robbert1/boot-stateless-auth
You need to have custom implementation of class AbstractAuthenticationProcessingFilter to avoid html response when you login into the Rest API.The blog and github reference will guide you in implementating the same.