brief introduction
What is light application?
Light application is a set of basic framework and access service (Focus On Mobile) provided by Weibo for third-party services (H5 pages) to access Weibo.
The light application portal is developed by the access party in the form of web application in the microblog page (also called profile page, personal homepage), or microblog card.
According to the display platform, light applications can be divided into two types: embedded through iframe on the desktop browser (hereinafter referred to as Web version ), which is displayed in the microblog client through Webview (hereinafter referred to as Version H5 )。 Your application can choose one of two display platforms, or both.
characteristic
Light applications provide more channels close to users that conform to the attributes of the microblog platform, promote the formation of two-way relationships between users and businesses, and enable users to more effectively discover and use services.
- • Convenient access 。 Access party H5 webpage can enjoy a system light application service provided by the official client, so as to provide users with a better experience by doing a small amount of compatible work for microblog
- • No authorization required 。 If the user accesses the application in the login state, the new framework will complete the authorization by default and pass the access_token information to the access party.
- • More exposure opportunities 。 After the application goes online, it will appear on the page and on the card of the microblog feed stream. It supports linkcard access and gets better display in Weibo.
- • Development process, Unified access mode and parameters 。 Whether it is the Web version or the H5 version, the parameters received by the client are the same, and the access methods are basically the same. Applications can distinguish between the Web version and the H5 version through the browser userAgent.
- • Support access to Weibo payment , pay for goods with one click.
- • [Web Edition] New app sharing and liking 。 Directly share the application to Weibo, generate card display, and quickly spread.
- • [Web Edition] Support access to applications without login 。 You can also browse applications without logging into Weibo. If necessary, we can call up the login floating layer through our JS client.
- • [Web Edition] Application width adjusted to 940 px 。 The original 760px is not supported. The original 950 px is changed to 940px.
Light application scenarios
Some light applications, more prominent is the inside page, such as movies and books. Maybe you want to see a card directly in the microblog stream, and click the card to directly enter the product details page to purchase directly;
Some applications highlight the application home page more, such as web games and single page applications, which have a unique entrance. Click on the application home page to play;
Or both are possible.
Application example
Online 4S store (Both Web and H5 versions are connected):
H5 Version:
Youbao, Ai Yingke
For more information on lightweight applications, please click here 。
Light application development process
The development of light applications can be roughly divided into four steps:
- • Become a microblog developer
- • Application creation
- • Application development
- • Application review and launch
Become a microblog developer
The first step in developing light applications is to become a developer of microblog companies.
If you are not a microblog developer, please log in first Weibo open platform , and then enter the management center to improve the developers essential information and identity authentication 。
In the basic information section, directly select the developer type as company to complete the form. After filling in the form, you can start to create an application through mailbox verification.
Pass identity authentication, which is conducive to application review and application of various authorities. Please fill in carefully together.
Individual developers upgrade to company developers
If you are already an individual developer, you need to enter Edit developer information Page, reselect the developer type as company, and then save the data.
Application creation
stay Introduction page of light application , click the Create Application button to enter the Create Form Filling page.
After completing the form, you will automatically jump to the application console, where you can further improve the basic information of the application.
Edit app info
Open Application Information ->Basic Information to view the basic data of the application. Click Edit to modify.
Test address (Web version, H5 version)
Open the application information ->test information, and you can see the test address of the application. Because the application has not been approved and launched to the application square, this address is only available to developers themselves.
If you need other Weibo users to browse, you can add the Weibo user to the test account. Each application test account can add up to 15 people.
After the application passes the document review and goes to the square, the test account will automatically become invalid.
application development
Note: This section contains all the details of application development, please select according to the actual situation of the application.
- • Only the inside page shows the required applications. Please see how to access the Weibo payment part directly;
- • Only the home page shows the application of the demand, please read from the part of receiving frame parameters;
- • Please read completely if you have both.
After the application is created, you need to enter the application development process. Application development is not complicated, just How to handle the transfer of past parameters by the microblog framework and do the corresponding processing , during which several problems will be involved:
Application homepage development
- • Receive frame parameters
- • Differentiation between Web version and H5 version
- • Use of web version JavaScript package
- • How to call the JS API of Weibo client in H5
Application inner page development
- • How to access Weibo payment
- • How to access linkcard
Application upgrade to light application
- • Enterprise Application Migration Guide
Weibo client QR code rules
Technical process
Receiving frame parameters
The application framework will send an encrypted parameter to the access page through POST signed_request , The parameters include uid, access_token and other information. If the application needs to use them, they need to be decrypted before they can be used.
If it is a pure presentation class application, this parameter can be ignored.
One thing that needs special attention is the parameter Signed_request is transmitted through POST. If the access party's page does not support POST reception, it may not display correctly 。
The encryption method of signed_request
Signed_request is separated into two segments by a decimal point Check data , after the decimal point is Real data 。 The verification data is used to ensure the validity of the data. For example, the data has not been tampered with. Only the real data that has been verified successfully can be trusted.
Both use base64 encoding, so you need to restore data first. Some characters of base64 data may be confused with other characters in the URL during HTTP transmission, so the base64 strings obtained by developers have been specially processed. Therefore, before base64 decoding, the string needs to be restored to a standard base64 character.
Restore Mode : First, add the equal sign of the corresponding length according to the length of the string (the length of the string after adding the equal sign should be an integer multiple of 4), and then replace all - with+, and all _ with/.
After the real data base64 is decoded, it is converted into JSON objects, which is the information required by developers. Each parameter will be described in detail below.
How to use verification data?
First, check the algorithm in JSON after decoding the real database64. It must be HMAC-SHA256.
Secondly, it is verified by the verification data. The verification method is as follows:
- After Base64 decodes the verification data (possibly garbled characters, don't worry about it), it is saved in variables for subsequent comparison.
- For the data before base64 decoding, the app secret of the application is used for sha256 encryption. The encrypted data and the verification data after base64 decoding must be consistent to ensure the validity of the data.
Therefore, the decryption method of signed_request can be written.
Use SDK to decrypt data
Among the many SDKs of the microblog open platform, the PHP SDK and the Java SDK have built-in signed_request decoding function, which can be used directly. Other languages need to be completed by developers themselves.
Extract parameters from signed_request using PHP SDK
if(! empty($_POST["signed_request"])){ $o = new SaeTOAuth( WB_AKEY , WB_SKEY ); $data = $o->parseSignedRequest($_REQUEST["signed_request"]); if($data == '-2'){ die('sign is error!'); } else { $_SESSION['oauth2'] = $data; } }
PHPSDK decrypts signed_request as follows for reference by other languages
/** *Parsing signed_request *@ param string $signed_request When the iframe is loaded, the application framework will post the parameter signed_request to the Canvas URL * @return array */ function parseSignedRequest($signed_request) { //Divide the $signed_request parameter into an array with a decimal point., assign the value of subscript 0 to $encoded_sig, and copy the value of subscript 1 to $payload list($encoded_sig, $payload) = explode('.', $signed_request, 2); //Base 64 decode $encoded_sig, and assign a value to $sig $sig = self::base64decode($encoded_sig); //Base64 decode the $payload, and convert the string to JSON to assign a value to $data $data = json_decode(self::base64decode($payload), true); //If the algorithm in $data is not HMAC-SHA256, it means that the data verification is wrong, and - 1 is returned directly if (strtoupper($data['algorithm']) !== ' HMAC-SHA256') return '-1'; //Use app secret to encrypt $payload with sha256 $expected_sig = hash_hmac('sha256', $payload, $this->client_secret, true); //If the result of sha256 encryption is consistent with that of $sig, then the $data data is OK and is returned directly to the caller; Otherwise,>indicates an error in data verification, and - 2 is returned return ($sig !== $ expected_sig)? '-2' : $data; } /** * @ignore */ function base64decode($str) { //For the string to be decoded by base64, add the corresponding equal sign according to the length of the string (the length of the string after adding the equal sign should be an integer multiple of 4>), then replace the - and _ with+and/respectively, and then perform base64 decoding on the processed string return base64_decode(strtr($str.str_repeat('=', (4 - strlen($str) % 4)), '-_', '+/')); }
Signed_request decrypted format
Access application parameters without login
Parameter name |
Mandatory |
type |
explain |
user |
true |
array |
Current User Object |
algorithm |
true |
string |
Signature algorithm, temporarily using HMAC-SHA256 |
issued_at |
true |
int |
Server generation time, unix timestamp format |
referer |
true |
string |
The document.referrer of the page |
origin |
true |
string |
The address of the current user accessing the lightweight application; Preview: official preview address, management: official management address, test_preview: test preview address, test_management: test management address |
ouid |
false |
uint64 |
The installer uid of the current application, which is not available for in station applications |
The light application management address created after August 1 loads the application address of the appkey by default. If a third party needs to manage the address, please jump again according to the field returned by origin
Login status access application, automatic authorization success parameter
Parameter name |
Mandatory |
type |
explain |
user |
true |
array |
Current User Object |
algorithm |
true |
string |
Signature algorithm, temporarily using HMAC-SHA256 |
issued_at |
true |
int |
Server generation time, unix timestamp format |
expires |
true |
int |
Access_token expiration time, unix timestamp format |
oauth_token |
true |
string |
access_token |
user_id |
true |
unit64 |
Current login user microblog user id |
referer |
true |
string |
The document.referrer of the page |
origin |
true |
string |
Address of the current user accessing the lightweight app |
scope |
true |
string |
Applied scope parameters |
ext_data |
true |
string |
Extended field, temporarily unavailable |
ouid |
false |
uint64 |
The installer uid of the current application, which is not available for in station applications |
After receiving the parameters correctly, the application needs to distinguish the current platform.
Difference between Web version and H5 version
In the basic information of the application, you can choose either the Web version or the H5 version, or both. If both are compatible, it is necessary to distinguish between the Web version and the H5 version.
There are two functions of differentiation: one is to enable applications to adapt to different devices to achieve the best display effect; Second, the Javascript packages called by the Web version and the H5 version are different. After distinguishing, unnecessary JS code can be reduced.
At present, applications can be distinguished by the userAgent of the browser. Currently, this is the only way to display them in a web browser or a microblog client.
Use of web version JavaScript package
The web version is embedded into the application of the access party through the iframe. The default iframe frame size is 940 * 600. In addition to receiving the parameters of the frame POST, it also needs to communicate with the frame, such as the iframe is highly adaptive, obtaining the information of the parent page, and evoking the login floating layer.
These are provided through a JavaScript file provided by the framework. Please read Light application components Call of Web components.
How to call the JS API of Weibo client in H5
Since 4.3.0, the microblog client has added JS API functions in Webview to facilitate web applications to call some system functions through the JS API, such as obtaining network status, positioning information, scanning two-dimensional codes, viewing large images and other functions.
For detailed usage, please read: Light application of JS components Use of H5 components.
How to arouse Weibo payment
At present, Weibo payment supports online activation. For developers who need access, please read Weibo payment
How to access linkcard resolution
Linkcard access, temporarily closed.
What is a linkcard
If a micro blog contains a link, it will be displayed as a short link, as shown in the figure:
If the link is parsed into a special short chain containing an object data, the object data can be displayed in the microblog message flow in card form. This form is Weibo Message flow linkcard parsing.
The parsed link will be replaced with miniCard, which will be more powerful and have a higher click rate. Under the body of the microblog, the linkcard is generally parsed to display the thumbnail, title, introduction and other information. The analysis effect is shown in the figure:
When users share the link from the access party's website to Weibo, we will identify whether the link belongs to a light application access party through the link characteristics. For the link of the light application provider, we will call the resolution callback interface registered by the provider to obtain the object data in the agreed format. These links that can successfully obtain the object data can be displayed as linkcards on the PC and mobile clients, and users can click to complete the loading of the light application framework. On the H5 page of the access party, you can obtain the signed request parameters of the light application framework after encryption, which include the uid If the application needs to use such information as access_token, it needs to decrypt it before it can be used. See the description of "Receiving Frame Parameters" for details.
advantage : The access party only needs to develop the callback interface according to the standard and standardized process to achieve fast access.
shortcoming : The access party is passive access, and the callback interface has a failure rate, which may cause the failure of individual link card parsing. PC card does not support light application framework parameter transfer.
How to access linkcard?
What the access party needs to do to access the linkcard
Let's take a look at the workflow of linkcard:
1. The access party provides long URL matching rules
The long URL matching rule is a simple regular expression. When the matching long URL is converted to a short link, it will be used as a parameter to call the receiver's object data callback interface, that is, the link domain name and other features in the figure.
For example, if we want to resolve a product as a linkcard, the long link URL of the product is: http://www.productmall.com/sample/256819 , so long The URL matching rule should be: www.productmall.com/sample/. (Please note that http://is not included, and the variable article number is not included)
2. The access party provides the data callback interface of the parsing object
The interface is developed by the access side. The Weibo platform will call this interface of the access party when the matching long URL is transferred to the short link through the above long URL matching rules. The parameter is the matching long URL.
When the access party judges that the parameter URL is a correct page to be parsed into a linkcard, the interface returns the object data to be parsed. Theoretically, different parameter URLs return different object data. On the contrary, if the interface returns an error, the microblogging platform will consider that the link is not a normal linkcard object and convert it to a normal short link, without doing linkcard parsing.
Object Data Interface
Interface request mode: GET Interface parameter: url, long URL conforming to matching rules Interface return value: JSON. The specific attribute fields of JSON data are shown in the following table:
attribute |
Attribute Type |
Required |
Description |
display_name |
string |
Required |
Name displayed by linkcard |
id |
string |
Optional |
The ID of the linkcard. When there is a QR code evoking function for accessing the official client, first apply for the domain name ID and then fill in this field. The value form is 123456: abcdefg. Among them, 123456 is the domain ID allocated after applying to the platform, and each access party is different. Abcdefg is the identification string supplemented by the access party itself. It is 10-50 digits and can contain English, numbers, and underscores. It must correspond to the URL below one by one. They are separated by English colons. |
image |
media link |
Required |
The thumbnail of the linkcard displays an image. The image size is strongly recommended to be 120 × 120 pixels, which is a media link type object. |
summary |
string |
Optional |
The text description of the linkcard is recommended to be limited to 300 words. |
url |
string |
Required |
The URL address of the linkcard, which must be a pure URL, with no extraneous parameters as far as possible. It will serve as the only identification basis for the object data. Keeping the URL clean will be conducive to the unification and effectiveness of the like data. If the access party fills in the above ID, the URL must correspond to the above ID. |
tags |
object array |
Optional |
Label attribute, a general attribute of object data, is an object array. |
create_at |
data time |
Optional |
It is strongly recommended to use the international format: Wed Jan 06 11:26:01+0800 2010, or the simple format: 2012-10-18. |
object_type |
string |
Required |
Object type, fill in the webpage. |
In the above attributes, the types of object, object array, and media link all contain the lower level attributes. The details are as follows:
image(media link)
attribute |
Attribute Type |
Required |
Description |
url |
string |
Required |
The address of the media. In this case, the first level image attribute should be the linkcard map address. |
width |
int |
Optional |
The width of the media. In this case, the first level image attribute should be the width of the linkcard image. It is recommended to be 120 pixels |
height |
int |
Optional |
The height of the media. In this case, the first level image attribute should be the height of the linkcard image. It is recommended to be 120 pixels |
tags(object array)
attribute |
Attribute Type |
Required |
Description |
display_name |
string |
Required |
Name of label display |
For example:
Long URL matching rules provided by the access party: www.productmall.com/sample/
Sample link: http://www.productmall.com/sample/256819
Object data callback interface provided by the access party: http://www.productmall.com/api/get_data?url=
Then our call instance will be: http://www.productmall.com/api/get_data?url=http%3a%2f%2fwww.productmall.com%2fsampl e%2f256819
The data returned by the access party is as follows:
{ "Display_name": "This is the title of the product", "image": { "url": " http://www.productmall.com/7272.jpg ", "width": 120, "height": 120 }, "Summary": "This is a brief introduction of the product", "url": " http://www.productmall.com/sample/256819.html ", "tags": [ { "Display_name": "Label 1" } ], "create_at": "2012-10-18", "object_type": "webpage" }
Enterprise application migration guide (upgrade to light application)
The most intuitive change of enterprise applications and light applications is that there is no exaggerated head in the visual effect (big head portrait, head picture, tab, etc.), and more attention is paid to the display of content.
To upgrade enterprise applications to light applications, two things need to be done:
1. Apply appkey to upgrade. Add the appkey to the migration list and contact the customer service email: weibo_app@vip.sina.com
2. Modify applied parameters.
- The parameter is now changed to POST transmission and encrypted. Please refer to the receiving framework parameter section for how to decrypt.
- After the enterprise application is upgraded to light application, the parameter name will also change. The correspondence between the old and new parameters is as follows:
Old parameters |
New parameters |
Required&Type and Range |
explain |
cid |
ouid |
true、int |
The currently accessed professional user uid |
viewer |
user_id |
true、int |
Current login user uid |
sub_appkey |
(Obsolete) |
true、string |
The sub key after the enterprise installs the application |
tokenString |
oauth_token |
true、string |
There are also tokenString parameters without authorization, but the parsed array has no access_token information |
Weibo client QR code rules
The QR code image generated by this rule can directly enter the object body page after scanning with the microblog client, instead of the built-in default browser.
Test application rules (used before going to the square):
Official address rules (used after going to the square):
Demo for light application H5
Please use the microblog client to scan the QR code below to view the demo demo:
The interface details involved in the Demo are detailed in the following documents:
Light application component document: http://open.weibo.com/wiki/ Light application H5 new JS
Weibo payment application access guide: http://open.weibo.com/wiki/ Microblog payment application access guide
Weibo API interface document: http://open.weibo.com/wiki/ Weibo API
Application audit
After the application is developed, it needs to be submitted for approval. get into Weibo open platform After logging in, open the application, and you can see the entry to submit for approval. Submitting for review is divided into two times: 1. Submitting for document review, 2. Submitting to Shangchang Square
See Audit specification
Light application audit specification
Application installation
Light applications need to be submitted to the Plaza for review. After review, applications can be installed under the Blue V account. Access link: https://e.weibo.com/epspcpage/apps/info?app_key=XXX , enter the application details page to install. (Apply appkey to replace XXX)
Click the "Use Now" button to complete the installation. Click the "View Application Details" in the pop-up window, the PC will open the light application, and obtain the online address of the light application, that is Apps. weibo. com/uid/xxx Address, please use this address to promote in Weibo, and this address will be automatically parsed into card form in Weibo.
To view installed apps, please visit: https://e.weibo.com/epspcpage/apps/myapps , you can uninstall applications and edit application information. If the installation encounters problems, you can try to remove and reinstall.
Service and support
If you encounter problems during light application access, please contact wanglei25@staff.weibo.com