JS SDK 2020

JS SDK 2020 is the latest version of the microblog open platform SDK for mobile web pages, which is greatly different from the previous version:

  • 1. Focus on the mobile terminal H5 scene, and remove the old components of the original PC era;
  • 2. Sharing and following functions, adapting to multiple scenarios, can be easily used on Weibo, WeChat, mobile browser, or PC;
  • 3. Open label is adopted, and the style is completely controlled by the developer;
  • 4. It is more secure, so the original JS front-end direct authorization and interface calling functions are removed to prevent data leakage. Therefore, the page authorization function needs developers to access according to the standard authorization process, and calling the open interface needs to be completed on the server;


Let's experience these features together.



Note: Due to security issues, the following methods are not available for non Weibo domain names (i.e. web pages under the domain name of third-party developers) at present: wb.setShareingContent, wb.openMenu, wb.shareToWxTimeline, wb.shareToWxMessage


developer's guide

If you don't have an AppKey, please register your own application on the open platform website, Application entry


1. Bind security domain name

When using JS SDK 2020, it is necessary to bind the security domain name for the application. The microblog client JS interface will be verified with this domain name. If you do not intend to use the microblog client JS interface, you can skip this step.


Binding the security domain name can be completed on the advanced information page of my application.


2. Reference JS SDK 2020 file

Deploy the wbsdk.js file on your page. At the same time, if your page code is not UTF-8, please add charset="utf-8" attribute.

HTML
 <script src=" https://open.weibo.com/views/js/wbsdk.js " type="text/javascript" charset="utf-8"></script>

It supports loading using AMD/CMD standard module loading method.


3. Initialize JS SDK 2020

Inject permission verification configuration through the wb.init interface. All pages that need to use the JS SDK in the microblog client must first inject configuration information, or they will not be called. If you don't plan to use the microblog client JS interface, you can use the simple initialization method.

Full initialization is required when using the microblog client JS interface and open tags:

Javascript
 wb.init({ debug: false, appkey: '', timestamp: , noncestr: '', signature: '', scope: [ 'getNetworkType', 'setBrowserTitle', 'setSharingContent', 'openMenu', 'scanQRCode', 'pickContact' ] });

Among them, configuration parameters, debug: enable debugging mode, appkey: application unique ID, timestamp: generate signature timestamp, noncestr: generate signature random string, signature: signature, scope: list of JS interfaces to be used.

Simple initialization without using microblog client JS interface and only using open tags can simplify the initial method and reduce development difficulty:

Javascript
 wb.init({ appkey: '' });

If your application is in the process of development and debugging, it is recommended to use the debugging mode of JS SDK 2020. When initializing, configure debug to true, and turn on the debugging mode. At this time, when there is an error in the call, the error message will pop up through alert, which is convenient for debugging on the mobile terminal.

Javascript
 wb.init({ debug: true, ... });

The signature algorithm is described at the end of the document, and the JS interface is described at the end.


4. Successful verification through ready interface processing

After init initialization, the ready method will be executed. All JS interface calls must be made after the ready interface gets the results. If you do not use the microblog client JS interface, you can skip this step.

Javascript
 wb.ready(function () { alert("## init success"); });

Init is an asynchronous operation of the client, so if you need to call the relevant interface when the page is loaded, you must place the relevant interface in the ready function to ensure correct execution. The interface that is called only when triggered by the user can be called directly and does not need to be placed in the ready function.


5. Handle failure verification through error interface

Processing of initialization failure. If you do not use the microblog client JS interface, you can skip this step.

Javascript
 wb.error(function (res) { alert("## init error: " + res); });

If the init initialization fails, the error function will be executed. For example, the verification fails because the signature expires. The error information can be viewed in the returned res parameter, where you can update the signature and retry initialization.


Open Label

Open tags are similar to the original components. At present, they mainly share and focus on functions.


Share open tags
Share the current page to Weibo to adapt to various scenarios.
Example
HTML
 <wb share button>Share to Weibo</wb share button>
The style in the open tag is completely controlled by the developer, for example.
HTML
 <wb share button><div class="myStyle">Share to Weibo</div></wb share button>
