spring security OAuth2 前端开发

OAuth2实现时，前端也有一些注意事项，否则请求OAuth2服务依然无法请求成功。

OAuth2支持四种认证模式，如果应用系统和认证中心都是自己开发的情况下，系统登录可以使用password模式来获取token。这种模式下，前端怎么去请求后端的认证服务。这篇分享将讲一下我在实操过程中趟过的坑。

一、获取token

password模式需要发送五个参数：

1. client_id
2. client_password
3. username
4. password
5. grant_type

1.1 使用Basic Authentication发送client_id和client_password

Basic Authentication认证模式，会将用户名和密码使用冒号:连接后，做base64编码，然后包装在请求的header中，形如header中添加“Authorization: Basic dDMxLWNsaWVudDoxMjM=”。

在axios中，可以编写代码如下：

axios({
    url: 't31-auth/oauth/token',
    method: 'post',
    auth: {
      "username": "t31-client",
      "password": "123"
    },
})

这样其实就是将 “t31-client:123”做base64编码后，封装到header中。

1.2 使用form方式发送请求参数

默认spring security OAuth2使用form方式接受参数，所以在发送认证请求时，需要指定form方式。

需要在axios header中指定content-type.

headers: {
  'Content-Type': 'application/x-www-form-urlencoded'
}

二、请求中携带Bearer token

RFC 6750中这样定义:

bearer token 是一种安全令牌，具有以下属性：拥有 bearer token 的任何一方（被称为 "bearer"），可以以任何方式，和同样持有它的任何一方 一样地使用它 来访问受 OAuth 2.0 保护的资源，（但是不能 也不需要证明 bearer 有加密用的密钥）为了保护 bearer token 不被误用，需要保证它在存储和传输过程中不被泄露。

spring security oauth2遵循这个规范，要求client在请求资源时，需要带上这个token。

axios中可以对request添加过滤器，来统一添加，代码如下：

http.interceptors.request.use(config => {
  config.headers['Authorization'] = "Bearer " + Vue.cookie.get('token') // 请求头带上token
  return config
}, error => {
  return Promise.reject(error)
})

在请求时，发送请求如下：