WeChat Shared Count Plugin

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 Simple Signature Signing Secure Light Backend Code Objective Exportable data JavaScript Plugin Decouple with OA callback Fast?

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

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

6. Information Passing http://yourhost.com/home.php Html Page OAuth2 Server OAuth2 Call WeChat Open ID Database Our Backend Servers WeChat Open ID URL Parameters: User ID, Flow ID, Hop Count… Html Page User ID, Flow ID, Hop Count… Shared Via WeChat Html Page URL Parameters: User ID, Flow ID, Hop Count… Note all parameters are passed via URL

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

8. System Architecture Other Tencent Servers Static Upload Server OAuth 2 Server WeChat Shared Count API Project Config OAuth Callback Page Load JS library WeChat Shared Count Plugin JS Library API Database JS Plugin Third Party Server Load JS library Admin Tool Two major things done by the JS Redirect to OAuth Set the “Share to WeChat” message’s content WeChat Activity Server (act.wechat.com)

9. The JS library redirects the page to OAuth 2 API OAuth2 API resolved the user’s WeChat Open ID and the predefined callback API is called User A use WeChat In APP browser to open the campaign main page 4 1 3 https://open.weixin.qq.com/connect/oauth2/authorize OAuth 2 Server WeChat Shared Count API The third Party server reads the returned parameters and invoke the APIs if necessary User A 6 5 The callback page interacts with database and project configuration. Set all necessary state information in URL parameters and return to third party server API Third Party Server WeChat Shared Count Plugin JS Library OAuth Callback Page http://act.wechat.com/rinku/response.php Database 2 Campaign main page is embedded with WeChat Shared Count JS library Project Config WeChat Shared Count Plugin JS User A shared the page to another user using the “Share to friend” function in WeChat Client 7 WeChat Activity Server (act.wechat.com) WeChat Message User B (Friend of User A) User Identification Flow 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 Message Shared Flow

10. Signature signing http://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

11. Structure of HTML page with the Plugin <link rel="stylesheet" type="text/css" href="http://act.wechat.com/rinku/css/wsf-rinku-1.0.0.css"> Logic/ API calls HTML BODY <script src="js/jquery-1.10.2.min.js"></script> <script src="http://act.wechat.com/rinku/js/wsf-rinku-1.0.1.js></script> • <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>

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

13. API Details • http://act.wechat.com/rinku/api.php?type=[APIType]&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 Share to Friend Shared Count + 1, data pull from API

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