Blazor Server访问Identity Server 4-手机验证码登录

手机验证码登录是目前非常主流的登录方式，毕竟，谁记得住那么多账号密码呢？

相比传统的账号密码登录页面，手机验证码登录页面前后台交互比较多，有一个动态提示倒计时的功能。用Blazor Server实现一个手机验证码登录页面不难，但是如果想要兼容Identity Server 4登录，还是有点麻烦的。

我曾经尝试过创建一个Blazor Server项目，集成Identity Server 4类库，结果发现无法实现登录跳转功能，所以还是要基于MVC项目去实现Identity Server 4服务器。但是我不想写JavaScript代码，我的子系统都是Blazor Server项目，我可以写一个登录页面组件类库，让所有Blazor Server子系统项目去引用即可。这个方案不用写JavaScript代码，但是要把GrantTypes.Code认证方式改为自定义验证登录。

我的系统解决方案中还有PC软件和移动APP客户端，他们也要用手机验证码方式访问Identity Server 4服务器登录，因此，编写一个手机验证码自定义登录模块还是非常有必要的。

准备种子数据

继续沿用之前的AspNetId4Web项目。

Blazor Server访问Identity Server 4单点登录2-集成Asp.Net角色

给种子用户增加手机号，为了简单起见，直接删除AspIdUsers.db，修改Main函数，每次运行都执行SeedData.EnsureSeedData，context.Database.Migrate判断到没有AspIdUsers.db就会自动创建数据库。

//if (seed)
{
    Log.Information("Seeding database...");
    var config = host.Services.GetRequiredService<IConfiguration>();
    var connectionString = config.GetConnectionString("DefaultConnection");
    SeedData.EnsureSeedData(connectionString);
    Log.Information("Done seeding database.");
    //return 0;
}

　　

给种子数据加手机号

alice = new ApplicationUser
{
    UserName = "alice",
    Email = "AliceSmith@email.com",
    EmailConfirmed = true,
    PhoneNumber = "13512345001",
};

　　

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

自定义手机验证码认证处理流程很简单，就是根据手机号，去MemoryCache查找验证码。MemoryCache自带过期管理，验证码有效期可以设置为10分钟。

    /// <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;
        }

    }

　　

startup增加注册PhoneCodeGrantValidator。

            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>();

　　

config增加一个客户端配置，允许的认证方式就是自定义的手机验证码方式。

                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", }
                },

　　

增加获取手机验证码的Web Api

客户端需要首先访问Web Api发送手机验证码短信，然后再通过自定义手机验证码方式登录，这里写一个模拟发送验证码短信的功能，创建验证码之后丢到MemoryCache里缓存10分钟。

        /// <summary>
        /// 发送验证码到手机号
        /// </summary>
        /// <param name="phoneNumber"></param>
        /// <returns></returns>
        [ProducesResponseType(StatusCodes.Status200OK)]
        [AllowAnonymous]
        [HttpGet("SendPhoneCode")]
        public async Task<string> SendPhoneCode(string phoneNumber)
        {
            //根据手机号获取用户信息
            var appUser = await GetUserByPhoneNumberAsync(phoneNumber);
            if (appUser == null)
            {
                return "手机号无效";
            }

            //发送验证码到手机号，需要调用短信服务平台Web Api，这里模拟发送
            string verificationCode = (new Random()).Next(1000, 9999).ToString();

            //验证码缓存10分钟
            _memoryCache.Set(phoneNumber, verificationCode, TimeSpan.FromMinutes(10));

            _logger.LogInformation($"发送验证码{verificationCode}到手机号{phoneNumber}, 有效期{DateTime.Now.AddMinutes(10)}");

            return "发送验证码成功";
        }

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

            return appUser;
        }

　　

给AspNetId4Web项目增加一个http端口，便于调试，修改launchSettings.json

      "applicationUrl": "https://localhost:5001;http://localhost:5000"

F5调试运行AspNetId4Web，打开浏览器，测试一下获取手机验证码Web Api

http://localhost:5000/api/PhoneCodeLogin/SendPhoneCode?phoneNumber=13512345001

可以看到AspNetId4Web控制台打印了发送的验证码，确认功能正确。

[10:44:24 Information] AspNetId4Web.Controllers.PhoneCodeLoginController

发送验证码6745到手机号13512345001, 有效期2021/9/21 10:54:24

