内容协作平台（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) 弹出登录框效果
