I'm trying to learn how to use OAuth 2.0 on AngularJS to do logins to APIs. Can anyone point me to a good tutorial/some code on how to do this? Thanks!
Learning about logins is not Angular specific and is more about the following factors:
Getting set up with an Authorization Server
Knowing what security libraries to use
Understanding how an SPA can login and get an access token
Understanding the OAuth messages and which fields are important
Calling an API with the token and handling 401 responses
Understanding how APIs validate tokens and use claims
If these aspects interest you, have a look at my visual tutorial, which has a code sample that you can run on your local PC.
My early code samples use plain TypeScript and I update to ReactJS later. You should be able to do the same thing for Angular.
Related
I have been studying OAuth and trying to use OAuth for my web application.
I'm developing web with React and Express hosted by different ports.
Express exports REST APIs and React sends HTTP Requests and receives HTTP Responses using Axios.
I've been searching the example which explains the way to use OAuth, however, most of examples explain the web hosted by one port. I wonder how to use OAuth in this kind of web application. I can't know clearly about the flow until the web gets the AccessToken from Authorization server.
What is the OAuth flow with the web using REST API server on another domain?
There are 2 main parts to this:
Your React app will use Authorization Code Flow (PKCE) to log the user in and get an access token, then make cross domain API calls
Your REST API will need to validate access tokens - either in memory or via introspection
If it helps I have a tutorial and code sample that explains this step by step, including the OAuth messages.
I would start with the above sample, which uses plain Typescript. My blog also has a React sample you can look at, though it is a little more advanced.
There is a lot of examples how to implement OpenID Connect auth. in Node - code grant (+ client password).
There is a lot of examples how to implement OpenID in React (SPA) - code grant with PKCE
Even I know that PKCE it's rather secure, however I feel bad to relegate authentication solely on client side.
Every React SPA has backend (at least it should be hosted somewhere).
I want to have server side in Node (Express) to securely save client password and make all heavy lifting with Identity Server and
React for front-end.
As I already said there is a lot of examples of "Node (Express) with template engines" for authentication.
But I want to use React as "template engine".
So, I am looking for full and correct implementation of it. Meanwhile I cannot find it.
Can anybody help me with it - to find an example?
You need some actual protection in the SPA / browser though, and the 2 common options are:
Plug in OIDC Client Library to do the heavy lifting, so that you don't write much security code yourself. This library runs a number of strict security checks before accepting tokens.
Use a proxying solution that results in your SPA getting a cookie.
For an SPA this tends to be a more of a home grown solution rather than a standards based one
RESOURCES OF MINE FOR OPTION 1
SPA Security Code
Explanatory Notes
FOR OPTION 2
You could use the Open Id Client Node JS Library server side, and follow it's guidance.
I've found 2 solution on the Internet.
The First :
Implement social authentication with React + RESTful API
On the frontend, get the 3rd party app’s login popup to appear.
(Still on the frontend) Grab the authentication token the 3rd party app returns after >agreeing to login.
(Yep, still frontend) Send that token to the backend as part of the body of your >request. (I like to use Blobs, but that’s just me.)
On the backend, verify the token.
If the token is authentic, you will receive the user as part of the verification >response (at least that’s the case with Passport.js, which we’ll be using).
Save the user’s data to your database.
Return a JWT token to the frontend. What you do with that token is out of scope for >this tutorial, but it should probably be used to authenticate each of the logged in >user’s actions.
Very well explained, with github working example social-auth-example
It's only for social authentications, but I think no problem to make something more general or at least to add my OpenID Connect Auth. provider.
The second example:
React Authentication with Twitter, Google, Facebook and Github
This approach uses socket.io. Very interesting.
P.S.
So, I need to figure out what solution is more secure and if there any security breaches.
Not easy task to do. It's so pity, there is no standard flow for my problem. I can find 1000 reasons why it's better to make all heavy lifting on back-end and not to rely on OIDC Client Library. The first reason is my boss :)
Can someone help to find a solve how to write this functionality on AngularJS?
Have java rest API and authorization server on one port and ui on other. Back-end authorization made by oAuth2. Need to make UI authorization. can someone help, please?
Thanks and best regards.
if you are using AngularJs 1, you can use Satellizer. It's an AngularJs library to easily implement a token-based authentication.
Here is the GitHub link -> https://github.com/sahat/satellizer/
It is compatible with OAuth1, OAuth2 and has built-in support for the most popular provider (Google, Facebook, GitHub etc). I am using it for a current project and it perfectly works.
Please provide some details if you need any further help :)
If you are using oauth2 server you can authorize you rest enpoint via oauth token.
Make an http call at the loging form the frontend to necessary rest enpoint and take the relevant token and store it in the local storage.
Then use and http intercepter to attach the authorization header to each and every request.
If you need any codes or example drop me a message.
I'm developing a Restful API using MEAN.js, which will be consumed by an AngularJS Web site and Phonegap Mobile Apps.
I'd like the user to be able to create an account and/or login using Faceboo, Google and Twitter.
I'm trying to use the same sample code that comes with MEAN.js seed application, but with the Node side of it, on port 3000 serving only the API, and the web site running on another server (currently on port 9000).
I','ve already implemented Token authentication using a Passport custom Local strategy, which generates a token, and the Bearer Strategy to autheticate API calls.
But I'm having problems with social login, to link social accounts to existing users.
From the Angular Client I call an api endpoint that redirects the user to the oauth provider (e.g. Twitter). When the user comes back, my serve has no knowledge of the logged user, since I'm not using sessions anymore.
I've tried to return the provider token to the client, but have problems parsing the anguler url. Then I coded another page outside angular that receives the provider token and calls an api endpoint sending the oauth token and the token issued by my api. It worked for Google, but not for Twitter. It seems twitter needs a session.
Anyway, what is the best approach to achieve what I want? How can I make this work?
Since your using Angularjs, take a look at this Angularjs library https://github.com/sahat/satellizer. The library pretty much opens up an oauth popup and checks the popup url for tokens. You can easily replicate the approach or just use this library. It works with a few social media providers like Twitter and its easy to add more.
I was in need of the same thing and so I set out to create my own. It's still in development but should give you a good start. Feel free to create a pull request and help to make it better. Maybe we can eventually merge it into their codebase.
https://github.com/elliottross23/MeanJsSocialLoginTokenAuth
I am having problem implementing Google Plus Web Server authentication
https://developers.google.com/accounts/docs/OAuth2WebServer
I have implemented most of the steps, until the last step, I have no idea how to make a callback with token to my Angular.JS,
I found an article which solves my problem (and it has the same implementation as mine):
http://apicatus-laboratory.rhcloud.com/2014/04/13/handling-oauth-callbacks-in-spa/
But, I have few questions for this article,
is this way legit??? or any other security flaws that I need to consider?
what is the normal way to do it? if I dont want to use Google SDK, cookie and session to send the token back to my Angular, what other possible ways to send token to my Angular app?
how the normal angular app handle the callback?
Why not use this flow that is meant for javascript applications?
https://developers.google.com/+/web/signin/javascript-flow
& https://developers.google.com/accounts/docs/OAuth2UserAgent
You can get an id_token (it is JWT) directly from Google in JS and use that.
What the article is trying to do is to get the Google Oauth response to the server and issue it's own JWT just like any site would issue its own authentication cookies and use those in the application.
Both are possible options depending on the goal of your application.