至此，Identity Server 4支持手机验证码的功能添加完毕。

增加手机验证码登录Blazor Server客户端

参考之前的BlzWeb1新建Blazor Server网站项目PhoneCodeLoginBlzWeb，在Index主页提供登录按钮，显示登录用户信息。

增加手机验证码登录功能模块Ids4Client。Identity Server 4提供了IdentityModel类库，封装了通过HttpClient访问Identity Server 4服务器的代码，可以简化客户端代码。

    /// <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<(TokenResponse tokenResponse, string userInfoJson)> PhoneCodeLogin(string phoneNumber, string verificationCode)
        {
            var request = new DiscoveryDocumentRequest()
            {
                Policy = new DiscoveryPolicy()
                {
                    //本地调试抓包
                    RequireHttps = false
                }
            };

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

            if (discovery.IsError)
            {
                Console.WriteLine($"访问Identity Server 4服务器失败, Error={discovery.Error}");
                return (null, 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)
            {
                Console.WriteLine($"请求获取token失败, Error={tokenResponse.Error}");
                return (null, null);
            }

            string userInfoJson = "";

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

            //获取用户信息
            var userInfoResponse = await _client.GetAsync(discovery.UserInfoEndpoint);
            if (!userInfoResponse.IsSuccessStatusCode)
            {
                //scope必须包含profile才能获取到用户信息
                //如果客户端请求scope没有profile，返回403拒绝访问
                Console.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();
                Console.WriteLine($"获取用户信息成功, {userInfoJson}");
            }

            return (tokenResponse, userInfoJson);
        }
    }

　　

在startup注册它

            //访问Identity Server 4服务器的HttpClient
            services.AddHttpClient<Ids4Client>()
                .ConfigureHttpClient(c => c.BaseAddress = new Uri("http://localhost:5000"));

　　

Startup注册认证方案只有cookies

            //默认采用cookie认证方案
            services.AddAuthentication("cookies")
                //配置cookie认证
                .AddCookie("cookies");

　　

添加一个PhoneCodeLogin.razor手机验证码登录页面，拿到token和用户信息json之后，需要跳转到MVC控制器去登录SignIn，如果直接登录razor页面SignIn，会报错Headers are read-only, response has already started，很烦。

@page "/phonecodelogin"

@using PhoneCodeLoginBlzWeb.Data

<div class="card" style="500px">

    <div class="card-header">
        <h5>
            手机验证码登录
        </h5>
    </div>

    <div class="card-body">

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

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

    </div>

    <div class="card-footer">
        <button type="button" class="btn btn-primary" @onclick="Login">
            登录
        </button>
    </div>

</div>

@code {

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

    [Inject]
    private IJSRuntime jsRuntime { 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 (tokenResponse, userInfoJson) = await ids4Client.PhoneCodeLogin(PhoneNumber, VerificationCode);

        string tokenResponseJson = Newtonsoft.Json.JsonConvert.SerializeObject(tokenResponse);

        string uri = $"Account/Login?tokenResponseJson={Uri.EscapeDataString(tokenResponseJson)}&userInfoJson={Uri.EscapeDataString(userInfoJson)}";

        await jsRuntime.InvokeVoidAsync("window.location.assign", uri);
    }
}

　　

添加AccountController控制器，注意用户信息Json的用户名和角色名是需要转换的，必须使用Asp.Net内置的角色名http://schemas.microsoft.com/ws/2008/06/identity/claims/role，不能使用Identity Server 4简化的角色名role，否则razor页面的授权不对。

