elanderson / angular-core-identityserver

Using Angular (4+) with ASP.NET Core and IdentityServer4

Angular-Core-IdentityServer

Exploring Angular (4+) with ASP.NET Core, Entity Framework Core and IdentityServer4. The following are blog posts documenting the exploration.

Initial Exploration

1. Identity Server: Introduction
2. Identity Server: Sample Exploration and Initial Project Setup
3. Identity Server: Interactive Login using MVC
4. Identity Server: From Implicit to Hybrid Flow
5. Identity Server: Using ASP.NET Core Identity
6. Identity Server: Using Entity Framework Core for Configuration Data
7. Identity Server: Usage from Angular
8. Identity Server: Calling Secured API from Angular

Other Related Posts

1. Identity Server: Redirect When Route Requires Logged in User
2. Identity Server: Changing Angular OpenID Connect Clients
3. Identity Server: External Authentication using Twitter
4. Identity Server: API Migration to ASP.NET Core 2
5. Identity Server: Migration to ASP.NET Core 2
6. Identity Server: Deploy to Azure
7. Identity Server: Upgrade Client to Angular 5
8. Identity Server: Migration to version 2.1 and Angular HTTP Changes

angular-core-identityserver's Issues

LoginPartial still shows UserId after Logout

After I click logout in my main application, it takes me to the identity logout page ("You are now logged out"), but the navbar still shows my UserID and the Log out link at the top.

How can I get the LoginPartial view to refresh correctly?

ASP.NET core 2.1 support

@astegmaier @elanderson
Please release a version developed with the new version of asp.net core 2.1

After deploying to Azure login doesn't work

Not sure if I did anything wrong. I tried all versions starting with 12. It works fine locally, I am able to log in, do debugging in VS 2017. When I deploy to Azure, there are issues:

• Identity server page has distorted layout, different from what I see at localhost:5000, there is missing top navigation bar. Here is URL: http://identityapp13.azurewebsites.net/home

• Clicking Login in ClientApp doesn't do anything. I tried to do remote debugging but for some reason I couldn't make it work (still learning Angular/bower/etc.). Here is URL: http://clientapp13.azurewebsites.net/home

• for version 15 ClientApp was not loading at all (error processing your request). Here is URL: http://clientapp15.azurewebsites.net/home

Please advise.
Thank you,
Michael

Body set to empty string

Hi

Not sure if I am using the post method wrong, however the following method, seems to set the body to "", so when I post to my API, nothing is ever sent to it, by removing body: "" it works. Is there another way to accomplish this?

private setRequestOptions(options?: RequestOptions | null) { if (options) { this.appendAuthHeader(options.headers); } else { options = new RequestOptions({ headers: this.getHeaders(), body: "" }); } return options; }

Thanks a lot
Shaun

Upgraded Angular 5 not working in production Mode

Hi,
Thanks for upgraded Angular 4 to Angular 5 But think is here,while publish or environment is in production,
webpack.config.js not able compile things properly which end up in error saying
Module Not Found:"Cannot resolve - ./$$_gendir/ClientApp/app/app.module.browser.ngfactory.ts
@ ./ClientApp/boot.browser.ts"

Have you come across the same if any

Fetch-data with server-side rendering (SSR)

Hi! I stumbled across your blog posts and this repo in a search for examples about how to use IdentityServer to secure an angular app that uses server-side rendering (SSR). Thanks for putting it out there!

I set the repo up successfully on my OS X machine with a few tweaks, and I was able to successfully log in and call the protected api through the fetch-data component in the basic case--awesome!

One problem I came across was that triggering a hard refresh of after logging in does not appear to preserve the auth in server-side rendering. To repro, go to http://localhost:5002/fetch-data, log in so you can successfully see that data from the API endpoint, then turn off JavaScript and hit 'F5', and you should see the login screen instead of the data.

Looking at how the auth tokens are stored on the client side (through sessionStorage), this isn't surprising (since sessionStorage won't be available on the server). I was curious if you'd figured out the optimal way to solve this (maybe oidc-client could be configured to store the token info in cookies and pass these up to the server, which could then read them and make them available to oidc-client running in node?). It seems like a tough problem for which I haven't yet found a great solution, and I was curious if you had.

In any case, thanks again for sharing!

Forbidden_route & Unauthorized_route

Hi,

I cant seem to get the Forbidden Route and Unauthorized Route working. If I login and browse to /Fetchdata , i get the desired result, however if I then logout , the route disappears from the menu, however if I enter the route manually in the browser I was hoping it would redirect to the Unauthorized Route, however this does not happen, any ideas?

Thanks

NodeInvocationException: No provider for PlatformRef!

Getting below error while running the angular application
NodeInvocationException: No provider for PlatformRef!
Error: No provider for PlatformRef!

Callback Component Question

Hey there, I have a question. I've been using this repository as a base for another project I'm working on. However, I have an issue. It seems everything is working fine connecting to the identity server from my Angular app, but after the user logs in and is redirected, the auth service does not seem like it's getting a token back. In identity server I see this is set:

RedirectUris = { $"{configuration["ClientAddress"]}/callback" },

What is this /callback route referring to? I see this blog post:
https://elanderson.net/2017/07/identity-server-usage-from-angular/

It mentions to take a look at the code in Github to see how the callback component works. In the current version of your code however, there is no callback component. Your current version seems to be working fine as well. So what am I missing? What is the replacement for the callback component in the latest version of your app? Any help would be appreciated.

How to setup google authentication in Angular-Core-IdentityServer

Figuring out the flow to the login page

@elanderson

