淘宝开放产品前端实践店铺装修 & 开放平台 JS SDK

清羽 & 沉鱼2012-07-07

1. 店铺装修1.1 概要1.2 数据1.3 展现1.4 安全

关于作者

周骞（清羽）http://weibo.com/carffuca

08 年加入淘宝之前是 Java 工程师之后是前端开发工程师

目前负责淘宝店铺、服务、数据业务

1.1 概要店铺装修

店铺装修

装修的本质

店铺平台

模板数据

HTML/CSS

JS

装修的本质

基于模板的内容管理系统

开放装修的历程：第一阶段

店铺平台

模板

数据( 卖家 )

HTML/CSS

JS

1.2 数据店铺装修

模块化 基于模块的店铺

数据的形式 资源类，如一张图片 URL

文本类，如一个标题、一段广告词

条件类，如选择使用某种预置的展现形式

所见即所得 VS 格式化的编辑界面

数据的编辑方式

数据的编辑方式 所见即所得 VS 格式化的编辑界面• 用户编辑的数据并不都是“看得见”的

• 引入第三方设计模板后，格式化的编辑界面便于设计师定义，由程序生成

开放装修的历程：第二阶段

店铺平台

模板（设计师）

数据（卖家）

HTML/CSS

JS

1.3 展现店铺装修

魔高一丈

魔高一丈 通过浮动元素遮挡系统重要内容

通过 CSS 修改重要内容的样式

伪造官方模块

……

规范、有序 明确的 CSS 覆盖关系

•[0,2,0,0]<w<[0,3,0,0]

模块设计师

•[0,1,0,0]<w<[0,2,0,0]

模块默认

•w<[0, 1, 0, 0]

全局基础

规范、有序 模块化的 CSS 书写

规范、有序 层级的规范

设计师模块

z-index <100

官方模块

z-index < 200

系统及全局z-index >200

规范、有序 一整套约束平台上各方代码关系的规范

规范、有序 完善的校验系统

设计师模板制作

HTML

CSS

可选校验

必须校验

设计师模板提交 卖家装修发布

HTML

CSS

HTML

CSS

开放装修的历程：第三阶段

店铺平台

模板（设计师）

数据（卖家）

HTML/CSS

JS

1.4 安全店铺装修

初现端倪的 JS 开放 通过 J_TWidget 的 class hook 与 data-*

的自定义属性提供官方动态组件。

<div class=“J_TWidget” data-type=“Slide” data-cfg=“{…}”><!-- code -->

</div>

如果让设计师写 JS

Cookie 盗取

跳转钓鱼网站

恶意修改官方功能

……

店铺开放 JSiframe ADSafe Caja

保障安全程度高 3 4 5

JS 书写限制少 5 2 4

最终用户体验好 1 3 4

方便调试 5 4 2

性能损耗小 5 4 3

项目活跃度高 / 2 4

项目有应用产品 4 1 3

店铺开放 JS

基于 google-caja 的实现

取其 JS 部分

接入 Kissy DOM 、 Event 等 API

+服务端静态检查 + 翻译

浏览器端运行时检查

店铺开放 JS

用户代码

var el = document.getElementById(“id”)

;

服务端

编译后代码moduleResult___ =

IMPORTS___.w___('el', (x0___ =

IMPORTS___.document_v___? IMPORTS___.document:

___.ri(IMPORTS___, 'document'),

x0___.getElementById_m___? x0___.getElementById('id'):

x0___.m___('getElementById', [ 'id' ]))); 

编译

静态分析代码

Caja.JS

动态拦截代码

店铺开放 JS

浏览器端

编译后代码moduleResult___ =

IMPORTS___.w___('el', (x0___ =

IMPORTS___.document_v___? IMPORTS___.document:

___.ri(IMPORTS___, 'document'),

x0___.getElementById_m___? x0___.getElementById('id'):

x0___.m___('getElementById', [ 'id' ])));

服务端

Kissy 接入 DOM

