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

SecureSimpleSignature 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

WeChat

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.