IdentityServer 3 refresh tokens silently - angularjs

I'm using Identity Server 3 to authenticate / authorize a user in an MVC application.
The MVC application uses the UseOpenIdConnectAuthentication method from IAppBuilder.
My MVC application has only one MVC controller which creates and Angular application.
Right now, when I make an ajax call and I get the response that the token has expired, I show a pop-up with a reload button that redirects that user to an action from HomeController which re authorizes the user through IS3 with a redirect.
My question - is there a way of doing this silently without having to use the pop-up and do the redirect?
Perhaps have an iFrame in the page that periodically makes requests to that action and saves the new tokens?
Or something similar ?
Is this doable in an Angular application which also uses a server side for authentication ?
Thanks you

If you want to renew the access token at the server side (Authorization code flow / Hybrid flow), you could make use of OIDC refresh tokens.
I believe you are looking for client side libraries (SPA client - Implicit flow) to refresh the Access tokens. Yes. This is possible via iframe. Have a look at the oidc-client JS library (look for signinSilent / automaticSilentRenew ) which renews Access tokens via iframe

Related

how to protect react.js spa with .net core api

I am trying to protect a react.js spa app with adal login and authenticate with .net core wepApi.
I am able to get JWT from azure invoked by react SPA (using react-adal module) and retrieve basic user information.
Now the joy begins
As most MSFT examples are based on their mvc approach, they have a password to sign token in the webconfig file, which is not accessible for frontend application.
How then I could sign the JWT token using a password without pushing it to the SPA app as that could be read in a web console?
One of my ideas is to initiate login in the SPA, then use a webapi endpoint as a redirect link (and provide a connection id in state field) and then by ajax I could do redirect on the SPA, but still there is no signature on the JWT.
my partial solution at the moment is:
have react-adal used to validate if user is logged-in
when there is no token, then react-adal authenticates, but redirection is on a special page when I am grabbing the token and store it in database. The trick here is: there is a need to change hash to query-string to grab the token serverside (as all after # is not forwarded to web-server), so a simple javascrip that replaces # with ? and redirects to another endpoint.
then redirect to the main application
As the URL is only used for redirects (after adal login ) - that is a typical man-in-the-middle scenario, but gives an ability to generate own token.

Hide HTTP GET/POST request getting displayed in Chrome Developer Tool

I have an application developed in Angular JS and Webapi. I have used token based authentication using OWIN Framework. The application is deployed in a Software company and few developers who have knowledge on this techstack, use Chrome developer tool and access the api methods directly and bypass the validations in Client side. Is there a way to control this?
Please find the screen shot of chrome developer tool displaying Bearer token, Webapi method & its payload.
You can't really hide HTTP request showing up on browsers. What you can do is control who gets hold of that access token, its expiry time and what permissions and claims he has.
You can't hide the browser's activities from a user running that browser.
A token should be generated only upon successful login using right credentials and that token showing up on the developer tool can be used to call the API's from tools like the postman until it's expiry(so, set a shorter expiry).
Token A generated using credential of user A should not have the permission to manipulate data of user B and this should be handled explicitly.
So, the one option is that user A can steal his own access token and use it to manipulate only his own data unless the token is alive.

ASP.NET MVC + Angular app with only token auth and no cookie

I have an application built by a previous developer that uses OWIN middleware with both cookie and OAuth tokens. It is an ASP.NET MVC app that is only using MVC views/controllers for login and a home view that hosts an entirely separate Angular app.
Bearer tokens are used to authenticate to the API once the app is entirely loaded but an auth cookie is used to load the initial scaffold MVC home view enclosing the ng app.
My issue is having a business requirement to allow users to login with unique credentials per browser tab therefore cookies cannot be used but simply use a session-based token to keep them separate.
Can an ASP.NET MVC app fundamentally operate without cookie-based auth?
If I can remove cookie auth and rely on tokens only this will solve my issue of having to rewrite the angular outer frame in solely angular code and reimplement login pathway.
A note: I am implementing IdentityServer3 and I found all samples there and elsewhere always have cookie auth as part of the mix thus my question here.
I think what you want to do here is the following:
Add an [AllowAnonymous] on the Home controller
In the application that is loaded by the Home page, use a browser side package like oidc-client to perform a user login. This will return an id and an access token.
Inject the access token in you REST service requests.
Use UseIdentityServerBearerTokenAuthentication to filter and authenticate bearer tokens in the WEB API server.

Example of an SPA with a login screen that uses AngularJS and connects to ASP.NET Web API 2?

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.

OAuth2 in Silverlight

What do you think about this approach?
1. A single server for OAuth authentication and resource server, based on dotnetopenauth.
2. Silverlight and javasrcipt interaction to access the OAuth Authorization endpoint.
e.g
Login button in silverlight page calls a javascript function to access the Authorization endpoint in server using implicit grant.
Server redirects to login page.
User selects open id provider, login, and approve application request to access user's openid.
User access the OAuth Authorization endpoint.
Server redirect user to silverlight page again with access token in url fragment.
javascript parses the url fragment to get the access token
when silverlight page is loaded, silverlight app calls javascript function to get the accesstoken.
Silverlight uses the access token to access the resources.
Seems reasonable to me. :)
DotNetOpenAuth won't run in Silverlight, but OAuth2 clients are very simple anyway, so I don't think that should hold you back.

Resources