极简 Oauth2.0 应用授权登录

核心逻辑

服务端校验与核心逻辑：

• 1. callback 地址是否为有效注册地址；
• 2. state 为当前默认时间戳，保证安全性；
• 3. 核心逻辑：SSO 页面判断页面 URL 是否有 callback（触发获取授权 code 逻辑），【子应用】用户中心判断是否有 code（触发根据授权 code 自动登录逻辑）。

整体流程

子应用（A） -> 跳转到授权服务器（B） -> 授权服务器（B） -> 跳转回子应用（A） -> 子应用（A）获取授权码 -> 子应用（A）向授权服务器（B）请求令牌 -> 子应用（A）使用令牌访问资源

实现细节

1. 子应用（A） -> 跳转到授权服务器（B）

<a
  href="https://oauth2-server.com/authorize?client_id=xxxx&redirect_uri=http://localhost:8080/callback&response_type=code&state=xxxx"
  >登录</a
>

备注：http://localhost:8080/callback 是子应用（A）的回调地址，授权服务器（B）会跳转回这个地址，并携带授权码

2. 授权服务器（B） -> 跳转回子应用（A）

http://localhost:8080/callback?code=xxxx&state=xxxx

3. 子应用（A）获取授权码

const code = new URLSearchParams(location.search).get("code");

4. 子应用（A）向授权服务器（B）请求令牌

const res = await fetch("https://oauth2-server.com/token", {
  method: "POST",
  headers: {
    "Content-Type": "application/x-www-form-urlencoded",
  },
  body: new URLSearchParams({
    // client_id: "xxxx",
    // client_secret: "xxxx",
    code: code,
    // grant_type: "authorization_code", // 授权码模式
    // redirect_uri: "http://localhost:8080/callback",
    state: "xxxx",
  }),
});

以上接口请求成功后，会返回一个 JSON 对象，包含 access_token 和 token_type，其中 access_token 是授权令牌，token_type 是令牌类型（Bearer）。

5. 子应用（A）使用令牌访问资源

const res = await fetch("https://oauth2-server.com/resource", {
  headers: {
    Authorization: `Bearer ${token}`,
  },
});