专业版应用开发指南
(→应用页面设置) |
(→技术开发) |
||
(未显示2个用户的96个中间版本) | |||
第7行: | 第7行: | ||
==登录微博账号== | ==登录微博账号== | ||
建议由技术开发人员使用官方微博帐号来登录 | 建议由技术开发人员使用官方微博帐号来登录 | ||
− | {{center|http:// | + | {{center|http://ww2.sinaimg.cn/mw690/683f0951jw1dyfkd4gck7j.jpg}} |
==设置开发者信息== | ==设置开发者信息== | ||
− | + | 点击顶导航“应用开发”,在下拉菜单中选择“专业版应用”,进入到应用开发页面; | |
在应用开发页面中,点击“创建应用”按钮: | 在应用开发页面中,点击“创建应用”按钮: | ||
− | {{center|http:// | + | {{center|http://ww2.sinaimg.cn/mw690/683f0951jw1dyfkd4ycefj.jpg}} |
*若您还没有填写开发者信息,系统会自动跳转到编辑开发者信息页面。 | *若您还没有填写开发者信息,系统会自动跳转到编辑开发者信息页面。 | ||
===开发者信息内容填写:=== | ===开发者信息内容填写:=== | ||
− | #开发者类型:个人/ | + | #开发者类型:个人/公司,根据实际情况进行填写。如开发收费的通用应用,必须以公司身份填写。 |
#开发者名称:请填写公司名称或者您的个人姓名。 | #开发者名称:请填写公司名称或者您的个人姓名。 | ||
# 其他信息:个人/公司网站、联系电话、联系Email。 | # 其他信息:个人/公司网站、联系电话、联系Email。 | ||
第23行: | 第23行: | ||
==创建专业版应用== | ==创建专业版应用== | ||
− | + | ||
− | + | ||
− | + | ||
===创建专业版应用需要完善以下信息:=== | ===创建专业版应用需要完善以下信息:=== | ||
#应用名称:该名称用于来源显示,用户通过应用发布微博信息后,应用的名称会出现在微博信息下方,点击后直接进入应用地址。 | #应用名称:该名称用于来源显示,用户通过应用发布微博信息后,应用的名称会出现在微博信息下方,点击后直接进入应用地址。 | ||
− | |||
#应用分类:请依据您所开发的应用类型来选择相关的分类信息;请确认您的应用分类正确,否则无法通过您的审核申请。 | #应用分类:请依据您所开发的应用类型来选择相关的分类信息;请确认您的应用分类正确,否则无法通过您的审核申请。 | ||
− | {{center|http:// | + | {{center|http://ww2.sinaimg.cn/mw690/683f0951jw1dweqn46i0bj.jpg}} |
==编辑应用基本信息== | ==编辑应用基本信息== | ||
第41行: | 第38行: | ||
#功能分类:通用、互动展示、营销工具、市场调研、求职招聘、运营管理、客户服务、舆情监控、数据分析。例如,您的应用选择的功能分类是数据分析,则在专业版应用广场中,您的应用会出现在数据分析应用的筛选结果中。 | #功能分类:通用、互动展示、营销工具、市场调研、求职招聘、运营管理、客户服务、舆情监控、数据分析。例如,您的应用选择的功能分类是数据分析,则在专业版应用广场中,您的应用会出现在数据分析应用的筛选结果中。 | ||
− | + | ===SEO相关=== | |
− | + | 专业版应用创建时填写的“应用介绍”内容,会进入专业版微博框架meta信息中的Description,“行业分类”、“功能分类”会进入专业版微博框架页面的Keywords部分,“应用名称”会成为专业版微博框架title中的一部分。请在开放平台填写相应信息时,注意做好SEO优化。 | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
===应用截图=== | ===应用截图=== | ||
#请上传相关的应用介绍照片,这些图片会在应用频道中展示,让用户能更直观的了解你的应用。 | #请上传相关的应用介绍照片,这些图片会在应用频道中展示,让用户能更直观的了解你的应用。 | ||
− | {{center|http:// | + | {{center|http://ww2.sinaimg.cn/mw690/683f0951jw1dyfkq1whauj.jpg}} |
+ | |||
===测试用户=== | ===测试用户=== | ||
− | + | ||
− | {{center|http:// | + | 1、应用在未通过审核之前,如需进行完整测试,请向qyapps@staff.sina.com.cn申请相应的企业应用测试账号,用于相应授权、传参等的测试。 |
+ | |||
+ | |||
+ | 2、应用在未通过审核之前,不能大范围推广,您可以设置最多15个测试用户(大多数情况下是个人用户)来测试尚在开发中的应用。 | ||
+ | {{center|http://ww2.sinaimg.cn/mw690/683f0951jw1dyfkq2ajxyj.jpg}} | ||
*相关内容填写完毕后,请点击保存按钮进行保存。 | *相关内容填写完毕后,请点击保存按钮进行保存。 | ||
+ | |||
==技术开发== | ==技术开发== | ||
+ | |||
应用信息保存成功后,将会获得该应用的App Key和Secret Key,您可以通过这两个Key数据开始进行相关的技术开发工作。 | 应用信息保存成功后,将会获得该应用的App Key和Secret Key,您可以通过这两个Key数据开始进行相关的技术开发工作。 | ||
App Key是应用的唯一标识,开放平台通过App Key来鉴别应用的身份。 AppSecret是给应用分配的密钥,开发者需要妥善保存这个密钥,这个密钥用来保证应用来源的的可靠性,防止被伪造。 | App Key是应用的唯一标识,开放平台通过App Key来鉴别应用的身份。 AppSecret是给应用分配的密钥,开发者需要妥善保存这个密钥,这个密钥用来保证应用来源的的可靠性,防止被伪造。 | ||
<br> | <br> | ||
− | |||
− | |||
− | |||
+ | ===企业应用授权机制=== | ||
+ | 专业版应用的使用分为两步,第一步是在专业版微博应用广场中安装应用,第二步(如果需要的话),是用户通过OAuth完成相应的授权。机构安装应用后,会生成各自不同的sub appkey,用以和应用的Appkey区分。当用户对专业版应用进行授权的时候,应直接对sub_appkey授权,也就是OAuth授权请使用sub_appkey以及相应的secret来完成。通过这样的授权机制,用户向“京东商城”的“微热卖”应用授权,不意味着同时也向“天猫”的“微热卖”授权。如果不严格遵守sub_appkey机制,将无法使用专业版应用的通知机制,未来也有可能产生更多的其它接口问题。 | ||
+ | {{center|http://ww1.sinaimg.cn/mw690/683f0951jw1dwer6r1ktjj.jpg}} | ||
+ | |||
+ | <br> | ||
+ | 专业版应用授权流程 | ||
+ | {{center|http://www.sinaimg.cn/blog/developer/wiki/kfzn_01_s.png}} | ||
− | === | + | ===专业版应用框架会GET给您的应用以下信息:=== |
1.1用户未授权传递参数 | 1.1用户未授权传递参数 | ||
第86行: | 第79行: | ||
!width="20%" style="text-align:center;font-weight:bolder;border:1px solid #cccccc"|类型及范围 | !width="20%" style="text-align:center;font-weight:bolder;border:1px solid #cccccc"|类型及范围 | ||
!width="65%" style="text-align:center;font-weight:bolder;border:1px solid #cccccc"|说明 | !width="65%" style="text-align:center;font-weight:bolder;border:1px solid #cccccc"|说明 | ||
− | {{api_args| | + | {{api_args|cid|true|int|当前被访问的专业版用户uid}} |
− | {{api_args| | + | {{api_args|viewer|true|int|当前登陆用户uid}} |
− | {{api_args| | + | {{api_args|sub_appkey|true|string|企业安装应用后的子key}} |
+ | {{api_args|tokenString|true|string|未授权也有tokenString参数,但解析出的数组中无access_token信息}} | ||
|} | |} | ||
用户未授权时应用需要自动判断,并调用[http://open.weibo.com/wiki/index.php/API%E6%96%87%E6%A1%A3#.E7.99.BB.E9.99.86.2FOAuth_2.0.E6.8E.A5.E5.8F.A3.5BNEW.5D OAuth 2.0] 授权弹层。 | 用户未授权时应用需要自动判断,并调用[http://open.weibo.com/wiki/index.php/API%E6%96%87%E6%A1%A3#.E7.99.BB.E9.99.86.2FOAuth_2.0.E6.8E.A5.E5.8F.A3.5BNEW.5D OAuth 2.0] 授权弹层。 | ||
第102行: | 第96行: | ||
!width="20%" style="text-align:center;font-weight:bolder;border:1px solid #cccccc"|类型及范围 | !width="20%" style="text-align:center;font-weight:bolder;border:1px solid #cccccc"|类型及范围 | ||
!width="65%" style="text-align:center;font-weight:bolder;border:1px solid #cccccc"|说明 | !width="65%" style="text-align:center;font-weight:bolder;border:1px solid #cccccc"|说明 | ||
− | {{api_args| | + | {{api_args|cid|true|int|当前被访问的专业版用户uid}} |
− | {{api_args| | + | {{api_args|viewer|true|int|当前登陆用户uid}} |
− | + | {{api_args|sub_appkey|true|string|企业安装应用后的子key}} | |
− | {{api_args| | + | {{api_args|tokenString|true|string|access token,请按.分割为两部分,后一部分先base64_decode,然后json_decode}} |
− | {{api_args| | + | |
− | + | ||
|} | |} | ||
+ | ===授权回调页设置:=== | ||
+ | {{center|http://www.sinaimg.cn/blog/developer/wiki/anquanyumingweizhi.png}} | ||
− | + | {{center|http://www.sinaimg.cn/blog/developer/wiki/anquanyumingtianxie.png}} | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | } | + | |
− | + | ||
− | + | ||
− | } | + | |
− | + | ||
− | + | ||
===调用应用授权弹层=== | ===调用应用授权弹层=== | ||
第143行: | 第114行: | ||
<pre> | <pre> | ||
+ | |||
+ | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> | ||
+ | <html xmlns="http://www.w3.org/1999/xhtml"> | ||
+ | <head> | ||
+ | <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> | ||
+ | <title>未授权时的页面</title> | ||
+ | |||
<style> | <style> | ||
body{ | body{ | ||
第149行: | 第127行: | ||
</style> | </style> | ||
− | <script src="http:// | + | <script src="http://js.t.sinajs.cn/t4/enterprise/js/public/appframe/appClient.js" type="text/javascript"></script> |
+ | |||
<script> | <script> | ||
− | 弹出授权弹层: | + | //弹出授权弹层: |
function authLoad(){ | function authLoad(){ | ||
App.AuthDialog.show({ | App.AuthDialog.show({ | ||
− | client_id : '<?=WB_AKEY;?>', // | + | client_id : '<?=WB_AKEY;?>', //必选,填入框架通过get方式传递的sub_appkey参数 |
− | redirect_uri : '<?=$canvas_page;?>', // | + | redirect_uri : '<?=$canvas_page;?>', |
− | height: 120 //可选,默认距顶端120px | + | //必选,授权回调地址,必须以http://e.weibo.com开头,类似http://e.weibo.com/1717871843/app_738247391 |
+ | //或者http://e.weibo.com/thirdapp/app?appkey=738247391,不同企业应用的前台url是不固定的,需要用uid拼装 | ||
+ | height: 120, //可选,默认距顶端120px | ||
+ | display: 'apponweibo' //必选,移动端H5授权则应为display: 'mobile' | ||
}); | }); | ||
} | } | ||
</script> | </script> | ||
+ | </head> | ||
+ | <body onload="authLoad();"> | ||
+ | |||
+ | </body> | ||
+ | </html> | ||
</pre> | </pre> | ||
+ | |||
+ | 线上授权范例:http://e.weibo.com/2822861085/app_639562573 | ||
===用户进行授权操作=== | ===用户进行授权操作=== | ||
− | + | 用户进行授权操作后,会回调专业版应用页面(即e.weibo.com/<uid>/app_<appkey>),重新进行以上流程。 | |
开发参考:[[ API文档 |API参考]]、[[Weibo-JS V2 | Javascript SDK ]]、[http://code.google.com/p/libweibo/ PHPSDK及调用DEMO] | 开发参考:[[ API文档 |API参考]]、[[Weibo-JS V2 | Javascript SDK ]]、[http://code.google.com/p/libweibo/ PHPSDK及调用DEMO] | ||
− | === | + | ===设计样式=== |
− | + | ||
− | + | 专业版应用是通过Iframe的形式将应用的页面嵌套进微博的页面当中,有2个页面供用户使用。 | |
− | + | 1.应用地址:此页面是应用被用户安装后,其他用户访问此应用时看到的页面,宽度940px,高度为600-3000px。如下图所示: | |
− | + | {{center|http://www.sinaimg.cn/blog/developer/wiki/sxyv5.jpg}} | |
+ | 2.管理地址:此页面是应用被用户安装后,用户在企业微博管理中心中,管理此应用时用到的页面,宽度760px,高度为600-3000px。如下图所示: | ||
+ | {{center|http://www.sinaimg.cn/blog/developer/wiki/sxyv5gl.jpg}} | ||
− | |||
− | + | ===应用动态高度自适应=== | |
+ | Iframe高度:开发者可以使Iframe的高度根据你的应用页面自适应,但需要开发者在应用页面中部署一段JS代码: | ||
+ | <pre> | ||
+ | <script src="http://js.t.sinajs.cn/t4/enterprise/js/public/appframe/client.js" type="text/javascript"></script> | ||
+ | </pre> | ||
+ | <br> | ||
+ | *提示:若你的应用有多个页面,并且每个页面的高度不一致,则每个页面都需要部署以上JS代码。appClient.js为支持授权弾层的iframe自适应,包含client.js的所有功能。appClient.js在调用授权弹层时已加载。 | ||
− | + | 页面中如果存在浮动层,并且浮动层的最下边超过了页面中的底部元素。这种情况下可能会出现高度自适应不正常。 | |
− | + | ||
+ | 解决方案: | ||
+ | |||
+ | (1)浮动层在页面基本元素的可视范围内显示。 | ||
+ | |||
+ | (2)在页面底部插入一个空白元素,高度视情况而定(如:空白元素的下边沿与浮动层的下边沿持平)。 | ||
+ | |||
+ | (3)将页面中的body或者某个外层容器的高度设置为一个合适的值(如:<body style="height:800px;">)。 | ||
+ | |||
+ | ===页面浮层居中解决方案=== | ||
+ | |||
+ | 如果需要在页面中的浮层保持在当前浏览器位置居中显示,那么需要加入如下代码: | ||
+ | |||
+ | <pre> | ||
+ | //在v4或v5下监听scroll事件 | ||
+ | FrameClient.addEvent('scroll', function(evt, data) { | ||
+ | //console.log(data);//使用data中的属性来达到自己相对于父页面的定位。 | ||
+ | }); | ||
+ | |||
+ | //v4所接收到data的参数说明: | ||
+ | /* | ||
+ | data:{ | ||
+ | top : 0, | ||
+ | left : 0, // 子页面左侧相对于父页面左侧距离 | ||
+ | scrollTop : 0,//父页面纵向滚动条顶部距离 | ||
+ | scrollLeft : 0,// 父页面横向滚动条 | ||
+ | width : 0, | ||
+ | height : 0 | ||
+ | } | ||
+ | */ | ||
+ | |||
+ | //v5所接收到data的参数说明: | ||
+ | /* | ||
+ | data:{//其中中间层代表e.weibo.com,最外层代表weibo.com,最内层为第三方应用 | ||
+ | isV5 : ture,//是否在V5框架下 | ||
+ | scrollTop : 0,//最外层纵向滚动条顶部距离 | ||
+ | scrollLeft : 0,//最外层横向向滚动条左部距离 | ||
+ | top : 0,//中间层iframe距离顶端的高度 | ||
+ | left : 0,//中间层iframe距离最外层的值 | ||
+ | height : 0,//最外层页面clientHeight的高度 | ||
+ | scrollTopInner : 0//滚动轴到中间层顶部的高度 | ||
+ | } | ||
+ | */ | ||
+ | </pre> | ||
+ | <br> | ||
+ | |||
+ | 若需要判断应用在v4下还是v5下存在可使用类似如下语句: | ||
+ | |||
+ | <pre> | ||
+ | FrameClient.addEvent('scroll', function(evt, data) { | ||
+ | if(data.isV5 == true){//说明应用在v5下,data为v5下的数据 | ||
+ | |||
+ | }else {//说明应用在v4下,data为v4下的数据 | ||
+ | |||
+ | } | ||
+ | }); | ||
+ | </pre> | ||
+ | <br> | ||
+ | |||
+ | |||
+ | ===最外层页面跳转方法说明=== | ||
+ | |||
+ | V4与V5情况下,最外层页面的跳转办法: | ||
+ | |||
+ | 使用window.top.location.href | ||
+ | |||
+ | <pre> | ||
+ | //v5下跳转最外层页面 | ||
+ | window.top.location.href = 'http://weibo.com?xxx=******'; | ||
+ | //v4下跳转最外层页面 | ||
+ | window.top.location.href = 'http://e.weibo.com?xxx=******'; | ||
+ | </pre> | ||
+ | <br> | ||
+ | |||
+ | ===URL规范=== | ||
+ | #本规范主要针对展示类应用的前台,展示类应用的后台和管理类应用请忽略 | ||
+ | #应用父框架URL为http://e.weibo.com/{uid}/app_{appkey}?key=****** | ||
+ | #应用内部页面与新浪专业版微博应用url必须实现一一对应 | ||
+ | #在专业版应用内部页面分享相关的功能或者组件中,请务必以新浪专业版微博应用url作为分享内容中的链接 | ||
+ | #应用内部的跳转链接,无论是<a>标签,还是js代码跳转等,强制要求必须使用新浪专业版微博应用url | ||
+ | #假设新浪专业版微博应用url为http://e.weibo.com/{uid}/app_{appkey}?key=****** ,则专业版微博的页面框架会向专业版应用iframe地址url中追加以下参数“key=******”,应用应当根据相应参数,加载相应的页面或进行对应处理响应。******部分可进行自定义,但会过滤掉除字母数字以及下划线外的其它特殊字符 | ||
+ | |||
+ | ===数据监测=== | ||
+ | |||
+ | <pre> | ||
+ | <a suda-uatrack = "key=ebusiness_apps&value=1365680744:1762587913:share: 13939943415:58: 2nBbQ2Yj:1" | ||
+ | href="javascript:void(0)" onclick="return false;" action-type = "change" class = "change_cont" | ||
+ | action-data = "offset=1">分享</a> | ||
+ | |||
+ | </pre> | ||
+ | |||
+ | 企业可以在专业版微博管理首页—数据中心—应用数据中查看到相应的互动数据等。第三方开发者可以在open.weibo.com我的应用—数据统计查看相应数据。 | ||
+ | |||
+ | ===安全相关=== | ||
+ | |||
+ | 专业版应用应当判定HTTP的referer参数,如果来源不是http://e.weibo.com 域名下的链接,应显示友好的错误提示,个性化应用也可以直接跳转到对应的专业版微博框架地址。<br> | ||
+ | |||
+ | 有后台管理设置的专业版应用,应考虑在后台进行授权控制,保证通过框架获得的cid参数和授权后获得uid一致,才允许访问后台,修改应用设置。 | ||
+ | |||
+ | |||
+ | ===移动端Html5支持=== | ||
+ | |||
+ | {{center|http://www.sinaimg.cn/blog/developer/wiki/yidongduanyingyongrukou.png}} | ||
+ | |||
+ | 新浪企业微博应用H5首页url为:http://e.weibo.cn/{uid}/app_{appkey} | ||
+ | |||
+ | |||
+ | 在移动端浏览器中,访问http://weibo.com/{uid}/app?from=page_100606&mod=TAB&appid={appkey}&key=****** ,会重定向到http://e.weibo.cn/{uid}/app_{appkey}?key=****** | ||
+ | |||
+ | |||
+ | 以上跳转映射由企业微博框架完成,应用可以忽略,但应用的首页需要根据浏览器的类型以及HTTP referer等必要的信息,加载或跳转至对应的应用页面。例如HTTP referer如果是e.weibo.com,则加载PC端页面;如果是e.weibo.cn,则加载移动端H5页面。 | ||
+ | |||
+ | |||
+ | 微博移动客户端框架(同样是iframe机制)同样会向第三方应用传递以下参数: | ||
+ | |||
+ | i. viewer:当前登录用户uid | ||
+ | |||
+ | ii. cid:被访问者uid | ||
+ | |||
+ | iii. sub_appkey | ||
+ | |||
+ | H5的OAuth授权中的display参数应使用mobile。需将接口调用地址从api.weibo.com更换为open.weibo.cn。 | ||
+ | |||
+ | 移动终端的授权页面请参考http://open.weibo.com/wiki/Oauth2/authorize 中的说明 | ||
+ | |||
+ | |||
+ | 企业应用H5的导航必须明确、易于点击。如果包含多个页面,则需要明确的返回首页的导航。 | ||
+ | |||
+ | |||
+ | 企业应用H5端测试流程: | ||
+ | |||
+ | 1、自行申请测试应用,无须提交审核。申请完成后请将应用名称和appkey通过邮件告知qyapps@staff.sina.com.cn,请求打开移动端支持。 | ||
+ | |||
+ | 2、申请测试帐号,测试帐号PC端安装测试应用,并设置前台显示。 | ||
+ | |||
+ | 3、通过最新微博客户端搜索测试帐号,进入测试。 | ||
+ | |||
+ | '''如未申请开通H5端展示权限,应用在被安装后在无线端依然无法展示,请注意。''' | ||
+ | |||
+ | |||
+ | 移动端use-agent: | ||
+ | |||
+ | <pre> | ||
+ | 'mobilephone' => array( | ||
+ | 'nokia' => 'Nokia', | ||
+ | 'iphone' => 'iPhone', | ||
+ | 'ipod' => 'iPod', | ||
+ | 'symbian' => 'Symbian', | ||
+ | 'android' => 'Android', | ||
+ | 'htc' => 'HTC', | ||
+ | 'SonyEricsson' => 'SonyEricsson', | ||
+ | 'Sony' => 'Sony', | ||
+ | 'motorola' => 'Motorola', | ||
+ | 'mobileexplorer' => 'Mobile Explorer', | ||
+ | 'openwave' => 'Open Wave', | ||
+ | 'opera mini' => 'Opera Mini', | ||
+ | 'operamini' => 'Opera Mini', | ||
+ | 'elaine' => 'Palm', | ||
+ | 'palmsource' => 'Palm', | ||
+ | 'digital paths' => 'Palm', | ||
+ | 'avantgo' => 'Avantgo', | ||
+ | 'xiino' => 'Xiino', | ||
+ | 'palmscape' => 'Palmscape', | ||
+ | 'ericsson' => 'Ericsson', | ||
+ | 'blackBerry' => 'BlackBerry', | ||
+ | 'SmartPhone' => 'SmartPhone', | ||
+ | 'WindowsCE' => 'WindowsCE', | ||
+ | 'Mobile' => 'Unknown Mobile', | ||
+ | ) | ||
+ | |||
+ | 'pad' => array( | ||
+ | 'ipad' => 'iPad', | ||
+ | 'tablet' => 'Tablet', | ||
+ | ) | ||
+ | </pre> | ||
==专业版应用审核== | ==专业版应用审核== | ||
当您完成专业版应用的开发并测试没有问题后,可以在专业版应用的汇总信息页面点击“提交审核”按钮,将您的应用提交给平台工作人员进行审核。 | 当您完成专业版应用的开发并测试没有问题后,可以在专业版应用的汇总信息页面点击“提交审核”按钮,将您的应用提交给平台工作人员进行审核。 | ||
我们的工作人员在收到您的申请后,会和您进行联络,并试用您所开发的应用,在确认应用开发已经完成并且可以正常使用后,会通过您的申请。 | 我们的工作人员在收到您的申请后,会和您进行联络,并试用您所开发的应用,在确认应用开发已经完成并且可以正常使用后,会通过您的申请。 | ||
− | {{center|http:// | + | {{center|http://ww3.sinaimg.cn/mw690/683f0951jw1dyfkq2puxuj.jpg}} |
专业版应用通过审核之后,将突破15个测试帐号的限制,可以被所有的微博用户所使用,并且自动被推荐到应用广场。 | 专业版应用通过审核之后,将突破15个测试帐号的限制,可以被所有的微博用户所使用,并且自动被推荐到应用广场。 | ||
<br> | <br> | ||
+ | [[专业版应用开发者红宝书]] | ||
<br> | <br> | ||
审核详情请参考:[[专业版应用审核规范]] | 审核详情请参考:[[专业版应用审核规范]] |
2013年11月22日 (五) 17:53的最后版本
目录 |
专业版应用创建及发布流程图
专业版应用的创建及发布包括下面的流程,开发者可以根据应用当前的状态进行相应的操作:
请注意,修改白名单以及企业应用定价,无须进行二次审核。
登录微博账号
建议由技术开发人员使用官方微博帐号来登录
设置开发者信息
点击顶导航“应用开发”,在下拉菜单中选择“专业版应用”,进入到应用开发页面; 在应用开发页面中,点击“创建应用”按钮:
- 若您还没有填写开发者信息,系统会自动跳转到编辑开发者信息页面。
开发者信息内容填写:
- 开发者类型:个人/公司,根据实际情况进行填写。如开发收费的通用应用,必须以公司身份填写。
- 开发者名称:请填写公司名称或者您的个人姓名。
- 其他信息:个人/公司网站、联系电话、联系Email。
- 请如实填写,以便于我们和您及时沟通联系。
- 填写完毕,请点击保存按钮进行保存
创建专业版应用
创建专业版应用需要完善以下信息:
- 应用名称:该名称用于来源显示,用户通过应用发布微博信息后,应用的名称会出现在微博信息下方,点击后直接进入应用地址。
- 应用分类:请依据您所开发的应用类型来选择相关的分类信息;请确认您的应用分类正确,否则无法通过您的审核申请。
编辑应用基本信息
应用页面设置
- 应用名称:站内应用、移动应用、网站接入中已经使用的应用名称均不可再注册成为专业版应用。仅官方应用和认证合作伙伴应用可以使用 “企业※※”、”政府※※”、“媒体※※”、“蓝V※※”作为应用名称,否则相应申请将被驳回
- 应用地址:专业版微博主页通过iframe嵌入的应用前台页面,用于展示给机构的访问者看
- 管理地址:专业版微博管理后台通过iframe嵌入的应用后台页面,用于专业版微博主管理之用
- 应用类型:如果是只有后台管理,无须前台展示的应用,请选择应用类型为“管理类应用”(重要,设置错误可能导致相关功能异常,#请谨慎设置,如有疑问请联系 qyapps@staff.sina.com.cn)
- 行业分类:通用、汽车、美食、旅游、房产、电商、教育、零售、休闲娱乐、IT、服饰、美容化妆、文化出版、金融。例如,您的应用选择的行业分类是美食,则在专业版应用广场中,您的应用会出现在美食应用的筛选结果中。
- 功能分类:通用、互动展示、营销工具、市场调研、求职招聘、运营管理、客户服务、舆情监控、数据分析。例如,您的应用选择的功能分类是数据分析,则在专业版应用广场中,您的应用会出现在数据分析应用的筛选结果中。
SEO相关
专业版应用创建时填写的“应用介绍”内容,会进入专业版微博框架meta信息中的Description,“行业分类”、“功能分类”会进入专业版微博框架页面的Keywords部分,“应用名称”会成为专业版微博框架title中的一部分。请在开放平台填写相应信息时,注意做好SEO优化。
应用截图
- 请上传相关的应用介绍照片,这些图片会在应用频道中展示,让用户能更直观的了解你的应用。
测试用户
1、应用在未通过审核之前,如需进行完整测试,请向qyapps@staff.sina.com.cn申请相应的企业应用测试账号,用于相应授权、传参等的测试。
2、应用在未通过审核之前,不能大范围推广,您可以设置最多15个测试用户(大多数情况下是个人用户)来测试尚在开发中的应用。
- 相关内容填写完毕后,请点击保存按钮进行保存。
技术开发
应用信息保存成功后,将会获得该应用的App Key和Secret Key,您可以通过这两个Key数据开始进行相关的技术开发工作。
App Key是应用的唯一标识,开放平台通过App Key来鉴别应用的身份。 AppSecret是给应用分配的密钥,开发者需要妥善保存这个密钥,这个密钥用来保证应用来源的的可靠性,防止被伪造。
企业应用授权机制
专业版应用的使用分为两步,第一步是在专业版微博应用广场中安装应用,第二步(如果需要的话),是用户通过OAuth完成相应的授权。机构安装应用后,会生成各自不同的sub appkey,用以和应用的Appkey区分。当用户对专业版应用进行授权的时候,应直接对sub_appkey授权,也就是OAuth授权请使用sub_appkey以及相应的secret来完成。通过这样的授权机制,用户向“京东商城”的“微热卖”应用授权,不意味着同时也向“天猫”的“微热卖”授权。如果不严格遵守sub_appkey机制,将无法使用专业版应用的通知机制,未来也有可能产生更多的其它接口问题。
专业版应用授权流程
专业版应用框架会GET给您的应用以下信息:
1.1用户未授权传递参数
必选 | 类型及范围 | 说明 | |
---|---|---|---|
cid | true | int | 当前被访问的专业版用户uid |
viewer | true | int | 当前登陆用户uid |
sub_appkey | true | string | 企业安装应用后的子key |
tokenString | true | string | 未授权也有tokenString参数,但解析出的数组中无access_token信息 |
用户未授权时应用需要自动判断,并调用OAuth 2.0 授权弹层。
1.2用户授权后传递参数
必选 | 类型及范围 | 说明 | |
---|---|---|---|
cid | true | int | 当前被访问的专业版用户uid |
viewer | true | int | 当前登陆用户uid |
sub_appkey | true | string | 企业安装应用后的子key |
tokenString | true | string | access token,请按.分割为两部分,后一部分先base64_decode,然后json_decode |
授权回调页设置:
调用应用授权弹层
调用授权弹层时,页面背景用一张应用图片填充,给用户带来更好的体验。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>未授权时的页面</title> <style> body{ background:url("http://qimeng.appsina.com/images/1.jpg"); } </style> <script src="http://js.t.sinajs.cn/t4/enterprise/js/public/appframe/appClient.js" type="text/javascript"></script> <script> //弹出授权弹层: function authLoad(){ App.AuthDialog.show({ client_id : '<?=WB_AKEY;?>', //必选,填入框架通过get方式传递的sub_appkey参数 redirect_uri : '<?=$canvas_page;?>', //必选,授权回调地址,必须以http://e.weibo.com开头,类似http://e.weibo.com/1717871843/app_738247391 //或者http://e.weibo.com/thirdapp/app?appkey=738247391,不同企业应用的前台url是不固定的,需要用uid拼装 height: 120, //可选,默认距顶端120px display: 'apponweibo' //必选,移动端H5授权则应为display: 'mobile' }); } </script> </head> <body onload="authLoad();"> </body> </html>
线上授权范例:http://e.weibo.com/2822861085/app_639562573
用户进行授权操作
用户进行授权操作后,会回调专业版应用页面(即e.weibo.com/<uid>/app_<appkey>),重新进行以上流程。
开发参考:API参考、 Javascript SDK 、PHPSDK及调用DEMO
设计样式
专业版应用是通过Iframe的形式将应用的页面嵌套进微博的页面当中,有2个页面供用户使用。
1.应用地址:此页面是应用被用户安装后,其他用户访问此应用时看到的页面,宽度940px,高度为600-3000px。如下图所示:
2.管理地址:此页面是应用被用户安装后,用户在企业微博管理中心中,管理此应用时用到的页面,宽度760px,高度为600-3000px。如下图所示:
应用动态高度自适应
Iframe高度:开发者可以使Iframe的高度根据你的应用页面自适应,但需要开发者在应用页面中部署一段JS代码:
<script src="http://js.t.sinajs.cn/t4/enterprise/js/public/appframe/client.js" type="text/javascript"></script>
- 提示:若你的应用有多个页面,并且每个页面的高度不一致,则每个页面都需要部署以上JS代码。appClient.js为支持授权弾层的iframe自适应,包含client.js的所有功能。appClient.js在调用授权弹层时已加载。
页面中如果存在浮动层,并且浮动层的最下边超过了页面中的底部元素。这种情况下可能会出现高度自适应不正常。
解决方案:
(1)浮动层在页面基本元素的可视范围内显示。
(2)在页面底部插入一个空白元素,高度视情况而定(如:空白元素的下边沿与浮动层的下边沿持平)。
(3)将页面中的body或者某个外层容器的高度设置为一个合适的值(如:<body style="height:800px;">)。
页面浮层居中解决方案
如果需要在页面中的浮层保持在当前浏览器位置居中显示,那么需要加入如下代码:
//在v4或v5下监听scroll事件 FrameClient.addEvent('scroll', function(evt, data) { //console.log(data);//使用data中的属性来达到自己相对于父页面的定位。 }); //v4所接收到data的参数说明: /* data:{ top : 0, left : 0, // 子页面左侧相对于父页面左侧距离 scrollTop : 0,//父页面纵向滚动条顶部距离 scrollLeft : 0,// 父页面横向滚动条 width : 0, height : 0 } */ //v5所接收到data的参数说明: /* data:{//其中中间层代表e.weibo.com,最外层代表weibo.com,最内层为第三方应用 isV5 : ture,//是否在V5框架下 scrollTop : 0,//最外层纵向滚动条顶部距离 scrollLeft : 0,//最外层横向向滚动条左部距离 top : 0,//中间层iframe距离顶端的高度 left : 0,//中间层iframe距离最外层的值 height : 0,//最外层页面clientHeight的高度 scrollTopInner : 0//滚动轴到中间层顶部的高度 } */
若需要判断应用在v4下还是v5下存在可使用类似如下语句:
FrameClient.addEvent('scroll', function(evt, data) { if(data.isV5 == true){//说明应用在v5下,data为v5下的数据 }else {//说明应用在v4下,data为v4下的数据 } });
最外层页面跳转方法说明
V4与V5情况下,最外层页面的跳转办法:
使用window.top.location.href
//v5下跳转最外层页面 window.top.location.href = 'http://weibo.com?xxx=******'; //v4下跳转最外层页面 window.top.location.href = 'http://e.weibo.com?xxx=******';
URL规范
- 本规范主要针对展示类应用的前台,展示类应用的后台和管理类应用请忽略
- 应用父框架URL为http://e.weibo.com/{uid}/app_{appkey}?key=******
- 应用内部页面与新浪专业版微博应用url必须实现一一对应
- 在专业版应用内部页面分享相关的功能或者组件中,请务必以新浪专业版微博应用url作为分享内容中的链接
- 应用内部的跳转链接,无论是<a>标签,还是js代码跳转等,强制要求必须使用新浪专业版微博应用url
- 假设新浪专业版微博应用url为http://e.weibo.com/{uid}/app_{appkey}?key=****** ,则专业版微博的页面框架会向专业版应用iframe地址url中追加以下参数“key=******”,应用应当根据相应参数,加载相应的页面或进行对应处理响应。******部分可进行自定义,但会过滤掉除字母数字以及下划线外的其它特殊字符
数据监测
<a suda-uatrack = "key=ebusiness_apps&value=1365680744:1762587913:share: 13939943415:58: 2nBbQ2Yj:1" href="javascript:void(0)" onclick="return false;" action-type = "change" class = "change_cont" action-data = "offset=1">分享</a>
企业可以在专业版微博管理首页—数据中心—应用数据中查看到相应的互动数据等。第三方开发者可以在open.weibo.com我的应用—数据统计查看相应数据。
安全相关
专业版应用应当判定HTTP的referer参数,如果来源不是http://e.weibo.com 域名下的链接,应显示友好的错误提示,个性化应用也可以直接跳转到对应的专业版微博框架地址。
有后台管理设置的专业版应用,应考虑在后台进行授权控制,保证通过框架获得的cid参数和授权后获得uid一致,才允许访问后台,修改应用设置。
移动端Html5支持
新浪企业微博应用H5首页url为:http://e.weibo.cn/{uid}/app_{appkey}
在移动端浏览器中,访问http://weibo.com/{uid}/app?from=page_100606&mod=TAB&appid={appkey}&key=****** ,会重定向到http://e.weibo.cn/{uid}/app_{appkey}?key=******
以上跳转映射由企业微博框架完成,应用可以忽略,但应用的首页需要根据浏览器的类型以及HTTP referer等必要的信息,加载或跳转至对应的应用页面。例如HTTP referer如果是e.weibo.com,则加载PC端页面;如果是e.weibo.cn,则加载移动端H5页面。
微博移动客户端框架(同样是iframe机制)同样会向第三方应用传递以下参数:
i. viewer:当前登录用户uid
ii. cid:被访问者uid
iii. sub_appkey
H5的OAuth授权中的display参数应使用mobile。需将接口调用地址从api.weibo.com更换为open.weibo.cn。
移动终端的授权页面请参考http://open.weibo.com/wiki/Oauth2/authorize 中的说明
企业应用H5的导航必须明确、易于点击。如果包含多个页面,则需要明确的返回首页的导航。
企业应用H5端测试流程:
1、自行申请测试应用,无须提交审核。申请完成后请将应用名称和appkey通过邮件告知qyapps@staff.sina.com.cn,请求打开移动端支持。
2、申请测试帐号,测试帐号PC端安装测试应用,并设置前台显示。
3、通过最新微博客户端搜索测试帐号,进入测试。
如未申请开通H5端展示权限,应用在被安装后在无线端依然无法展示,请注意。
移动端use-agent:
'mobilephone' => array( 'nokia' => 'Nokia', 'iphone' => 'iPhone', 'ipod' => 'iPod', 'symbian' => 'Symbian', 'android' => 'Android', 'htc' => 'HTC', 'SonyEricsson' => 'SonyEricsson', 'Sony' => 'Sony', 'motorola' => 'Motorola', 'mobileexplorer' => 'Mobile Explorer', 'openwave' => 'Open Wave', 'opera mini' => 'Opera Mini', 'operamini' => 'Opera Mini', 'elaine' => 'Palm', 'palmsource' => 'Palm', 'digital paths' => 'Palm', 'avantgo' => 'Avantgo', 'xiino' => 'Xiino', 'palmscape' => 'Palmscape', 'ericsson' => 'Ericsson', 'blackBerry' => 'BlackBerry', 'SmartPhone' => 'SmartPhone', 'WindowsCE' => 'WindowsCE', 'Mobile' => 'Unknown Mobile', ) 'pad' => array( 'ipad' => 'iPad', 'tablet' => 'Tablet', )
专业版应用审核
当您完成专业版应用的开发并测试没有问题后,可以在专业版应用的汇总信息页面点击“提交审核”按钮,将您的应用提交给平台工作人员进行审核。 我们的工作人员在收到您的申请后,会和您进行联络,并试用您所开发的应用,在确认应用开发已经完成并且可以正常使用后,会通过您的申请。
专业版应用通过审核之后,将突破15个测试帐号的限制,可以被所有的微博用户所使用,并且自动被推荐到应用广场。
专业版应用开发者红宝书
审核详情请参考:专业版应用审核规范