› 推特 ›阿里云技术文档›正文

web浏览器应用的OAuth2.0接入流程_应用接入详解_用户指南_内容协作平台

admin 阿里云技术文档 2020-02-11 217 0
阿里云服务器优惠

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

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

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

1. 介绍

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

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

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

web浏览器应用的OAuth2.0接入流程_应用接入详解_用户指南_内容协作平台 阿里云技术文档 第1张

(3) widget 用例:

web浏览器应用的OAuth2.0接入流程_应用接入详解_用户指南_内容协作平台 阿里云技术文档 第2张

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 SDK 接入获取token

(1) 引入api.js

  1. <script src="http://g.alicdn.com/ccp/1.0.0/api.js"></script>

(2) 调用signIn() 授权

  1. var client = new CCPAuthClient({
  2.   client_id: APP_ID,
  3.   scope: "FILE.READ",
  4.   redirect_uri: 'http://a.com/callback'
  5. })
  7. //打开登录授权页面
  8. client.signIn().then(function(data){
  9.    //授权成功, 拿到access_token
  10.   var access_token = data.access_token;
  11.   //保存到客户端...
  12. }).catch(function(err){
  13.   //授权失败
  14. });

3. JS SDK 授权原理和调用的API

(1) /authorize 接口

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

  1. //打开新的窗口授权
  2. var authWin = window.open('/authorize?client_id='+APP_ID+'&response_type=token&state=abc&redirect_uri=http://mysite.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> HTTP/1.1
  2. Host: {domainId}.api.alicloudccp.com
参数 是否必选 描述
client_id 是 AppId， 如果没有请到官网控制台去创建。
redirect_uri 是 回调地址: 告诉认证服务在授权认证流程完成后重定向到哪里。一般是您的web服务提供的一个地址：比如：http://a.com/callback, 认证服务在授权完成后，会redirect到这个地址并且带上access_token等信息: http://a.com/callback#access_token=xxx&expires_in=xxx&token_type=Bearer 注意：这个redirect_uri 必须和您创建App时填写的redirect_uri 一致。
scope 是 访问范围列表，描述您的Web服务应用需要的访问权限范围，将在用户同意授权页面展示。请看支持Scope列表 。
response_type 是 此处固定为”token”
state 否，但推荐使用 如果请求中包含这个参数，认证服务器在重定向的时候会原封不动返回, 用于防止重放攻击。
prompt 否 在用户第一次登录完成后，是否需要展示 consent 页面。可选值: none, consent。如果为none则不展示，直接跳过。

(2) 重定向回 /callback

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

/callback 页面举例:

  1. <!DOCTYPE html>
  2. <html>
  3.   <head>
  4.     <title>callback</title>
  5.   </head>
  6.   <body>
  7.     <script>
  8.       var hash = location.hash;
  9.       if(hash){ 
  10.         window.postMessage(hash) //向宿主页面发送hash, js sdk 可以得到hash
  11.         window.location.replace('/callback') //清除历史记录
  12.       }else{
  13.         window.close() //replace 后没有hash，关闭窗口
  14.       }
  15.     </script>
  16.   </body>
  17. </html>

(3) 解析hash 得到access_token

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

4. 调用CCP 服务API

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

版权声明

本文仅代表作者观点，不代表本站立场。
本文系作者授权发表，未经许可，不得转载。

评论

-----