【实战 Ids4】小技巧篇:自定义登录页操作
今天的內容很簡單,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認證中心項目。
不過這個感覺不是很有必要,還是把精力放到業務上吧,我這里簡單的做了下樣式處理,可以和原版的坐下對比:
(官方默認版本)
(我自定義模板樣式)
(群內網友的項目,挺好)
為什么要說這個呢,是因為我們既然要做統一的授權認證中心,一個好看的登錄頁是很有必要的,畢竟以后很多個項目都要共用這一個,安全是第一位,美貌也不能丟,我的審美就不行,等春節在家優化優化。
自定義登錄路由
剛剛我們說完了登錄樣式,那就到了重頭戲,自定義登錄路由地址,官方給我們的地址是:
這個看著也真的有點兒硬了,而且我看很多的公司認證項目都是自定義的,那路徑肯定我們也要修改修改,翻看了下官方資料,發現很簡單,還記得我們上一篇說到的自定義跳轉域名么,本來是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類來操作用戶應用數據。
直接修改代碼吧:
具體的每一個啥意思,從字面意思上我們也能看的出來,我這里只用到了LoginPath這一個屬性操作,這下應該沒有問題了吧。
添加新控制器
既然我們新設計了登錄頁,那我們就必須創建一個新的控制器OAuth2Controller,當然你可以直接修改下原來的AccountController進行重命名,我采用的還是新增,現在開發基本都是對內修改禁止的思路,不過我新增這個也不能直接粘貼復制,要重構封裝,還需要進一步優化中,優化這一塊以后就不寫到文章了,這里一筆帶過了:
具體的和之前的是一樣的,只不過拷貝過去了而已,這里不多說,發布查看效果吧。
打包發布
修改了上面三個小地方以后,我們提交我們的代碼,最終實現了目的,登錄頁跳轉看著專業了一丟丟:
打完手工,其實說白了,整篇文章就是一個小技巧,看看就明白了,但是這里要說一下,修改完以后,一定要多多的做測試,聯調,或者讓群里小伙伴一起檢驗。
最后還是要說一下,如果你有前后端分離的開源項目,可以聯系我,我幫你推薦一下,然后讓更多的人都能學到,看到,了解到你。
???? 點擊閱讀原文,查看Admin效果
總結
以上是生活随笔為你收集整理的【实战 Ids4】小技巧篇:自定义登录页操作的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: dotnet 将C#编译为wasm让前端
- 下一篇: 过去10年技术人员有哪些状态改变?