AspNetCore With Angular SPA Authentication using the Authorization Code Flow

Referrer:

1>https://openid.net/specs/openid-connect-core-1_0.html#CodeFlowSteps

2>https://duendesoftware.com/products/identityserver

3>https://docs.microsoft.com/en-us/aspnet/core/security/authentication/identity-api-authorization?view=aspnetcore-5.0

Step1: Create a Agular SPA Project base on referrer 3 showing as the following figures：

Step2：Click the "Fetch Data" Link from Top Navigation Bar,if you are not login yet, the browser will redirect you to the Login page:

 

 

  Step3 analyze: let's look at the Request/Response :

     Because the 'fetch-data' route is protected by AuthorizeGuard so inside the AuthorizeGuid.canActivate method which use the AuthorizeService.isAuthenticated() to check if the use is login in.

     if user is not login in then it route the use to the Login Page.

   1>'fetch-data'->AuthorizeGuard->AuthorizeService->UserManager

 

   2> AuthorizeGuard:

　3>AuthorizeService:

 

 

  4>  UserManager:
   

 The Login page is a normal razor page ,first let's analyze the Get URL:
 Lets's assume the user input the correct email and password then click Login Button will redirect the user to the /connect/authorize/callback end point.

  1>ReturnURL -- 实际上是 identity server 的 “/connect/authorize/callback“ endpoint 并且附带像
     ?client_id=IdenttitySPA&
     &redirect_uri=https%3A%2F%2Flocalhost%3A44338%2Fauthentication%2Flogin-callback
     &response_type=code
     scope=IdenttitySPAAPI%20openid%20profile
     &state=14b832841131412c9a9c1ee68e3cddbe
     &code_challenge=n-nj5GmKtc4vTMiMX9mpogi14g0ek7zjHyWWIoO2PJ8
     &code_challenge_method=S256
     &response_mode=query 的参数。
    
 

 

 

 

 

 

 

 

 

 

 

 

 

GET: https://localhost:44338/_configuration/IdenttitySPA

Login Out: https://localhost:44338/connect/endsession

 

 

 logout-callback :

https://localhost:44338/authentication/logout-callback?state=007e9045bc0e455a90905eda782513cc