前后端分离实战：使用JSON方式来登录SpringSecurit

作者: 一一小知 | 来源:发表于2019-01-24 14:54 被阅读424次

微信公众号：一一小知
问题或建议，请公众号留言;

SpringSecurity本身对于Login Parameter的登录处理

本身自带的请求页面是这样的：

登录页面

点击login按钮之后，requst如下，可以看到Content-Type的值是application/x-www-form-urlencoded，username、password、submit是作为Parameter参数做了请求。

完整的如下：

Request URL: http://localhost:8081/user/login
Request Method: POST
Status Code: 401 
Remote Address: [::1]:8081
Referrer Policy: no-referrer-when-downgrade
Cache-Control: no-cache, no-store, max-age=0, must-revalidate
Content-Type: application/json;charset=utf-8
Date: Wed, 23 Jan 2019 02:12:40 GMT
Expires: 0
Pragma: no-cache
Transfer-Encoding: chunked
X-Content-Type-Options: nosniff
X-Frame-Options: DENY
X-XSS-Protection: 1; mode=block
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8
Accept-Encoding: gzip, deflate, br
Accept-Language: zh-CN,zh;q=0.9
Cache-Control: max-age=0
Connection: keep-alive
Content-Length: 38
Content-Type: application/x-www-form-urlencoded
Cookie: JSESSIONID=A977E4AD3F578C5B8FA80BF2DC83C4FA
Host: localhost:8081
Origin: http://localhost:8081
Referer: http://localhost:8081/login
Upgrade-Insecure-Requests: 1
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_2) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/71.0.3578.98 Safari/537.36
username: bianxh
password: 
submit: Login

对应的username和password的接收和处理在WebSecurityConfigurerAdapter子实例中完成，如下：

package com.template.config;
//...
@EnableGlobalMethodSecurity(prePostEnabled = true)
public class WebSecurityConfig extends WebSecurityConfigurerAdapter {
    //...
    @Override
    protected void configure(HttpSecurity http) throws Exception {
        http.authorizeRequests().antMatchers(HttpMethod.OPTIONS).permitAll()
                .withObjectPostProcessor(new ObjectPostProcessor<FilterSecurityInterceptor>() {
                    @Override
                    public <O extends FilterSecurityInterceptor> O postProcess(O o) {
                        o.setSecurityMetadataSource(metadataSource);
                        o.setAccessDecisionManager(urlAccessDecisionManager); // url拦截
                        return o;
                    }
                })
                .and()
//                .formLogin().loginPage("/login_p").loginProcessingUrl("/login")
                // 定义响应的url
                .formLogin().loginProcessingUrl("/user/login") 
                .usernameParameter("username").passwordParameter("password")
                .permitAll()
                .and()
                .logout().permitAll()
                .and().csrf().disable()
                .exceptionHandling().accessDeniedHandler(deniedHandler);
    }
    //...
}

在Vue项目配置中模拟这样的请求如下：

import request from '@/utils/request'

export function login(username, password) {
  return request({
    url: '/user/login',
    method: 'post',
    params: { username, password }
  })
}

Request参数如下：

