引入了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;
}
});
}
}
