Sdk/javascript |
您所在的位置：网站首页 › 微博表情开放平台官网登录 › Sdk/javascript |
Sdk/javascript
|
JS SDK 2020
JS SDK 2020 是微博开放平台最新版的、针对移动端网页的SDK，它较之前版本有较大改变： 1、聚焦移动端H5场景，去除了原来PC时代的旧组件； 2、分享、关注功能，适配多场景，无论是在微博、微信、手机浏览器，还是PC上，都可以方便使用； 3、采用开放标签，样式完全由开发者自己控制； 4、更加安全，因此去除了原来的JS前端直接授权、直接调接口的功能，防止数据外泄，因此页面授权功能需要开发者按照标准授权流程接入，调用开放接口则需要放在服务端完成；下面我们来一起体验一下这些特性。
注意：由于安全问题，目前如下方法 wb.setSharingContent、wb.openMenu、wb.shareToWxTimeline、wb.shareToWxMessage，对非微博域名（即第三方开发者域名下的网页）暂不提供 开发指南 如果你没有AppKey请先在开放平台网站，注册自己的应用，申请入口。 1、绑定安全域名 在使用JS SDK 2020时，需要为该应用绑定安全域名，其中微博客户端JS 接口将以此域名来进行校验，如果你不打算使用微博客户端JS 接口可以跳过此步骤。 绑定安全域名的操作可以在 我的应用 的 高级信息 页面完成。
2、引用JS SDK 2020文件 在你的页面部署 wbsdk.js 文件，同时，如果你的页面编码不是UTF-8，请添加charset="utf-8"属性。 HTML支持使用 AMD/CMD 标准模块加载方法加载。 3、初始化JS SDK 2020 通过 wb.init 接口注入权限验证配置，所有需要使用微博客户端内JS SDK 的页面必须先注入配置信息，否则将无法调用。如果你不打算使用微博客户端JS 接口可以采用简易初始化方法。 完全初始化，使用微博客户端JS 接口与开放标签时，需要完全初始化： Javascript wb.init({ debug: false, appkey: '', timestamp: , noncestr: '', signature: '', scope: [ 'getNetworkType', 'setBrowserTitle', 'setSharingContent', 'openMenu', 'scanQRCode', 'pickContact' ] });其中，配置参数，debug：开启调试模式，appkey：应用唯一标识，timestamp：生成签名的时间戳，noncestr：生成签名的随机串，signature：签名，scope：需要使用的JS接口列表。 简易初始化，不使用微博客户端JS 接口，只使用开放标签时，可以简化初始方法，减少开发难度： Javascript wb.init({ appkey: '' });如果你的应用处于开发调试过程，建议使用JS SDK 2020的调试模式，可以在初始化时，配置 debug 为 true，开启调试模式，此时在调用出错时，出错信息将通过 alert 弹出，方便在移动端调试。 Javascript wb.init({ debug: true, ... });签名算法见文档后面的说明，JS 接口的说明见后面。 4、通过 ready 接口处理成功验证 init 初始化后会执行 ready 方法，所有JS 接口调用都必须在 ready 接口获得结果之后。如果你没有使用微博客户端JS 接口可以跳过此步骤。 Javascript wb.ready(function () { alert("## init success"); });init 是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在 ready 函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在 ready 函数中。 5、通过 error 接口处理失败验证 初始化失败的处理。如果你没有使用微博客户端JS 接口可以跳过此步骤。 Javascript wb.error(function (res) { alert("## init error: " + res); });init 初始化失败会执行 error 函数，如签名过期导致验证失败，错误信息可以在返回的 res 参数中查看，可以在这里更新签名，重新尝试初始化。 开放标签 开放标签类似原来的组件，目前主要是分享、关注功能。 分享开放标签 分享当前页面到微博，适配各种场景。 示例 HTML 分享到微博 开放标签中的样式，完全由开发者自己控制，例如。 HTML 分享到微博 指定分享的内容和页面地址，可以通过 data:title，data:url 属性标签完成自定义，例如。 HTML 分享到微博 如果需要在分享的时候，指定一张分享图片，可以通过 data:pic 属性标签指定图片的地址，例如。 HTML 分享到微博 关注开放标签 关注你的微博账号，适配各种场景。 示例 HTML 在微博上关注我 指定要关注的微博账号，通过 data:uid 属性标签完成。 开放标签中的样式，完全由开发者自己控制，例如。 HTML 在微博上关注我 当你的页面在微博客户端内打开并进行关注时，可以通过微博客户端JS 接口，获取到关注结果的回调事件，具体请参见下面的 微博客户端JS 接口 - 监听关注回调事件。 微博客户端内JS 接口说明 微博客户端JS 接口。 wb.followCallBack 监听关注回调事件。 示例 Javascript wb.followCallBack({ complete: function (res) { alert("## followCallBack event: " + JSON.stringify(res)); } }); 参数说明 参数名称 类型 说明描述 complete Function 当用户进行关注操作时，接收关注结果事件的回调函数。 返回值 用户取消操作，没有完成关注 Javascript { "result": false, "message": "USER_CANCELLED" } 用户完成了关注，同时返回该用户的UID Javascript { "result": true, "uid": "10568" } 用户已经关注过 Javascript { "result": false, "message": "IS_FOLLOWING" } 该关注回调事件，只能监听通过关注开放标签进行关注这一场景，其他场景的关注事件不会在此返回回调事件。 如果采用的是简易初始化模式，则不能使用微博客户端JS 接口，也就无法进行关注回调事件的监听，但关注功能本身不受影响，如果你需要获取关注回调事件，则请使用完全初始化模式。 wb.getNetworkType 获取网络类型。 示例 Javascript wb.getNetworkType({ success: function (res) { alert("## getNetworkType success: " + JSON.stringify(res)); }, fail: function (res) { alert("## getNetworkType fail: " + JSON.stringify(res)); } }); 参数说明 参数名称 类型 说明描述 success Function 调用成功后的回调函数。 fail Function 调用失败后的回调函数。 返回值 Javascript { "network_type": "wifi" } wb.setBrowserTitle 设置页面标题。 示例 Javascript wb.setBrowserTitle({ title: "JS SDK DEMO", success: function (res) { alert("## setBrowserTitle success: " + JSON.stringify(res)); }, fail: function (res) { alert("## setBrowserTitle fail: " + JSON.stringify(res)); } }); 参数说明 参数名称 类型 说明描述 title String 需要设置的页面标题。 success Function 调用成功后的回调函数。 fail Function 调用失败后的回调函数。 错误码 错误码 说明描述 MISSING_PARAMS 缺少title参数。 wb.setSharingContent 设置在微博内分享到微信的内容。 示例 Javascript wb.setSharingContent({ icon: "https://img.t.sinajs.cn/t6/style/images/face/face_card_longwb.png", title: "SDK Sharing Content", desc: "SDK Sharing Content", success: function (res) { alert("## setSharingContent success: " + JSON.stringify(res)); }, fail: function (res) { alert("## setSharingContent fail: " + JSON.stringify(res)); } }); 参数说明 参数名称 类型 说明描述 icon String 分享到微信的卡片图标的图片地址。 title String 分享到微信的卡片标题。 desc String 分享到微信的卡片描述。 success Function 调用成功后的回调函数。 fail Function 调用失败后的回调函数。 wb.openMenu 打开分享菜单 示例 Javascript wb.openMenu({ success: function (res) { alert("## openMenu success: " + JSON.stringify(res)); }, fail: function (res) { alert("## openMenu fail: " + JSON.stringify(res)); } }); 参数说明 参数名称 类型 说明描述 success Function 调用成功后的回调函数。 fail Function 调用失败后的回调函数。 返回值 Javascript { "selected_code": "1005", "selected_title": "朋友圈" } 错误码 错误码 说明描述 USER_CANCELLED 用户直接关闭了菜单。 wb.shareToWxTimeline 分享到微信朋友圈 示例 Javascript wb.shareToWxTimeline({ success: function (res) { alert("## shareToWxTimeline success: " + JSON.stringify(res)); }, fail: function (res) { alert("## shareToWxTimeline fail: " + JSON.stringify(res)); } }); 参数说明 参数名称 类型 说明描述 success Function 调用成功后的回调函数。 fail Function 调用失败后的回调函数。 wb.shareToWxMessage 分享到微信好友 示例 Javascript wb.shareToWxMessage({ success: function (res) { alert("## shareToWxMessage success: " + JSON.stringify(res)); }, fail: function (res) { alert("## shareToWxMessage fail: " + JSON.stringify(res)); } }); 参数说明 参数名称 类型 说明描述 success Function 调用成功后的回调函数。 fail Function 调用失败后的回调函数。 wb.scanQRCode 扫描二维码 示例 Javascript wb.scanQRCode({ success: function (res) { alert("## scanQRCode success: " + JSON.stringify(res)); }, fail: function (res) { alert("## scanQRCode fail: " + JSON.stringify(res)); } }); 参数说明 参数名称 类型 说明描述 success Function 调用成功后的回调函数。 fail Function 调用失败后的回调函数。 返回值 Javascript { "result": "http://weibo.com" } 错误码 错误码 说明描述 USER_CANCELLED 用户取消了扫描。 SERVICE_FORBIDDEN 没有摄像头权限或用户不允许使用摄像头。 wb.pickContact 选择微博好友 示例 Javascript wb.pickContact({ count: 3, success: function (res) { alert("## pickContact success: " + JSON.stringify(res)); }, fail: function (res) { alert("## pickContact fail: " + JSON.stringify(res)); } }); 参数说明 参数名称 类型 说明描述 count Int 可以选择的人数，例如，传1就是只能选一个人，最大不能超过10。 success Function 调用成功后的回调函数。 fail Function 调用失败后的回调函数。 返回值 Javascript { "contacts": [{ "uid": "1404376560", "screen_name": "zaku", "avatar_url": "https://tva2.sinaimg.cn/53b515f0jw1e8qgp5bmzyj2050050aa8.jpg" }] } 错误码 错误码 说明描述 USER_CANCELLED 用户直接取消了选择。 JS SDK 2020 使用权限签名算法 生成签名之前必须先了解一下 jsapi_ticket，jsapi_ticket 是网页用于调用微博客户端内JS接口的临时票据。正常情况下，jsapi_ticket 的有效期为7200秒。由于有效期内再次调用该接口会导致 ticket 刷新，旧的直接失效。因此频繁刷新 jsapi_ticket 有可能导致签名校验失败，影响自身业务，因此，建议开发者在自己的服务全局缓存 jsapi_ticket 。 获取 jsapi_ticket 的接口 接口为 POST 请求 API https://api.weibo.com/oauth2/js_ticket/generate?client_id=APPKEY&client_secret=APPSECRET 返回值 JSON { "result": true, "appkey": "", "js_ticket": "", "expire_time": 7199 } 其中，js_ticket 为需要获取的 jsapi_ticket ，expire_time 为过期时间。 签名算法 签名生成规则如下：参与签名的字段包括 noncestr，有效的 jsapi_ticket，timestamp，url。对所有待签名参数按照字段名的 ASCII 码从小到大排序（字典序）后，使用 key1=value1&key2=value2… 的格式拼接成字符串。这里需要注意的是所有参数名均为小写字符，之后对字符串进行 sha1 加密，字段名和字段值都采用原始值，其中，url 为当前网页的完整地址，但是不包含 # 及其后面部分，也不要进行 URL 转义。 签名字符串 签名字符串 = "jsapi_ticket={jsapi_ticket}&noncestr={noncestr}×tamp={timestamp}&url={url}"签名 签名 = sha1(签名字符串) 签名用的 noncestr 和 timestamp 必须与 init 中的 noncestr 和 timestamp 相同。签名用的 url 必须是调用JS接口页面的完整地址。出于安全考虑，开发者必须在服务器端实现签名的逻辑。 附录一、菜单按钮code 菜单按钮 code 对照表 code 编码 说明描述 1001 分享到微博。 1003 分享到微博群和私信。 1004 分享到微信好友。 1005 分享到微信朋友圈。 1101 分享到短信。 1012 分享到支付宝好友。 1010 分享到QQ。 1011 分享到QQ空间。 1102 分享到邮件。
|
【本文地址】