用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. Perl file checking --- How to get information about a file
			
    There are some short expressions in Perl that allow you to test files, which is handy if you want to ...
    
			
    2. 
						
  2. codevs 1070 普通递归关系
			
    1070 普通递归关系  时间限制: 1 s  空间限制: 128000 KB  题目等级 : 大师 Master     题目描述 Description 考虑以下定义在非负整数n上的递归关系 f( ...
    
			
    3. 
						
  3. Openssh版本升级（Centos6.7）
			
    实现前提公司服务器需要进行安全测评,扫描漏洞的设备扫出了关于 openssh 漏洞,主要是因为 openssh的当前版本为5.3,版本低了,而yum最新的openssh也只是5.3,没办法只能到 rp ...
    
			
    4. 
						
  4. Redis学习三：Redis数据类型
			
    一.Redis的五大数据类型 1.String(字符串) string是redis最基本的类型,你可以理解成与Memcached一模一样的类型,一个key对应一个value.string类型是二进制安 ...
    
			
    5. 
						
  5. Hbase建模选择
			
    日期 2017年3月17日 HBase建模记录 OLTP 应用场景: OLAP 应用场景: 语音分析系统的应用场景 基于HBase的建模考虑 1.话单为主来考虑hbase的rowkey的生成规则: 1 ...
    
			
    6. 
						
  6. 20155302 2016-2017-2 《Java程序设计》第七周学习总结
			
    20155302 2016-2017-2 <Java程序设计>第七周学习总结 教材学习内容总结 Lambda表达式的优点:更加紧凑的代码.修改方法的能力.更好地支持多核处理 "L ...
    
			
    7. 
						
  7. C语言入门教程-(1)简介及搭建环境
			
    1.谁适合阅读本教程 本教程可以帮助大家从零开始学习C语言,对于有一定基础的人起到夯实基本功的作用.C语言容易学习,非常适合初学者入门,而且也为以后的编程打下基础.借用一句话:“要进入编程行业高手必学 ...
    
			
    8. 
						
  8. [HNOI2008]越狱 题解（容斥原理+快速幂）
			
    [HNOI2008]越狱 Description 监狱有连续编号为1...N的N个房间,每个房间关押一个犯人,有M种宗教,每个犯人可能信仰其中一种.如果相邻房间的犯人的宗教相同,就可能发生越狱,求有多 ...
    
			
    9. 
						
  9. 【蓝桥杯单片机12】实时时钟DS1302的基本操作
			
    [蓝桥杯单片机12]实时时钟DS1302的基本操作 广东职业技术学院 欧浩源 实时时钟DS1302几乎是蓝桥杯“单片机设计与开发”每年必考的内容,虽然在竞赛现场有提供一个底层读写寄存器的库文件,但是作 ...
    
			
    10. 
						
  10. Memcached与KVDB的区别
			
    Memcached将数据存储在内存中,数据易丢失,不适合对数据进行长期存储. KVDB则是将数据存储在磁盘中,数据安全性级别高,不易丢失.
    
			
    11.