Web浏览器应用的OAuth2.0如何接入_网盘与相册服务(PDS)-阿里云帮助中心

说明

本文档主要描述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.aliyun.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`表示钉钉扫码登录，`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。

调用方式详情请参考调用方式。

Web浏览器应用的OAuth2.0接入流程

1. 介绍

2. 接入前提

3. Web 客户端应用授权原理和调用的API

4. 调用 PDS 服务API