一步一步学习IdentityServer4 (4) 处理特殊需求之-登录等待页面
2024-08-28 03:12:39
用IdentityServer3的时候登录如果采用Post方式大家会发现有中间有一个等待Submit空白页面,界面不友好,现在我想把这个修改自定义的页面Loading
在Identityserver3 修改源码中的 FormPostResponse.html 会发现还有一个FormPostResponse.js
/*
* Copyright (c) Dominick Baier, Brock Allen. All rights reserved.
* see license
*/ (function () {
document.forms[].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);
}
}
最新文章
- myeclipse2014
- inheritableStatics 与statics类
- 安装 SQL server 2008 R2
- vim、gvim加载文件慢
- 据说最近IMO中国队失利的一题
- CSS之盒子模型及常见布局
- K最近邻
- SDUT1466双向队列
- 使用MyBatis的resultMap高级查询时常用的方式总结
- 图像重采样(CPU和GPU)
- android 多线程Thread,Runnable,Handler,AsyncTask
- python网络爬虫之使用scrapy自动爬取多个网页
- Percona XtraBackup 核心文档
- Mysql 字符串分隔函数
- js取数组最大值的四种方式
- [Vue] vue2.0
- Docker打包 Asp.Net Core应用,在CentOS上运行(转)
- gcc Build-in functions
- Python内置模块之random
- Linux wildcard
热门文章
- 《剑指offer》 面试题53 :正则表达式匹配 Java
- redhat6下安装centos的yum源
- WebStorm 使用webpack打包(build) Vue 静态资源无法访问(路径不对)问题
- Docker容器加载宿主机的hosts解析
- Android的音频解码原来是直接调用的本地C方法直接通过硬件解码
- angularJS DOM element() $compile()
- ashx误删后,未能创建类型
- vue-awesome-swiper
- C语言入门教程-(3)基本数据类型
- Tomcat与Spring中的事件机制详解