Web瀏覽器應用的OAuth2.0接入流程 - Drive and Photo Service

說明

本文檔主要描述JavaScript前端應用如何通過OAuth2.0接入 PDS 服務。適用於：純前端的JavaScript web應用，比如chrome外掛程式擴充，js Widget等。

由於是前端應用，您的應用中無法存放機密資訊，比如 App 的 secret。所以認證流程和 Web服務應用流程又有所不同。

1. 介紹

(1) 原理： OAuth2.0 隱形模式（implicit grant type）

隱形模式（implicit grant type）不通過第三方應用程式的伺服器，直接在瀏覽器中向證明伺服器申請令牌，跳過了”授權碼”這個步驟，因此得名。所有步驟在瀏覽器中完成，令牌對訪問者是可見的，且用戶端不需要認證。

(2) 純前端單頁面應用（SPA）用例：

2. 接入前提

(1) 建立Domain

首先，您需要在PDS官網控制台 https://pds.console.alibabacloud.com建立一個域（Domain）。建立完成後，會提供一個3級API網域名稱 https://{domainId}.api.aliyunpds.com。

(2) 啟用登入頁面

使用此種方式，還需要啟用PDS提供的Auth登入頁面。PDS會提供一個3級網域名稱：https://{domainId}.api.aliyunpds.com 。

(3) 建立App(Client)

建立App，選擇類型為” Web用戶端應用”。確定App的訪問Scope: Scope說明, 這個Scope要在使用者授權頁面展示。配置redirect_uri。建立完成，可以得到 AppId(ClientId)。

(1) /authorize 介面

開啟新的視窗授權：

//開啟新的視窗授權
var domainId = '您的domain ID'
var authWin = window.open('https://'+domainId+'.api.aliyunpds.com/v2/oauth/authorize?client_id='+APP_ID+'&response_type=token&state=abc&login_type=default&redirect_uri=http://example.com/callback',  '_blank', 'location=0,status=0,titlebar=0,menubar=0,resizable=0,height=500,width=600', true)
authWin.onmessage=function(e){
  var hash = e.data;
  //解析hash, 得到access_token
}

說明

API 請求文法：

GET /v2/oauth/authorize?client_id=<APPID>&response_type=token&state=[state]&login_type=<login_type>&redirect_uri=<redirect_uri> HTTP/1.1
Host: {domainId}.api.aliyunpds.com

參數	是否必選	描述
client_id	是	AppId，如果沒有請到官網控制台去建立。
redirect_uri	是	回調地址：告訴認證服務在授權認證流程完成後重新導向到哪裡。一般是您的Web服務提供的一個地址：比如：https://example.com/callback, 認證服務在授權完成後，會redirect到這個地址並且帶上access_token等資訊：https://example.com/callback#access_token=xxx&expires_in=xxx&token_type=Bearer注意：這個redirect_uri 必須和您建立App時填寫的redirect_uri 一致。
scope	否	存取範圍列表，描述您的Web服務應用需要的存取權限範圍，將在使用者同意授權頁面展示。請看支援Scope列表。
response_type	是	此處固定為”`token`”
state	否，但推薦使用	如果請求中包含這個參數，證明伺服器在重新導向的時候會原封不動返回, 用於防止重放攻擊。
login_type	是	登入選項, 可選項：`['default','phone','ding','ldap','wx','ram']`。`default`表示預設的登入頁面（頁麵包含手機號登入和其他登入連結），`phone`表示手機號登入，`ding`表示DingTalk掃碼登入，`ldap`表示LDAP/AD域登入，`wx`表示企業微信登入，`ram`表示阿里雲RAM子帳號登入。
hide_consent	否	在使用者第一次登入完成後，是否需要展示 consent 頁面。可選值：`true`, `false`。如果為true則不展示，直接跳過。
lang	否	介面展示的語言。目前支援：`zh_CN`，`en_US`。預設： `zh_CN`。

(2) 重新導向回 /callback

成功舉例：http://example.com/callback#access_token=xxx&expires_in=xxx&token_type=Bearer
失敗舉例：http://example.com/callback#error=xxxxxx

/callback 頁面舉例：

<!DOCTYPE html>
<html>
<body>
  <script>
    var hash = location.hash;
    if (hash) {
      var sch = new URLSearchParams(hash.replace(/^#?/g, ''))
      var access_token = sch.get('access_token')
      var expires_in = parseInt(sch.get('expires_in'))
      var expire_time = sch.get('expire_time')
      if(!isNaN(expires_in) && !expire_time){
        expire_time=new Date(Date.now()+expires_in*1000).toISOString()
      }
      var token_type = sch.get('token_type')
      var state = JSON.parse(sch.get('state') || '{}')
      top.opener.postMessage({ access_token, expires_in,expire_time, token_type }, state.origin)
      window.location.replace(window.location.origin + window.location.pathname)
    } else {
      window.close()
    }
  </script>
</body>
</html>

callback頁面解析 hash，得到access_token。postMessage 給 opener頁面。

(3) 接收 access_token

在 opener 頁面接收 callback 頁面 postMessage 發送過來的access_token。

4. 調用 PDS 服務API

前端應用可以直接使用 AccessToken 調用 PDS API。只需在要求標頭的Authorization中帶上AccessToken。

調用方式詳情請參考調用方式。

Drive and Photo Service：Web瀏覽器應用的OAuth2.0接入流程

1. 介紹

2. 接入前提

3. 網頁用戶端應用授權原理和調用的API

4. 調用 PDS 服務API