如何使用 OAuth 2.0 实现第三方登录?
介绍通过 OAuth 2.0 协议实现第三方登录的完整流程,包括注册开发者账号、配置授权参数、前端发起请求、获取授权码、兑换访问令牌以及处理用户登录状态。
使用 OAuth 2.0 实现第三方登录主要流程如下:
- 注册开发者账号
- 在目标平台(如 GitHub、微信、百度)注册开发者账号并创建应用
-
获取关键凭证:
Client_ID - 公开的应用标识 Client_Secret - 机密应用密钥(需严格保密)
- 配置授权参数
- 设置官方授权回跳地址(Redirect URI)
- 准备需要获取的用户权限(Scope)
- 前端发起授权请求
-
构建授权链接带以下参数:
const authUrl = `${oauthServer}/authorize? response_type=code& client_id=YOUR_CLIENT_ID& redirect_uri=YOUR_REDIRECT_URI& scope=REQUESTED_SCOPES`;
-
用户点击后跳转至授权页登录确认
-
- 获取授权码
- 用户在第三方平台授权后重定向到你的回调地址
-
URL 中收到一次性授权码(Authorization Code)
http://your-app.com/callback?code=AUTHORIZATION_CODE
- 后端兑换访问令牌
-
用 code 向授权服务器换取 accessToken:
POST /oauth/token Content-Type: application/x-www-form-urlencoded code=AUTHORIZATION_CODE &client_id=YOUR_CLIENT_ID &client_secret=YOUR_SECRET &grant_type=authorization_code &redirect_uri=CALLBACK_URI
-
响应返回:
access_token
和refresh_token
-
- 获取用户信息
- 使用 accessToken 访问用户资源 API:
GET /api/user Authorization: Bearer ACCESS_TOKEN
- 使用 accessToken 访问用户资源 API:
- 前端登陆状态处理
- 将 token 存入 localStorage/Session 或 Cookie
- 登录状态维护及 token 过期刷新机制