JA Plus 开发者文档 JA Plus 开发者文档
首页
📖 白皮书 (opens new window)
  • 名词解释
  • 快速开始

    • 使用jap-simple
    • 使用jap-social
    • 使用jap-oauth2
    • 使用jap-oidc
    • 使用jap-sso
    • 使用jap-mfa
    • 使用jap-http-api
    • 使用jap-ldap
    • 错误代码
  • IDS

    • 简介
    • 快速开始
    • 自定义scope
    • 自定义登录页面
    • 自定义确认授权页面
    • 自定义缓存
    • 自定义Token加密密钥
    • 使用PKCE模式
    • 自动授权
    • 错误代码
  • starter

    • jap-spring-boot-starter
    • jap-simple-spring-boot-starter
    • jap-social-spring-boot-starter
    • jap-oauth2-spring-boot-starter
    • jap-oidc-spring-boot-starter
  • jap-ids的demo
  • 前后端分离架构中使用JAP
  • SpringBoot中使用JAP
  • 问题反馈
  • 项目问题
  • 异常问题
  • 功能问题
  • 数据看板🔥
  • 贡献指南
  • 行为准则
  • 用户权益
  • 贡献者们
  • 社区配套 (opens new window)
  • 教程
  • 投稿
  • 资讯
  • 关于
  • 友情链接
  • 捐赠列表
  • 其他开源
  • 更新记录
收藏
GitHub (opens new window)

FuJie Team

以开源的形式赋能开发者. Just auth into any app.
首页
📖 白皮书 (opens new window)
  • 名词解释
  • 快速开始

    • 使用jap-simple
    • 使用jap-social
    • 使用jap-oauth2
    • 使用jap-oidc
    • 使用jap-sso
    • 使用jap-mfa
    • 使用jap-http-api
    • 使用jap-ldap
    • 错误代码
  • IDS

    • 简介
    • 快速开始
    • 自定义scope
    • 自定义登录页面
    • 自定义确认授权页面
    • 自定义缓存
    • 自定义Token加密密钥
    • 使用PKCE模式
    • 自动授权
    • 错误代码
  • starter

    • jap-spring-boot-starter
    • jap-simple-spring-boot-starter
    • jap-social-spring-boot-starter
    • jap-oauth2-spring-boot-starter
    • jap-oidc-spring-boot-starter
  • jap-ids的demo
  • 前后端分离架构中使用JAP
  • SpringBoot中使用JAP
  • 问题反馈
  • 项目问题
  • 异常问题
  • 功能问题
  • 数据看板🔥
  • 贡献指南
  • 行为准则
  • 用户权益
  • 贡献者们
  • 社区配套 (opens new window)
  • 教程
  • 投稿
  • 资讯
  • 关于
  • 友情链接
  • 捐赠列表
  • 其他开源
  • 更新记录
收藏
GitHub (opens new window)
  • 使用指南
  • 名词解释
  • 快速开始

  • IDS

    • IDS OAuth 2.0 服务端
    • jap-ids 快速开始
    • 自定义scope
    • 自定义登录页面
      • 问题
      • 1. 在授权服务中自定义登录页面
        • 开发Controller 接口
        • 开发 HTML 页面
        • 修改 IdsConfig 配置
        • 启动服务并访问
      • 2. 在前后端分离的场景下自定义登录页面
        • 修改 Controller 接口
        • 修改 IdsConfig 配置
      • 关于 IdsConfig 配置的注意事项
    • 自定义确认授权页面
    • 自定义缓存
    • 自定义Token加密密钥
    • 使用PKCE模式
    • 自动授权
    • jap-ids 错误代码
  • starter

  • 指南
  • IDS
FuJie Team
2021-09-20

自定义登录页面

提示

本文将讲解如何自定义 jap-ids 的登录页面

# 问题

在很多时候,开发者并不喜欢 jap-ids 内置的登录页面,比如:

这个时候,开发者就需要自定义自己的登录页面。

# 1. 在授权服务中自定义登录页面

代码仅供参考,完整代码,请参考:jap-ids-demo (opens new window)

# 开发Controller 接口

@RequestMapping("/oauth")
@Controller
public class LoginController {

    // 其他方法略

    /**
     * 演示自定义登录页面的实现方式, 自定义授权页面,需要通过 <code>JapIds.registerContext(new IdsContext().setIdsConfig(new IdsConfig().setLoginPageUrl("/oauth/login/customize")</code> 配置登录页面的入口
     *
     * @param request
     * @param model
     * @return
     * @throws IOException
     */
    @GetMapping("/login/customize")
    public ModelAndView loginCustomize(HttpServletRequest request, Model model) throws IOException {
        String authenticationUrl = ObjectUtils.appendIfNotEndWith(JapIds.getIdsConfig().getLoginUrl(), "?") + request.getQueryString();
        // form 表单的 action 值
        model.addAttribute("requestPath", authenticationUrl);
        // 用户名输入框的 name
        model.addAttribute("usernameField", JapIds.getIdsConfig().getUsernameField());
        // 密码输入框的 name
        model.addAttribute("passwordField", JapIds.getIdsConfig().getPasswordField());
        return new ModelAndView("login");
    }

}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

