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-MicroServiceAuthServerAuthServer.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