angular 接入 IdentityServer4

来源:https://www.cnblogs.com/weihanli/archive/2020/06/23/13179968.html
-Advertisement-
Play Games

angular 接入 IdentityServer4 Intro 最近把活動室預約的項目做了一個升級，預約活動室需要登錄才能預約，並用 IdentityServer4 做了一個統一的登錄註冊中心，這樣以後就可以把其他的需要用戶操作的應用統一到 IdentityServer 這裡，這樣就不需要在每個應 ...


angular 接入 IdentityServer4

Intro

最近把活動室預約的項目做了一個升級，預約活動室需要登錄才能預約，並用 IdentityServer4 做了一個統一的登錄註冊中心，這樣以後就可以把其他的需要用戶操作的應用統一到 IdentityServer 這裡，這樣就不需要在每個應用里都做一套用戶的機制，接入 IdentityServer 就可以了。

目前活動室預約的伺服器端和基於 angular 的客戶端已經完成了 IdentityServer 的接入，並增加了用戶的相關的一些功能，比如用戶可以查看自己的預約記錄並且可以取消自己未開始的預約，

還有一個小程式版的客戶端暫時還未完成接入，所以小程式版目前暫時是不能夠預約的

為什麼要寫這篇文章

目前在網上看到很多都是基於 implicit 模式接入 IdentityServer，這樣實現起來很簡單，但是現在 OAuth 已經不推薦這樣做了，OAuth 推薦使用 code 模式來代替 implicit

implicit 模式會有一些安全風險，implicit 模式會將 accessToken 直接返回到客戶端，而 code 模式只是會返回一個 code，accessToken 和 code 的分離的兩步，implicit 模式很有可能會將 token 泄露出去

詳細可以參考 StackOverflow 上的這個問答

https://stackoverflow.com/questions/13387698/why-is-there-an-authorization-code-flow-in-oauth2-when-implicit-flow-works

除此之外，還有一個小原因，大多是直接基於 oidc-client 的 一個 npm 包來實現的，我是用了一個針對 angular 封裝的一個庫 angular-oauth2-oidc，如果你在用 angular ，建議你可以嘗試一下，針對 angular 做了一些封裝和優化，對 angular 更友好一些

準備接入吧

API 配置

預約系統的 API 和網站管理系統是在一起的，針對需要登錄才能訪問的 API 單獨設置了的 policy 訪問

services.AddAuthentication()
    .AddIdentityServerAuthentication(IdentityServerAuthenticationDefaults.AuthenticationScheme, options =>
    {
        options.Authority = Configuration["Authorization:Authority"];
        options.RequireHttpsMetadata = false;

        options.NameClaimType = "name";
        options.RoleClaimType = "role";
    })
    ;

services.AddAuthorization(options =>
{
    options.AddPolicy("ReservationApi", builder => builder
        .AddAuthenticationSchemes(IdentityServerAuthenticationDefaults.AuthenticationScheme)
        .RequireAuthenticatedUser()
        .RequireScope("ReservationApi")
    );
});

需要授權才能訪問的介面設置 Authorize 並指定 Policy 為 ReservationApi

[Authorize(Policy = "ReservationApi")]
[HttpPost]
public async Task<IActionResult> MakeReservation([FromBody] ReservationViewModel model)

IdentityServer Client 配置

首先我們需要在 IdentityServer 這邊添加一個客戶端，因為我們要使用 code 模式，所以授權類型需要配置 authorization-code 模式，不使用 implicit 模式

允許的作用域（scope） 是客戶端允許訪問的 api 資源和用戶的信息資源，openid 必選，profile 是預設的用戶基本信息的集合，根據自己客戶端的需要進行配置，ReservationApi 是訪問 API 需要的 scope，其他的 scope 根據客戶端需要進行配置

angular 客戶端配置

安裝 angular-oauth2-oidc npm 包，我現在使用的是 9.2.0 版本

添加 oidc 配置：