# 开发 HTML 页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="">
    <title>JustAuthPlus 演示自定义登录页</title>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet" crossorigin="anonymous">
    <link href="https://getbootstrap.com/docs/4.0/examples/signin/signin.css" rel="stylesheet" crossorigin="anonymous"/>
</head>
<body>
<div class="container">
    <p>
        <h1>这是自定义的授权登录页面</h1>
    </p>
    <form class="form-signin" method="post" th:action="${requestPath}">
        <h2 class="form-signin-heading">Please sign in</h2>
        <p>
            <label for="username" class="sr-only">Username</label>
            <input type="text" id="username" th:name="${usernameField}" class="form-control" placeholder="Username" required
                   autofocus>
        </p>
        <p>
            <label for="password" class="sr-only">Password</label>
            <input type="password" id="password" th:name="${passwordField}" class="form-control" placeholder="Password" required>
        </p>
        <button class="btn btn-lg btn-primary btn-block" type="submit">Sign in</button>
    </form>
</div>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

# 修改 IdsConfig 配置

JapIds.registerContext(new IdsContext()
    .setIdsConfig(new IdsConfig()
            // 关键这一句代码,不要带域名,jap-ids 会自动拼装为 issuer + LoginPageUrl
            .setLoginPageUrl("/oauth/login/customize")
    )
);
1
2
3
4
5
6

# 启动服务并访问

# 2. 在前后端分离的场景下自定义登录页面

如果开发者的项目采用前后端分离的场景,登录页面部署到其他静态资源服务中,也就是说登录页面所在的服务的域名和授权服务的域名并不一致的情况下,jap-ids 也支持自定义这种场景的登录页面。

代码仅供参考,完整代码,请参考:jap-ids-demo (opens new window)

注意

这儿默认你已经准备好了前端服务

# 修改 Controller 接口

因为是前后端分离的项目,所以 controller 接口以 json 格式返回相关登录表单的参数。

@RequestMapping("/oauth")
@Controller
public class LoginController {

    // 其他方法略

    @GetMapping("/login/customize")
    @ResponseBody
    public Object loginCustomize(HttpServletRequest request, Model model) throws IOException {
        String authenticationUrl = ObjectUtils.appendIfNotEndWith(JapIds.getIdsConfig().getLoginUrl(), "?") + request.getQueryString();
        // form 表单的 action 值
        model.addAttribute("requestPath", authenticationUrl);
        // 用户名输入框的 name
        model.addAttribute("usernameField", JapIds.getIdsConfig().getUsernameField());
        // 密码输入框的 name
        model.addAttribute("passwordField", JapIds.getIdsConfig().getPasswordField());
        return model.asMap();
    }

}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

# 修改 IdsConfig 配置

JapIds.registerContext(new IdsContext()
    .setIdsConfig(new IdsConfig()
            // 配置登录页面的地址,必须为包含 http 协议头的完整地址
            .setLoginPageUrl("http://localhost:8080/oauth/login/customize")
            // 指定当前登录页面为外部页面,当使用外部登录页面时,该值必须置为 true
            .setExternalLoginPageUrl(true)
    )
);
1
2
3
4
5
6
7
8

注意

  1. 当使用外部登录页面时,ExternalLoginPageUrl 必须设置为 true
  2. LoginPageUrl必须为包含 http 协议头的完整地址

# 关于 IdsConfig 配置的注意事项

注意

  1. 当使用外部登录页面时,ExternalLoginPageUrl 必须设置为 true,且 LoginPageUrl 必须为包含 http 协议头的完整地址
  2. 当自定义的登录页面位于授权服务下时,LoginPageUrl 必须不包含 http 协议头,jap-ids 会自动拼装为 issuer + LoginPageUrl
编辑 (opens new window)
#jap-ids#OAuth2
Last Updated: 2021/10/07, 18:03:43
自定义scope
自定义确认授权页面

← 自定义scope 自定义确认授权页面→

最近更新
01
经验总结:关于为 JAP 开发不同语言的 Demo 的总结
11-02
02
jap-spring-boot-starter 使用帮助
10-28
03
使用jap-ldap
10-25
更多文章>
Theme by Vdoing | Copyright © 2021-2022

友情链接:UniAdmin | 江如意的博客

Copyright © 2021-2040 FUJIE. All rights reserved. 北京符节科技有限公司版权所有 | 京ICP备2020044519号-4
  • 跟随系统
  • 浅色模式
  • 深色模式
  • 阅读模式