用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. 2017易观OLAP算法大赛
			
      大赛简介   目前互联网领域有很多公司都在做APP领域的“用户行为分析”产品,与Web时代的行为分析相类似,其目的都是帮助公司的运营.产品等部门更好地优化自家产品,比如查看日活和月活,查看渠道来源 ...
    
			
    2. 
						
  2. django中的request对象详解
			
    Request 我们知道当URLconf文件匹配到用户输入的路径后,会调用对应的view函数,并将  HttpRequest对象  作为第一个参数传入该函数. 我们来看一看这个HttpRequest对 ...
    
			
    3. 
						
  3. 关于dubbo的架构
			
    dubbo是国内一个十分受欢迎的分布式rpc框架. 这篇博客是从dubbo官网出发,来说明下dubbo的技术架构.首先我们看下官网的架构图. 节点角色说明: Provider: 暴露服务的服务提供方. ...
    
			
    4. 
						
  4. Mac 远程连接windows桌面工具parallels client
			
    https://www.cnblogs.com/cssfirefly/p/9644940.html Parallels Client 客户端是免费,App Store 直接下载 复制文件:用共享文件夹 ...
    
			
    5. 
						
  5. Spring Boot后台启动不打印nohup.out
			
    #!/bin/bashnohup java -jar websocket-server-0.0.1-SNAPSHOT.jar --spring.profiles.active=prod --serve ...
    
			
    6. 
						
  6. WPF控件收集
			
    1.Extended WPF Toolkit 2.Fluent Ribbon Control Suite 3.WPF Ribbon Control 4.Telerik RadControls for  ...
    
			
    7. 
						
  7. R7—左右内全连接详解
			
    在SQL查询中,经常会用到左连接.右连接.内连接.全连接,那么在R中如何实现这些功能,今天来讲一讲! SQL回顾 原理 # 连接可分为以下几类: 内连接.(典型的连接运算,使用像   =   或    ...
    
			
    8. 
						
  8. Exp2：后门原理与实践
			
    Exp2:后门原理与实践 1 实践目标 任务一:使用netcat获取主机操作Shell,cron启动 (0.5分) 任务二:使用socat获取主机操作Shell, 任务计划启动 (0.5分) 任务三: ...
    
			
    9. 
						
  9. 45、文件过滤器FilenameFilter
			
    文件过滤器FilenameFilter JDK中提供了一个FilenameFilter的接口用来实现文件过滤功能,可以使用这个文件过滤器来实现上一节中的问题. File类中有一个带参数的list方法  ...
    
			
    10. 
						
  10. 兴人类TDD培训札记
			
    兴人类TDD培训札记 恰同学少年,风华正茂:书生意气,挥斥方遒 -- <沁园春 长沙> 幸之 前不久,非常幸运地全程参与了公司与南京5所知名高校合作的"兴人类TDD培训" ...
    
			
    11.