OAuth2.0系列之知识点梳理

OAuth2.0系列之知识点梳理

一、四种角色

为了能够更好的理解本文中后续的内容,这里我先说下,OAuth2.0 中相关的四种角色,如下:

  1. 资源拥有者
  2. 资源服务
  3. 客户端
  4. 认证服务

以上四种角色到底都是干什么的呢?这里直接用个例子来说明下:

某SAAS平台要实现基于微信账号的登录(第三方登录),该平台(客户端)从微信认证服务(认证服务)得到某用户(资源拥有者)的授权从微信(资源服务)上获取该用户的信息(资源)​。

  1. 客户端:某SAAS平台
  2. 认证服务:微信认证服务
  3. 资源拥有者:用户
  4. 资源服务:微信
  5. 获取该用户的信息:资源

二、四种模式的概述

OAuth2.0 提供了四种授权(获取令牌)方式来应对不同的使用场景,如下:

  1. 授权码模式

    特点: 四种模式中最安全,也最复杂的一种模式。

    场景: 客户端通过认证服务得到用户授权继而调用资源服务,例如:客户端通过微信认证服务得到用户的授权继而访问到用户在微信中的个人信息。

  2. 密码模式

    特点: 用户的用户名和密码直接暴露给客户端。

    场景: 用户通过客户端提供的页面进行登录(输入用户名和密码),然后再由客户端调用认证服务进行认证授权。由于登录页面是客户端提供的,所以用户的用户名和密码将会暴露给客户端。安全起见,密码模式多见于自己开发的应用,例如:我司开发了某个应用对接了自己开发的认证服务和资源服务。

  3. 客户端模式

    特点: 针对客户端(例如:某系统、某APP…)层面进行授权,而非基于用户授权的场景,认证服务仅校验客户端的身份。

    场景: 客户端作为一个我方完全信任的存在,调用我方提供的资源服务,例如:某某平台要通过我方开发的OpenAPI获取我方的组织架构信息。

  4. 简化模式

    特点: 不需要与客户端应用的服务端进行交互,没有校验 client_secret。

    场景: 用于仅有前端页面,没有后端服务的客户端应用

基于以上四种模式是否与用户相关,为了便于理解,我又将这四个模式分为两大类:

  1. 用户认证(与用户相关): 授权模式,密码模式,简化模式。
  2. 客户端认证(与用户无关): 客户端模式。

三、四种模式的图解

