前端实习生周报（一）在请求库中实现OAuth2.0-CSDN博客

const http = axios.create()
//...http基础配置设置

//登录流程，返回的是授权码
function generateState(length = 16) {
  let result = ''
  const characters =
    'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789'
  const charactersLength = characters.length
  for (let i = 0; i < length; i++) {
    result += characters.charAt(Math.floor(Math.random() * charactersLength))
  }
  return result
} 
//客户端ID，代表身份凭证
const clientId = 'BDa5Vso_19vk5XI1fNzAxZ'
//认证成功后将用户重定向回应用程序的URI地址
const redirectUri = 'https://xxxxx'
const responseType = 'code'
const scope = 'openid profile email'
//授权服务器站点
const authorizationEndpoint =
  'https://xxxxxxx'
//生成State，generateState生成了一个随机的字符串，用于防止CSRF攻击
const state= generateState()
const authUrl = `${authorizationEndpoint}?response_type=${encodeURIComponent(
  responseType
)}&client_id=${encodeURIComponent(clientId)}&redirect_uri=${encodeURIComponent(
  redirectUri
)}&scope=${encodeURIComponent(scope)}&state=${encodeURIComponent(state)}`


const query = getUrlparms()
if (!token && !query.code) {
  window.location.replace(authUrl)
}

//...请求响应拦截器，当服务器校验无法通过时，重定向到authURL

下面是对authURL各个参数的解析：

authorizationEndpoint: 这是授权服务器的授权端点，客户端将用户重定向到这个地址以开始授权流程。
response_type: 这个参数告诉授权服务器客户端期望的响应类型。在这里，responseType 被设置为 'code'，表示使用授权码流程。
client_id: 这是注册应用程序时由授权服务器提供的唯一标识符，用于识别请求授权的客户端应用程序。
redirect_uri: 这是用户在授权服务器上成功认证后将被重定向回的客户端应用程序的地址。它必须与客户端注册时提供给授权服务器的 URI 完全匹配。
scope: 这定义了客户端请求访问的权限范围。在这个例子中，scope 包括 'openid profile email'，这意味着客户端请求用户的身份标识以及基本的个人信息和电子邮件地址。
state: 这是一个客户端生成的随机字符串，用于维护请求和回调之间的状态，并防止 CSRF 攻击。