CAS前后端分离解决方案

CAS前后端分离解决方案

1. 关于CSS服务器的搭建和整合SpringBoot参考：CAS5.3服务器搭建与客户端整合SpringBoot以及踩坑笔记

2. 环境与需求

   • 后端：springboot

   • 前端: vue + element UI

   在登录后之后登录状态在系统中自主控制。

3. 问题

   当接口在CAS过滤器中时候，CAS Client会检测是否登录(检测内容下面写)，若没有登录会像前端发送请求重定向的请求。当前端和后端在不同电脑时候，前端不能够自动跳转。

   注：未深究其中缘由，在同台电脑，上面element ui + spring boot就可以直接完成到cas服务器登录页面的跳转。应该是跨域或者其他未知的原因。

4. 粗略的解决方法

   如果最后项目是部署在同一台服务上面的，可以在其他都完成的情况下，最后再放到同一台电脑上面进行开发。

5. 简单看cas表层原理。

   1. 在自己浏览器中打开接口，后端拦截，指引页面重定向到cas服务器的登录页(接口在自己电脑运行就行)，以上操作等同于地址栏直接输入:

      http://localhost:8332/cas/login?service=http://localhost:8888/接口名

      cas client拦截下来就是在验证未通过后，拼凑了一下service里面的内容。

   2. 在登录成功后，本地cookie会存入一条JSESSIONID为键，值为B5ABB0EB00A770036F284D65453B2593的记录。

      

   3. 在之后每次访问接口时候会在头中带上。

      

   4. CAS客户端是在每次登录成功后都会从请求头中拿到JSESSIONID去找服务器验证。成功的话就会把数据返回来。如果未成功(可能过期或者空)且当前接口在CAS过滤器authentication-url-patterns中配置了，就会重定向到CAS登录页。

   5. 所以，我们Cookie做键，值内容一起复制到postman中，在header中添加，同样得到了登录的效果。

   6. 以上得出：

      1. 不通过CAS Client的重定向，我们直接写url也可以获取登录成功的JSESSIONID。

      2. JSESSIONID在所有浏览器中都可以公用的。

         注：经测试，在登录时候service的并不仅仅起到登录成功后的跳转作用，如果使用的service是8888接口，用得到的jsessionid去8877配置了同样CAS Client的接口中访问时，会报错“未能识别xxxxxxx的票根”

6. 网上学到一个方案。(参考链接放在最后)

   1. 粗略过程

      1. 前端访问登录接口，后端检测到未登录，然后修改代码不发出重定向的操作，并返回401和cas服务器地址，后面的背的serveice地址是自己的接口地址。
      2. 前端判断到401情况，在拿到url重定向之前，需要自己后面添加?url的参数，意为登录成功后跳转到的前端页面。
      3. 登录成功，跳转到后端接口上，后端进行判断，生成token等信息拼到url后面，让浏览器重定向到url页面。
      4. 前端只需要在进入此页面时候检测url是否有需要的信息即可，检测到了就达成登录。

   2. 详细过程：

      1. 前端访问登录，

      2. 后端进行拦截验证(第一次没有)，本来是会给前端302重定向，由于前端是ajax无法识别302重定向，只会拦截下来，未做进一步的处理。我们修改这部分代码，返回json对象，code码定为401，data域中写入需要重定向的url且拼上登录成功需要跳转的接口。

      3. 前端处理接口返回内容，成功了就是登录成功了。若失败了并非是401错误时候，则会取data的数据进行重定向。

         这时候问题来了，前端手动重定向肯定是可以的，然后登录成功跳转到接口，可是接下来呢，跳转到的那个接口中总不能将数据直接返回去吧，这样就直接显示页面上面了。

         ​ 需要认识到的时候，现在是接口直接与浏览器打交道的，如果我们可以通过一种方式让浏览器重定向，可是重定向的网址呢，那就在重定向到cas服务器登录页之前就拼上去。

         然后再在后面添加?url=http://www.labalaba.com/login，意为登录成功后需要跳转的前端的页面。

      4. 跳转到cas服务器登录页，登录成功后跳转到参数service的地址(是我们后端的接口)，接口验证内容，拿到用户消息，生成token或者个人信息，附到url后面。

      5. 接下来就是跳转到页面，上面也提到了，现在接口面对的是浏览器，并不是前端，不是ajax，所以我们可以使用下面这种方法进行重定向。

         @Controller
         public class UserController {
             /**
              * 在cas登录页登录成功进入此接口
              *
              * @param url     登录成功后要跳入的页面
              * @return 重定向，并在url后面拼接登录信息，如token等
              */
             @GetMapping("/redirect")
             public String redirect(@RequestParam String url) {
                 return "redirect:" + url;
             }
         }
         

      6. 重定向到页面后，前端只需要在每次页面启动时候，检测地址栏中是否有想要的参数即可。

   3. 经过观察得出的结论：

      ​ 登录后cas server会返回一个ticket，然后在cas client的接口(service后面跟的)上验证成功后，生成一个JSESSIONID，存入浏览器的cookie中，且之后的接口中会放在Header中。所以service后面必须是接口。

      ​ 并非配置了拦截的接口才会去找cas server做验证，只要携带了，都会去做验证，且放在request中。所以只需要拦截/login(需要结合项目对于单点登录的需求)，/redirect接口也回去找cas server做验证。

