用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);

            }

        }
												


											
一步一步学习IdentityServer4 (4) 处理特殊需求之-登录等待页面的更多相关文章
	

    
								
  1. 一步一步学习IdentityServer4 (1) 概要配置说明
		
    //结合EFCore生成IdentityServer4数据库 // 项目工程文件最后添加 <ItemGroup><DotNetCliToolReference Include=&qu ...
    
		
    2. 
						
  2. 一步一步学习IdentityServer4 (3)自定登录界面并实现业务登录操作
		
    IdentityServer4 相对 IdentityServer3 在界面上要简单一些,拷贝demo基本就能搞定,做样式修改就行了 之前的文章已经有登录Idr4服务端操作了,新建了一个自己的站点 L ...
    
		
    3. 
						
  3. 12.Linux软件安装 (一步一步学习大数据系列之 Linux)
		
    1.如何上传安装包到服务器 有三种方式: 1.1使用图形化工具,如: filezilla 如何使用FileZilla上传和下载文件 1.2使用 sftp 工具: 在 windows下使用CRT 软件  ...
    
		
    4. 
						
  4. (转) 一步一步学习ASP.NET 5 (四）- ASP.NET MVC 6四大特性
		
    转发:微软MVP 卢建晖 的文章,希望对大家有帮助.原文:http://blog.csdn.net/kinfey/article/details/44459625 编者语 : 昨晚写好的文章居然csd ...
    
		
    5. 
						
  5. (转) 一步一步学习ASP.NET 5 (二）- 通过命令行和sublime创建项目
		
    转发:微软MVP 卢建晖 的文章,希望对大家有帮助. 注:昨天转发之后很多朋友指出了vNext的命名问题,原文作者已经做出了修改,后面的标题都适用 asp.net 5这个名称. 编者语 : 昨天发了第 ...
    
		
    6. 
						
  6. 一步一步学习SignalR进行实时通信_1_简单介绍
		
    一步一步学习SignalR进行实时通信\_1_简单介绍 SignalR 一步一步学习SignalR进行实时通信_1_简单介绍 前言 SignalR介绍 支持的平台 相关说明 OWIN 结束语 参考文献 ...
    
		
    7. 
						
  7. 一步一步学习SignalR进行实时通信_8_案例2
		
    原文:一步一步学习SignalR进行实时通信_8_案例2 一步一步学习SignalR进行实时通信\_8_案例2 SignalR 一步一步学习SignalR进行实时通信_8_案例2 前言 配置Hub 建 ...
    
		
    8. 
						
  8. 一步一步学习SignalR进行实时通信_9_托管在非Web应用程序
		
    原文:一步一步学习SignalR进行实时通信_9_托管在非Web应用程序 一步一步学习SignalR进行实时通信\_9_托管在非Web应用程序 一步一步学习SignalR进行实时通信_9_托管在非We ...
    
		
    9. 
						
  9. 一步一步学习SignalR进行实时通信_7_非代理
		
    原文:一步一步学习SignalR进行实时通信_7_非代理 一步一步学习SignalR进行实时通信\_7_非代理 SignalR 一步一步学习SignalR进行实时通信_7_非代理 前言 代理与非代理  ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. poj 2396 Budget
			
    一个m行n列的矩阵,给出每行每列中元素的和,以及对一些格子的大小限制,求一个可行方案,输出矩阵. 大小限制形如:严格大于i,严格小于i,等于i. 1<=m<=200.1<=n< ...
    
			
    2. 
						
  2. Go_18: Golang 中三种读取文件发放性能对比
			
    Golang 中读取文件大概有三种方法,分别为: 1. 通过原生态 io 包中的 read 方法进行读取 2. 通过 io/ioutil 包提供的 read 方法进行读取 3. 通过 bufio 包提 ...
    
			
    3. 
						
  3. 外网IP和内网IP的区别
			
    这两天遇到一个bug,折腾的够呛,已经上线的项目,出现了个人登录不上的情况,瞬间整个人都不好了,首先找问题,在本地和测试服务器上都没问题,打包发布到正式环境就出现问题了,刚开始我看不了日志,日志要找别 ...
    
			
    4. 
						
  4. js判断当前浏览器是pc端还是移动端
			
    根据用户的访问设备的不同来显示不同的页面样式,主要是判断移动设备还是电脑浏览器访问的. 下面给出js判断处理代码,以作参考. <script type="text/javascript ...
    
			
    5. 
						
  5. call 大佬 三分姿势
			
    为什么注释掉的三分方式不能过 @大佬 题目来源:http://hihocoder.com/problemset/problem/1142?sid=1003381 貌似不是eps的问题 #include ...
    
			
    6. 
						
  6. 并发编程(三) IO模型
			
    五 IO模型 常用的IO模型有4种: 阻塞IO 非阻塞IO IO多路复用 异步IO 不常用的有: 驱动信号 5.1 阻塞IO.非阻塞IO 阻塞IO:进程不能做其他的事情 非阻塞IO:等待数据无阻塞 阻 ...
    
			
    7. 
						
  7. mysql 时区设置
			
    ##查看当前时间 select curtime(); ##查看当前时区设置 show variables like "%time_zone%"; ##修改mysql全局时区为北京时 ...
    
			
    8. 
						
  8. zookeeper日常报错总结
			
    1:创建子节点的时候 没有根节点 org.apache.zookeeper.KeeperException$NoNodeException: KeeperErrorCode = NoNode for  ...
    
			
    9. 
						
  9. 【文件上传】文件上传的form表单提交方式和ajax异步上传方式对比
			
    一.html 表单代码 …… <input type="file" class="file_one" name="offenderExcelFi ...
    
			
    10. 
						
  10. Mysql 关闭自动commit
			
    更多内容推荐微信公众号,欢迎关注: 1. 会话级关闭自动提交 mysql> set autocommit=off; Query OK, 0 rows affected (0.00 sec) my ...
    
			
    11.