MAUI Blazor学习7-实现登录跳转页面

MAUI Blazor系列目录

登录是APP的基本功能，采用Identity Server 4认证服务器，Blazor Server可以简单配置一下oidc参数，即可跳转到id4服务器登录。APP可以在登录页面填写用户名和密码，发送到id4认证服务器。MAUI Blazor可以用这种方式实现登录功能。

2021年11月，在MAUI Blazor还在预览版的时候，我写了一个DEMO，实现了访问Id4服务器登录功能。现在把APP的代码直接搬到正式版，也是没问题的。

Blazor MAUI客户端访问Identity Server登录 - SunnyTrudeau - 博客园 (cnblogs.com)

DEMO代码地址：https://gitee.com/woodsun/blzid4

id4认证服务端支持手机号验证码登录方案

沿用2021年DEMO的id4服务器，把AspNetId4Web项目复制到本解决方案。

回顾一下方案。config自定义一个PhoneCodeGrantType认证类型，通过手机号和验证码，返回token。

D:\Software\gitee\blzid4\BlzId4Web\AspNetId4Web\Config.cs
new Client()
                {
                    ClientId="PhoneCode",
                    ClientName = "PhoneCode",
                    ClientSecrets=new []{new Secret("PhoneCode.Secret".Sha256())},

                    AllowedGrantTypes = new string[]{ "PhoneCodeGrantType" },

                    //效果等同客户端项目配置options.GetClaimsFromUserInfoEndpoint = true
                    //AlwaysIncludeUserClaimsInIdToken = true,

                    AllowedScopes = { "openid", "profile", "scope1", "role", }
                },

D:\Software\gitee\blzid4\BlzId4Web\AspNetId4Web\Config.cs

new Client()

