今天的內容很簡單，1分鐘就能看完，5分鐘就能學會，但是卻是在我們平時開發中必須要學會的一個小知識點，我就不讓大家走彎路了，直接看操作。

在平時的IdentityServer4開發中呢，我們都是根據官方的Demo來操作一遍，或者是根據那個快速啟動頁面跑一跑，也就沒有做其他的擴展，本文說的是登錄，大家肯定認為這個是最簡單的了，直接跳轉，然后提交表單即可，但是就在要睡覺的時候，我想到了QQ或者其他登錄頁都是有一個oauth的字樣，看著很專業的樣子????，我也想換掉，目前的太程序員化了，說干就干，坐起來打開了電腦，需求如下：

目前的登錄地址是：
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參數的名稱。默認為returnUrlErrorIdParameter = "errorId", //設置傳遞給錯誤頁面的錯誤消息ID參數的名稱。缺省為errorIdCustomRedirectReturnUrlParameter = "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<ApplicationUser> _userManager;private readonly RoleManager<ApplicationRole> _roleManager;private readonly SignInManager<ApplicationUser> _signInManager;private readonly IIdentityServerInteractionService _interaction;private readonly IClientStore _clientStore;private readonly IAuthenticationSchemeProvider _schemeProvider;private readonly IEventService _events;public Oauth2Controller(UserManager<ApplicationUser> userManager,RoleManager<ApplicationRole> roleManager,SignInManager<ApplicationUser> signInManager,IIdentityServerInteractionService interaction,IClientStore clientStore,IAuthenticationSchemeProvider schemeProvider,IEventService events){_userManager = userManager;_roleManager = roleManager;_signInManager = signInManager;_interaction = interaction;_clientStore = clientStore;_schemeProvider = schemeProvider;_events = events;}/// <summary>/// Show login page/// </summary>[HttpGet]public async Task<IActionResult> authorize(string returnUrl){// build a model so we know what to show on the login pagevar vm = await BuildLoginViewModelAsync(returnUrl);if (vm.IsExternalLoginOnly){// we only have one option for logging in and it's an external providerreturn await ExternalLogin(vm.ExternalLoginScheme, returnUrl);}return View(vm);} }

具體的和之前的是一樣的，只不過拷貝過去了而已，這里不多說，發布查看效果吧。

打包發布

修改了上面三個小地方以后，我們提交我們的代碼，最終實現了目的，登錄頁跳轉看著專業了一丟丟：

打完手工，其實說白了，整篇文章就是一個小技巧，看看就明白了，但是這里要說一下，修改完以后，一定要多多的做測試，聯調，或者讓群里小伙伴一起檢驗。

最后還是要說一下，如果你有前后端分離的開源項目，可以聯系我，我幫你推薦一下，然后讓更多的人都能學到，看到，了解到你。

???? 點擊閱讀原文，查看Admin效果

總結

以上是生活随笔為你收集整理的【实战 Ids4】小技巧篇：自定义登录页操作的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。