全部产品
云市场

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

更新时间:2020-03-24 11:24:17

本文档主要描述Javascript前端应用如何通过OAuth2.0接入CCP服务。 适用于: 纯前端的Javascript web应用, 比如chrome插件扩展,js Widget等。

由于是前端应用,您的应用中无法存放机密信息,比如 App 的 secret。所以认证流程和 Web服务应用流程又有所不同。

1. 介绍

(1) 原理: OAuth2.0 隐藏模式(implicit grant type)

隐藏模式(implicit grant type)不通过第三方应用程序的服务器,直接在浏览器中向认证服务器申请令牌,跳过了”授权码”这个步骤,因此得名。所有步骤在浏览器中完成,令牌对访问者是可见的,且客户端不需要认证。

(2) 纯前端单页面应用(SPA)用例:

a1

(3) widget 用例:

a2

2. 接入前提

(1) 创建Domain

首先,您需要在CCP官网控制台 https://ccp.console.aliyun.com 创建一个域(Domain)。创建完成后,会提供一个3级API域名 https://{domainId}.api.alicloudccp.com

(2) 启用登录页面

使用此种方式,还需要启用CCP提供的Auth登录页面。CCP会提供一个3级域名https://{domainId}.auth.alicloudccp.com

(3) 创建App(Client)

创建App,选择类型为”javascript 客户端应用”。确定App的访问Scope: 支持Scope列表, 这个Scope要在用户授权页面展示。配置redirect_uri。创建完成,可以得到 AppId(ClientId)。

3. 通过 JS Widget 接入获取token

请直接使用: OAuth 登录 Widget

4. JS Widget 授权原理和调用的API

(1) /authorize 接口

调用 signIn() 方法,其实是打开新的窗口授权

  1. //打开新的窗口授权
  2. var authWin = window.open('/authorize?client_id='+APP_ID+'&response_type=token&state=abc&redirect_uri=http://yoursite.com/callback', '_blank', 'location=0,status=0,titlebar=0,menubar=0,resizeable=0,height=500,width=600', true)
  3. authWin.onmessage=function(e){
  4. var hash = e.data;
  5. //解析hash, 得到access_token
  6. }

API 请求语法:

  1. GET /auth/authorize?client_id=<APPID>&response_type=token&state=[state]&redirect_uri=<redirect_uri>&login_type=[login_type] HTTP/1.1
  2. Host: {domainId}.api.alicloudccp.com
参数 是否必选 描述
client_id AppId, 如果没有请到官网控制台去创建。
redirect_uri 回调地址: 告诉认证服务在授权认证流程完成后重定向到哪里。一般是您的web服务提供的一个地址:比如:http://yoursite.com/callback, 认证服务在授权完成后,会redirect到这个地址并且带上access_token等信息: http://yoursite.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','ding','ding_sns','ram']。 默认: default。default表示默认的登录页面(页面包含手机号登录和其他登录链接),ding表示钉钉扫码登录,ding_sns表示钉钉用户名密码登录,ram表示阿里云RAM子账号登录。

(2) 重定向回 /callback

  • 成功举例: http://yoursite.com/callback#access_token=xxx&expires_in=xxx&token_type=Bearer
  • 失败举例: http://yoursite.com/callback#error=xxxxxx

/callback 页面举例:

  1. <!DOCTYPE html>
  2. <html>
  3. <body>
  4. <script>
  5. var hash = location.hash;
  6. if (hash) {
  7. var sch = new URLSearchParams(hash.replace(/^#?/g, ''))
  8. var access_token = sch.get('access_token')
  9. var expires_in = parseInt(sch.get('expires_in'))
  10. var expire_time = sch.get('expire_time')
  11. if(!isNaN(expires_in) && !expire_time){
  12. expire_time=new Date(Date.now()+expires_in*1000).toISOString()
  13. }
  14. var token_type = sch.get('token_type')
  15. var state = JSON.parse(sch.get('state') || '{}')
  16. top.opener.postMessage({ access_token, expires_in,expire_time, token_type }, state.origin)
  17. window.location.replace(window.location.origin + window.location.pathname)
  18. } else {
  19. window.close()
  20. }
  21. </script>
  22. </body>
  23. </html>

(3) 解析hash 得到access_token

JS Widget 解析callback页面发送过来的 hash, 得到 access_token。

4. 调用 CCP 服务API

前端应用可以直接使用 AccessToken 调用 CCP API。只需在请求头的Authorization中带上AccessToken。 推荐使用 HttpClient Widget