用IdentityServer3的時候登錄如果采用Post方式大家會發現有中間有一個等待Submit空白頁面，界面不友好，現在我想把這個修改自定義的頁面Loading
在Identityserver3 修改源碼中的 FormPostResponse.html 會發現還有一個FormPostResponse.js
/* * Copyright (c) Dominick Baier, Brock Allen. All rights reserved. * see license */ (function () { document.forms[0].submit(); })();
可以在頁面做處理
<form method="post" action="{redirect_uri}"> {fields} </form> <script src="{rootUrl}/assets/app.FormPostResponse.js"></script>
那么在Identityserver4中怎么修改呢？
不難發現源碼中沒有相關頁面和JS,那么這個東西在哪里呢？
其實在源碼中的AuthorizeResult類中
private string _FormPostHtml = "<div class='sk-three-bounce'><div class='sk-child sk-bounce1'></div><div class='sk-child sk-bounce2'></div><div class='sk-child sk-bounce3'></div></div><form method='post' action='{uri}'>{body}</form><script>(function(){document.forms[0].submit();})();</script>"; private string GetFormPostHtml() { var html = _FormPostHtml; html = html.Replace("{uri}", Response.Request.RedirectUri); html = html.Replace("{body}", Response.ToNameValueCollection().ToFormPost()); return html; }
這里添加上自己的代碼
修改后的代碼：
private string stylecss = @"<!DOCTYPE html> <html> <head> <title>LYM-IDR4</title> <meta http-equiv='Page-Enter' content='progid:DXImageTransform.Microsoft.Pixelate(Duration=2)' /> <meta http-equiv='Page-Exit' content='progid:DXImageTransform.Microsoft.Pixelate(Duration=2)' /> <meta name='viewport' content='width=device-width, initial-scale=1.0' /> <link href='/css/loginloading.css' rel='stylesheet'> </head> <body>"; private const string _FormPostHtml = "<div class='sk-three-bounce'><div class='sk-child sk-bounce1'></div><div class='sk-child sk-bounce2'></div><div class='sk-child sk-bounce3'></div></div><form method='post' action='{uri}'>{body}</form><script>(function(){document.forms[0].submit();})();</script>"; private string GetFormPostHtml() { var html = _FormPostHtml; html = html.Replace("{uri}", Response.Request.RedirectUri); html = html.Replace("{body}", Response.ToNameValueCollection().ToFormPost()); return stylecss + html+"</body></html>"; }
這里會有坑了，發現不管是寫內聯樣式還是外鏈樣式都沒有效果，那是因為
private void AddSecurityHeaders(HttpContext context) { var formOrigin = Response.Request.RedirectUri.GetOrigin(); var csp = $"default-src 'self'; frame-ancestors {formOrigin}; form-action {formOrigin}; script-src 'sha256-VuNUSJ59bpCpw62HM2JG/hCyGiqoPN3NqGvNXQPU+rY='; "; if (!context.Response.Headers.ContainsKey("Content-Security-Policy")) { context.Response.Headers.Add("Content-Security-Policy", csp); } if (!context.Response.Headers.ContainsKey("X-Content-Security-Policy")) { context.Response.Headers.Add("X-Content-Security-Policy", csp); } var referrer_policy = "no-referrer"; if (!context.Response.Headers.ContainsKey("Referrer-Policy")) { context.Response.Headers.Add("Referrer-Policy", referrer_policy); } }
中的
default-src 'self' 源碼中是 none，如果是樣式需要內聯支持 所以這里我改成了self ,
下面來登錄進入等待頁面查看：
效果已經出來了，OK
改成這樣寫
private const string _stylecss = "<!DOCTYPE html><html><head><title>LYM-IDR4</title><meta http-equiv='Page-Enter' content='progid:DXImageTransform.Microsoft.Pixelate(Duration=2)' /><meta http-equiv='Page-Exit' content='progid:DXImageTransform.Microsoft.Pixelate(Duration=2)' /><meta name='viewport' content='width=device-width, initial-scale=1.0' /> <link href='/css/loginloading.css' rel='stylesheet'></head><body>"; private const string _FormPostHtml = "<div class='sk-three-bounce'><div class='sk-child sk-bounce1'></div><div class='sk-child sk-bounce2'></div><div class='sk-child sk-bounce3'></div></div><form method='post' action='{uri}'>{body}</form><script>(function(){document.forms[0].submit();})();</script>"; private string GetFormPostHtml() { var html = _FormPostHtml; html = html.Replace("{uri}", Response.Request.RedirectUri); html = html.Replace("{body}", Response.ToNameValueCollection().ToFormPost()); return _stylecss + html+"</body></html>"; } private void AddSecurityHeaders(HttpContext context) { var formOrigin = Response.Request.RedirectUri.GetOrigin(); var csp = $"default-src 'self'; frame-ancestors {formOrigin}; form-action {formOrigin}; script-src 'sha256-VuNUSJ59bpCpw62HM2JG/hCyGiqoPN3NqGvNXQPU+rY='; "; if (!context.Response.Headers.ContainsKey("Content-Security-Policy")) { context.Response.Headers.Add("Content-Security-Policy", csp); } if (!context.Response.Headers.ContainsKey("X-Content-Security-Policy")) { context.Response.Headers.Add("X-Content-Security-Policy", csp); } var referrer_policy = "no-referrer"; if (!context.Response.Headers.ContainsKey("Referrer-Policy")) { context.Response.Headers.Add("Referrer-Policy", referrer_policy); } }