export const authCodeFlowConfig: AuthConfig = {
  issuer: 'https://id.weihanli.xyz',

  // URL of the SPA to redirect the user to after login
  redirectUri: window.location.origin + '/account/callback',

  clientId: 'reservation-angular-client',

  dummyClientSecret: 'f6f1f917-0899-ef36-63c8-84728f411e7c',

  responseType: 'code',

  scope: 'openid profile ReservationApi offline_access',

  useSilentRefresh: false,

  showDebugInformation: true,

  sessionChecksEnabled: true,

  timeoutFactor: 0.01,

  // disablePKCI: true,

  clearHashAfterLogin: false
};

在 app.module 引入 oauth 配置

  imports: [
    BrowserModule,
    AppRoutingModule,
    AppMaterialModule,
    HttpClientModule,
    FormsModule,
    ReactiveFormsModule,
    BrowserAnimationsModule,
    OAuthModule.forRoot({
      resourceServer: {
        allowedUrls: ['https://reservation.weihanli.xyz/api'],
        sendAccessToken: true
      }
    })
  ]

OAuthModule 里 resourceServer 中的 allowedUrls 是配置的資源的地址，訪問的資源符合這個地址時就會自動發送 accessToken，這樣就不需要自己實現一個 interceptor 來實現自動在請求頭中設置 accessToken 了

在 AppComponment 的構造器中初始化 oauth 配置，並載入 ids 的發現文檔

export class AppComponent {
  constructor(
        private oauth: OAuthService
    ) {
    this.oauth.configure(authConfig.authCodeFlowConfig);
    this.oauth.loadDiscoveryDocument();
    }
    // ...
}

添加一個 AuthGuard，路由守衛，需要登錄才能訪問的頁面自動跳轉到 /account/login 自動登錄

AuthGuard:

import { Injectable } from '@angular/core';
import { CanActivate, Router } from '@angular/router';
import { OAuthService } from 'angular-oauth2-oidc';

@Injectable({
  providedIn: 'root'
})
export class AuthGuard implements CanActivate {
  constructor(private router: Router, private oauthService: OAuthService) {}

  canActivate() {
    if (this.oauthService.hasValidAccessToken()) {
      return true;
    } else {
      this.router.navigate(['/account/login']);
      return false;
    }
  }
}

路由配置：

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { ReservationListComponent } from './reservation/reservation-list/reservation-list.component';
import { NoticeListComponent } from './notice/notice-list/notice-list.component';
import { NoticeDetailComponent } from './notice/notice-detail/notice-detail.component';
import { AboutComponent } from './about/about.component';
import { NewReservationComponent } from './reservation/new-reservation/new-reservation.component';
import { LoginComponent } from './account/login/login.component';
import { AuthGuard } from './shared/auth.guard';
import { AuthCallbackComponent } from './account/auth-callback/auth-callback.component';
import { MyReservationComponent } from './account/my-reservation/my-reservation.component';

const routes: Routes = [
  { path: '', component: ReservationListComponent },
  { path: 'reservations/new', component:NewReservationComponent, canActivate: [AuthGuard] },
  { path: 'reservations', component: ReservationListComponent },
  { path: 'notice', component: NoticeListComponent },
  { path: 'notice/:noticePath', component: NoticeDetailComponent },
  { path: 'about', component: AboutComponent },
  { path: 'account/login', component: LoginComponent },
  { path: 'account/callback', component: AuthCallbackComponent },
  { path: 'account/reservations', component: MyReservationComponent, canActivate: [AuthGuard] },
  { path: '**', redirectTo: '/'}
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

AccountLogin 會將用戶引導到 ids 進行登錄，登錄之後會跳轉到配置的重定向 url，我配置的是 account/callback

import { Component, OnInit } from '@angular/core';
import { OAuthService } from 'angular-oauth2-oidc';

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.less']
})
export class LoginComponent implements OnInit {

  constructor(private oauthService: OAuthService) {
  }

  ngOnInit(): void {
    // 登錄
    this.oauthService.initLoginFlow();
  }

}

Auth-Callback

import { Component, OnInit } from '@angular/core';
import { OAuthService } from 'angular-oauth2-oidc';
import { Router } from '@angular/router';

