引入了IdentityServer4，当然不能使用原有的登录页，也不想重写mvc页面，决定采用主流vue框架编写了一个前端登录页面。现在需要修改IdentityServer的配置。
过程中遇到了很多坑，等再搜集一点汇总。

1. appsettings增加配置项

LoginUrl: 登录跳转前端页面地址
ErrorUrl：错误页面跳转地址

"UserInteraction": {
    "LoginUrl": "http://127.0.0.1:9527/identity/#/loginRedirect",
    "ErrorUrl": "http://127.0.0.1:9527/identity/#/loginError"
  }

2. 修改登录跳转url、错误页、token获取地址

这里只列出关键代码：

• 修改LoginUrl 和 ErrorUrl为appsettings的配置
• 禁用原token获取方式（原token通过connect/token获取）
• 添加新token获取地址connect/token2

var builder = services.AddIdentityServer(options =>
            {
                options.UserInteraction = new UserInteractionOptions
                {
                    LogoutUrl = "/Account/Logout",
                    LoginUrl = Configuration["UserInteraction:LoginUrl"],
                    LoginReturnUrlParameter = "returnUrl",
                    ErrorUrl = Configuration["UserInteraction:ErrorUrl"]
                };
                // 禁用原token
                options.Endpoints = new EndpointsOptions { EnableTokenEndpoint = false };
            })
            ... // 此处省略其它代码
             // 添加token重写，EndPoints.TokenEndpoint是自定义的token代码
            .AddEndpoint<EndPoints.TokenEndpoint>("tokennew", "/connect/token2");

3. 自定义EndPoints.TokenEndpoint类

这个代码可以从identityServer4源码中找到

image.png

修改代码的ProcessTokenRequestAsync方法，可以做一些特殊操作。比如我的认证服务并不是所有用户都可以通过 用户名密码获取对应client的token，那么可以在这里进行处理。

private async Task<IEndpointResult> ProcessTokenRequestAsync(HttpContext context)
 {
            ...
            string username = requestResult.ValidatedRequest.UserName;
            string clientId = requestResult.ValidatedRequest.ClientId;

            if(username.Equals("surperadmin") && clientId.Equals("MyClient"))
            {
                // 这里只是一个示范，并不是真实的代码
            }else{
               // 部分用户不允许使用用户名密码登录客户端，提示unauthorized_user_client
               return Error("invalid_grant", "unauthorized_user_client");
            }
            ...
}

4. 使用postman测试一下新接口

不允许获取token的账号

image.png

正常的token获取

image.png

5. 新的登录接口

在官方提供的Controller里，新增LoginApi接口

image.png

把原Redirect改成Content直接返回ReturnUrl

image.png

接口测试，截图请注意ReturnUrl的传值，redirect_uri要url转义

image.png

6. 自定义登录页

下面是关键代码：登录事件，需要重点处理参数redirect_uri，其中的url必须转义，其它参数不能转义。

data() {
    return {
      username: "",
      password: "",
    };
  },
methods:{
   loginandRedirect() {
      let ReturnUrl = "";
      // 这里比较复杂，redirect_uri内url必须转义，其它参数则不需要，需要scope=
      let index = this.$route.query.returnUrl.indexOf("?");
      let host = this.$route.query.returnUrl.substring(0, index + 1);
      host = host.substring(host.indexOf("/connect"));
      let params = this.$route.query.returnUrl.substring(index + 1).split("&");
      ReturnUrl =
        host +
        params
          .map(x => {
            if (x.indexOf("redirect_uri") == 0) {
              return "redirect_uri=" + escape(x.substring(13));
            }
            return x;
          })
          .join("&");
      axios.defaults.withCredentials = true;
      axios
        .post("/identityServer/Account/loginApi", {
          ReturnUrl: ReturnUrl,
          // "/connect/authorize/callback?response_type=token&client_id=myclient&redirect_uri=http%3A%2F%2F127.0.0.1%3A6002%2Fswagger%2Foauth2-redirect.html&scope=api&state=TW9uIERlYyAxNCAyMDIwIDE1OjI4OjA0IEdNVCswODAwICjkuK3lm73moIflh4bml7bpl7Qp",
          Username: this.username,
          Password: this.password,
          RememberLogin: true
        })
        .then(data => {
          if (data.data == "~/") {
            this.$router.push({ path: "/404" });
          } else {
            window.location = "/identityServer" + data.data;
          }
        })
        .catch(err => {
          this.loading = false;
          if (err.response) {
            console.log(err.response.data);
            console.log(err.response.status);
            console.log(err.response.headers);
            this.errorMsg = err.response.data;
          }
        });
    }
}

试一试效果吧,

pymge-haaaj.gif

7. 错误页

如果发生错误页，服务器会把错误ID放在url参数里

image.png

根据errorId获取错误信息

methods: {
   getErrorMsg() {
      axios
        .get("/identityServer/home/GetError?errorId=" + this.errorId)
        .then(data => {
          this.errorMsg = data.data;
        })
        .catch(error => {
          if (err.response) {
            console.log(err.response.data);
            console.log(err.response.status);
            console.log(err.response.headers);
            this.errorMsg = err.response.data;
          }
        });
    }
}