public class AccountController : Controller
    {
        private readonly ILogger _logger;

        public AccountController(ILogger<AccountController> logger)
        {
            _logger = logger;
        }

        /// <summary>
        /// 解析token创建用户clamis，SignIn到当前会话实现登录
        /// </summary>
        /// <param name="tokenResponseJson">Identity Server 4服务器返回包含token的响应</param>
        /// <param name="userInfoJson">用户信息Json</param>
        /// <param name="returnUrl">登录成功后，返回之前的网页路由</param>
        /// <returns></returns>
        [HttpGet]
        public async Task<IActionResult> Login(string tokenResponseJson, string userInfoJson, string returnUrl = "")
        {
            if (string.IsNullOrEmpty(returnUrl))
                returnUrl = "/";

            //TokenResponse属性都是只读的，无法反序列化
            //TokenResponse tokenResponse = System.Text.Json.JsonSerializer.Deserialize<TokenResponse>(tokenResponseJson);
            dynamic tokenResponse = Newtonsoft.Json.JsonConvert.DeserializeObject(tokenResponseJson);
            var jwtSecurityToken = new JwtSecurityToken($"{tokenResponse.AccessToken}");

            var claims = jwtSecurityToken.Claims.ToList();

            dynamic userInfo = Newtonsoft.Json.JsonConvert.DeserializeObject(userInfoJson);

            //提取name
            //claims.Add(new Claim(JwtClaimTypes.Name, $"{userInfo.name}"));
            claims.Add(new Claim(ClaimTypes.Name, $"{userInfo.name}"));

            //提取角色
            //id4返回的角色是字符串数组或者字符串，blazor server的角色是字符串，需要转换，不然无法获取到角色
            var roleElement = userInfo.role;
            if (roleElement is Newtonsoft.Json.Linq.JArray roleAry)
            {
                var roles = roleAry.Select(e => e.ToString());
                //claims.AddRange(roles.Select(r => new Claim(JwtClaimTypes.Role, r)));
                claims.AddRange(roles.Select(r => new Claim(ClaimTypes.Role, r)));
            }
            else
            {
                //claims.Add(new Claim(JwtClaimTypes.Role, roleElement.ToString()));
                claims.Add(new Claim(ClaimTypes.Role, roleElement.ToString()));
            }

            var claimsIdentity = new ClaimsIdentity(claims, "Cookies");
            var claimsPrincipal = new ClaimsPrincipal(claimsIdentity);

            var properties = new AuthenticationProperties
            {
                //记住登录状态
                IsPersistent = true,

                RedirectUri = returnUrl
            };

            await HttpContext.SignInAsync("Cookies", claimsPrincipal, properties);

            _logger.LogInformation($"token登录, returnUrl={returnUrl}");

            return Redirect(returnUrl);
        }

        /// <summary>
        /// 退出登录
        /// </summary>
        /// <returns></returns>
        [HttpGet]
        public async Task<IActionResult> Logout()
        {
            var userName = HttpContext.User.Identity?.Name;

            _logger.LogInformation($"{userName}退出登录。");

            //删除登录状态cookies
            await HttpContext.SignOutAsync("Cookies");

            return Redirect("/");
        }
    }

　　

修改App.Razor，如果当前页面需要认证，就自动跳转到手机验证码razor登录页面

@inject IJSRuntime _jsRuntime
@inject NavigationManager _navManager

<CascadingAuthenticationState>

    <Router AppAssembly="@typeof(Program).Assembly" PreferExactMatches="@true">
        <Found Context="routeData">
            <AuthorizeRouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)">
                <NotAuthorized>
                    @if (!context.User.Identity.IsAuthenticated)
                    {
                        //如果用户未登录，跳转到手机验证码登录页面，发起登录
                        _jsRuntime.InvokeVoidAsync("window.location.assign", $"phonecodelogin?returnUrl={Uri.EscapeDataString(_navManager.Uri)}");
                    }
                    else
                    {
                        <h4 class="text-danger">Sorry</h4>
                        <p>You're not authorized to reach this page.</p>
                        <p>You may need to log in as a different user.</p>
                        <a href="/account/login" class="btn btn-primary">Login</a>
                    }
                </NotAuthorized>
            </AuthorizeRouteView>
        </Found>
        <NotFound>
            <LayoutView Layout="@typeof(MainLayout)">
                <p>Sorry, there's nothing at this address.</p>
            </LayoutView>
        </NotFound>
    </Router>
</CascadingAuthenticationState>

　　

同时运行AspNetId4Web项目和PhoneCodeLoginBlzWeb项目，输入alice的手机号，获取验证码

 

然后查看AspNetId4Web项目的控制台信息，获得模拟的验证码，进行登录。

可以看到，成功获取都了alice的用户角色等信息，测试Counter和Fetch Data页面授权都是对的。

 

查看Identity Server 4控制台，可以看到客户端获取的token的信息，以及用户资料的信息。

 

写了这么多代码，感觉还是很麻烦的，从Identity Server 4服务器拿到了登录的token和用户信息，还要自行解析、拼接再写入浏览器cookies，跳来跳去，累死了。如果可以直接用token对Blazor Server客户端的razor页面进行认证和授权，能够省很多事。

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