@Component({
  selector: 'app-auth-callback',
  templateUrl: './auth-callback.component.html',
  styleUrls: ['./auth-callback.component.less']
})
export class AuthCallbackComponent implements OnInit {

  constructor(private oauthService: OAuthService, private router:Router) {
  }

  ngOnInit(): void {
    this.oauthService.loadDiscoveryDocumentAndTryLogin()
    .then(_=> {
      this.oauthService.loadUserProfile().then(x=>{
        this.router.navigate(['/reservations/new']);
      });
    });
  }

}

More

當前實現還不太完善，重定向現在始終是跳轉到的新預約的頁面，應當在跳轉登錄之前記錄一下當前的地址保存在 storage 中，在 auth-callback 里登錄成功之後跳轉到 storage 中之前的地址

Reference


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • SDWebImage源碼解析之SDWebImageManager的註解
    /* * This file is part of the SDWebImage package. * (c) Olivier Poitrey * * For the full copyright and license information, please view the LICENSE *  ...
  • Flutter學習筆記（36）--常用內置動畫
    Flutter給我們提供了很多而且很好用的內置動畫，這些動畫僅僅需要簡單的幾行代碼就可以實現一些不錯的效果，Flutter的動畫分為補間動畫和基於物理的動畫，基於物理的動畫我們先不說。 補間動畫很簡單，Android裡面也有補間動畫，就是給UI設置初始的狀態和結束狀態，經過我們定義的一段時間，系統去... ...
  • ‘跳槽季’ iOS開發者，寫一份成功的簡歷？
    上篇: 跳槽季“iOS開發”救救自己，別再這樣寫簡歷了 簡歷中需要註意的問題！！ HR每天要收到500+簡歷還不止，首先就是簡歷的過濾。就相當於翻牌子。廢話不多說下麵講重點： 簡歷拼寫錯誤：（❌）單詞拼接錯了就不提了，直接pass, 好感度馬上降為零。 比如:githup/CNDS/Foudatio ...
  • iOS底層原理——KVC使用實踐以及實現
    簡介 KVC（Key-value coding）鍵值編碼，顧名思義。額，簡單來說，是可以通過對象屬性名稱（Key）直接給屬性值（value）編碼（coding）“編碼”可以理解為“賦值”。這樣可以免去我們調用getter和setter方法，從而簡化我們的代碼，也可以用來修改系統控制項內部屬性（這個黑魔 ...
  • 面試了一個 31歲的iOS開發者，讓我有所觸動，30歲以上的程式員該何去何從？
    前言 最近HR給了我一份簡歷,剛看到簡歷的第一眼，31歲？ 讓我有點意外，實際上，現在開發趨向於年輕化，大部分都是90後、95後，畢竟，軟體開發不像硬體開發一樣，年限越高，相對來說越吃香。 31歲,iOS開發工程師，工作經歷7年，5年左右都在外包公司，2年左右在創業公司。 經常能在網上聽到一些某某公 ...
  • 總結：iOS中多線程的經典崩潰
    前言 iOS崩潰是讓iOS開發人員比較頭痛的事情，app崩潰了，說明代碼寫的有問題，這時如何快速定位到崩潰的地方很重要。調試階段是比較容易找到出問題的地方的，但是已經上線的app並分析崩潰報告就比較麻煩了。 本文將給大家總結介紹關於iOS中多線程的一些經典崩潰，下麵話不多說了，來一起看看詳細的介紹吧 ...
  • Flutter學習筆記（37）--動畫曲線Curves 效果
    如需轉載，請註明出處：Flutter學習筆記（37）--動畫曲線Curves 效果 ...
  • Android 開發技術周報 Issue#285
    新聞 Android 11共用列表已集成類似AirDrop的功能 谷歌為Android開發者提供新選項 免安裝即可出售訂閱服務 Play商城新增“試用並安裝”按鈕 更直觀顯示應用的訂閱信息 類似Airdrop的Android附近分享功能將可跨PC平臺使用 教程 安居客 Android APP 走向平 ...
一周排行
    -Advertisement-
    Play Games
  • UOS 開啟 VisualStudio 遠程調試 .NET 應用之旅
    前言 在我們開發過程中基本上不可或缺的用到一些敏感機密數據，比如SQL伺服器的連接串或者是OAuth2的Secret等，這些敏感數據在代碼中是不太安全的，我們不應該在源代碼中存儲密碼和其他的敏感數據，一種推薦的方式是通過Asp.Net Core的機密管理器。 機密管理器 在 ASP.NET Core ...
  • C# - 能否讓 SortedSet.RemoveWhere 內傳入的委托非同步執行
    新改進提供的Taurus Rpc 功能，可以簡化微服務間的調用，同時可以不用再手動輸出模塊名稱，或調用路徑，包括負載均衡，這一切，由框架實現並提供了。新的Taurus Rpc 功能，將使得服務間的調用，更加輕鬆、簡約、高效。 ...
  • 順序棧的介面程式
    順序棧的介面程式 目錄順序棧的介面程式頭文件創建順序棧入棧出棧利用棧將10進位轉16進位數驗證 頭文件 #include <stdio.h> #include <stdbool.h> #include <stdlib.h> 創建順序棧 // 指的是順序棧中的元素的數據類型，用戶可以根據需要進行修改 ...
  • mORMot2 獲取數據集1
    前言 整理這個官方翻譯的系列，原因是網上大部分的 tomcat 版本比較舊，此版本為 v11 最新的版本。 開源項目 從零手寫實現 tomcat minicat 別稱【嗅虎】心有猛虎，輕嗅薔薇。 系列文章 web server apache tomcat11-01-官方文檔入門介紹 web serv ...
  • 萬字長文總結與剖析C語言關鍵字 -- <<C語言深度解剖>>
    C總結與剖析:關鍵字篇 -- <<C語言深度解剖>> 目錄C總結與剖析:關鍵字篇 -- <<C語言深度解剖>>程式的本質:二進位文件變數1.變數:記憶體上的某個位置開闢的空間2.變數的初始化3.為什麼要有變數4.局部變數與全局變數5.變數的大小由類型決定6.任何一個變數,記憶體賦值都是從低地址開始往高地 ...
  • 【Flink入門修煉】2-3 Flink Checkpoint 原理機制
    如果讓你來做一個有狀態流式應用的故障恢復，你會如何來做呢？ 單機和多機會遇到什麼不同的問題？ Flink Checkpoint 是做什麼用的？原理是什麼？ ...
  • C++ 多級繼承與多重繼承：代碼組織與靈活性的平衡
    C++ 多級繼承 多級繼承是一種面向對象編程（OOP）特性，允許一個類從多個基類繼承屬性和方法。它使代碼更易於組織和維護，並促進代碼重用。 多級繼承的語法 在 C++ 中，使用 : 符號來指定繼承關係。多級繼承的語法如下： class DerivedClass : public BaseClass1 ...
  • 圖文結合手把手教你創建SpringCloud項目
    前言 什麼是SpringCloud？ Spring Cloud 是一系列框架的有序集合，它利用 Spring Boot 的開發便利性簡化了分散式系統的開發，比如服務註冊、服務發現、網關、路由、鏈路追蹤等。Spring Cloud 並不是重覆造輪子，而是將市面上開發得比較好的模塊集成進去，進行封裝，從 ...
  • 類模板的常見用法
    class_template 類模板和函數模板的定義和使用類似，我們已經進行了介紹。有時，有兩個或多個類，其功能是相同的，僅僅是數據類型不同。類模板用於實現類所需數據的類型參數化 template<class NameType, class AgeType> class Person { publi ...
  • system-v IPC共用記憶體通信
    目錄system v IPC簡介共用記憶體需要用到的函數介面shmget函數--獲取對象IDshmat函數--獲得映射空間shmctl函數--釋放資源共用記憶體實現思路註意 system v IPC簡介 消息隊列、共用記憶體和信號量統稱為system v IPC(進程間通信機制)，V是羅馬數字5，是UNI ...
所有分類