Specify the shared content and page address, which can be customized through the data: title, data: url attribute tags, for example.
HTML
 <wb share button data: title="title" data: url="url">Share to Weibo</wb share button>
If you need to specify a shared image when sharing, you can specify the image address through the data: pic attribute tag, for example.
HTML
 <wb-share-button data:pic=" https://wx2.sinaimg.cn/large/53b515f0ly1glgemvpjwfj20gi0aw114.jpg ">Share to Weibo</wb share button>


Follow open tags
Follow your Weibo account and adapt to various scenarios.
Example
HTML
 <wb follow account data: uid="1904178193">Follow me on Weibo</wb follow account>
Specify the microblog account to follow through the data: uid attribute tag.
The style in the open tag is completely controlled by the developer, for example.
HTML
 <wb follow account data: uid="1904178193"><div class="myStyle">Follow me on Weibo</div></wb follow account>
When your page is opened in the microblog client and followed, you can get the callback event of the followed result through the microblog client JS interface. For details, see the following microblog client JS interface - Listen to the followed callback event.


Description of JS interface in Weibo client

Weibo client JS interface.


wb.followCallBack
Listen for callback events.
Example
Javascript
 wb.followCallBack({ complete: function (res) { alert("## followCallBack event: " + JSON.stringify(res)); } });
Parameter Description
Parameter name type Description
complete Function When the user performs the following operation, it receives the callback function of the following result event.
Return value
The user canceled the operation and did not complete the following
Javascript
 { "result": false, "message": "USER_CANCELLED" }
The user completes the following and returns the user's UID
Javascript
 { "result": true, "uid": "10568" }
The user has followed
Javascript
 { "result": false, "message": "IS_FOLLOWING" }
This attention callback event can only listen to the scenario of paying attention to the open tag. The attention events of other scenarios will not return callback events here.
If the simple initialization mode is used, the microblog client JS interface cannot be used, and the attention callback event cannot be monitored, but the attention function itself is not affected. If you need to obtain the attention callback event, please use the full initialization mode.


wb.getNetworkType
Gets the network type.
Example
Javascript
 wb.getNetworkType({ success: function (res) { alert("## getNetworkType success: " + JSON.stringify(res)); }, fail: function (res) { alert("## getNetworkType fail: " + JSON.stringify(res)); } });
Parameter Description
Parameter name type Description
success Function The callback function after successful call.
fail Function Call the callback function after failure.
Return value
Javascript
 { "network_type": "wifi" }


wb.setBrowserTitle
Set the page title.
Example
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)); } });
Parameter Description
Parameter name type Description
title String The page title to be set.
success Function The callback function after successful call.
fail Function Call the callback function after failure.
Error code
Error code Description
MISSING_PARAMS The title parameter is missing.


wb.setSharingContent
Set the content shared to WeChat in Weibo.
Example
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)); } });
Parameter Description
Parameter name type Description
icon String Picture address of the card icon shared to WeChat.
title String The card title shared to WeChat.
desc String Card description shared to WeChat.
success Function The callback function after successful call.
fail Function Call the callback function after failure.


wb.openMenu
Open the sharing menu
Example
Javascript
 wb.openMenu({ success: function (res) { alert("## openMenu success: " + JSON.stringify(res)); }, fail: function (res) { alert("## openMenu fail: " + JSON.stringify(res)); } });
Parameter Description
Parameter name type Description
success Function The callback function after successful call.
fail Function Call the callback function after failure.
Return value
Javascript
 { "selected_code": "1005", "Selected_title": "Circle of Friends" }
Error code
Error code Description
USER_CANCELLED The user closed the menu directly.


wb.shareToWxTimeline
Share to WeChat friends circle
Example
Javascript
 wb.shareToWxTimeline({ success: function (res) { alert("## shareToWxTimeline success: " + JSON.stringify(res)); }, fail: function (res) { alert("## shareToWxTimeline fail: " + JSON.stringify(res)); } });
Parameter Description
Parameter name type Description
success Function The callback function after successful call.
fail Function Call the callback function after failure.


