spring cloud zuul 如何转发 websocket 请求

    如果登录一家网站注册账号需要填写个人信息、邮箱地址、手机号，我肯定是放弃了。人手一部智能机，移动互联网的几大社交巨头APP成了我们特殊的身份证明。各种网站移动APP越来越倾向于通过第三方平台认证来简化申请和登录帐号的流程，增加用户量。下面是百度网盘使用微信扫码登录页面：

百度网盘登录页面.png

原理解析-开放授权

    开放授权（OAuth）是一个开放标准，允许用户让第三方应用访问该用户在某一网站上存储的私密的资源（如照片，视频，联系人列表），而无需将用户名和密码提供给第三方应用。
    OAuth 2.0 是目前比较流行的做法，为了支持这些不同类型的第三方应用，提出了多种授权类型，如：
    1.授权码 (Authorization Code Grant)
    2.隐式授权 (Implicit Grant)
    3.RO凭证授权 (Resource Owner Password Credentials Grant)
    4.Client凭证授权 (Client Credentials Grant)
而授权码模式是应用最广泛、最核心、也是最复杂的，接下来的内容就是按照OAUTH 2.0 授权码模式原理，自己实现简单的第三方授权案例。
授权码模式逻辑如下图：

授权码模式.png

    1.web客户端传入它的客户端标识符、请求作用域、本地状态和一个重定向URI，然后重定向到授权服务器来发起这个流程，在访问被许可（或被拒绝）后授权服务器会重新将终端用户引导回这个URI。
    2.授权服务器验证终端用户，并确定终端用户是否许可客户端的访问请求。
    3.授权服务器重定向到之前提供的重定向URI上去。授权服务器为客户端传回一个授权码做获取访问令牌之用。
    4.客户端通过验证并传入上一步取得的授权码从授权服务器请求一个访问令牌。（需要带上ClientId和Secret，ClientId和Secret是通过平台授予）。
    5.授权服务器验证客户端私有证书和授权码的有效性并返回访问令牌。

代码实现

基于sping boot 框架开发，使用maven创建两个代码工程，授权服务和客户端服务（授权应用）。
1.客户端服务器带上请求参数，重定向到授权服务器发起流程。代码如下：

    /**
   * 重定向到 授权服务 授权页
   * @param request
   * @return redirect:
   */
  @GetMapping("/redirectauthpage")
  public String clientLogin(HttpServletRequest request) {
    HttpSession session = request.getSession();
    String state = "state01";
    //将state 放入session 中，用户回调时的安全校验
    session.setAttribute("state", state);
    // 获取授权码成功后回调的地址
    String redirectUrl = "http://127.0.0.1:8081/ms-consumer/callbackcode";
    // 采用了code的响应方式
    String response_type = "code";
    // 拼接请求路径
    String loginurl = asUrl + "/oauth2/authorize";
    
    StringBuffer params = new StringBuffer();
    params.append("client_id=").append(clientId);
    params.append("&redirect_uri=").append(redirectUrl);
    params.append("&response_type=").append(response_type);
    params.append("&state=").append(state);
    return "redirect:" + loginurl + "?" + params.toString();
  }