首先我们要为客户端分配一对儿 client_id 和 client_secret,并指定该客户端可访问的资源(通过 scope,可以将 scope 作为资源的标签来理解)

  1. 客户端模式
    在这里插入图片描述
    A. 客户端的 authorized_grant_types 中必须包括 client_credentials,也就是客户端需要支持客户端模式。
    B. 客户端携带 client_id 和 client_secret 访问认证服务的 oauth/token 以此获得 access_token。
    C. 客户端携带 access_token 去资源服务那里访问有权访问的资源。

    获取 access_token 的请求:

    http://oauth.cab5.com/oauth/token?grant_type=client_credentials&client_id=CLIENT_ID&client_secret=CLIENT_SECRET&scope=SCOPE
    
    参数说明
    grant_type授权类型,固定值:client_credentials,表示当前获取access_token的请求为客户端模式
    client_id客户端标识
    client_secret客户端秘钥
    scope客户端权限
  2. 密码模式
    在这里插入图片描述
    A. 客户端的 authorized_grant_types 中必须包括 password,也就是客户端需要支持密码模式。
    B. 用户通过客户端提供的页面属于用户名和密码。
    C. 客户端携带用户输入的用户名和密码,以及client_id 和 client_secret 访问认证服务的 oauth/token 以此获得 access_token。
    D. 客户端携带 access_token 去资源服务那里获取用户信息。

    获取 access_token 的请求:

    http://oauth.cab5.com/oauth/token?grant_type=password&client_id=CLIENT_ID&client_secret=CLIENT_SECRET&username=USERNAME&password=PASSWORD&scope=SCOPE
    
    参数说明
    grant_type授权类型,固定值:password,表示当前获取access_token的请求为密码模式
    username用户名
    password用户密码
    client_id客户端标识
    client_secret客户端秘钥
    scope客户端权限
  3. 授权码模式
    在这里插入图片描述
    A. 客户端的 authorized_grant_types 中必须包括 authorization_code,也就是客户端需要支持授权码模式。
    B. 用户通过浏览器首次访问客户端,客户端判断当前用户需进行认证授权(即需要登录),则重定向到认证服务的认证授权页面。
    C. 用户在认证服务的认证授权页面上输入用户名和密码,并提交到认证服务进行验证,验证通过后,认证服务生成对应的授权码,然后携带该授权码重定向到客户端。
    D. 客户端拿到授权码后,携带授权码、client_id、client_secret 访问认证服务的 oauth/token 以此获得 access_token。
    E. 客户端携带 access_token 去资源服务那里获取用户信息。

    授权认证页面的请求:

    http://oauth.cab5.com/oauth/authorize?response_type=code&client_id=CLIENT_ID&redirect_uri=REDIRECT_URI&scope=SCOPE
    
    参数说明
    response_type固定值:code,表示当前的请求为授权码模式
    client_id客户端标识
    redirect_uri授权码生成后会重定向到该地址上,并携带code(授权码)
    scope客户端权限

    获取 access_token 的请求:

    http://oauth.cab5.com/oauth/token?grant_type=authorization_code&code=CODE&client_id=CLIENT_ID&client_secret=CLIENT_SECRET&scope=SCOPE
    
    参数说明
    grant_type授权类型,固定值:authorization_code,表示当前获取access_token的请求为授权码模式
    code授权码,只能使用一次,使用完了(即获取过一次access_token了)即刻作废,需要重新申请
    client_id客户端标识
    client_secret客户端秘钥
    scope客户端权限
  4. 简化模式
    在这里插入图片描述
    A. 客户端的 authorized_grant_types 中必须包括 implicit,也就是客户端需要支持简化模式。
    B. 用户通过浏览器跳转到认证服务的认证授权页面。
    C. 用户在认证服务的认证授权页面上输入用户名和密码,并提交到认证服务进行验证,验证通过后,认证服务生成对应的 access_token,然后携带该 access_toekn 重定向到客户端,形如:https://xx.xxx.com/#access_token=ACCESS_TOKEN,这里的https://xx.xxx.com为REDIRECT_URI。

    授权认证页面的请求:

    http://oauth.cab5.com/oauth/authorize?response_type=token&client_id=CLIENT_ID&redirect_uri=REDIRECT_URI&scope=SCOPE
    
    参数说明
    response_type固定值:token,表示当前的请求为简化模式
    client_id客户端标识
    redirect_uriaccess_token 生成后会重定向到该地址上,并携带access_token
    scope客户端权限

    所谓简化模式其实就是对授权模式的简化,用户认证授权后直接生成 access_token,无需客户端再通过授权码换取access_token,整个过程无需提供 client_secret。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
Vue 单点登录结合 OAuth2.0 是一种常见的身份验证和授权机制。OAuth2.0 允许用户使用他们在其他应用程序中拥有的凭据来登录您的应用程序,而无需创建新的用户名和密码。 在 Vue 中实现单点登录结合 OAuth2.0 的步骤如下: 1. 注册 OAuth2.0 提供商:您需要选择一个 OAuth***获取客户端ID和客户端密钥。 2. 安装依赖:使用 npm 或 yarn 安装用于处理 OAuth2.0 的库,例如 `vue-oauth2-oidc`。 3. 配置 OAuth2.0 客户端:在 Vue 项目的配置文件中,将 OAuth2.0 客户端的配置信息(客户端ID、客户端密钥、授权终结点等)添加进去。 4. 实现登录和授权流程:在 Vue 组件中,您可以创建一个登录按钮或链接,当用户点击时触发 OAuth2.0 的登录流程。您可以使用 `vue-oauth2-oidc` 提供的方法来处理认证请求和获取访问令牌。 5. 处理回调:当用户成功登录并授权后,OAuth2.0 提供商将重定向用户到您的应用程序,并附带一个授权码。您需要在 Vue 组件中处理回调,验证授权码并交换访问令牌。 6. 保持登录状态:一旦您获得访问令牌,您可以将其存储在 Vue 的状态管理器(如Vuex)中,以便在应用程序的其他部分使用。您可以使用访问令牌来获取用户信息或调用受保护的 API。 通过以上步骤,您可以实现 Vue 单点登录结合 OAuth2.0。请注意,具体的实现细节可能因您选择的 OAuth2.0 提供商而有所不同,您需要查阅相关文档和示例代码来完成集成。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

cab5

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值