Implement sliding expiration on asp.net webapi2 + sts + angularjs application - angularjs

We have WebAPI2, Thinktecture IdentityServer and AngularJS applications hosted on IIS. Our plan is to set up the webapi2 application stateless. Here is the flow:
Users open our AngularJS application. If not logged in, they get redirected to the login page.
Users enter their credentials, and click login. The credentials get sent to the STS server. If they get authenticated, a JWT gets returned.
AngularJS saves the JWT in the localstorage
To access resources on the WebAPI, angularjs application attaches the JWT on every request.
Before attaching the JWT, it checks the JWT's expiration date. If it hasn't expired, request sent to the API; else, redirected to the login page.
We want the session to be be valid only for 30 minutes. As and when the user does something on the application, the token should slide the expiration datetime. The easiest solution could be enabling sessions for the WebAPI application, but we don't want that. Also, we don't want to get a token before every WebAPI call.
Could we implement sliding sessions/tokens in this scenario? If so, how?

Related

React token based authentication with laravel

I am working on a React + Laravel project using Laravel Sanctum for API authentication. When I log in, Laravel Sanctum provides a token that I store in the LocalStorage, and then during every API call I am passing the token in the header to fetch data from the server as the authenticated user.
I am trying to not to show the login page to the already logged-in users.
The way I am doing this right now it by sending the token to the backend to check if the user is authorized or not, but it takes time to get response from the server. So when I hit the login route it shows me the login page first then when response comes back, it redirects me to the home page or another page. That is the thing I am trying to avoid.
Is there a way can I prevent unauthorized users to go to the authorized page as soon as I hit the route?

AssertionUrl for AngularJS Application

The flow of my application is that,
User enter the Url and AngularJS Login page is displayed
User click on Login with SAML and calls the Web API endpoint which returns the SAML login URL
AngularJS UI receives the SAML Login URL and redirects the user to the Idp Login screen
User is authenticated from Idp and Idp calls the AssertionUrl
The issue starts here,
If I create an Assertion Url on Web API and validates the request then how the AngularJS UI will know that Login was successful or not?
In the case of MVC and Web Forms, it is pretty straightforward but what should be done in the case of AngularJS/Angular SPA?
Edit 1:
Login Flow
SPA -> API -> SPA -> Idp
(SPA calls API, API generate SAML Request and Returns it to SPA, SPA then is redirected to Idp)
Assertion Flow
Idp -> API ? SPA
(Idp calls the AssertionUrl in the API and API generates the JWT but how it will be sent to SPA?)
In a AngularJS/Angular SPA you have two possible solution to handle the subsequently user session after successfully SAML 2.0 authentication.
Use a cookie like in ASP.NET MVC. Where you have to restrict the cookie to make it secure in a SPA. It require your API and SPA to be on the same domain.
Create a JWT access token after successfully login. Which is handed to the SPA and validated in each API call in the backen API code.
You can create a JWT access token with the ITfoxtec.Identity package. By calling the JwtHandler.CreateToken method https://github.com/ITfoxtec/ITfoxtec.Identity/blob/master/src/Tokens/JwtHandler.cs#L38.
Edit 1
All communication between SPA, IdP and API is either redirect or post through the client browser.
After successful authentication in the assertion flow. The API can redirect to the SPA with the access token in a query or fragment in the URL
In Angular, create a component (Token component) and create a route (like /token) to it like. The route should take route paramteer like /token/{token_id} . The token component gets the token value from the route param and saves in session storage. Before all api calls, the angular interceptor will get the token value from session storage and add as a header

IdentityServer 3 refresh tokens silently

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

Logout Session Expiration with Angularjs and Laravel

I built my APIs with laravel 5, both my web application and mobile app use the same APIs. On the web app there is a default expiration of 60 minutes after which user will have to log back in again. However on mobile i do not want that, no automatic session expiration for mobile, the user can only be logged out after they have clicked the logout button on the app.
I use JWT with satellizer for my authentication, i would like to know how to achieve this.
I have the same setup as you have on my web application and mobile app.
I simply store the username/email and password on the phone (native) and everytime the user opens the app it does a call to receive a new JWT.
When the user is loggin out on the phone, the password is removed.
I think this is the simplest solution, and for security you can encrypt the password in the storage.
I believe the current practice based on this answer is that you prolong or refresh the token before it expires. I do not believe you can't not have an expiration.

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