Blazor登錄Ids4

一、簡介

Blazor是微軟推出的一項新技術，旨在使用C#代碼替代js前端開發，以提高開發效率。BootstrapBlazor是基於Blazor的Bootstrap組件庫，從官方文檔可以看出該組件已經是十分完善，幾乎實現了Bootstrap的所有功能。其最大的優勢是基於Blazor的實現，從官方演示可以看出基於C#代碼開發的業務模塊代碼十分簡潔，對於低代碼開發時代有着很大的優勢。本篇文章將介紹如何使用BootstrapBlazor組件登錄Ids4授權服務。

二、准備

由於Blazor技術較新，所以開始前需要先熟悉Blazor項目特性和代碼風格。Ids4是.Net生態里最強大的身份授權框架，其難度與abp相當，所以先學習該框架上手會更快，當然最后我會提供完整的實戰代碼。

三、獲取Ids4身份授權服務

ids4官方提供了十分方便的演示Demo可以直接使用，但是我還是建議自己搭建完整的Ids4。

獲取代碼

本篇是實戰教程，ids4服務早已集成在作者的開發框架ABP-MicroService，直接拉取運行即可，這里就不在贅述授權服務的搭建過程，想了解ids4搭建可以翻看作者往期文章。

四、搭建Blazor應用

Blazor應用分為兩種，分別是服務端Server和客戶端WebAssembly，其中WebAssembly模式是十分有前途的，所以本篇介紹的也是WebAssembly應用。

Step1：創建Blazor應用

首先在vs2019中創建新的Blazor應用

選擇WebAssembly App，取消Https配置並創建

創建完成后就有了基本的Blazor框架

Step2：分層

通過上一步已經創建了基本的模板框架，下面給框架分層，創建一個業務層。

創建Blazor.App層

在解決方案中添加新的Razor類庫

添加引用

安裝BootstrapBlazor、Microsoft.AspNetCore.Components.WebAssembly.Authentication包，
完成后在Blazor.App.Web層中引用Blazor.App

靜態資源文件從BootstrapBlazor文檔復制到項目中

Step3：配置

項目搭建完成后需要配置BootstrapBlazor組件和授權認證。

在Blazor.App層_Imports中添加引用

@using BootstrapBlazor.Components
@using Blazor.App.Shared
@using Microsoft.AspNetCore.Components.Web
@using Microsoft.AspNetCore.Components.Authorization
@using Microsoft.AspNetCore.Authorization

在Blazor.App.Web層_Imports中添加引用

@using BootstrapBlazor.Components
@using Blazor.App.Web
@using Blazor.App.Shared
@using Microsoft.AspNetCore.Components.Authorization
@using Microsoft.AspNetCore.Components.Forms
@using Microsoft.AspNetCore.Components.Routing
@using Microsoft.AspNetCore.Components.Web
@using Microsoft.AspNetCore.Components.WebAssembly.Http
@using Microsoft.JSInterop
@using System.ComponentModel
@using System.ComponentModel.DataAnnotations
@using System.Net.Http
@using System.Net.Http.Json

注入服務

在Main方法中注入BootstrapBlazor、OidcAuthentication服務

	    builder.Services.AddBootstrapBlazor();

            builder.Services.AddOidcAuthentication(options =>
            {
                builder.Configuration.Bind("AuthServer", options.ProviderOptions);
                options.ProviderOptions.DefaultScopes.Add("role");
                options.ProviderOptions.DefaultScopes.Add("email");
                options.ProviderOptions.DefaultScopes.Add("phone");
            });

添加配置文件

在wwwroot中添加appsettings配置文件，添加AuthServer節點

  "AuthServer": {
    "Authority": "http://localhost:53362",
    "ClientId": "blazor-app",
    "ResponseType": "code"
  }

AuthServer地址：https://github.com/WilliamXu96/ABP-MicroService/tree/master/AuthServer ，拉取代碼遷移數據庫后啟動。

五、啟動

啟動授權服務

控制台進入ABP-MicroService\AuthServer\AuthServer.Host輸入：
dotnet run
啟動成功后輸出如下

啟動Blazor

vs中直接Ctrl+F5啟動

瀏覽器訪問

瀏覽器輸入http://localhost:44307 訪問Blazor應用。
進入歡迎頁

檢測登錄狀態，跳轉到授權服務登錄

登錄成功，跳轉首頁

六、總結

關於ids4的Client配置我是寫在授權服務中的，可以直接配置到Blazor中，但是考慮到Webassembly模式會將代碼發送到瀏覽器，所以在授權服務中配置會更安全。以上就是的Blazor登錄Ids4技術分享，如果有疑問可以加QQ群討論。

代碼地址：https://github.com/WilliamXu96/ABP-MicroService , https://gitee.com/Bossxu666/abp-microservice
QQ群：1083795392