I was happy to find your blog and this project in GitHub.

I'm currently implementing an Angular application that needs to use IdentityServer4 collecting username and password as well as accepting other OIDC providers (in my initial case only Facebook).

It looks like what you've got written almost does all that already (of course, without Facebook and there are several other requirements I'll have to add to IdentityServer but the stub requirements are there).

One of my requirements is to fully understand whatever I implement :-)

So, with that in mind, I wanted to know how the Angular application knows which Url to load a login window on the OIDC provider?

Looking through the code I can see that angular-auth-oidc-client module is included. And that whenever the Angular application calls its login() (in navMenu.component.tst) that it references authService.login which ultimate references oidcSecurityService.authorize()!

Then in oidcSecurityService.authorize() it generates a url by calling createAuthorizeUrl. That url ultimately gets stuffed into a window.location.href which initiates my first question:

Is this a window which triggers a popup akin to the Facebook popup login page?

My last question(s) is about the url itself. When I look at createAuthorizeUrl, the first thing that I notice is that it uses this.authWellKnownEndpoints.authorization_endpoint which I know it is getting from querying IdentityServer ala OIDC discovery protocol.

When I look into IdentityServer, I do not see IdentityServer it defines an actual login page url?

In my own project's .well-known/openid-configuration results, authorization_endpoint contains "http://localhost:5000/connect/authorize" which I assume is a standard address. I've looked around the Config.js of the IdentityServer and this only makes me more perplexed :-) The RedirectUrl of the mvc and ng clients are http://localhost:5002/signin-oidc and http://localhost:5002/callback respectively.

Thanks in advance. Your series is probably been one of the most useful (in the top 3 of the dozens I've reviewed).

Matthew

Application not working using PRIMeng

Hello, When I use primeng in this application so my application is not working. Could you please check this out.

ERROR
Prerendering failed because of error: ReferenceError: Event is not defined

Regards
Sourabh Acooli

Latest version not working

Hello,

I am using your project but when I add (import { InputTextModule, DataTableModule, ButtonModule, DialogModule, DataListModule, DropdownModule, CalendarModule } from 'primeng/primeng')
so my pre render is not working.

Could you please look at this.

Regards
Sourabh Acooli

Connection Refused error

Trying to run the ClientApp, the app is running fine. Then, clicking on Login link in the left menu, I got the following error:

http://localhost:5000/.well-known/openid-configuration net::ERR_CONNECTION_REFUSED

Error: Network Error
at XMLHttpRequest.s.onerror (oidc-client.min.js:1)
at XMLHttpRequest.wrapFn [as __zone_symbol___onerror] (vendor.js?v=V0XfTYiIdz7cuSZFqU8IYfMOWj9SFIAHN7G306fldZA:84356)
at ZoneDelegate.invokeTask (vendor.js?v=V0XfTYiIdz7cuSZFqU8IYfMOWj9SFIAHN7G306fldZA:83738)
at Object.onInvokeTask (vendor.js?v=V0XfTYiIdz7cuSZFqU8IYfMOWj9SFIAHN7G306fldZA:15077)
at ZoneDelegate.invokeTask (vendor.js?v=V0XfTYiIdz7cuSZFqU8IYfMOWj9SFIAHN7G306fldZA:83737)
at Zone.runTask (vendor.js?v=V0XfTYiIdz7cuSZFqU8IYfMOWj9SFIAHN7G306fldZA:83505)
at XMLHttpRequest.ZoneTask.invoke (vendor.js?v=V0XfTYiIdz7cuSZFqU8IYfMOWj9SFIAHN7G306fldZA:83800)

The problem comes from this piece of code:

startSigninMainWindow() {
      this._mgr.signinRedirect({ data: 'some data' }).then(function () {
        console.log("signinRedirect done");
      }).catch(function (err) {
        console.log(err);
      });
  }

Security contact?

Hi, how could I report a potential security vulnerability in the project?

Angular 7/8 Support

Would be good to see this example with an updated version of Angular.

Potential Security Vulnerabilities

While this is a demo project for https://elanderson.net/category/identityserver/ and the last commit was in 2018, it is quite popular and may be used as a template for a real project.

Summary

Angular-Core-IdentityServer is vulnerable to Cross-Site Scripting (XSS) and Cross-Site Request Forgery (CSRF) that may lead to the elevation of privileges and per-user denial of service (DoS).

Details

Issue 1: XSS (CVE-2018-0784)

The application doesn't have the fix for CVE-2018-0784 that was found in ASP.NET Core templates. It is vulnerable to XSS if the logged-in user is tricked into clicking a malicious link like https://localhost:44315/manage/EnableAuthenticator?AuthenticatorUri=%22%3E%3C/div%3E%00%00%00%00%00%00%00%3Cscript%3Ealert(%22XSS%22)%3C/script%3E and enters an invalid verification code. Mode details are available in the blog post.

Impact

This issue may lead to the elevation of privileges.

Remediation

Modify the code according to the instructions from the advisory.

Issue 2: CSRF (CVE-2018-0785)

The application doesn't have the fix for CVE-2018-0785 that was found in ASP.NET Core templates. It is vulnerable to CSRF. A logged-in user with enabled Second Factor Authentication (2FA) may lose their recovery codes if they are tricked into clicking a link like https://localhost:44315/manage/GenerateRecoveryCodes or visit a malicious site that makes the request without the user's consent. As a result the user may be permanently locked out of their account after loosing access to their 2FA device, as the initial recovery codes would no longer be valid.

Impact

This issue may lead to the per-user DoS.

Remediation

Modify the code according to the instructions from the advisory.