wechat shared count plugin
DESCRIPTION
WeChat Shared Count Plugin. 2014-Jan-29. Background. Previous Experiences: Mid Autumn Festival (Experimental, Only data logging) Yahoo TW Campaign (Capture shared count , batch computation at backend) Some issues: 1. Not easy to implement 2. Requires MRS for user identification Objective: - PowerPoint PPT PresentationTRANSCRIPT
WeChat Shared Count Plugin2014-Jan-29
BackgroundPrevious Experiences:• Mid Autumn Festival (Experimental, Only data logging)• Yahoo TW Campaign (Capture shared count , batch computation
at backend)
Some issues:1. Not easy to implement2. Requires MRS for user identification
Objective:• To build a generic plugin for capturing the number of shared
count of a user for third parties• Encourage “share to friend” activity which stimulates A1
Design Objectives
Objective
JavaScript Plugin
Decouple with OA callback
Light Backend
Code
SecureSimple Signature Signing
Exportable data
Fast?
Graph Plugin used arbor.jshttp://arborjs.org/
An Example of User Sharing Activity. Generated by data from Mid Autumn Festival campaign, 2013
Data Required
Source of the flow
Userpredecessor Successors
User ID
Flow ID (f)
Predecessor user ID (p)
User id (u)
Hop count (c = 3)
Information Passing
Html Page
Database
http://yourhost.com/home.php
Html Page
Our Backend Servers
OAuth2 Call
WeChat Open ID
OAuth2 Server
WeChat Open ID
User ID, Flow ID, Hop Count…
URL Parameters: User ID, Flow ID, Hop Count…
Html Page
Shared Via WeChat
URL Parameters: User ID, Flow ID, Hop Count… Note all parameters are passed via
URL
Example of the return URL
http://geeksack.net/pongtest/lockgame/home.php?p=96208&f=96208&c=1&t=100&n=78395Z484778041930Z6546Z964352&s=bd1fe508c3f3086b036c41333ab4779a
http://[DomainHost ]/[Page]?p=[PredecessorUserID&f=FlowID&c=HopCount&t=RetryCount&n=[Nonce]&s=[Signature]
OAuth Callback
Page
OAuth 2 Server
Database
Project Config
Load JS library
WeChat Shared Count
Plugin JS Library
WeChat Shared Count API
API
JS Plugin
WeChat Activity Server
(act.wechat.com)
Static Upload Server
Other Tencent Servers
Load JS library
Admin Tool
Third Party Server
System Architecture
Two major things done by the JS1) Redirect to OAuth2) Set the “Share to WeChat” message’s
content
OAuth Callback
Page
OAuth 2 Server
https://open.weixin.qq.com/connect/oauth2/authorize
http://act.wechat.com/rinku/response.php
Database
Project Config
WeChat Message
Third Party Server
WeChat Shared
Count Plugin JS Library
WeChat Shared Count API
WeChat Shared Count
Plugin JS
User Identification FlowMessage Shared Flow
User A
User B (Friend of User A)
1 User A use WeChat In APP browser to open the campaign main page
2 Campaign main page is embedded with WeChat Shared Count JS library
3The JS library redirects the page to OAuth 2 API
4 OAuth2 API resolved the user’s WeChat Open ID and the predefined callback API is called
The third Party server reads the returned parameters and invoke the APIs if necessary
56
The callback page interacts with database and project configuration. Set all necessary state information in URL parameters and return to third party server
API
7 User A shared the page to another user using the “Share to friend” function in WeChat Client
User B visits the campaign page by the shared message from user A and start his/her own user identification from (1) again with URL parameters which stored the state information generated by user A’s flow
8
WeChat Activity Server (act.wechat.com)
Signature signinghttp://geeksack.net/pongtest/lockgame/home.php?p=96208&f=96208&c=1&t=100&n=78395Z484778041930Z6546Z964352&s=bd1fe508c3f3086b036c41333ab4779a
Computed Signature = md5( type=sharecount&u=[USER ID]&j=[Project Name]&sdate=[Start Date]&edate=[End Date]&nonce=[Random Number]&key=[Secret Key] )
If the parameter(s) is changed by the user, the computed signature will differ from the one specify in URL
<link rel="stylesheet" type="text/css" href="http://act.wechat.com/rinku/css/wsf-rinku-1.0.0.css">
<script>var rinku = new Object();rinku['oauth2_appid'] = [APP ID (Given by Tencent)]; rinku['oauth2_callback'] = [callback API of WeChat Shared Count Plugin (Given by Tencent)]; rinku['oauth2_url'] = "https://open.weixin.qq.com/connect/oauth2/authorize"; rinku['project_code'] = [Project Name (Agreed with Tencent)];rinku['project_retry'] = 1; /*Retry count of OAuth 2 API*/rinku['share_image'] = [Url of the Image of the shared message];rinku['share_width'] = [Shared Image width in pixel];rinku['share_height'] = [Shared Image height in pixel];rinku['share_link'] = "[Shared Page Url]";rinku['share_title'] = "[Shared Page Title]";rinku['share_desc'] = "[Shared Page Description]";
</script>
<script src="http://act.wechat.com/rinku/js/wsf-rinku-1.0.1.js></script>
<script src="js/jquery-1.10.2.min.js"></script>
HTML BODY
Logic/ API calls
Structure of HTML page with the Plugin
• 1. Get list of friend’s ID who visited the page shared by a user• 2. Get list of friend’s ID who shared the page to a particular user
• 3. Get list of user IDs who successfully shared to X friends between a date range
API
API 2API 1
API Details• http://act.wechat.com/rinku/api.php?type=[API
Type]&u=[USER ID]&j=[Project Name]&sdate=[Start Date]&edate=[End Date]&nonce=[Random Number]&sig=[Computed Signature]
Sample JSON Response:{"ret":["7","8"],"errno":"0"}
Demo 1: Simple Page with Shared Count counter
A friend visits the page in
Shared Count + 1, data pull from API
Share to Friend
Demo 2: Lock and Key Game with user database
Friends give their keys to you and you click on their messages to unlock your own locks
Data Reporting Tool
Limitations•Service OA:
▫App ID and App secret which allows the domain: “act.wechat.com” (Where our backend code is hosted) But the APP ID and APP secret is not necessary the 3rd Party OA
•Speed▫It takes two redirects before returning 3rd
party main page.