2.授权服务器校验请求参数，返回授权登录界面。代码如下：

   /**
   * 返回用户授权页面
   * @param request
   * @param session
   * @param modelAndView
   * @return
   */
  @GetMapping("/oauth2/authorize")
  public String loginPage(HttpServletRequest request,HttpSession session,ModelAndView modelAndView) {
    try {
      String clientId =  request.getParameter("client_id");
      String redirectUri =  request.getParameter("redirect_uri");
      String responseType =  request.getParameter("response_type");
      String state =  request.getParameter("state");
      //校验参数 client_id redirect_uri，
      //这里不贴校验代码，根据自身情况去缓存数据再校验       
      //validateParams() 
      
      //将客户端信息保存到session 中
      session.setAttribute("state", state);
      session.setAttribute("clientId", clientId);
      session.setAttribute("redirectUri", redirectUri);
      session.setAttribute("sessionId", session.getId());
    } catch (Exception e) {
      return "error";   //返回error 页面
    }
    return "loginpage";  //返回用户授权页面
  }

  2.1 用户授权页面代码如下：

 <label>authorization server</label>
  <form id="formId" method = "post">
    用户:<input type="text" name ="userName" id="userId"/> </br>
    密码:<input type="password" name = "pwd" id = "pwdid"/> </br>
    <input type="button" value="提交数据" onclick="login()"/> 
  </form>
  <input id="stateid" type="hidden" value="" />
  <script type="text/javascript">
    _initPage();
    function _initPage() {
      $.ajax({
        type : "GET",
        //async: false,
        url : "/ms-producter/loginpage/state",
        //data :, // 请求参数
        contentType: "application/json;charset=UTF-8",
        dataType : "text", // 服务器响应的数据类型
        success : function(data) {
          document.getElementById("stateid").value = data;
        }
      });
    }
    function login() {
      var username = document.getElementById("userId").value;
      var pwd = document.getElementById("pwdid").value;
      if (username == "" || pwd == "") {
        alert("用户名或密码不为空");
        return false;
      }formId
      var form = document.getElementById("formId");
      form.action = "http://127.0.0.1:8083/ms-producter/login?" +"state=" + document.getElementById("stateid").value;
      form.submit();
    }

3.验证用户授权成功后，授权服务器重定向到之前提供的重定向URI，并在URI上传回一个授权码。代码如下：

/**
   * 验证用户授权信息，并重定向到客户端提供的重定向URI
   * @param request
   * @param httpSession
   * @param response
   * @return redirectURI:http://127.0.0.1:8081/ms-consumer/callbackcode
   */
  @PostMapping("/login")
  public Object login(HttpServletRequest request,HttpSession httpSession,HttpServletResponse response) {
    try {
      //验证state 
      String state =  request.getParameter("state");
      if(!state.equals(httpSession.getAttribute("state"))) {
        ModelAndView modelAndView = new ModelAndView();
        modelAndView.setViewName("error");
        return modelAndView;
      }
      //验证用户名密码的有效性，验证方法根据项目实际情况编码，这里就不贴代码了
      String userName =  request.getParameter("userName");
      String pwd =  request.getParameter("pwd");
      // validateUserInfo() 
      
      //生成授权码重定向到指定地址
      StringBuffer redirectURI = new StringBuffer();
      redirectURI.append("redirect:").append(httpSession.getAttribute("redirectUri"));
      redirectURI.append("?code=").append(System.currentTimeMillis());
      redirectURI.append("&state=").append(state);
      return redirectURI.toString();
    } catch (Exception e) {
      ModelAndView modelAndView = new ModelAndView();
      modelAndView.setViewName("error");
      return modelAndView;
    }
  }

4.客户端服务器取得上一步传入的授权码，缓存从授权服务器请求的访问令牌后，向前端返回等待页面并驱动首页自动更新（等待页面代码在后面），代码如下：

/**
   * 客户端服务器重定向方法
   * @param request
   * @param session
   * @param modelAndView
   * @return
   */
  @GetMapping("/callbackcode")
  public Object getToken(HttpServletRequest request,HttpSession session,ModelAndView modelAndView) {
    String state = request.getParameter("state");
    String code = request.getParameter("code");
    String redirectUrl = "";
    //判断state
    if(!state.equals(session.getAttribute("state"))) {
      modelAndView.setViewName("error");
      return modelAndView;
    }
    /**
     * 根据授权码获取token 
     */
    String accessToken = null;
    String refreshToken;
    int expiresIn;
    try {
      HttpHeaders headers = new HttpHeaders();
      MultiValueMap<String, String> params = new LinkedMultiValueMap<String, String>();
      // 填入请求参数
      params.add("client_id", clientId);
      params.add("redirect_uri", redirectUrl);
      params.add("grant_type", "authorization_code");
      params.add("client_secret", clientSecret);  //第三方平台获取
      params.add("code", code);
      //发出获取token的请求
      String accessTokenUrl = asUrl + "/oauth2/accessToken";
      String result = restTemplate.postForEntity(accessTokenUrl, new HttpEntity<>(params, headers), String.class).getBody();
      JSONObject jsonObject = JSONObject.parseObject(result);
      accessToken = jsonObject.get("access_token").toString();
      expiresIn = jsonObject.getInteger("expires_in");
      refreshToken = jsonObject.get("refresh_token").toString();
      //updateTokenCache() 客户端服务器缓存token，在发起请请求时使用，不贴代码
    } catch (Exception e) {
      modelAndView.setViewName("error");
      return modelAndView;
    }
    //带上accessToken获取用户信息
    String userInfo;
    try {
      String userInfoUrl = asUrl + "/userinfo";
      HttpHeaders httpheader = new HttpHeaders();
      httpheader.add("token", accessToken);
      httpheader.setContentType(MediaType.APPLICATION_JSON);
      userInfo = restTemplate.postForEntity(userInfoUrl, new HttpEntity<>(httpheader), String.class).getBody();
    } catch (Exception e) {
      modelAndView.addObject("error", "request userinfo by token exception !");
      modelAndView.setViewName("error");
      return modelAndView;
    }
    modelAndView.setViewName("wait");
    return modelAndView;
  }