Event

Anim

log

……

不久的未来 更友好的出错信息提示

如何评估设计师 JS 代码的质量和性能

店铺平台

模板 ( 设计师 )

数据( 卖家 )

HTML/CSS

JS

1.5 小结店铺装修

2 开放平台 JS SDK2.1 概要2.2 安全2.3 数据2.4 展现

关于作者杨周璇（沉鱼）fool2fish.cnweibo.sina.com/fool2fish

07 年毕业于浙江大学08 年加入淘宝目前负责淘宝开放平台项目

2.1 概要开放平台 JS SDK

2.1.1 传统的业务模型

资源服务1. 数据交互

2. 返回结果

2.1.2 开放的业务模型

1. 数据交互

4. 返回结果客户端

2. 数据交互

3. 返回结果

客户 端

客户 端

客户 端

客户 端客户 端

资源服务

2.1.3 开放的动力 资源拥有者• 更多的访问入口

• 多样化的服务

第三方客户端• 共享用户数据

• 增加用户黏性

2.1.4 关键的问题

JAVA SDK JS SDK

展现

数据

安全

2.2 安全开放平台 JS SDK

2.2.1 保障安全的环节客户端接入许可

资源所有者授权

客户端身份校验

客户端行为监控

2.2.2 Oauth2 授权模型

客户端 授权服务

资源服务

1. 授权申请

2. 访问许可

3. 访问许可

4. 授权码

5. 签名和授权码

6. 受保护的资源

资源所有者

2.2.3 签名

客户端 资源服务

3. 时间戳 &签名 授权码 API 参数

4. 受保护的资源

客户端服务

1. 请求页面 2. 页面内容 时间戳 &签名

2.2.4 免签名

客户端 资源服务3. Ajax 发送标识码和授权码

4. 受保护的资源

1. frame请求组件内容

2. 静态内容和标识码

只有请求的组件为 iframe 时，这种简化的认证方式才能保证安全

2.3 数据开放平台 JS SDK

2.3.1 数据获取客户端 开放平台 业务方

授权检查身份校验

生成结果

封装结果

发送请求

返回结果

2.3.1 API 调用TOP.api({

method:’taobao.user.get’,

nick:’fool2fish’,

app_key:’准入码’ ,

session:’授权码’ ,

sign:’签名’ ,

timestamp:’ 时间戳’}, callback);

接口名接口参数

2.3.2 API 集成授权

返回结果

发送请求

调 用正常

返回异常信 息

否

已授权附加授权信 息是

授权异常调 用授权

完 成授权

是

是

否

否

否 是

添加授权码和签名

2.3.3 真正的 API 调用TOP.api({

method:’taobao.user.get’,

nick:’fool2fish’,

}, callback);

让用户专注在他真正需要关心的事情上

2.4 展现开放平台 JS SDK

2.4.1 组件分类

2.4.2 代码隔离 iframe

CSS 选择器和属性规范

自定义标签

客户端

2.4.3 组件通讯

DOM 组件 Iframe 组件 混合组件

2.4.3 组件通讯 TOP.ev.add ( el, event, fn );

TOP.ev.fire ( el, event, data );

TOP.ev postMessagehtml5PostMessage

flashPostMessage

2.4.3 组件通讯

TOP.ev.fire 触发本帧事件

客户端帧

通知客户端帧

遍历组件帧

触发帧

通知组件帧

触发帧

是

是

是

否

否

否

2.5 小结开放平台 JS SDK

2.5.1 JS SDK 总体结构

UI辅助功能

组件通讯

工具方法lang ， dom ， event ， io…

TOP

监控

开放的 api ( TOP.api )

登录授权 ( TOP.auth )

UI 组件 ( TOP.ui )

登录

购物车

……

2.5.2 除此之外 SDK 和组件的版本管理

SDK 自动更新

数据回流与分析

……

2.5.3 参考资料 facebook

oauth

kissy

self updating scripts

完

Q&A