用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. linux命令总结sed命令详解
			
    Sed 简介 sed 是一种新型的,非交互式的编辑器.它能执行与编辑器 vi 和 ex 相同的编辑任务.sed 编辑器没有提供交互式使用方式,使用者只能在命令行输入编辑命令.指定文件名,然后在屏幕上查 ...
    
			
    2. 
						
  2. Linux运维七：网络基础
			
    1:网线 2:交换机,路由器 交换机(Switch)意为“开关”是一种用于电(光)信号转发的网络设备.它可以为接入交换机的任意两个网络节点提供独享的电信号通路.最常见的交换机是以太网交换机.其他常见的 ...
    
			
    3. 
						
  3. GO_01：Linux-CentOS之Go语言环境配置
			
    1.下载安装 下载当前最新版本,通过wget命令,当然你也可以手动下载之后再传入到Linux中,都可以. 本文安装的是1.8版本.由于Go语言的要求,需要配置gopath,而对应再gopath里按照g ...
    
			
    4. 
						
  4. bzoj千题计划158：bzoj2406: 矩阵（有源汇上下界可行流）
			
    http://www.lydsy.com/JudgeOnline/problem.php?id=2406 设矩阵C=A-B 最小化 C 一行或一列和的最大值 整体考虑一行或者一列的和 二分最大值 这样 ...
    
			
    5. 
						
  5. 蓝桥杯 算法提高 3000米排名预测  DFS 递归搜索  next_permutation()使用
			
    #include <iostream> #include <algorithm> #include <queue> #include <cstring> ...
    
			
    6. 
						
  6. MongoDB - Introduction to MongoDB, Databases and Collections
			
    MongoDB stores BSON documents, i.e. data records, in collections; the collections in databases. Data ...
    
			
    7. 
						
  7. 谈谈Flash图表中数据的采集
			
    一般来说flash中的数据是不能被现有技术很容易采集到的,但是也不能谈flash色变,要具体问题具体分析,有些flash是可以通过一些分析发现背后的数据.然后采集就变得很容易了. 具体案例:搜房房价走 ...
    
			
    8. 
						
  8. 通过Class类获取对象实例
			
    通过Class对象获取对象的方式是通过class.newInstance()方式获取,通过调用默认构造参数实例化一个对象. /** * Created by hunt on 2017/6/27. *  ...
    
			
    9. 
						
  9. js模拟自动点击事件
			
    1.直接上代码很直观 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> &l ...
    
			
    10. 
						
  10. shell脚本-监控及邮件提醒
			
    首先写一个邮件提醒python文件 #!/usr/bin/python # -*- coding: UTF-8 -*- import sys import smtplib import email.m ...
    
			
    11.