【实战 Ids4】小技巧篇：自定义登录页操作
在平时的IdentityServer4开发中呢，我们都是根据官方的Demo来操作一遍，或者是根据那个快速启动页面跑一跑，也就没有做其他的扩展，本文说的是登录，大家肯定认为这个是最简单的了，直接跳转，然后提交表单即可，但是就在要睡觉的时候，我想到了QQ或者其他登录页都是有一个oauth的字样，看着很专业的样子:grinning:，我也想换掉，目前的太程序员化了，说干就干，坐起来打开了电脑，需求如下：
目前的登录地址是：
https://ids.neters.club/ Account/Login
?ReturnUrl=%2Fgrants
我想要换成这样的效果：
https://ids.neters.club/
oauth2/authorize
?ReturnUrl=%2Fgrants
如果说你已经会了呢，可以不用看了；
如果说自己想先动手实践一下，先关掉本文窗口；
如果两者都不是，就跟着我往下走吧，很简单。
自定义登录页样式
这个其实不是本文的内容，但是和登录页有关系，我还是说一下吧，登录页的自定义样式很简单，甚至整个页面的布局也可以改变，别说css文件了，就是很普通的MVC操作，甚至也可以搞成前后端分离的形式，你没有听错，就是用
前后端分离来设计Ids4认证中心项目
。
不过这个感觉不是很有必要，还是把精力放到业务上吧，我这里简单的做了下样式处理，可以和原版的坐下对比：
(官方默认版本)
（我自定义模板样式）
（群内网友的项目，挺好）
为什么要说这个呢，是因为我们既然要做统一的授权认证中心，一个好看的登录页是很有必要的，毕竟以后很多个项目都要共用这一个，安全是第一位，美貌也不能丢，我的审美就不行，等春节在家优化优化。
自定义登录路由
刚刚我们说完了登录样式，那就到了重头戏，自定义登录路由地址，官方给我们的地址是：
/Account/Login
这个看着也真的有点儿硬了，而且我看很多的公司认证项目都是自定义的，那路径肯定我们也要修改修改，翻看了下官方资料，发现很简单，还记得我们上一篇说到的自定义跳转域名么，本来是localhost，后来我们配置了ids.neters.club，没错，还是那个地方：
services.AddIdentityServer(options => { options.Events.RaiseErrorEvents = true; options.Events.RaiseInformationEvents = true; options.Events.RaiseFailureEvents = true; options.Events.RaiseSuccessEvents = true;
options.IssuerUri = "https://ids.neters.club"; options.PublicOrigin = "https://ids.neters.club"; // 就是这里，自定义用户交互选项 options.UserInteraction = new UserInteractionOptions { LoginUrl = "/oauth2/authorize",//登录地址 LogoutUrl = "/Account/Logout",//退出地址 ConsentUrl = "/Account/Consent",//允许授权同意页面地址 ErrorUrl = "/Account/Error", //错误页面地址 LoginReturnUrlParameter = "ReturnUrl",//设置传递给登录页面的返回URL参数的名称。默认为returnUrl LogoutIdParameter = "logoutId", //设置传递给注销页面的注销消息ID参数的名称。缺省为logoutId ConsentReturnUrlParameter = "ReturnUrl", //设置传递给同意页面的返回URL参数的名称。默认为returnUrl ErrorIdParameter = "errorId", //设置传递给错误页面的错误消息ID参数的名称。缺省为errorId CustomRedirectReturnUrlParameter = "ReturnUrl", //设置从授权端点传递给自定义重定向的返回URL参数的名称。默认为returnUrl CookieMessageThreshold = 5 //由于浏览器对Cookie的大小有限制，设置Cookies数量的限制，有效的保证了浏览器打开多个选项卡，一旦超出了Cookies限制就会清除以前的Cookies值 }; })
这里的配置是没有走数据库的，只有config.cs里的会配置到数据，从这里我们可以看出
他们的一贯套路，就是走配置
，不过如果不了解，配置多了就会乱，这不，说来就来了：
用这种办法，在InMemory模式下很正常，我使用是内存模式的，然后也跳转到了指定的登陆页面：oauth2/authorize，欣喜雀跃，替换到我的正式项目，不！！行！！。
然后看官网也没错呀，大约时间过去了十多分钟，我想到了一个问题。
修改Identity应用配置
这个是个小知识点，如果你对Aspnet core的Identity不熟悉的话，可能不会来得及考虑这个问题，因为我的项目是用的Identity来处理应用数据这一块的，如果你公司的项目是自定义的话，那就不用考虑这个问题了，我也打算在公司尝试使用自定义仓储的模式，替换掉微软官方推荐的Identity类来操作用户应用数据。
直接修改代码吧：
services.ConfigureApplicationCookie(options => { options.AccessDeniedPath = new PathString("/Account/AccessDenied"); options.Cookie.Name = "Cookie"; options.Cookie.HttpOnly = true; options.ExpireTimeSpan = TimeSpan.FromMinutes(720); options.LoginPath = new PathString("/oauth2/authorize"); options.ReturnUrlParameter = CookieAuthenticationDefaults.ReturnUrlParameter; options.SlidingExpiration = true; });
具体的每一个啥意思，从字面意思上我们也能看的出来，我这里只用到了LoginPath这一个属性操作，这下应该没有问题了吧。
添加新控制器
既然我们新设计了登录页，那我们就必须创建一个新的控制器OAuth2Controller，当然你可以直接修改下原来的AccountController进行重命名，我采用的还是新增，现在开发基本都是对内修改禁止的思路，不过我新增这个
也不能直接粘贴复制，要重构封装
，还需要进一步优化中，优化这一块以后就不写到文章了，这里一笔带过了：
public class Oauth2Controller : Controller { private readonly UserManager _userManager; private readonly RoleManager _roleManager; private readonly SignInManager _signInManager; private readonly IIdentityServerInteractionService _interaction; private readonly IClientStore _clientStore; private readonly IAuthenticationSchemeProvider _schemeProvider; private readonly IEventService _events;
public Oauth2Controller( UserManager userManager, RoleManager roleManager, SignInManager signInManager, IIdentityServerInteractionService interaction, IClientStore clientStore, IAuthenticationSchemeProvider schemeProvider, IEventService events) { _userManager = userManager; _roleManager = roleManager; _signInManager = signInManager; _interaction = interaction; _clientStore = clientStore; _schemeProvider = schemeProvider; _events = events; }
////// Show login page /// [HttpGet] public async Task authorize(string returnUrl) { // build a model so we know what to show on the login page var vm = await BuildLoginViewModelAsync(returnUrl);
if (vm.IsExternalLoginOnly) { // we only have one option for logging in and it's an external provider return await ExternalLogin(vm.ExternalLoginScheme, returnUrl); }
return View(vm); } }
具体的和之前的是一样的，只不过拷贝过去了而已，这里不多说，发布查看效果吧。
打包发布
修改了上面三个小地方以后，我们提交我们的代码，最终实现了目的，登录页跳转看着专业了一丢丢：
打完手工，其实说白了，整篇文章就是一个小技巧，看看就明白了，但是这里要说一下，修改完以后，一定要多多的做测试，联调，或者让群里小伙伴一起检验。
最后还是要说一下，如果你有前后端分离的开源项目，可以联系我，我帮你推荐一下，然后让更多的人都能学到，看到，了解到你。
:point_down: 点击阅读原文，查看Admin效果
About The Author