5.授权服务器验证平台发放的客户端密钥和授权码的有效性，校验成功后返回访问令牌。代码如下：

/**
   * 生成token
   * @param request
   * @return
   */
  @RequestMapping("/oauth2/accessToken")
  @ResponseBody
  public Object getAccessToken(HttpServletRequest request) {
    String clientId = request.getParameter("client_id");
    String redirectURI = request.getParameter("redirect_uri");
    String grantType = request.getParameter("grant_type");
    String clientSecret = request.getParameter("client_secret");
    String code = request.getParameter("code");
    JSONObject jsonObject = new JSONObject();
    if(grantType.equals("authorization_code")) {//授权码格式
      //校验重定向地址 redirect_uri
      //validateRedirectURI() 平台授权时可以缓存客户端的申请信息
      //校验 授权码
      //validateAuthCode() 这里不贴校验代码了，按照你项目组加密算法来
      
      //返回token
      //生成token建议使用JWT的方式,这里就不讨论加密算法了，不是本章的重点
      jsonObject.put("access_token",System.currentTimeMillis());
      jsonObject.put("expires_in",System.currentTimeMillis());
      jsonObject.put("refresh_token",System.currentTimeMillis());
      return jsonObject;
    }else { 
      //这里可扩展其它的授权类型
    }
    return jsonObject;
  }

后台代码到此结束，简单吧。

前端代码

     客户端服务器取得上一步传入的授权码，缓存从授权服务器请求的访问令牌后，向前端返回等待页面并驱动首页自动更新。 前端如何自动更新，返回的等待页面和首页的监听是重点，
    等待页面会在加载完成之后等待设定的时间自动关闭，代码如下：

<body>
  <label>正在验证中......</label>
  <!-- 定时关闭窗口 -->
  <script type="text/javascript">
    window.onload = function() {
      setInterval(function() {
        window.close()
      }, 1000);
    }
</script>
</body>

    首页发起授权流程页面，代码如下：

<script type="text/javascript">
  function _btnCode() {
    //创建弹出窗页面，发起授权请求
    var winObj = window.open("http://127.0.0.1:8081/ms-consumer/redirectauthpage","top", 'height=400, width=400, top=100, left=400, toolbar=yes, menubar=yes, scrollbars=yes, resizable=yes,location=yes, status=false')
    //监听弹出窗口页面关闭事件，
    var loop = setInterval(function() {
          if(winObj.closed) {
             location.href = "http://127.0.0.1:8081/ms-consumer/portal.html";
          }
    }, 1000); 
  }
</script>

代码工程展示

image.png

    提示，spring boot 使用ModelAndView 返回HTML页面需要添加如下配置文件：

spring:
  mvc: 
    view:
      prefix: /
      suffix: .html

演示效果
简书的编辑器不知道怎么放入录好的视频，如何你想看结果演示，找我要链接。

最后感谢参考的以下博客
https://www.jianshu.com/p/a047176d9d65?utm_campaign=maleskine&utm_content=note&utm_medium=seo_notes&utm_source=recommendation