7. 开始尝试, 修改过滤器AuthenticationFilter中的doFilter方法

8. 覆盖的方法，也很简单，就只需要在/src/main/java/下创建AuthenticationFilter一样的包，然后创建同名类，将AuthenticationFilter中的内容全部覆盖，修改doFilter方法。

9. 将最后一行this.authenticationRedirectStrategy.redirect(request, response, urlToRedirectTo);注释掉，不让它重定向，返回json数据。

   // add start // -------------------------------------------------
   
   PrintWriter out = response.getWriter();
   response.setContentType("application/json; charset=UTF-8");
   String http = "";
   String redirectUrl = serviceUrl;
   if (redirectUrl.contains("https://")) {
       http += "https://";
       redirectUrl = redirectUrl.substring(8);
   } else if (redirectUrl.contains("http://")) {
       http += "http://";
       redirectUrl = redirectUrl.substring(7);
   }
   int index = redirectUrl.indexOf("/");
   
   String host = redirectUrl.substring(0, index + 1);
   String finalUrl = casServerLoginUrl+"?service="+http+host+"redirect";
   
   System.err.println("拦截了 -- direct url: " + finalUrl);
   
   out.println(JSON.toJSON(new HashMap<String, Object>() {{
       put("code", "401");
       put("data", finalUrl);
   }}));
   
   out.flush();
   out.close();
   
   // add end // -------------------------------------------------
   

10. 分别是login接口和redirect接口。

    @ResponseBody
    @PostMapping("/login")
    public Object login(HttpServletRequest request) {
    
        AttributePrincipal principal2 = (AttributePrincipal)request.getUserPrincipal();
    
        if (principal2 != null) {
    
            Map<String, Object> attrs = principal2.getAttributes();
    
            log.info("login8888: " + attrs);
    
            return new HashMap<String, Object>() {{
                put("code", "200");
                put("msg", "8888登录成功");
                put("date", new HashMap<String, String>() {{
                    put("accessToken", "-->wei_tiao_zhuan_suc");
                }});
            }};
        }
    
        log.error("login8888: null");
    
        return "401, redirect to the cas server login url. by 8888";
    }
    

    redirect接口：

    @GetMapping("/redirect")
    public String redirect(@RequestParam String url, HttpServletRequest request) {
    
        AttributePrincipal principal2 = (AttributePrincipal)request.getUserPrincipal();
    
        // 模拟jwt或者uuid生成token。
    
        if (principal2 != null) {
            Map<String, Object> attrs = principal2.getAttributes();
    
            log.info("登录成功，正在生成token");
            return "redirect:" + url + "?accessToken=-->tiao_zhuan_hou_suc";
    
        }
    
        // 登录失败不返回token
        log.error("登录失败");
    
        return "redirect:" + url;
    }
    

11. 测试过程均是在两才电脑上，且登录接口是在element ui项目中访问的。

    序号	内容
    1	1个前端1个后端
    2	2个前端1个后端
    3	2个前端2个后端

    以上都为正常的，当测试到微服务️时候(参考资料中有位大佬也提到了):

    1. 场景: 1个前端，1个后端，但是后端是微服务，也即多模块，最后由网关进行转发。
       1. 网关端口8899，两个模块分别是8888和8877
       2. 这就限制了访问了login时候，必须使用8899端口，然后跳转cas登录。
       3. 成功后跳转的接口也得是8899的端口，但是不管找8888还是8877做验证，他们的端口都是8899，所以会验证失败。
    2. 讨论
       1. 微服务一般大型项目才会采用，所以基本会有个用户模块来控制所有模块的登录情况。
       2. 虽然这个问题基本上可以绕过，但是万一微服务项目需要用到别人的cas server时候到底如何处理呢。
       3. (等学习到了，会继续添加到这里。并删除这一行。)

12. 参考(方案具体是参考的最后两个)

    • 单点登录SSO、OAuth、LDAP、CAS的流程与应用

    • Springboot前后端分离实现CAS单点登录

    • 前后端分离CAS单点登录处理

    • 一个关于单点登录框架CAS在前后端分离下的解决方案

    • CAS单点登录原理

    • CAS认证前后端分离单点登录调研

    • 前后端分离(Vue + SpringBoot)整合CAS的单点登录