Request URL: http://localhost:8080/user/login?username=bryan&password=1984
Request Method: POST
Status Code: 403 Forbidden
Remote Address: 127.0.0.1:8080
Referrer Policy: no-referrer-when-downgrade
cache-control: no-cache, no-store, max-age=0, must-revalidate
connection: close
content-length: 0
date: Wed, 23 Jan 2019 05:01:03 GMT
expires: 0
pragma: no-cache
x-content-type-options: nosniff
x-frame-options: DENY
X-Powered-By: Express
x-xss-protection: 1; mode=block
Accept: application/json, text/plain, */*
Accept-Encoding: gzip, deflate, br
Accept-Language: zh-CN,zh;q=0.9
Connection: keep-alive
Content-Length: 0
Cookie: JSESSIONID=DE7E824DB59383D63DA926C5DAA1048E
Host: localhost:8080
Origin: http://localhost:8080
Referer: http://localhost:8080/
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_2) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/71.0.3578.98 Safari/537.36
username=bryan&password=1984

换用JSON方式来登录

SpringSecurity配置调整

spring security 是基于javax.servlet.Filter的，因此才能在spring mvc（DispatcherServlet基于Servlet）前起作用。

UsernamePasswordAuthenticationFilter:实现Filter接口，负责拦截登录处理的url，帐号和密码会在这里获取，然后封装成Authentication交给AuthenticationManager进行认证工作

Authentication:贯穿整个认证过程，封装了认证的用户名，密码和权限角色等信息，接口有一个boolean isAuthenticated()方法来决定该Authentication认证成功没;

AuthenticationManager:认证管理器，但本身并不做认证工作，只是做个管理者的角色。例如默认实现ProviderManager会持有一个AuthenticationProvider数组，把认证工作交给这些AuthenticationProvider，直到有一个AuthenticationProvider完成了认证工作。

AuthenticationProvider:认证提供者，默认实现，也是最常使用的是DaoAuthenticationProvider。我们在配置时一般重写一个UserDetailsService来从数据库获取正确的用户名密码，其实就是配置了DaoAuthenticationProvider的UserDetailsService属性，DaoAuthenticationProvider会做帐号和密码的比对，如果正常就返回给AuthenticationManager一个验证成功的Authentication

看UsernamePasswordAuthenticationFilter源码里的obtainUsername和obtainPassword方法只是简单地调用request.getParameter方法，因此如果用json发送用户名和密码会导致DaoAuthenticationProvider检查密码时为空，抛出BadCredentialsException。

重写UsernamePasswordAnthenticationFilter

package com.template.filter;

import com.fasterxml.jackson.databind.ObjectMapper;
import com.template.bean.AuthenticationBean;
import org.springframework.http.MediaType;
import org.springframework.security.authentication.UsernamePasswordAuthenticationToken;
import org.springframework.security.core.Authentication;
import org.springframework.security.core.AuthenticationException;
import org.springframework.security.web.authentication.UsernamePasswordAuthenticationFilter;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.InputStream;

public class CustomAuthenticationFilter extends UsernamePasswordAuthenticationFilter {
    @Override
    public Authentication attemptAuthentication(HttpServletRequest request, HttpServletResponse response) throws AuthenticationException {
        //attempt Authentication when Content-Type is json
        if(request.getContentType().equals(MediaType.APPLICATION_JSON_UTF8_VALUE)
                ||request.getContentType().equals(MediaType.APPLICATION_JSON_VALUE)){

            //use jackson to deserialize json
            ObjectMapper mapper = new ObjectMapper();
            UsernamePasswordAuthenticationToken authRequest = null;
            try (InputStream is = request.getInputStream()){
                AuthenticationBean authenticationBean = mapper.readValue(is,AuthenticationBean.class);
                authRequest = new UsernamePasswordAuthenticationToken(
                        authenticationBean.getUsername(), authenticationBean.getPassword());
            }catch (IOException e) {
                e.printStackTrace();
                authRequest = new UsernamePasswordAuthenticationToken(
                        "", "");
            }finally {
                setDetails(request, authRequest);
                return this.getAuthenticationManager().authenticate(authRequest);
            }
        }

        //transmit it to UsernamePasswordAuthenticationFilter
        else {
            return super.attemptAuthentication(request, response);
        }
    }
}

WebSecurityConfigurerAdapter配置

把这个CustomAuthenticationFilter加到spring security的众多filter里面.

@Override
protected void configure(HttpSecurity http) throws Exception {
    http
            .cors().and()
            .antMatcher("/**").authorizeRequests()
            .antMatchers("/", "/login**").permitAll()
            .anyRequest().authenticated()
            //这里必须要写formLogin()，不然原有的UsernamePasswordAuthenticationFilter不会出现，也就无法配置我们重新的UsernamePasswordAuthenticationFilter
            .and().formLogin().loginPage("/")
            .and().csrf().disable();

    //用重写的Filter替换掉原有的UsernamePasswordAuthenticationFilter
    http.addFilterAt(customAuthenticationFilter(),
    UsernamePasswordAuthenticationFilter.class);
}

//注册自定义的UsernamePasswordAuthenticationFilter
@Bean
CustomAuthenticationFilter customAuthenticationFilter() throws Exception {
    CustomAuthenticationFilter filter = new CustomAuthenticationFilter();
    filter.setAuthenticationSuccessHandler(new SuccessHandler());
    filter.setAuthenticationFailureHandler(new FailureHandler());
    filter.setFilterProcessesUrl("/login/self");

    //这句很关键，重用WebSecurityConfigurerAdapter配置的AuthenticationManager，不然要自己组装AuthenticationManager
    filter.setAuthenticationManager(authenticationManagerBean());
    return filter;
}

封装AuthenticationBean类，用lombok简化代码

package com.template.bean;

import lombok.Getter;
import lombok.Setter;

@Getter
@Setter
public class AuthenticationBean {
    private String username;
    private String password;
}

Vue的配置

request配置

import request from '@/utils/request'

export function login(username, password) {
  return request({
    url: '/user/login',
    method: 'post',
    // 封装JSON
    data: {
      username,
      password
    }
  })
}

效果

登录成功

在浏览器Network中查看Response

Network中查看Response

由于我们前后端分类，前端使用的是8080端口，后端使用的是8081端口。所以需要配置一下vue.config.js,允许跨域。

module.exports = {
  devServer: {
    proxy: {
      '/': {
        target: 'http://localhost:8081',
        changeOrigin: true,
        pathRewrite: {
          '^/': ''
        }
      }
    }
  }  
}

后话

Request.java可以debug htpp request请求，包位置和关键method如下：

package org.apache.catalina.connector;
/**
 * Wrapper object for the Coyote request.
 *
 * @author Remy Maucherat
 * @author Craig R. McClanahan
 */
public class Request implements org.apache.catalina.servlet4preview.http.HttpServletRequest {
    /**
     * Parse request parameters.
     */
    protected void parseParameters() {
        //...
    }
}

参考网址

网友评论

vue

本文标题：前后端分离实战：使用JSON方式来登录SpringSecurit

本文链接：https://www.haomeiwen.com/subject/ytoyjqtx.html

延伸阅读

深度阅读

您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！