10 分钟理解什么是 OAuth 2.0 协议

https://deepzz.com/post/what-is-oauth2-protocol.html

Desc:什么是oauth2协议,oauth2应用在哪些场景,oauth2如何实现单点登录

什么是 OAuth 2.0

OAuth 2.0 是一个行业的标准授权协议。OAuth 2.0 专注于简化客户端开发人员,同时为 Web 应用程序,桌面应用程序,手机和客厅设备提供特定的授权流程。

它的最终目的是为第三方应用颁发一个有时效性的令牌 token。使得第三方应用能够通过该令牌获取相关的资源。常见的场景就是:第三方登录。当你想要登录某个论坛,但没有账号,而这个论坛接入了如 QQ、Facebook 等登录功能,在你使用 QQ 登录的过程中就使用的 OAuth 2.0 协议。

如果你想了解更多,其官方网址为:https://oauth.net/2/。下面我们来了解下 OAuth 协议的基本原理

角色

首先需要介绍的是 OAuth 2.0 协议中的一些角色,整个授权协议的流程都将围绕着这些角色:

  • resource owner,资源所有者,能够允许访问受保护资源的实体。如果是个人,被称为 end-user。
  • resource server,资源服务器,托管受保护资源的服务器。
  • client,客户端,使用资源所有者的授权代表资源所有者发起对受保护资源的请求的应用程序。如:web网站,移动应用等。
  • authorization server,授权服务器,能够向客户端颁发令牌。
  • user-agent,用户代理,帮助资源所有者与客户端沟通的工具,一般为 web 浏览器,移动 APP
    等。

可能有些朋友依然不太理解,这里举例说明:假如我想要在 coding.net 这个网站上用 github.com 的账号登录。那么 coding 相对于 github 就是一个客户端。而我们用什么操作的呢?浏览器,这就是一个用户代理。当从 github 的授权服务器获得 token 后,coding 是需要请求 github 账号信息的,从哪请求?从 github 的资源服务器。

协议流程

oauth2-roles

上图详细的描述了这四个角色之间的步骤流程:

  • (A) Client 请求 Resource Owner 的授权。授权请求可以直接向 Resource Owner 请求,也可以通过 Authorization Server 间接的进行。
  • (B) Client 获得授权许可。
  • (C) Client 向 Authorization Server 请求访问令牌。
  • (D) Authorization Server 验证授权许可,如果有效则颁发访问令牌。
  • (E) Client 通过访问令牌从 Resource Server 请求受保护资源。
  • (F) Resource Server 验证访问令牌,有效则响应请求。
     +--------+                               +---------------+
     |        |--(A)- Authorization Request ->|   Resource    |
     |        |                               |     Owner     |
     |        |<-(B)-- Authorization Grant ---|               |
     |        |                               +---------------+
     |        |
     |        |                               +---------------+
     |        |--(C)-- Authorization Grant -->| Authorization |
     | Client |                               |     Server    |
     |        |<-(D)----- Access Token -------|               |
     |        |                               +---------------+
     |        |
     |        |                               +---------------+
     |        |--(E)----- Access Token ------>|    Resource   |
     |        |                               |     Server    |
     |        |<-(F)--- Protected Resource ---|               |
     +--------+                               +---------------+

                     Figure 1: Abstract Protocol Flow

授权

一个客户端想要获得授权,就需要先到服务商那注册你的应用。一般需要你提供下面这些信息:

  • 应用名称
  • 应用网站
  • 重定向 URI 或回调 URL(redirect_uri)

重定向 URI 是服务商在用户授权(或拒绝)应用程序之后重定向用户的地址,因此也是用于处理授权代码或访问令牌的应用程序的一部分。在你注册成功之后,你会从服务商那获取到你的应用相关的信息:

  • 客户端标识 client_id
  • 客户端密钥 client_secret

client_id 用来表识客户端(公开),client_secret 用来验证客户端身份(保密)。

授权类型

OAuth 2.0 列举了四种授权类型,分别用于不同的场景:

  • Authorization Code(授权码 code):服务器与客户端配合使用。
  • Implicit(隐式 token):用于移动应用程序或 Web 应用程序(在用户设备上运行的应用程序)。
  • Resource Owner Password Credentials(资源所有者密码凭证 password):资源所有者和客户端之间具有高度信任时(例如,客户端是设备的操作系统的一部分,或者是一个高度特权应用程序),以及当其他授权许可类型(例如授权码)不可用时被使用。
  • Client Credentials(客户端证书 client_credentials):当客户端代表自己表演(客户端也是资源所有者)或者基于与授权服务器事先商定的授权请求对受保护资源的访问权限时,客户端凭据被用作为授权许可。

下面来具体说说这四种授权。注意重定向一定要用 302。

授权码模式

该方式需要资源服务器的参与,应用场景大概是:

  1. 资源拥有者(用户)需要登录客户端(APP),他选择了第三方登录。
  2. 客户端(APP)重定向到第三方授权服务器。此时客户端携带了客户端标识(client_id),那么第三方就知道这是哪个客户端,资源拥有者确定(拒绝)授权后需要重定向到哪里。
  3. 用户确认授权,客户端(APP)被重定向到注册时给定的 URI,并携带了第三方给定的 code。
  4. 在重定向的过程中,客户端拿到 code 与 client_idclient_secret 去授权服务器请求令牌,如果成功,直接请求资源服务器获取资源,整个过程,用户代理是不会拿到令牌 token 的。
  5. 客户端(APP)拿到令牌 token 后就可以向第三方的资源服务器请求资源了。
     +----------+
     | Resource |
     |   Owner  |
     |          |
     +----------+
          ^
          |
         (B)
     +----|-----+          Client Identifier      +-----------<