{

ClientId="PhoneCode",

ClientName = "PhoneCode",

ClientSecrets=new []{new Secret("PhoneCode.Secret".Sha256())},

AllowedGrantTypes = new string[]{ "PhoneCodeGrantType" },

//效果等同客户端项目配置options.GetClaimsFromUserInfoEndpoint = true

//AlwaysIncludeUserClaimsInIdToken = true,

AllowedScopes = { "openid", "profile", "scope1", "role", }

自定义手机验证码认证处理器。

D:\Software\gitee\blzid4\BlzId4Web\AspNetId4Web\PhoneCodeGrantValidator.cs
    /// &lt;summary&gt;
    /// 自定义手机验证码认证处理器
    /// &lt;/summary&gt;
    public class PhoneCodeGrantValidator : IExtensionGrantValidator
    {
        /// &lt;summary&gt;
        /// 认证方式
        /// &lt;/summary&gt;
        public string GrantType =&gt; "PhoneCodeGrantType";

        private readonly IMemoryCache _memoryCache;
        private readonly ApplicationDbContext _context;
        private readonly ILogger _logger;

        public PhoneCodeGrantValidator(
            IMemoryCache memoryCache,
            ApplicationDbContext context,
            ILogger&lt;PhoneCodeGrantValidator&gt; logger)
        {
            _memoryCache = memoryCache;
            _context = context;
            _logger = logger;
        }

        /// &lt;summary&gt;
        /// 验证自定义授权请求
        /// &lt;/summary&gt;
        /// &lt;param name="context"&gt;&lt;/param&gt;
        /// &lt;returns&gt;&lt;/returns&gt;
        public async Task ValidateAsync(ExtensionGrantValidationContext context)
        {
            try
            {
                //获取登录参数
                string phoneNumber = context.Request.Raw["PhoneNumber"];
                string verificationCode = context.Request.Raw["VerificationCode"];

                //获取手机号对应的缓存验证码
                if (!_memoryCache.TryGetValue(phoneNumber, out string cacheVerificationCode))
                {
                    //如果获取不到缓存验证码，说明手机号不存在，或者验证码过期，但是发送验证码时已经验证过手机号是存在的，所以只能是验证码过期
                    context.Result = new GrantValidationResult()
                    {
                        IsError = true,
                        Error = "验证码过期",
                    };

                    return;
                }

                if (verificationCode != cacheVerificationCode)
                {
                    context.Result = new GrantValidationResult()
                    {
                        IsError = true,
                        Error = "验证码错误",
                    };

                    return;
                }

                //根据手机号获取用户信息
                var appUser = await GetUserByPhoneNumberAsync(phoneNumber);
                if (appUser == null)
                {
                    context.Result = new GrantValidationResult()
                    {
                        IsError = true,
                        Error = "手机号无效",
                    };

                    return;
                }

                //授权通过返回
                context.Result = new GrantValidationResult(appUser.Id.ToString(), "custom");
            }
            catch (Exception ex)
            {
                context.Result = new GrantValidationResult()
                {
                    IsError = true,
                    Error = ex.Message
                };
            }
        }

        //根据手机号获取用户信息
        private async Task&lt;ApplicationUser&gt; GetUserByPhoneNumberAsync(string phoneNumber)
        {
            var appUser = await _context.Users.AsNoTracking()
                .FirstOrDefaultAsync(x =&gt; x.PhoneNumber == phoneNumber);

            return appUser;
        }

    }

D:\Software\gitee\blzid4\BlzId4Web\AspNetId4Web\PhoneCodeGrantValidator.cs

/// <summary>

/// 自定义手机验证码认证处理器

/// </summary>

public class PhoneCodeGrantValidator : IExtensionGrantValidator

{

/// <summary>

/// 认证方式

/// </summary>

public string GrantType => "PhoneCodeGrantType";

private readonly IMemoryCache _memoryCache;

private readonly ApplicationDbContext _context;

private readonly ILogger _logger;

public PhoneCodeGrantValidator(

IMemoryCache memoryCache,

ApplicationDbContext context,

ILogger<PhoneCodeGrantValidator> logger)

{

_memoryCache = memoryCache;

_context = context;

_logger = logger;

}

/// <summary>

/// 验证自定义授权请求

/// </summary>

/// <param name="context"></param>

/// <returns></returns>

public async Task ValidateAsync(ExtensionGrantValidationContext context)

{

try

{

//获取登录参数

string phoneNumber = context.Request.Raw["PhoneNumber"];

string verificationCode = context.Request.Raw["VerificationCode"];

//获取手机号对应的缓存验证码

if (!_memoryCache.TryGetValue(phoneNumber, out string cacheVerificationCode))

{

//如果获取不到缓存验证码，说明手机号不存在，或者验证码过期，但是发送验证码时已经验证过手机号是存在的，所以只能是验证码过期

context.Result = new GrantValidationResult()

{

IsError = true,

Error = "验证码过期",

};

return;

}

if (verificationCode != cacheVerificationCode)

{

context.Result = new GrantValidationResult()

{

IsError = true,

Error = "验证码错误",

};

return;

}

//根据手机号获取用户信息

var appUser = await GetUserByPhoneNumberAsync(phoneNumber);

if (appUser == null)

{

context.Result = new GrantValidationResult()

{

IsError = true,

Error = "手机号无效",

};

return;

}

//授权通过返回

context.Result = new GrantValidationResult(appUser.Id.ToString(), "custom");

}

catch (Exception ex)

{

context.Result = new GrantValidationResult()

{

IsError = true,

Error = ex.Message

};

}

//根据手机号获取用户信息

private async Task<ApplicationUser> GetUserByPhoneNumberAsync(string phoneNumber)

{

var appUser = await _context.Users.AsNoTracking()

.FirstOrDefaultAsync(x => x.PhoneNumber == phoneNumber);

return appUser;

}

把自定义手机验证码认证处理器PhoneCodeGrantValidator注册到id4认证服务。

D:\Software\gitee\blzid4\BlzId4Web\AspNetId4Web\Startup.cs
var builder = services.AddIdentityServer(options =&gt;
            {
                options.Events.RaiseErrorEvents = true;
                options.Events.RaiseInformationEvents = true;
                options.Events.RaiseFailureEvents = true;
                options.Events.RaiseSuccessEvents = true;

                // see https://identityserver4.readthedocs.io/en/latest/topics/resources.html
                options.EmitStaticAudienceClaim = true;
            })
                .AddInMemoryIdentityResources(Config.IdentityResources)
                .AddInMemoryApiScopes(Config.ApiScopes)
                .AddInMemoryClients(Config.Clients)
                .AddExtensionGrantValidator&lt;PhoneCodeGrantValidator&gt;()
                .AddInMemoryApiResources(Config.ApiResources)
                .AddAspNetIdentity&lt;ApplicationUser&gt;();

D:\Software\gitee\blzid4\BlzId4Web\AspNetId4Web\Startup.cs

var builder = services.AddIdentityServer(options =>

{

options.Events.RaiseErrorEvents = true;

options.Events.RaiseInformationEvents = true;

options.Events.RaiseFailureEvents = true;

options.Events.RaiseSuccessEvents = true;

// see https://identityserver4.readthedocs.io/en/latest/topics/resources.html

options.EmitStaticAudienceClaim = true;

})

.AddInMemoryIdentityResources(Config.IdentityResources)

.AddInMemoryApiScopes(Config.ApiScopes)

.AddInMemoryClients(Config.Clients)

.AddExtensionGrantValidator<PhoneCodeGrantValidator>()

.AddInMemoryApiResources(Config.ApiResources)

.AddAspNetIdentity<ApplicationUser>();

注意要修改一下ProfileService，如果是Code方式访问id4，可以获取到所需的claims，但是自定义的PhoneCodeGrantType方式访问id4，只能获取到nation。调试发现context.Subject也只有nation一个claim，context.Subject.FindAll(JwtClaimTypes.Name)根本无法获取到用户名等所需用户属性。我试过注解掉我写的ProfileService，id4会用内置的ProfileService，返回的claims多一点，也不满足需求。我不知道问题出在哪里，但是知道怎么解决这个问题，就是ProfileService直接返回所需的用户属性即可，不判断context.Subject。

D:\Software\gitee\mauiblazorapp\AspNetId4Web\ProfileService.cs
public async Task GetProfileDataAsync(ProfileDataRequestContext context)
        {
            using var scope = _serviceProvider.CreateScope();
            var userMgr = scope.ServiceProvider.GetRequiredService&lt;UserManager&lt;ApplicationUser&gt;&gt;();
            //按Name找不到
            //var user = await userMgr.FindByNameAsync(context.Subject.Identity.Name);
            //按Sub找得到
            string userId = context.Subject.FindFirstValue(JwtClaimTypes.Subject);
            var user = await userMgr.FindByIdAsync(userId);

            #region 非Code方式访问，context.Subject只有nation，无法获取其他claim
#if false
            var nameClaim = context.Subject.FindAll(JwtClaimTypes.Name);
            context.IssuedClaims.AddRange(nameClaim);

            var roleClaims = context.Subject.FindAll(JwtClaimTypes.Role);
            context.IssuedClaims.AddRange(roleClaims);

            var emailClaims = context.Subject.FindAll(JwtClaimTypes.Email);
            context.IssuedClaims.AddRange(emailClaims);

            var phoneNumberClaims = context.Subject.FindAll(JwtClaimTypes.PhoneNumber);
            context.IssuedClaims.AddRange(phoneNumberClaims);
#endif
            #endregion

            //手机验证码方式访问，直接获取用户的claims
            var nameClaim = new Claim(JwtClaimTypes.Name, user.UserName);
            context.IssuedClaims.Add(nameClaim);

            var roles = await userMgr.GetRolesAsync(user);
            foreach (var role in roles)
            {
                var roleClaims = new Claim(JwtClaimTypes.Role, role);
                context.IssuedClaims.Add(roleClaims);
            }

            var emailClaims = new Claim(JwtClaimTypes.Email, user.Email);
            context.IssuedClaims.Add(emailClaims);

            var phoneNumberClaims = new Claim(JwtClaimTypes.PhoneNumber, user.PhoneNumber);
            context.IssuedClaims.Add(phoneNumberClaims);

            //获取民族字段
            var nationClaim = new Claim("nation", user.Nation);
            context.IssuedClaims.Add(nationClaim);

            await Task.CompletedTask;
        }

D:\Software\gitee\mauiblazorapp\AspNetId4Web\ProfileService.cs

public async Task GetProfileDataAsync(ProfileDataRequestContext context)

{

using var scope = _serviceProvider.CreateScope();

var userMgr = scope.ServiceProvider.GetRequiredService<UserManager<ApplicationUser>>();

//按Name找不到

//var user = await userMgr.FindByNameAsync(context.Subject.Identity.Name);

//按Sub找得到

string userId = context.Subject.FindFirstValue(JwtClaimTypes.Subject);

var user = await userMgr.FindByIdAsync(userId);

#region 非Code方式访问，context.Subject只有nation，无法获取其他claim

#if false

var nameClaim = context.Subject.FindAll(JwtClaimTypes.Name);

context.IssuedClaims.AddRange(nameClaim);

var roleClaims = context.Subject.FindAll(JwtClaimTypes.Role);

context.IssuedClaims.AddRange(roleClaims);

var emailClaims = context.Subject.FindAll(JwtClaimTypes.Email);

context.IssuedClaims.AddRange(emailClaims);

var phoneNumberClaims = context.Subject.FindAll(JwtClaimTypes.PhoneNumber);

context.IssuedClaims.AddRange(phoneNumberClaims);

#endif

#endregion

//手机验证码方式访问，直接获取用户的claims

var nameClaim = new Claim(JwtClaimTypes.Name, user.UserName);

context.IssuedClaims.Add(nameClaim);

var roles = await userMgr.GetRolesAsync(user);

foreach (var role in roles)

{

var roleClaims = new Claim(JwtClaimTypes.Role, role);

context.IssuedClaims.Add(roleClaims);

}

var emailClaims = new Claim(JwtClaimTypes.Email, user.Email);

context.IssuedClaims.Add(emailClaims);

var phoneNumberClaims = new Claim(JwtClaimTypes.PhoneNumber, user.PhoneNumber);

context.IssuedClaims.Add(phoneNumberClaims);

//获取民族字段

var nationClaim = new Claim("nation", user.Nation);

context.IssuedClaims.Add(nationClaim);

await Task.CompletedTask;

}

APP增加用户管理功能

基于本系列MaBlaApp项目，把2021年DEMO的MAUI Blazor客户端项目BlaMauiApp的代码复制过来使用。

NuGet安装IdentityModel

登录用户信息类LoginUserInfo不用改。

D:\Software\gitee\blzid4\BlzId4Web\BlaMauiApp\Data\LoginUserInfo.cs

/// &lt;summary&gt;
    /// 登录用户信息
    /// &lt;/summary&gt;
    public class LoginUserInfo
    {
        /// &lt;summary&gt;
        /// 从Identity Server获取的token结果
        /// &lt;/summary&gt;
        public string AccessToken { get; set; }
        public string RefreshToken { get; set; }
        public DateTimeOffset ExpiresIn { get; set; } = DateTimeOffset.MinValue;

        /// &lt;summary&gt;
        /// 从Identity Server获取的用户信息
        /// &lt;/summary&gt;
        public string UserId { get; set; }
        public string Username { get; set; }
        public string UserRole { get; set; }

        public override string ToString() =&gt; string.IsNullOrWhiteSpace(Username) ? "没有登录用户" : $"用户[{Username}], 有效期[{ExpiresIn}]";

    }

/// <summary>

/// 登录用户信息

/// </summary>

public class LoginUserInfo

{

/// <summary>

/// 从Identity Server获取的token结果

/// </summary>

public string AccessToken { get; set; }

public string RefreshToken { get; set; }

public DateTimeOffset ExpiresIn { get; set; } = DateTimeOffset.MinValue;

/// <summary>

/// 从Identity Server获取的用户信息

/// </summary>

public string UserId { get; set; }

public string Username { get; set; }

public string UserRole { get; set; }

public override string ToString() => string.IsNullOrWhiteSpace(Username) ? "没有登录用户" : $"用户[{Username}], 有效期[{ExpiresIn}]";

}

登录用户管理器LoginUserManager稍微优化一下，之前用文件保存登录用户信息，现在改用Preferences，更加方便。

D:\Software\gitee\mauiblazorapp\MaBlaApp\Data\LoginUserManager.cs

/// &lt;summary&gt;
/// 登录用户管理器
/// &lt;/summary&gt;
public class LoginUserManager
{
    /// &lt;summary&gt;
    /// 登录用户信息
    /// &lt;/summary&gt;
    public LoginUserInfo UserInfo { get; private set; } = new LoginUserInfo();

    /// &lt;summary&gt;
    /// 登录用户信息json
    /// &lt;/summary&gt;
    public string UserInfoJson
    {
        get =&gt; Preferences.Get(nameof(UserInfoJson), "");
        set =&gt; Preferences.Set(nameof(UserInfoJson), value);
    }

    public LoginUserManager()
    {
        if (!string.IsNullOrWhiteSpace(UserInfoJson))
        {
            //如果已经存在登录用户信息json，反序列化登录用户信息
            UserInfo = JsonConvert.DeserializeObject&lt;LoginUserInfo&gt;(UserInfoJson);

            if ((UserInfo is null) || (UserInfo.ExpiresIn &lt; DateTimeOffset.Now))
            {
                //如果登录信息已经过期，清除登录用户信息
                UserInfo = new LoginUserInfo();

                //清除登录用户信息json
                UserInfoJson = "";
            }
        }
        else
        {
            //如果没有登录用户json，新建登录用户信息
            UserInfo = new LoginUserInfo();
        }

        Debug.WriteLine($"{DateTimeOffset.Now}, 初始化登录用户信息: {UserInfo}");
    }

    /// &lt;summary&gt;
    /// 用户是否已经登录？
    /// &lt;/summary&gt;
    public bool IsAuthenticated =&gt; !string.IsNullOrWhiteSpace(UserInfo.Username);

    /// &lt;summary&gt;
    /// 登录，提取登录用户信息，并保存到APP配置
    /// &lt;/summary&gt;
    public void Login(LoginUserInfo userInfo)
    {
        UserInfo = userInfo;

        UserInfoJson = JsonConvert.SerializeObject(UserInfo);

        Debug.WriteLine($"{DateTimeOffset.Now}, 用户登录: {UserInfo}");
    }

    /// &lt;summary&gt;
    /// 退出登录
    /// &lt;/summary&gt;
    public void Logout()
    {
        string userName = UserInfo.Username;

        //清除登录用户信息
        UserInfo = new LoginUserInfo();

        //清除登录用户信息json
        UserInfoJson = "";

        Debug.WriteLine($"{DateTimeOffset.Now}, 用户退出登录: {userName}");
    }
}

/// <summary>

/// 登录用户管理器

/// </summary>

public class LoginUserManager

{

/// <summary>

/// 登录用户信息

/// </summary>

public LoginUserInfo UserInfo { get; private set; } = new LoginUserInfo();

/// <summary>

/// 登录用户信息json

/// </summary>

public string UserInfoJson

{

get => Preferences.Get(nameof(UserInfoJson), "");

set => Preferences.Set(nameof(UserInfoJson), value);

}

public LoginUserManager()

{

if (!string.IsNullOrWhiteSpace(UserInfoJson))

{

//如果已经存在登录用户信息json，反序列化登录用户信息

UserInfo = JsonConvert.DeserializeObject<LoginUserInfo>(UserInfoJson);

if ((UserInfo is null) || (UserInfo.ExpiresIn < DateTimeOffset.Now))

{

//如果登录信息已经过期，清除登录用户信息

UserInfo = new LoginUserInfo();

//清除登录用户信息json

UserInfoJson = "";

}

else

{

//如果没有登录用户json，新建登录用户信息

UserInfo = new LoginUserInfo();

}

Debug.WriteLine($"{DateTimeOffset.Now}, 初始化登录用户信息: {UserInfo}");

}

/// <summary>

/// 用户是否已经登录？

/// </summary>

public bool IsAuthenticated => !string.IsNullOrWhiteSpace(UserInfo.Username);

/// <summary>

/// 登录，提取登录用户信息，并保存到APP配置

/// </summary>

public void Login(LoginUserInfo userInfo)

{

UserInfo = userInfo;

UserInfoJson = JsonConvert.SerializeObject(UserInfo);

Debug.WriteLine($"{DateTimeOffset.Now}, 用户登录: {UserInfo}");

}

/// <summary>

/// 退出登录

/// </summary>

public void Logout()

{

string userName = UserInfo.Username;

//清除登录用户信息

UserInfo = new LoginUserInfo();

//清除登录用户信息json

UserInfoJson = "";

Debug.WriteLine($"{DateTimeOffset.Now}, 用户退出登录: {userName}");

}

手机验证码登录功能模块Ids4Client改为从access token解析claims，获取用户属性。

D:\Software\gitee\mauiblazorapp\MaBlaApp\Data\Ids4Client.cs

/// &lt;summary&gt;
/// 手机验证码登录功能模块
/// &lt;/summary&gt;
public class Ids4Client
{
    private readonly HttpClient _client;

    public Ids4Client(HttpClient httpClient)
    {
        _client = httpClient;
    }

    /// &lt;summary&gt;
    /// 发送验证码到手机号
    /// &lt;/summary&gt;
    /// &lt;param name="phoneNumber"&gt;&lt;/param&gt;
    /// &lt;returns&gt;&lt;/returns&gt;
    public async Task&lt;string&gt; SendPhoneCodeAsync(string phoneNumber)
    {
        string url = $"api/PhoneCodeLogin/SendPhoneCode?phoneNumber={phoneNumber}";

        string result = await _client.GetStringAsync(url);

        return result;
    }

    /// &lt;summary&gt;
    /// 手机验证码登录
    /// &lt;/summary&gt;
    /// &lt;param name="phoneNumber"&gt;手机号&lt;/param&gt;
    /// &lt;param name="verificationCode"&gt;验证码&lt;/param&gt;
    /// &lt;returns&gt;&lt;/returns&gt;
    public async Task&lt;LoginUserInfo&gt; PhoneCodeLogin(string phoneNumber, string verificationCode)
    {
        var request = new DiscoveryDocumentRequest()
        {
            Policy = new DiscoveryPolicy()
            {
                //本地调试抓包
                RequireHttps = false
            }
        };

        //发现端点
        var discovery = await _client.GetDiscoveryDocumentAsync(request);

        if (discovery.IsError)
        {
            Debug.WriteLine($"访问Identity Server 4服务器失败, Error={discovery.Error}");
            return null;
        }

        //填写登录参数，必须跟Identity Server 4服务器Config.cs定义一致
        var requestParams = new Dictionary&lt;string, string&gt;
        {
            ["client_Id"] = "PhoneCode",
            ["client_secret"] = "PhoneCode.Secret",
            ["grant_type"] = "PhoneCodeGrantType",
            ["scope"] = "openid profile scope1 role",
            ["PhoneNumber"] = phoneNumber,
            ["VerificationCode"] = verificationCode
        };

        //请求获取token
        var tokenResponse = await _client.RequestTokenRawAsync(discovery.TokenEndpoint, requestParams);
        if (tokenResponse.IsError)
        {
            Debug.WriteLine($"请求获取token失败, Error={tokenResponse.Error}");
            return null;
        }

        string userInfoJson = "";

        //设置Http认证头
        _client.SetBearerToken(tokenResponse.AccessToken);

        //获取用户信息
        //var userInfoResponse = await _client.GetAsync(discovery.UserInfoEndpoint);
        //if (!userInfoResponse.IsSuccessStatusCode)
        //{
        //    //scope必须包含profile才能获取到用户信息
        //    //如果客户端请求scope没有profile，返回403拒绝访问
        //    Debug.WriteLine($"获取用户信息失败, StatusCode={userInfoResponse.StatusCode}");
        //}
        //else
        //{
        //    // {"sub":"d2f64bb2-789a-4546-9107-547fcb9cdfce","name":"Alice Smith","given_name":"Alice","family_name":"Smith","website":"http://alice.com","role":["Admin","Guest"],"preferred_username":"alice"}
        //    userInfoJson = await userInfoResponse.Content.ReadAsStringAsync();
        //    Debug.WriteLine($"获取用户信息成功, {userInfoJson}");
        //}
        //MAUI Blazor客户端PhoneCodeGrantType方式访问Id4，只获取到sub nation

        var jwtSecurityToken = new JwtSecurityToken(tokenResponse.AccessToken);

        LoginUserInfo loginUserInfo = new LoginUserInfo();

        loginUserInfo.AccessToken = tokenResponse.AccessToken;
        loginUserInfo.RefreshToken = tokenResponse.RefreshToken;
        loginUserInfo.ExpiresIn = DateTimeOffset.Now.AddSeconds(tokenResponse.ExpiresIn);

        //用户名
        loginUserInfo.Username = jwtSecurityToken.Claims.FirstOrDefault(x =&gt; x.Type == JwtClaimTypes.Name)?.Value;

        //用户ID
        var claimId = jwtSecurityToken.Claims.FirstOrDefault(x =&gt; x.Type == JwtClaimTypes.Subject);
        if (Guid.TryParse(claimId?.Value, out Guid userId))
            loginUserInfo.UserId = $"{userId}";

        //角色
        //id4返回的角色是字符串数组或者字符串
        var roleNames = jwtSecurityToken.Claims.Where(x =&gt; x.Type == JwtClaimTypes.Role).Select(x =&gt; x.Value);
        loginUserInfo.UserRole = string.Join(",", roleNames);

        return loginUserInfo;
    }
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

/// <summary>

/// 手机验证码登录功能模块

/// </summary>

public class Ids4Client

{

private readonly HttpClient _client;

public Ids4Client(HttpClient httpClient)

{

_client = httpClient;

}

/// <summary>

/// 发送验证码到手机号

/// </summary>

/// <param name="phoneNumber"></param>

/// <returns></returns>

public async Task<string> SendPhoneCodeAsync(string phoneNumber)

{

string url = $"api/PhoneCodeLogin/SendPhoneCode?phoneNumber={phoneNumber}";

string result = await _client.GetStringAsync(url);

return result;

}

/// <summary>

/// 手机验证码登录

/// </summary>

/// <param name="phoneNumber">手机号</param>

/// <param name="verificationCode">验证码</param>

/// <returns></returns>

public async Task<LoginUserInfo> PhoneCodeLogin(string phoneNumber, string verificationCode)

{

var request = new DiscoveryDocumentRequest()

{

Policy = new DiscoveryPolicy()

{

//本地调试抓包

RequireHttps = false

}

};

//发现端点

var discovery = await _client.GetDiscoveryDocumentAsync(request);

if (discovery.IsError)

{

Debug.WriteLine($"访问Identity Server 4服务器失败, Error={discovery.Error}");

return null;

}

//填写登录参数，必须跟Identity Server 4服务器Config.cs定义一致

var requestParams = new Dictionary<string, string>

{

["client_Id"] = "PhoneCode",

["client_secret"] = "PhoneCode.Secret",

["grant_type"] = "PhoneCodeGrantType",

["scope"] = "openid profile scope1 role",

["PhoneNumber"] = phoneNumber,

["VerificationCode"] = verificationCode

};

//请求获取token

var tokenResponse = await _client.RequestTokenRawAsync(discovery.TokenEndpoint, requestParams);

if (tokenResponse.IsError)

{

Debug.WriteLine($"请求获取token失败, Error={tokenResponse.Error}");

return null;

}

string userInfoJson = "";

//设置Http认证头

_client.SetBearerToken(tokenResponse.AccessToken);

//获取用户信息

//var userInfoResponse = await _client.GetAsync(discovery.UserInfoEndpoint);

//if (!userInfoResponse.IsSuccessStatusCode)

//{

// //scope必须包含profile才能获取到用户信息

// //如果客户端请求scope没有profile，返回403拒绝访问

// Debug.WriteLine($"获取用户信息失败, StatusCode={userInfoResponse.StatusCode}");

//}

//else

//{

// // {"sub":"d2f64bb2-789a-4546-9107-547fcb9cdfce","name":"Alice Smith","given_name":"Alice","family_name":"Smith","website":"http://alice.com","role":["Admin","Guest"],"preferred_username":"alice"}

// userInfoJson = await userInfoResponse.Content.ReadAsStringAsync();

// Debug.WriteLine($"获取用户信息成功, {userInfoJson}");

//}

//MAUI Blazor客户端PhoneCodeGrantType方式访问Id4，只获取到sub nation

var jwtSecurityToken = new JwtSecurityToken(tokenResponse.AccessToken);

LoginUserInfo loginUserInfo = new LoginUserInfo();

loginUserInfo.AccessToken = tokenResponse.AccessToken;

loginUserInfo.RefreshToken = tokenResponse.RefreshToken;

loginUserInfo.ExpiresIn = DateTimeOffset.Now.AddSeconds(tokenResponse.ExpiresIn);

//用户名

loginUserInfo.Username = jwtSecurityToken.Claims.FirstOrDefault(x => x.Type == JwtClaimTypes.Name)?.Value;

//用户ID

var claimId = jwtSecurityToken.Claims.FirstOrDefault(x => x.Type == JwtClaimTypes.Subject);

if (Guid.TryParse(claimId?.Value, out Guid userId))

loginUserInfo.UserId = $"{userId}";

//角色

//id4返回的角色是字符串数组或者字符串

var roleNames = jwtSecurityToken.Claims.Where(x => x.Type == JwtClaimTypes.Role).Select(x => x.Value);

loginUserInfo.UserRole = string.Join(",", roleNames);

return loginUserInfo;

}

注册认证功能模块。NuGet安装Microsoft.Extensions.Http

D:\Software\gitee\mauiblazorapp\MaBlaApp\MauiProgram.cs

        builder.Services.AddSingleton&lt;LoginUserManager&gt;();

        //NuGet安装Microsoft.Extensions.Http
        //访问Identity Server 4服务器的HttpClient
        builder.Services.AddHttpClient&lt;Ids4Client&gt;()
            .ConfigureHttpClient(c =&gt; c.BaseAddress = new Uri("http://localhost:5000"));//Windows调试
            //.ConfigureHttpClient(c =&gt; c.BaseAddress = new Uri("http://10.0.2.2:5000"));//安卓模拟器，AndroidManifest.xml要添加android:usesCleartextTraffic="true"支持访问http网站

builder.Services.AddSingleton<LoginUserManager>();

//NuGet安装Microsoft.Extensions.Http

//访问Identity Server 4服务器的HttpClient

builder.Services.AddHttpClient<Ids4Client>()

.ConfigureHttpClient(c => c.BaseAddress = new Uri("http://localhost:5000"));//Windows调试

//.ConfigureHttpClient(c => c.BaseAddress = new Uri("http://10.0.2.2:5000"));//安卓模拟器，AndroidManifest.xml要添加android:usesCleartextTraffic="true"支持访问http网站

主页增加显示登录用户信息，如果当前没有登录信息的话，自动跳转到登录页面。如果不需要这个功能，注解OnInitializedAsync即可。

D:\Software\gitee\mauiblazorapp\MaBlaApp\Pages\Index.razor

@page "/"
@using MaBlaApp.Data
@inject LoginUserManager loginUserManager
@inject NavigationManager NavManager

&lt;h1&gt;Hello, world!&lt;/h1&gt;

Welcome to your new app.

@*&lt;SurveyPrompt Title="How is Blazor working for you?" /&gt;*@

&lt;ul class="list-group" style="overflow:auto"&gt;
    &lt;li class="list-group-item"&gt;
        &lt;a href="testble" class="btn btn-primary btn-sm"&gt;测试低功耗蓝牙&lt;/a&gt;
    &lt;/li&gt;
    &lt;li class="list-group-item"&gt;
        &lt;a href="scanqrcode" class="btn btn-primary btn-sm"&gt;扫描二维码&lt;/a&gt;
    &lt;/li&gt;

    @if (isAuthenticated)
    {
        &lt;li class="list-group-item d-flex justify-content-between mb-1"&gt;
            &lt;small class="align-self-center"&gt;您已经登录&lt;/small&gt;
            &lt;button class="btn btn-warning btn-sm ms-2" @onclick="Logout"&gt;退出登录&lt;/button&gt;
        &lt;/li&gt;
        &lt;li class="list-group-item"&gt;
            &lt;strong&gt;用户信息&lt;/strong&gt;
        &lt;/li&gt;
        &lt;li class="list-group-item d-flex justify-content-between mb-1"&gt;
            &lt;strong&gt;AccessToken&lt;/strong&gt;
            &lt;small&gt;@userInfo.AccessToken&lt;/small&gt;
        &lt;/li&gt;
        &lt;li class="list-group-item d-flex justify-content-between mb-1"&gt;
            &lt;strong&gt;RefreshToken&lt;/strong&gt;
            &lt;small&gt;@userInfo.RefreshToken&lt;/small&gt;
        &lt;/li&gt;
        &lt;li class="list-group-item d-flex justify-content-between mb-1"&gt;
            &lt;strong&gt;ExpiresIn&lt;/strong&gt;
            &lt;small&gt;@userInfo.ExpiresIn&lt;/small&gt;
        &lt;/li&gt;
        &lt;li class="list-group-item d-flex justify-content-between mb-1"&gt;
            &lt;strong&gt;UserId&lt;/strong&gt;
            &lt;small&gt;@userInfo.UserId&lt;/small&gt;
        &lt;/li&gt;
        &lt;li class="list-group-item d-flex justify-content-between mb-1"&gt;
            &lt;strong&gt;Username&lt;/strong&gt;
            &lt;small&gt;@userInfo.Username&lt;/small&gt;
        &lt;/li&gt;
        &lt;li class="list-group-item d-flex justify-content-between mb-1"&gt;
            &lt;strong&gt;UserRole&lt;/strong&gt;
            &lt;small&gt;@userInfo.UserRole&lt;/small&gt;
        &lt;/li&gt;
    }
    else
    {
        &lt;li class="list-group-item d-flex justify-content-between mb-1"&gt;
            &lt;small class="align-self-center"&gt;您还没有登录，请先登录&lt;/small&gt;
            &lt;a class="btn btn-primary btn-sm ms-2" href="login"&gt;登录&lt;/a&gt;
        &lt;/li&gt;
    }
&lt;/ul&gt;

@code {
    private bool isAuthenticated =&gt; loginUserManager.IsAuthenticated;
    private LoginUserInfo userInfo =&gt; loginUserManager.UserInfo;

    protected override async Task OnInitializedAsync()
    {
        if (!isAuthenticated)
        {
            //没有用户登录信息，跳转到登录页面
            //NavManager.NavigateTo("/login");
        }
    }

    private void Logout()
    {
        loginUserManager.Logout();

        //直接跳转到登录页面
        //NavManager.NavigateTo("/login");
    }
}

@page "/"

@using MaBlaApp.Data

@inject LoginUserManager loginUserManager

@inject NavigationManager NavManager

<h1>Hello, world!</h1>

Welcome to your new app.

@*<SurveyPrompt Title="How is Blazor working for you?" />*@

<a href="testble" class="btn btn-primary btn-sm">测试低功耗蓝牙</a>

</li>

<a href="scanqrcode" class="btn btn-primary btn-sm">扫描二维码</a>

</li>

@if (isAuthenticated)

{

<small class="align-self-center">您已经登录</small>

</li>

</li>

<strong>AccessToken</strong>

<small>@userInfo.AccessToken</small>

</li>

<strong>RefreshToken</strong>

<small>@userInfo.RefreshToken</small>

</li>

<strong>ExpiresIn</strong>

<small>@userInfo.ExpiresIn</small>

</li>

<strong>UserId</strong>

<small>@userInfo.UserId</small>

</li>

<strong>Username</strong>

<small>@userInfo.Username</small>

</li>

<strong>UserRole</strong>

<small>@userInfo.UserRole</small>

</li>

}

else

{

<small class="align-self-center">您还没有登录，请先登录</small>

</li>

}

</ul>

@code {

private bool isAuthenticated => loginUserManager.IsAuthenticated;

private LoginUserInfo userInfo => loginUserManager.UserInfo;

protected override async Task OnInitializedAsync()

{

if (!isAuthenticated)

{

//没有用户登录信息，跳转到登录页面

//NavManager.NavigateTo("/login");

}

private void Logout()

{

loginUserManager.Logout();

//直接跳转到登录页面

//NavManager.NavigateTo("/login");

}

登录页面PhoneCodeLogin不用改。

D:\Software\gitee\mauiblazorapp\MaBlaApp\Pages\PhoneCodeLogin.razor
@page "/login"

@using MaBlaApp.Data

@layout LoginLayout

&lt;div class="d-flex justify-content-center"&gt;

    &lt;div class="card" style="width:500px"&gt;

        &lt;div class="card-header"&gt;
            &lt;h5&gt;
                手机验证码登录
            &lt;/h5&gt;
        &lt;/div&gt;

        &lt;div class="card-body"&gt;

            &lt;div class="form-group form-inline"&gt;
                &lt;label for="PhoneNumber" class="control-label"&gt;手机号&lt;/label&gt;
                &lt;input id="PhoneNumber" @bind="PhoneNumber" class="form-control" placeholder="请输入手机号" /&gt;
            &lt;/div&gt;

            &lt;div class="form-group form-inline"&gt;
                &lt;label for="VerificationCode" class="control-label"&gt;验证码&lt;/label&gt;
                &lt;input id="VerificationCode" @bind="VerificationCode" class="form-control" placeholder="请输入验证码" /&gt;
                @if (CanGetVerificationCode)
                {
                    &lt;button type="button" class="btn btn-link" @onclick="GetVerificationCode"&gt;
                        获取验证码
                    &lt;/button&gt;
                }
                else
                {
                    &lt;label&gt;@GetVerificationCodeMsg&lt;/label&gt;
                }
            &lt;/div&gt;

        &lt;/div&gt;

        &lt;div class="card-footer"&gt;
            &lt;button type="button" class="btn btn-primary" @onclick="Login"&gt;
                登录
            &lt;/button&gt;
        &lt;/div&gt;

    &lt;/div&gt;
&lt;/div&gt;

@code {

    [Inject]
    private Ids4Client ids4Client { get; set; }

    [Inject]
    private NavigationManager navigationManager { get; set; }

    [Inject]
    private LoginUserManager loginUserManager { get; set; }

    private string PhoneNumber;

    private string VerificationCode;

    //获取验证码按钮当前状态
    private bool CanGetVerificationCode = true;

    private string GetVerificationCodeMsg;

    //获取验证码
    private async void GetVerificationCode()
    {
        if (CanGetVerificationCode)
        {
            //发送验证码到手机号
            string result = await ids4Client.SendPhoneCodeAsync(PhoneNumber);

            if (result != "发送验证码成功")
                return;

            CanGetVerificationCode = false;

            //1分钟倒计时
            for (int i = 60; i &gt;= 0; i--)
            {
                GetVerificationCodeMsg = $"获取验证码({i})";

                await Task.Delay(1000);

                //通知页面更新
                StateHasChanged();
            }

            CanGetVerificationCode = true;

            //通知页面更新
            StateHasChanged();
        }
    }

    //登录
    private async void Login()
    {
        //手机验证码登录
        var userInfo = await ids4Client.PhoneCodeLogin(PhoneNumber, VerificationCode);

        //登录
        loginUserManager.Login(userInfo);

        //跳转回主页
        navigationManager.NavigateTo("/");
    }
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

D:\Software\gitee\mauiblazorapp\MaBlaApp\Pages\PhoneCodeLogin.razor

@page "/login"

@using MaBlaApp.Data

@layout LoginLayout

<h5>

手机验证码登录

</h5>

</div>

</div>

@if (CanGetVerificationCode)

{

获取验证码

</button>

}

else

{

<label>@GetVerificationCodeMsg</label>

}

</div>

</button>

</div>

@code {

[Inject]

private Ids4Client ids4Client { get; set; }

[Inject]

private NavigationManager navigationManager { get; set; }

[Inject]

private LoginUserManager loginUserManager { get; set; }

private string PhoneNumber;

private string VerificationCode;

//获取验证码按钮当前状态

private bool CanGetVerificationCode = true;

private string GetVerificationCodeMsg;

//获取验证码

private async void GetVerificationCode()

{

if (CanGetVerificationCode)

{

//发送验证码到手机号

string result = await ids4Client.SendPhoneCodeAsync(PhoneNumber);

if (result != "发送验证码成功")

return;

CanGetVerificationCode = false;

//1分钟倒计时

for (int i = 60; i >= 0; i--)

{

GetVerificationCodeMsg = $"获取验证码({i})";

await Task.Delay(1000);

//通知页面更新

StateHasChanged();

}

CanGetVerificationCode = true;

//通知页面更新

StateHasChanged();

}

//登录

private async void Login()

{

//手机验证码登录

var userInfo = await ids4Client.PhoneCodeLogin(PhoneNumber, VerificationCode);

//登录

loginUserManager.Login(userInfo);

//跳转回主页

navigationManager.NavigateTo("/");

}

测试登录

把服务端AspNetId4Web项目和客户端MaBlaApp项目跑起来。登录页面只是遮盖了index主页，还是可以切换到其他页面。

为了解决这个问题，登录页面要引用一个遮盖MainPage的LoginLayout。

@inherits LayoutComponentBase

&lt;div class="m-4"&gt;
    @Body
&lt;/div&gt;

@code {

}

@inherits LayoutComponentBase

@Body

</div>

@code {

}

登录页面引用这个LoginLayout布局。

D:\Software\gitee\mauiblazorapp\MaBlaApp\Pages\PhoneCodeLogin.razor

@layout LoginLayout

再次运行，登录页面遮盖了整个APP，满足需求。

同时运行AspNetId4Web认证服务器和MaBlaApp客户端项目，输入种子用户alice的手机号13512345001，获取验证码，在AspNetId4Web项目的控制台可以看到验证码，填写到MaBlaApp网页，即可登录。登录成功后，可以显示获取到的用户属性。

查看AspNetId4Web项目控制台输出：

[16:58:37 Information] IdentityServer4.Validation.TokenRequestValidator

Token request validation success, {"ClientId": "PhoneCode", "ClientName": "PhoneCode", "GrantType": "PhoneCodeGrantType", "Scopes": "openid profile role scope1", "AuthorizationCode": null, "RefreshToken": null, "UserName": null, "AuthenticationContextReferenceClasses": null, "Tenant": null, "IdP": null, "Raw": {"client_Id": "PhoneCode", "client_secret": "***REDACTED***", "grant_type": "PhoneCodeGrantType", "scope": "openid profile scope1 role", "PhoneNumber": "13512345001", "VerificationCode": "2747"}, "$type": "TokenRequestValidationLog"}

[16:58:37 Debug] IdentityServer4.Services.DefaultClaimsService

Getting claims for access token for client: PhoneCode

[16:58:37 Debug] IdentityServer4.Services.DefaultClaimsService

Getting claims for access token for subject: d2f64bb2-789a-4546-9107-547fcb9cdfce

[16:58:38 Information] IdentityServer4.Events.DefaultEventService

{"ClientId": "PhoneCode", "ClientName": "PhoneCode", "RedirectUri": null, "Endpoint": "Token", "SubjectId": "d2f64bb2-789a-4546-9107-547fcb9cdfce", "Scopes": "openid profile role scope1", "GrantType": "PhoneCodeGrantType", "Tokens": [{"TokenType": "access_token", "TokenValue": "****Kenw", "$type": "Token"}], "Category": "Token", "Name": "Token Issued Success", "EventType": "Success", "Id": 2000, "Message": null, "ActivityId": "0HMOIATNCVSRE:00000005", "TimeStamp": "2023-02-19T08:58:38.0000000Z", "ProcessId": 17392, "LocalIpAddress": "::1:5000", "RemoteIpAddress": "::1", "$type": "TokenIssuedSuccessEvent"}

[16:58:38 Debug] IdentityServer4.Endpoints.TokenEndpoint

Token request success.

MaBlaApp网页显示用户属性：

DEMO代码地址：https://gitee.com/woodsun/mauiblazorapp

声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。

MAUI Blazor学习7-实现登录跳转页面

id4认证服务端支持手机号验证码登录方案

APP增加用户管理功能

测试登录

相关推荐：

相关文章

C# JArray 的排序

wordpress rest api 请求wp-json/wp/v2/posts 返回404问题的解决方向

Moshou 媒体/新闻/博客 wordpress资讯主题

WordPress刚安装后报502以及后台报502的解决方法

近期文章