內容協作平臺（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。您的用戶可以通過此子域名訪問雲盤系統了。
更多BasicUI的介紹請看：Basic UI簡介。
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（可以在CCP官網控制檯創建應用獲得，請先看應用概述）。
(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， 供第三方應用接入時使用。詳情請看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) 彈出登錄框效果
