I have a small angular js application where I am using angular js, typescript & html 5 for my UI. I have currently wired up the UI to get data via Restful WCF service (c#). All here works fine. Now I am looking to implement security/authentication in my application where I would like to have login/logout/register page. I have read about JWT and looks like a good one. Is this the standard nowdays of using JWT or if there are others options available.
If JWT is a good option for my site (pubic website), could anyone provide inputs where I can start with. I could not find much helpful basic posts that would guide how to create a simple form in angular and hit wcf/web api sercvice.
Any inputs would be appreciated.
I have had a good experience with the open-source IdentityServer3 project. They support JWT authentication from client to Web API. I myself have used it both as an authentication server providing tokens and as a middle-ware in the Web API for authorizing different controllers.
Here's a link to their documentation.
Related
I have developed an application in which client side is AngularJS and server side is Code Igniter based API.
I want to implement JSON Web Token (JWT) in my application for security. I have tried to learn that but can't understood in proper manner.
I need help in How to use it & what are the fundamentals for that ?
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
Any help, advice and experience is welcome.
Im currently having a separate AngularJS SPA on a Apache HTTP Server and a Spring Backend on a Tomcat 7 Servlet. The backend serves as a Rest API for the SPA.
Some rest resources will require a user to have a certain role.
I've been searching the internet for days on what and how to implement the best security strategy:
Basic Auth
Digest
oAuth
Stateless, Cookies? Sessions? Tokens? CSRF?
How would you go about communicating Spring Security in Json or XML to your SPA to show the user an authentication page or an "your successfully authenticated page"?
Any help is appreciated.
I finally figured out how to make the SPA authenticate with my Rest Backend.
In spring security I created a
Custom SimpleUrlAuthenticationFailureHandler which returns a HTTP-Unauthorizated if a login attempt fails.
Custom SavedrequestAwareAuthenticationSuccessHandler which returns Http-Oke if a login attempt is successful.
Custom AuthenticationEntryPoint which returns Http-Unauthorizated instead of a redirect.
Custom LogoutSuccessHandler which returns Http-OK.
I disabled CSRF.
If anyone needs more help feel free to let me know or message me.
I highly recommend watching this Spring's introductory video. It explains usage of Spring Security from ground up using Java configuration. Apart basic configuration, authentication and CLRF token usage also dive into field security. Uses templating on server with Thymeleaf though, but can provide a lot of wisdom for REST based app also.
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.
I would like to create a new AngularJS, Web API Single page application. Does anyone have any examples that show how I can set up a user login screen that connects to a WEB API controller for a simple login (no need for google/facebook login etc) that uses ASP.NET Identity and without the need for user registration.
Also how can I handle showing a new view once the login has been completed. What I would like is to have a solution that does not show routing in the browser URL. So for example I would like to be able to switch from the login view and a couple of other different views without the url changing from www.abc.com.
In other words I would like to avoid showing www.abc.com/login, www.abc.com/screen1, www.abc.com/screen2
Any advice would be much appreciated.
So, instead of trying to find an example, I created one instead (link at the bottom). To explain how the functionality works, I want to go over a few things:
The new ASP.NET Identity system provides an OAuth 2.0 Bearer token implementation which can be used with clients that consume a Web API resource over HTTP. Since the authentication is not stored in a session cookie, the server is not responsible for maintaining the authentication state. The side-effect is that the consumer has to manage authenticating the server and managing the returned token. This is the system that Microsoft uses in the SPA template that it provides with VS 2013.
AngularJS makes no assumptions about authentication, so it's up to you how to authenticate.
AngularJS provides the $http service for querying remote HTTP-based services as well as $resource which is built on top of $http. Using Authorization headers with the Bearer token implementation above, you can combine both to provide authenticated access to server resources over HTTP. AngularJS allows you to set a 'default' Authorization header which it will use in every subsequent HTTP transaction.
With that in mind, the way I accomplished this is by creating a User service that handles all of the authentication details, including setting the HTTP Authorization header, between the Web API server and the SPA. Based on the authentication status of the user, you can hide certain UI elements in order to prevent navigation. However, if you also define the state as requiring authentication as a property of the resolve object for the state, a watcher set on the $stateChangeError event will capture the error and redirect the user to the login form. Upon proper authentication, it will then redirect the user to the state they were trying to navigate to.
In order to prevent authentication from being lost between browser sessions (since the client is responsible for maintaining the authentication token, and that token is maintained in memory), I also added the ability for the user to persist the authentication to a cookie. All of this is transparent to the user. For them, it is practically identical to traditional form-and-session based authentication.
I'm not sure why you want to prevent the user from seeing the routes, but I have coded it as such. I am in debt to Sedushi's Plunker example of how to use AngularUI Router to navigate in a stateful manner without using URLs. Still, I'm not sure I can personally recommend this for any application I would write on my own.
The full solution (both the WebAPI and the WebUI) is available with step-by-step instructions here.
Let me know about any specific part that is unclear, and I will try to make it more clear in the answer.
Refer the following blog for the demo of single page application (SPA) for ASP.NET Web API 2 and AngularJS, developed by the team at Marlabs.
http://weblogs.asp.net/shijuvarghese/archive/2014/01/25/demo-spa-app-for-asp-net-web-api-2-and-angularjs.aspx
The app is built with following technologies:
ASP.NET Web API 2
EF 6 Code First
AutoMapper
Autofac
Semantic UI
AngularJS 1.1.5
The application is published on github at https://github.com/MarlabsInc/webapi-angularjs-spa.
#DavidAntaramian gave a great example. But if you want a simple one, you can look to this HOL from Microsoft.
Their latest example on github uses .NET Core, but you can download release from October 2015.