如何使用 OAuth 2.0 实现第三方登录?

介绍通过 OAuth 2.0 协议实现第三方登录的完整流程,包括注册开发者账号、配置授权参数、前端发起请求、获取授权码、兑换访问令牌以及处理用户登录状态。

网络协议 中等 OAuth 认证 登录

使用 OAuth 2.0 实现第三方登录主要流程如下:

  1. 注册开发者账号
    • 在目标平台(如 GitHub、微信、百度)注册开发者账号并创建应用
    • 获取关键凭证:

       Client_ID    - 公开的应用标识
       Client_Secret - 机密应用密钥(需严格保密)
      
  2. 配置授权参数
    • 设置官方授权回跳地址(Redirect URI)
    • 准备需要获取的用户权限(Scope)
  3. 前端发起授权请求
    • 构建授权链接带以下参数:

       const authUrl = `${oauthServer}/authorize?
       response_type=code&
       client_id=YOUR_CLIENT_ID&
       redirect_uri=YOUR_REDIRECT_URI&
       scope=REQUESTED_SCOPES`;
      
    • 用户点击后跳转至授权页登录确认

  4. 获取授权码
    • 用户在第三方平台授权后重定向到你的回调地址
    • URL 中收到一次性授权码(Authorization Code)

       http://your-app.com/callback?code=AUTHORIZATION_CODE
      
  5. 后端兑换访问令牌
    • 用 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_tokenrefresh_token

  6. 获取用户信息
    • 使用 accessToken 访问用户资源 API:
       GET /api/user
       Authorization: Bearer ACCESS_TOKEN
      
  7. 前端登陆状态处理
    • 将 token 存入 localStorage/Session 或 Cookie
    • 登录状态维护及 token 过期刷新机制