Silent Authentication using Identity Server - identityserver4

I’m building an SPA app, and am using IdentityServer4 for the authentication. I’m using the new api authorization template found in .net core 3.0 for angular.
The template tries to authenticate first using an iFrame, if it fails it tries using a popup, if it fails it tries using redirects. My question is, can i rely only on the silent authentication using the iframe, without a backup method. I mean the iframe is supported in all browsers, and should work on all devices, why would i implement the popup or the redirect flow ?

The iframe method will only work if the user already has a session on the IDP and if any max age conditions are satisfied.
If interactive authentication is needed then a redirect will be necessary.

Related

How to open a pop-up within MSTeams APP when using #microsoft/teams-js

We are trying to implement SSO inside the MSTeams Tabs app. Our SSO URL redirects the user to the identity provider's URL for authentication.
We need to open the identity provider URL inside the teams tab as a pop-up.
We are not using the MsTeams suggested YoTeams scaffold, we are using MsTeams js library directly inside our react app, so we don't want to try the task tab.
You can't launch a popup directly for this - the Teams client will block you. However, the built-in SSO capability has a mechanism specifically to launch such a popup, and handle it's response. It sounds like you're using an external Identity Provider (i.e. not Azure AD), in which case there's some different work to usual, but it's documented. Please see https://learn.microsoft.com/en-us/microsoftteams/platform/tabs/how-to/authentication/tab-sso-overview and then https://learn.microsoft.com/en-us/microsoftteams/platform/tabs/how-to/authentication/auth-flow-tab

login.microsoftonline.com doesn't redirect to the specified Redirect URL

We are having problem with ADAL redirect authentication in MS Team Desktop client recently.
We have a custom Teams app package (Team Tab) to display a page on our application server. The page uses ADAL JS library to get Graph token to access One Drive. Since the page is displayed in iframe and will be used in Teams desktop client, we use page redirect authentication in ADAL. From debug console, we can see the issue happened when ADAL sent request to “login.microsoftonline.com”(login_hint parameter is used to specify current user account). The flow stopped with error saying the “login.microsoftonline.com” can’t be displayed in iframe. In the past, “login.microsoftonline.com” simply redirected the browser to the specified redirect URL and auth flow completed without any problem.
Our application server has implemented SSO with Azure. Implicit auth flow is used to get the token. The issue only happens in Teams desktop client, we use ADAL popup (not supported in desktop client) to get token in browser. The flow was working before April. Seems to me that something has changed recently at the Microsoft login page.
Just wondering if anybody has the same issue. Any suggestions will be appreciated.
Have you looked at using Teams SSO, which uses MSAL, instead of ADAL? See here for a sample: https://github.com/pnp/teams-dev-samples/tree/master/samples/tab-sso

SSO not working for IdentityModel.OidcClient

I am adding OIDC login to a WinForms application. I set up the application using the IdentityModel.OidcClient library and pulled the boilerplace code from their WinForm Sample. The OIDC successfully shows the login form, does MFA, and I get back the tokens.
However, if I close the application and open it again, I have to authenticate again. Usually, the SSO session in the browser allows me to bypass this step. It seems the OidcClient is using a browser session that gets destroyed when the application closes and is not shared between applications.
How can I configure my application to use the SystemBrowser or another browser that will maintain those SSO cookies between executions and/or for different applications that use this component.
Thanks in advance.
First thing to check is that the session cookie that you set have an expire date in the future, otherwise it will just be a cookie that will last this browser session.
In your browser you can see that in the developer tools section, like in this example:
Alternatively, you can use a tool like Fiddler to check the response that sets the session cookie and make sure it contains a future expire date.
You can configure that in your ASP.NET application.

Authenticate aginst server and restful api using angular and java ee

I've got an web app developed using angularjs for the front-end, java ee for the server side and a java restful api to connect both ends. I am using glassfish for the development process but the solution should be compatible with websphere, wildfly (not as important as the other three) and weblogic (doesn't need to be the same approach to all of them but that would be ideal).
So both the front-end and the resful api authenticate against the server which was solved by using BASIC authentication and only ONE username/password combination was asked for. When I changed BASIC to be FORM (using j_security_check) so I could design a proper login page. After having changed this, first I have to login using the form and then I have to login against the rest api as well, which is not what I want. So I've been trying different approaches ever since without any success.
Things I've tried so far:
Create a filter so I can capture username/password and add this into the header of the restful calls so no log in info is asked after the form login page -> doesn't work in glassfish
Change the login for specified in the web.xml for one developed by myself using angular so I can capture username/password and use an injector to add it to all the calls to the resful api -> Cannot login against the server since it doesn't accept any of my attempts by either rejecting then or saying that the page doesn't exist (probably doing it wrong but couldn't find much info about this...)
Using web.xml form authentication try adding an angular controller to capture the username/password and use an injector (angular doesn't work with the login page using j_security_check)
Capturing the response from the server on login so I can use the session to authenticate when using the restful api (don't know how to capture the response in the form page...)
Any thoughts are more than welcome after almost two weeks trying to make this work.
If you need more information or a example of any part of the code please just say and I will add it to the question.
Thanks!

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.

Resources