CCP OAuth2.0 隐藏式授权实践

内容协作平台（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。

(2) 配置OAuth登录页面

配置好域的用户体系配置：

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

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

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

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

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

(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。

(2) 用户认证和授权

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

(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， 供第三方应用接入时使用。

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

下面介绍此widget的用法：

(1) 引入js

<button id="btn_1">登录</button>
<script src="https://g.alicdn.com/ccp/ccp-widgets/0.1.1/index.min.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) 弹出登录框效果