<think>好的,我现在需要帮助用户了解OAuth2.0中前端在实现第三方登录时的具体职责和步骤。首先,我需要回顾一下OAuth2.0的基本流程,尤其是前端在其中扮演的角色。根据用户提供的引用内容,前端需要配合后端完成授权流程,可能涉及到重定向、轮询状态等步骤。 首先,用户提到的引用[1]和[2]中提到了前端使用Vue框架,需要申请appid和appkey,并且需要确定重定向地址。这说明前端的职责包括初始化配置,比如设置OAuth2.0所需的客户端信息,以及处理重定向逻辑。此外,引用[2]中提到了轮询查询授权状态的接口,这说明前端可能需要定时向服务器发送请求以检查用户是否完成授权。 接下来,我需要分解OAuth2.0的流程,从前端的角度逐步分析每个步骤。标准的OAuth2.0授权码流程包括用户点击第三方登录按钮,跳转到认证服务器(如QQ),用户登录并授权后返回授权码,前端或后端通过授权码获取访问令牌。但根据引用[1],这里后端负责接入,前端配合,所以可能前端主要负责引导用户跳转和处理回调后的逻辑。 需要注意,前端需要处理的重定向地址应该在配置中正确设置,否则会导致认证失败。此外,前端可能需要在用户授权后从回调URL中提取授权码或其他参数,并将其传递给后端,或者由后端直接处理回调,这取决于具体实现方式。如果后端处理回调,前端可能需要轮询后端以获取最终的授权结果,如引用[2]中的轮询接口。 另外,安全性也是一个考虑点。前端需要确保在传递参数时使用HTTPS,避免敏感信息泄露。同时,处理回调时验证state参数以防止CSRF攻击也是必要的步骤。 现在需要将这些步骤整理成清晰的流程,确保用户能够理解每个阶段前端的任务。可能需要分步骤说明,包括初始化配置、用户跳转、处理回调、状态轮询以及获取用户信息等环节。同时,需要指出前端与后端的交互点,例如传递授权码或处理令牌的过程。 可能还需要提及错误处理,比如用户取消授权或网络问题时的应对措施。此外,前端可能需要展示加载状态或错误提示,以提升用户体验。 最后,结合用户提供的引用,特别是关于轮询接口的部分,应该强调前端在用户跳转到第三方登录页面后,如何通过轮询后端接口来确认授权状态,直到获取到登录成功的响应,从而完成整个登录流程。</think>### OAuth2.0 第三方登录前端实现流程与任务 #### 一、前端核心职责 1. **初始化配置** - 从后端获取第三方平台(如QQ/微信)的`appid`和授权地址[^1] - 配置**重定向地址**(需与第三方平台注册地址一致) - 存储用于防CSRF攻击的`state`参数(随机字符串) 2. **用户引导阶段** ```javascript // Vue示例:生成第三方登录链接 generateOAuthUrl() { const state = crypto.randomBytes(16).toString('hex'); sessionStorage.setItem('oauth_state', state); return `https://graph.qq.com/oauth2.0/authorize? response_type=code& client_id=${appid}& redirect_uri=${encodeURIComponent(redirect_url)}& state=${state}`; } ``` 3. **授权状态监控** 通过轮询接口检查授权结果(间隔建议2-3秒)[^2]: ```javascript // 轮询示例 let pollInterval = setInterval(async () => { const res = await axios.get('/api/oauth/status?state='+savedState); if(res.data.status === 'authorized') { clearInterval(pollInterval); handleLoginSuccess(res.data.token); } }, 2000); ``` #### 二、具体实现步骤 1. **触发授权请求** - 用户点击`QQ登录`按钮 - 通过`window.location`跳转至第三方登录页 2. **处理回调阶段** 接收第三方平台返回的参数: ```javascript // 从URL解析参数示例 const urlParams = new URLSearchParams(window.location.search); const code = urlParams.get('code'); const state = urlParams.get('state'); // 验证state参数 if(state !== sessionStorage.getItem('oauth_state')) { alert('非法请求来源'); return; } ``` 3. **令牌交换协作** 将`code`发送至后端完成令牌交换: ```javascript axios.post('/api/oauth/token', { code, state }) .then(res => { localStorage.setItem('access_token', res.data.access_token); }) ``` 4. **用户信息获取** 通过后端接口获取用户资料: ```javascript axios.get('/api/userinfo', { headers: { Authorization: `Bearer ${token}` } }).then(profile => { // 更新用户状态 }) ``` #### 三、关键注意事项 1. **安全性要求** - 必须使用HTTPS协议 - `state`参数需具备时效性(建议10分钟过期) - 敏感操作需要二次确认 2. **异常处理** | 错误类型 | 处理方案 | |------------------|------------------------------| | 用户取消授权 | 显示友好提示并返回登录页 | | 网络超时 | 自动重试机制(最多3次) | | 参数篡改 | 终止流程并记录安全日志 | 3. **性能优化** - 采用WebSocket替代轮询(需后端支持) - 实现本地缓存机制(如token自动续期) #### 四、典型实现架构 ``` 前端组件 ├── OAuthButton.vue // 登录入口组件 ├── CallbackHandler.vue // 回调处理组件 └── PollingService.js // 状态轮询模块 ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值