1. WeChat Shared Count Plugin 2014-Jan-29

2. 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: 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

3. Design Objectives Objective JavaScript Plugin Decouple with OA callback Light Backend Code Secure Simple Signature Signing Exportable data Fast?

4. Graph Plugin used arbor.js http://arborjs.org/ An Example of User Sharing Activity. Generated by data from Mid Autumn Festival campaign, 2013

5. Data Required Source of the flow Userpredecessor Successor s User ID Flow ID (f) Predecessor user ID (p) User id (u) Hop count (c = 3)

6. Information Passing Html Page Database http://yourhost.com/home.p hp 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

7. Example of the return URL http://geeksack.net/pongtest/lockgame/home.php?p=96208&f=96208&c=1&t=100&n=78395Z 484778041930Z6546Z964352&s=bd1fe508c3f3086b036c41333ab4779a http://[DomainHost ]/[Page]?p=[PredecessorUserID&f=FlowID&c=HopCount&t=RetryCount &n=[Nonce]&s=[Signature]

8. OAuth Callback Page OAuth 2 Server Databas e 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 JS 1)Redirect to OAuth 2)Set the “Share to WeChat” message’s content

9. OAuth Callback Page OAuth 2 Server https://open.weixin.qq.com/c onnect/oauth2/authorize http://act.wechat.com/rin ku/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 Flow Message 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 3 The 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 5 6 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)

10. Signature signing http://geeksack.net/pongtest/lockgame/home.php?p=96208&f=96208&c= 1&t=100&n=78395Z484778041930Z6546Z964352&s=bd1fe508c3f3086b 036c41333ab4779a 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

11. 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]"; HTML BODY Logic/ API calls Structure of HTML page with the Plugin

12. 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 2 API 1

13. 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"}

14. Demo 1: Simple Page with Shared Count counter A friend visits the page in WeChat Shared Count + 1, data pull from API Share to Friend

15. 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

16. Data Reporting Tool

18. 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 3 rd Party OA Speed ▫It takes two redirects before returning 3 rd party main page.