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 microblog 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

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

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. The H5 page of the access party can obtain the signed request parameter of the light application framework after encryption, which includes uid, access_token and other information. If the application needs to use, It can be used only after decryption. 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:

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）

tags（object array）

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:

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):

• QR code generated by application homepage: http://apps.weibo.com/qrcode/test?uid=xxx&appkey=xxx (The appkey algorithm here is the appkey after base62)
• There is no test address in the application's internal page, and the official address is after the receipt

Official address rules (used after going to the square):

• QR code generated by application homepage: http://apps.weibo.com/qrcode/app?uid=xxx&appkey=xxx (The appkey algorithm here is the appkey after base62)
• QR code generated by applying the inside page: http://apps.weibo.com/qrcode/linkcard?oid=xxx (The oid here is the id generated after the object is entered into the linkcard library)

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