CCP OAuth2.0 隐藏式授权实践

 阿里云安全     |      2020-04-06 00:00:00

内容协作平台(Content Collaboration Platform, 后面简称CCP)是为开发者提供的面向企业、个人数据管理、内容识别、协作的开放平台。CCP 提供多种OAuth2.0协议接口,方便其他第三方应用接入。

本文主要讲解纯前端应用(例如SPA, Chrome插件等)接入CCP所使用的OAuth2.0隐藏式授权的场景和实践方案。

什么是 OAuth2.0? 可以看阮老师的文章: OAuth 2.0 的一个简单解释

OAuth2.0 隐藏式: 有些纯前端 Web 应用,没有后端,无法采用 OAuth2.0 授权码模式,因为将 client_secret 放在前端是很危险的行为。OAuth2.0 隐藏式(implicit) 即是授权服务直接向前端Web应用发令牌。

1. CCP 使用介绍

只需3步配置,即可拥有一个云盘系统。

(1) 创建域

用户可以在 阿里云CCP官网控制台,创建一个域(domain),假设domainID为 hz01, CCP会分配1个 API 子域名: https://hz01.api.alicloudccp.com

image.png

(2) 配置OAuth登录页面

配置好域的用户体系配置:具体的配置方法请看这里

image.png

CCP会分配1个认证授权服务子域名: https://hz01.auth.alicloudccp.com

(3) 直接开通官方提供的BasicUI云盘应用

image.png

允许访问后,再以超级管理员登入一次激活,即可开通成功。

image.png

BasicUI 提供1个子域名: https://hz01.apps.alicloudccp.com。您的用户可以通过此子域名访问云盘系统了。

更多BasicUI的介绍请看:Basic UI简介

2. CCP OAuth2.0 隐藏式授权流程

image.png

(1) 授权请求

用户浏览CCP的云盘应用https://hz01.apps.alicloudccp.com,想要用一个第三方应用在线markdown编辑器打开 a.md 这个文件。

  • 这个编辑器是一个纯前端应用,假设域名为 https://a.com
  • 编辑器提供 redirect_uri 为: https://a.com/callback.html
  • 我们可以构造下授权请求url:
https://hz01.auth.alicloudccp.com/v2/oauth/authorize?
response_type=token&
client_id=xxx&
redirect_uri=CALLBACK_URL&
scope=FILE.ALL
  • 其中 CALLBACK_URL 为 encodeURIComponent('https://a.com/callback.html')
  • client_id 为markdown编辑器的appId(可以在CCP官网控制台创建应用获得,请先看应用概述)。

(2) 用户认证和授权

浏览器请求这个url,会跳转到登录页面,用户登录确认后,会重定向到CALLBACK_URL且通过hash返回access_token等信息,如: https://a.com/callback.html#access_token=xxxxx&expire_in=3600&token_type=Bearer

image.png

(3) callback

编辑器的callback.html页面,解析location的hash。

  • access_token等参数解析出来,保存到本地存储中。
  • callback.html 需要清空历史记录,因为access_token是在url中的,会保留在历史记录里。

(4) 调用CCP API

编辑器就可以通过 access_token 来操作 a.md 文件了。

3. 使用 OAuth Widget

CCP 官方提供了一些拥有特定功能的 Widget, 供第三方应用接入时使用。详情请看Widget 介绍

OAuth Widget即是将上面的OAuth2.0 隐藏式授权逻辑封装起来,做成一个可重用的组件。

下面介绍此widget的用法:

(1) 引入js

<button id="btn_1">登录</button>
<script src="/media/202004071552407Ub.js"></script>

(2) 点击按钮,即可弹出登录窗口

window.onload = function () {
  document.getElementById('btn_1').onclick = async function () {
    var tokenInfo = await CCPWidgets.oAuthLogin({
        domain_id: '<Your Domain ID>',
        client_id: '<Your App ID>' 
    })
    //用户登录授权后,即可拿到tokenInfo
    console.log(tokenInfo)
  }
}

(3) 弹出登录框效果

image.png

参考:JS Widget 授权原理和调用的API