wb.shareToWxMessage
Share to WeChat friends
Example
Javascript
 wb.shareToWxMessage({ success: function (res) { alert("## shareToWxMessage success: " + JSON.stringify(res)); }, fail: function (res) { alert("## shareToWxMessage fail: " + JSON.stringify(res)); } });
Parameter Description
Parameter name type Description
success Function The callback function after successful call.
fail Function Call the callback function after failure.


wb.scanQRCode
Scan QR code
Example
Javascript
 wb.scanQRCode({ success: function (res) { alert("## scanQRCode success: " + JSON.stringify(res)); }, fail: function (res) { alert("## scanQRCode fail: " + JSON.stringify(res)); } });
Parameter Description
Parameter name type Description
success Function The callback function after successful call.
fail Function Call the callback function after failure.
Return value
Javascript
 { "result": " http://weibo.com " }
Error code
Error code Description
USER_CANCELLED The user canceled the scan.
SERVICE_FORBIDDEN There is no camera permission or the user is not allowed to use the camera.


wb.pickContact
Select Weibo friends
Example
Javascript
 wb.pickContact({ count: 3, success: function (res) { alert("## pickContact success: " + JSON.stringify(res)); }, fail: function (res) { alert("## pickContact fail: " + JSON.stringify(res)); } });
Parameter Description
Parameter name type Description
count Int The number of people that can be selected. For example, if you pass 1, you can only select one person, and the maximum number cannot exceed 10.
success Function The callback function after successful call.
fail Function Call the callback function after failure.
Return value
Javascript
 { "contacts": [{ "uid": "1404376560", "screen_name": "zaku", "avatar_url": " https://tva2.sinaimg.cn/53b515f0jw1e8qgp5bmzyj2050050aa8.jpg " }] }
Error code
Error code Description
USER_CANCELLED The user canceled the selection directly.


JS SDK 2020 Use Permission Signature Algorithm

Before generating a signature, you must first understand the jsapi_ticket, which is a temporary ticket used by the web page to call the JS interface in the microblog client. Normally, the validity period of jsapi_ticket is 7200 seconds. Calling this interface again within the validity period will cause the ticket to refresh, and the old one will become invalid directly. Therefore, frequent refreshing of jsapi_ticket may lead to signature verification failure and affect their own business. Therefore, it is recommended that developers cache jsapi_ticket in their own service globally.


Get the interface of jsapi_ticket
The interface is POST request
API
 https://api.weibo.com/oauth2/js_ticket/generate?client_id=APPKEY&client_secret=APPSECRET
Return value
JSON
 { "result": true, "appkey": "", "js_ticket": "", "expire_time": 7199 }
Where, js_ticket is the jsapi_ticket to be obtained, and expire_time is the expiration time.


signature algorithm

The signature generation rules are as follows: the fields involved in signature include noncestr, valid jsapi_ticket, timestamp, and url. After all the parameters to be signed are sorted from small to large according to the ASCII code of the field name (lexicographical order), they are concatenated into strings in the format of key1=value1&key2=value2. It should be noted that all parameter names are lowercase characters, and then the string is encrypted with sha1. The field name and field value use the original value, where the url is the full address of the current page, but does not contain # and its subsequent parts, and do not escape the URL.

Signature string
 Signature string="jsapi_ticket={jsapi_ticket}&noncestr={noncestr}&timestamp={timestamp}&url={url}"


autograph
 Signature=sha1 (signature string)

The noncestr and timestamp used for signature must be the same as those in init. The URL for signature must be the complete address of the page calling the JS interface. For security reasons, developers must implement signature logic on the server side.


Appendix I Menu Button Code

Menu button code comparison table
code
code Description
one thousand and one Share to Weibo.
one thousand and three Share to microblog groups and private messages.
one thousand and four Share to WeChat friends.
one thousand and five Share to WeChat friends circle.
one thousand one hundred and one Share to SMS.
one thousand and twelve Share to Alipay friends.
one thousand and ten Share to QQ.
one thousand and eleven Share to QQ space.
one thousand one hundred and two Share to email.




Document update time: 2023-10-20