feat: full oidc working with PKCE

Author: chrislyzztest

Solution 6 - OIDC and Angular client/AuthorizationServer/Config.cs

@@ -27,7 +27,7 @@ public static IEnumerable<IdentityResource> GetIdentityResources()
             };
         }
 
-        private static string spaClientUrl = "https://localhost:53709";
+        private static string spaClientUrl = "https://localhost:44311";
 
         public static IEnumerable<Client> GetClients()
         {
@@ -93,7 +93,7 @@ public static IEnumerable<Client> GetClients()
                 {
                     ClientId = "spaCodeClient",
                     ClientName = "SPA Code Client",
-                    AccessTokenType = AccessTokenType.Reference,
+                    AccessTokenType = AccessTokenType.Jwt,
                     // RequireConsent = false,
                     AccessTokenLifetime = 330,// 330 seconds, default 60 minutes
                     IdentityTokenLifetime = 30,
@@ -105,7 +105,7 @@ public static IEnumerable<Client> GetClients()
                     AllowAccessTokensViaBrowser = true,
                     RedirectUris = new List<string>
                     {
-                        $"{spaClientUrl}",
+                        $"{spaClientUrl}/callback",
                         $"{spaClientUrl}/silent-renew.html",
                         "https://localhost:4200",
                         "https://localhost:4200/silent-renew.html"

Solution 6 - OIDC and Angular client/ClientApp/ClientApp/src/app/core/auth/auth.service.ts

@@ -1,7 +1,8 @@
 import { Injectable, OnInit, OnDestroy, Inject } from '@angular/core';
-import { OidcSecurityService, OpenIdConfiguration, AuthWellKnownEndpoints } from 'angular-auth-oidc-client';
+import { OidcSecurityService, OpenIdConfiguration, AuthWellKnownEndpoints, AuthorizationResult, AuthorizationState } from 'angular-auth-oidc-client';
 import { Observable ,  Subscription } from 'rxjs';
 import { HttpHeaders, HttpClient } from '@angular/common/http';
+import { Router } from '@angular/router';
 
 @Injectable()
 export class AuthService implements OnDestroy {
@@ -11,6 +12,7 @@ export class AuthService implements OnDestroy {
     constructor(
         private oidcSecurityService: OidcSecurityService,
         private http: HttpClient,
+        private router: Router,
         @Inject('BASE_URL') private originUrl: string,
         @Inject('AUTH_URL') private authUrl: string,
     ) {
@@ -28,12 +30,16 @@ export class AuthService implements OnDestroy {
         const openIdImplicitFlowConfiguration: OpenIdConfiguration = {
             stsServer: this.authUrl,
             redirect_url: this.originUrl + 'callback',
-            client_id: 'spaClient',
-            response_type: 'id_token token',
+            client_id: 'spaCodeClient',
+            response_type: 'code',
             scope: 'openid profile resourceApi',
             post_logout_redirect_uri: this.originUrl,
             forbidden_route: '/forbidden',
             unauthorized_route: '/unauthorized',
+            start_checksession: true,
+            silent_renew: true,
+            silent_renew_url: this.originUrl + '/silent-renew.html',
+            history_cleanup_off: true,
             auto_userinfo: true,
             log_console_warning_active: true,
             log_console_debug_active: true,
@@ -64,22 +70,32 @@ export class AuthService implements OnDestroy {
         this.isAuthorizedSubscription = this.oidcSecurityService.getIsAuthorized().subscribe((isAuthorized => {
             this.isAuthorized = isAuthorized;
         }));
+
+        this.oidcSecurityService.onAuthorizationResult.subscribe(
+            (authorizationResult: AuthorizationResult) => {
+                this.onAuthorizationResultComplete(authorizationResult);
+            });
     }
 
+    private onAuthorizationResultComplete(authorizationResult: AuthorizationResult) {
+
+        console.log('Auth result received AuthorizationState:'
+            + authorizationResult.authorizationState
+            + ' validationResult:' + authorizationResult.validationResult);
+
+        if (authorizationResult.authorizationState === AuthorizationState.unauthorized) {
+            if (window.parent) {
+                // sent from the child iframe, for example the silent renew
+                this.router.navigate(['/unauthorized']);
+            } else {
+                window.location.href = '/unauthorized';
+            }
+        }
+    }
 
     private doCallbackLogicIfRequired() {
 
         this.oidcSecurityService.authorizedCallbackWithCode(window.location.toString());
-    //   if (window.location.hash) {
-    //     window.location.hash = decodeURIComponent(window.location.hash);
-    //     // authorizedCallback returns wrong result when hash is URI encoded
-    //   } else {
-
-    //     this.oidcSecurityService.authorize();
-    //   }
-        // if (typeof location !== "undefined") {
-        //    this.oidcSecurityService.authorizedCallback();
-        // }
     }
 
     getIsAuthorized(): Observable<boolean> {

Solution 6 - OIDC and Angular client/ClientApp/wwwroot/silent-renew.html

@@ -0,0 +1,22 @@
+<!doctype html>
+<html>
+<head>
+    <base href="./">
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>silent-renew</title>
+    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+</head>
+<body>
+
+    <script>
+        window.onload = function () {
+            /* The parent window hosts the Angular application */
+            var parent = window.parent;
+            /* Send the id_token information to the oidc message handler */
+            var event = new CustomEvent('oidc-silent-renew-message', { detail: window.location });
+            parent.dispatchEvent(event);
+        };
+    </script>
+</body>
+</html>

Solution 6 - OIDC and Angular client/ResourceApi/.gitignore

@@ -0,0 +1,2 @@
+bin/
+obj/

Solution 6 - OIDC and Angular client/ResourceApi/Startup.cs

@@ -1,4 +1,5 @@
-using Microsoft.AspNetCore.Builder;
+using IdentityServer4.AccessTokenValidation;
+using Microsoft.AspNetCore.Builder;
 using Microsoft.AspNetCore.Hosting;
 using Microsoft.Extensions.Configuration;
 using Microsoft.Extensions.DependencyInjection;
@@ -21,11 +22,11 @@ public void ConfigureServices(IServiceCollection services)
                 .AddAuthorization()
                 .AddJsonFormatters();
 
-            services.AddAuthentication("Bearer")
+            services.AddAuthentication(IdentityServerAuthenticationDefaults.AuthenticationScheme)
                 .AddIdentityServerAuthentication(options =>
                 {
                     options.Authority = "https://localhost:44370";
-                    options.RequireHttpsMetadata = false;
+                    options.RequireHttpsMetadata = true;
                     options.ApiName = "resourceApi";
                 });