一.简介

WING H5 SDK主要是为满足HTML5类型游戏需要，为此类游戏提供登录、支付、数据收集等通用功能。该SDK适用于pc端与移动端的浏览器，facebook的gameroom，以及移动端应用程序的webview等HTML5运行环境。

二.功能简介

2.1.登录

SDK提供了有界面登录方式和无界面登录方式。有界面方式内置所有已经集成的登录方式，无需编写登录界面就可以集成多种登录方式。而无界面方式则需要CP提供相对应的登录界面来调用具体登录方式。
目前WING H5 SDK 支持的登录方式有Guest，Facebook，Google，Chipsgames H5游戏平台。

2.2.支付

支付包括Facebook支付以及Web支付，其中Web支付又包括了多种支付方式比如Paypal、MOL、Xsolla等。

2.3.数据收集

数据收集模块提供了数据收集的接口，多渠道灵活调用。数据收集包含了丰富的应用内的事件类型，还支持用户自定义事件类型。
目前支持目前支持WINGSDK和Facebook两个平台。

2.4.调试模式

调试模式提供窗口查看日志，帮助开发者更快的集成SDK与定位相关的开发问题。

三.集成WING H5 SDK

3.1.适用范围

该SDK适用于HTML5类型的游戏或应用，特别是在Facebook上线的页游。为这些游戏提供登录、支付、数据收集等基础功能，同时提供调试窗口，满足游戏能顺利运行的基本功能需求，更多的功能目前还在持续开发中。

3.2.如何集成

WING H5 SDK推荐使用标签方式引入JS，同时也支持AMD、CommonJS等方式引入。

3.3.接口说明

以下是WING H5 SDK各个接口的具体使用说明。

3.3.1.初始化

初始化方法：

初始化sdk库，在调用其他方法前，必须先调用此方法。

参数说明：

示例：

3.3.2.登录

3.3.2.1.获取登录方式

方法：wing.user.getLoginWay();

返回结果参数说明：

data数据结构：

示例：

注： 如发现获取的登录方式为空，请检查：
1. 对应登录平台在SDK后台是否已打开H5 开关。
2. 对应登录平台在SDK后台是否已修改为正式状态。
3. 如果对应登录平台在SDK后台为测试状态，需要将当前设备id 添加到测试设备列表后，才能看到对应登录方式。

3.3.2.2.用户登录

方法：wing.user.login(paramObj);

参数说明：

示例：

返回结果参数说明：

注：
1：platform 字段不传入时，将获取该应用可用的登录方式，用窗口展示给用户选择；
2：platform字段传入具体平台值时，不再弹出登录方式选择框，直接跳到对应的登录方式
3：Facebook内嵌游戏应当同时传入platform=FACEBOOK，FB=true。

3.3.3.支付

3.3.3.1.获取商品列表

方法：wing.pay.getProducts();

示例：

3.3.3.2.购买商品

方法：wing.pay.payUI(params);

参数说明：

示例：

注：
1：对于网页支付方式如Paypal等，支付后在弹出窗口关闭时回调，result不返回数据
2：对于Facebook支付，支付完成后，result返回Facebook所有数据
如：

3：channel字段为可选字段，传入该值则直接使用对应支付方式，否则弹出所有支付方式选择窗口

3.3.4.公共参数设置

SDK包括serverId等公共参数，这些参数主要用于数据跟踪和统计。
公共参数必须严格按照文档进行设置，在后续的接口中会使用到这些公共的参数，没有按照要求配置会导致部分接口调用失败。

3.3.4.1.设置游戏用户id

wing.setGameUserId()

参数说明：

示例：

3.3.4.2.设置服务器id

wing.setServerId()

参数说明：

示例：

3.3.4.3.设置等级

wing.setLevel()

参数说明：

示例：

3.3.5.数据收集

使用SDK数据收集接口配合大数据平台，可以轻松统计玩家习惯以及充值等行为，为游戏的市场营销提供数据依据。
目前数据收集支持以下平台： WING SDK 后台、 Facebook 后台
WINGSDK数据收集使用在游戏的过程中打点的方式，如图所示:

以上流程图中涉及到的几个接口：setServerId、setGameUserId、setLevel、ghw_user_import事件、ghw_user_create事件是有时序要求的，其它的事件如ghw_initiated_purchase、ghw_purchase、ghw_level_achieved、ghw_user_info_update、ghw_gold_update和ghw_task_update事件则需要在事件发生的对应时机调用接口发送。

SDK内部集成多个数据收集渠道，对于同一个事件，不同的渠道对应的事件名称和参数值可能不尽相同，可以使用下面数据发送接口应对此类需求。

3.3.5.1.数据发送

方法：wing.trackEvent(WAEvent);

参数说明：

示例：

示例说明：setDefaultEventName方法用于设置发送事件的名称，GHW_PURCHASE为SDK定义的购买事件名称，所有SDK预定义的事件名称可以在下文的3.3.7.1.事件常量章节查看。setDefaultValue为设置事件默认价值，addDefaultEventValue为设置默认事件参数/值，其中SDK定义参数在下文3.3.7.2.参数常量章节可查看。setChannelEventName为设置渠道自定义事件名称，用于发往第三方平台时更改事件命名。setChannelEventValues为事件渠道自定义的参数/值，用于发往第三方平台时，替换默认事件参数。

下面是WAEvent对象的具体说明。

3.3.5.2.事件对象

全局对象：wing.WAEvent

实例化
方法：builder()

参数：无

示例：

WAEvent对象是SDK提供的帮助类，用于封装需要SDK追踪的数据，可以使用链式调用的方式使用该对象。在使用前必须调用初始化方法builder()才能使用。下列是WAEvent剩余的所有方法，点击链接跳转到具体的方法查看说明。

1)设置默认事件名称
方法：setDefaultEventName(eventName)
此方法为所有渠道的单个事件设置默认事件名称，如果渠道没有单独设置则使用此默认值。

参数：

示例：

2)设置默认事件值
方法：setDefaultValue(val)
此方法为所有渠道的单个事件设置默认事件值，如果渠道没有单独设置则使用此默认值。

参数：

示例：

3)设置一个事件参数
方法：addDefaultEventValue(paramName, val)
此方法为所有渠道的单个事件设置事件参数，如果渠道没有单独设置则使用此默认参数。每次添加一个，可调用多次。

参数：

示例：

设置多个事件参数
方法：addAllDefaultEventValue(obj)
此方法为所有渠道的单个事件设置事件参数，如果渠道没有单独设置则使用此默认参数。每次可添加多个，只可调用一次。

参数：

示例：

5)设置渠道自定义事件名称，针对渠道需要设置特定的事件名称
说明：使用该方法单独为某一渠道设置事件名称，该事件名称将替换掉setDefaultEventName设置的事件名称。

方法：setChannelEventName(channelName, eventName)

参数：

示例：

6)设置事件渠道自定义的参数/值
说明：使用该方法单独为某一渠道的某个事件设置参数值，如果不设置则使用addDefaultEventValue或addAllDefaultEventValue方法设置的默认参数。

方法：setChannelEventValues(channelName, obj)

参数：

示例：

7)禁用渠道
说明：发送某事件时，不发送该事件到指定渠道。

方法：disableChannel(channelName)

参数：

示例：

8)禁用所有第三方渠道
说明：发送某事件时，不发送该事件到所有第三方渠道。

方法：disableAllChannel()

参数：无

示例：

9)获取事件信息方法列表
说明：使用下面方法可以获取前面方法设置的参数值。

示例：

3.3.6.调试

3.3.6.1 开发者调试模式
SDK提供了调试模式供开发者使用，具体打开方式如下：

在初始化时设置debug=true，开发时浏览器打开开发者模式，在控制台即可看到相关操作日志，开发者可以根据日志快速排查问题，提高效率。

3.3.6.2 测试设备打开 LOG 日志
通过在WING SDK 管理后台 设置》测试设备 中添加设备ID 到测试设备列表，可打开LOG 日志。

3.3.7.常量

以下是SDK内部预定义常量。

3.3.7.1.事件常量

以下是SDK预定义事件。

事件对象：wing.WAEvent.WA_EVENT_TYPE

事件名称对应常量：

3.3.7.2.参数常量

以下是SDK预定义事件的参数定义
参数对象：wing.WAEvent.WA_EVENT_PARAMETER_NAME

参数常量：

3.3.7.3.第三方平台常量

参数对象：wing.WAEvent.TRACKING_CHANNEL

参数常量：

四.代码说明

4.1.登录类型对照表:

4.2.支付类型对照表:

4.3.状态码

WINGPLUS H5 SDK-3.14.0（2023.03.02 发布）

变更如下：对接文档
1、支持steam平台接入
2、内部优化

WINGPLUS H5 SDK-3.13.0（2023.02.23 发布）

变更如下：对接文档
1、支持ghg平台接入
2、内部优化

WINGPLUS H5 SDK-3.11.0（2022.09.06 发布）

变更如下：对接文档
1、商品列表获取优化
2、内部优化

WINGPLUS H5 SDK-3.10.0（2022.06.06 发布）

变更如下：对接文档
1、setNickName支持
2、md5 加密方法替换
3、折扣价支付页支持
4、部分接口升级
5、内部优化

WINGPLUS H5 SDK-3.9.0（2022.05.10 发布）

变更如下：对接文档
1、内部优化
2、bug修复

WINGPLUS H5 SDK-3.8.0（2022.04.22 发布）

变更如下：对接文档
1、Facebook api版本升级到v13
2、bug修复

WINGPLUS H5 SDK-3.7.1（2022.03.15 发布）

变更如下：对接文档
1、登录接口升级
2、bug修复

WINGPLUS H5 SDK-3.7.0（2021.12.27 发布）

变更如下：对接文档
1、针对mobile 支付页改造
2、bug修复

WINGPLUS H5 SDK-3.6.0（2021.11.18 发布）

变更如下：对接文档
1、客服人员封登录和封支付支持
2、firebox浏览器支付拦截弹框提醒
3、针对chipsgames 的游戏，新增调用展示收藏指引接口
wingplus.user.showCollectGuide();
4、bug修复

WINGPLUS H5 SDK-3.5.0.1（2021.10.18 发布）

变更如下：对接文档
1.支付方式页面，在PC端显示旧版，在移动端显示新版
2.新版支付中页面，只在移动端才显示
3、bug修复

WINGPLUS H5 SDK-3.5.0（2021.10.15 发布）

变更如下：对接文档
1、支付方式页面改版，并实现国际化
2、新增支付中提示页面，并实现国际化
3、bug修复

WINGPLUS H5 SDK-3.4.4.2（2021.09.15 发布）

变更如下：对接文档
1、sdk初始化成功添加回调
2、bug修复

WINGPLUS H5 SDK-3.4.4.1（2021.09.09 发布）

• 变更如下：对接文档
  1、去除全局变量platform，避免和游戏中的定义重复
  2、bug修复

WINGPLUS H5 SDK-3.4.4（2020.08.11 发布）

• 变更如下：对接文档
  1、facebook graph-api 版本升级到v6.0
  2、cdn域名更换
  3、bug修复

WINGPLUS H5 SDK-3.4.3.1（2019.10.31 发布）

• 变更如下：对接文档
  1、facebook graph-api 版本升级到v3.2
  2、bug修复

WINGPLUS H5 SDK-3.4.3（2019.10.17 发布）

• 变更如下：对接文档
  1、内部优化，增加渠道接入

WINGPLUS H5 SDK-3.4.2（2019.09.03 发布）

• 变更如下：对接文档
  1、内部优化，增加渠道接入

WINGPLUS H5 SDK-3.4.1（2019.08.19 发布）

• 变更如下：对接文档
  1、内部优化，增加渠道接入

WINGPLUS H5 SDK-3.4.0（2019.04.10 发布）

• 变更如下：对接文档
  1、内部优化，增加渠道接入

WINGPLUS H5 SDK-3.3.0（2019.03.13 发布）

• 变更如下：对接文档
  1、增加单个wingsdk app支持多Facebook应用

WINGPLUS H5 SDK-3.2.0（2019.02.27 发布）

• 变更如下：对接文档
  1、CG全屏中，游戏h5sdk token失效后自动跳主页问题修复
  2、渠道数据上报问题修复
  3、登录、支付样式修改，账号绑定pc端样式适配

WINGPLUS H5 SDK-3.1.0（2018.12.24 发布）

• 变更如下：对接文档
  1、支持FB Canvas 框架相关功能

WINGPLUS H5 SDK-3.0.1（2018.12.20 发布）

• 变更如下：对接文档
  1、facebook canvas归因优化，该版本为facebook canvas定制版，即时发送归因。

WINGPLUS H5 SDK-3.0.0（2018.10.30发布）

• 变更如下：对接文档
  1、增加页游支持，包括页游归因和数据接口升级等。
  2、增加平台微端支持，包括平台微端支付开关、调整相关功能逻辑等。
  3、部分功能优化，包括账号绑定优化、兼容性优化等。

WINGPLUS H5 SDK-2.2（2018.08.09发布）

• 变更如下：对接文档
  1、增加隐私政策功能，以应对欧盟GDPR条例，管理后台可以控制单个游戏是否生效。
  2、优化支付模块，以便更好兼容CG平台支付功能。
  3、优化缓存机制，改善用户体验。

WINGPLUS H5 SDK-2.0（2018.05.26发布）

• 变更如下：对接文档
  1、增加微端支持。支持将H5游戏打包成iOS或Android包，调用原生相关功能。
  2、增加账号绑定。支持将两个账号绑定在一起，在SDK层面切换绑定的账号，实现将不同平台间账号引流。

WingSDK-1.1.1（2018.04.26发布）

• 变更如下：对接文档
  1、增加 Chipsgames H5游戏平台接入
  2、增加通过测试设备控制LOG 开关

WingSDK-1.0（2018.02.27发布）

• 变更如下：对接文档
  1、产品发布
  2、包含登录，支付，数据收集等功能

1.Google后台配置

Google后台地址：https://console.developers.google.com

1.1.Google API 控制台中创建新的公共项目

首先，需要注册Google开发者账号（参考链接：https://play.google.com/apps/publish/signup/）。
注册账号后，打开Google API 控制台，创建一个新的公共项目，如果使用现有的公共项目，可以不新建。

点击“+”新建项目

在创建页面输入项目名称，点击“Create”新建即可完成

1.2.创建登录认证

1）打开Google API控制台，选中项目，在“Credentials”标签下，点击“Create credentials”，在下拉菜单中选择“OAuth client ID”

2）“Application type”选择“Web application”，“Name” 可根据业务内容填写，“Authorized JavaScript origins”，填写当前使用具体域名。

3）填写完后，点击“Create”，完成后生成ClientId，把ClientId配置到WingSDK后台即可

2.Facebook后台配置

Facebook控制台地址：https://developers.facebook.com/
创建一个Facebook应用，创建完之后会生成App ID，这里的App ID要配置在项目对应的wingSDK后台应用当中，作为Facebook应用标识；需要注意应用域名必须配置为应用所在域名

2.1 发布Facebook Canvas页游

如下图示填写好Facebook应用的基本信息，以及定义名称空间。
这里的名称空间将用于生成Facebook Canvas页游的链接, 名称可以自己的习惯进行定义，如果不填写Facebook则使用Facebook App Id作为url一部分添加到Facebook网页游戏网址中。

在“Facebook网页游戏网址(https)”单元格中填写Facebook网页游戏网址，注意游戏地址需要是https协议的。
WINGSDK支持在这里定义以下三个参数：
cno：渠道名称，
scno：子渠道名称
lp：推广页链接。

如果在这里配置了这些参数，WINGSDK会在Facebook Canvas游戏启动后发送这些参数到WINGSDK后台做渠道归因。

添加完之后，在浏览器访问Facebook自动生成的网页游戏网址则可以直接访问到游戏。

2.2 添加Facebook网页支付功能

添加Facebook网页支付功能，首先需要添加产品：网上支付，如下图。

添加完网上支付产品后，在网上支付中添加动态定价回调网址以及Webhook的回调网址，如下图：

动态定价回调网址：
https://api.wingsdk.com/sdkapi/v1/pay/facebook/fb_get_product.do?waAppId={这里填写WINGSDK的AppId}

Webhook回调网址：
https://api.wingsdk.com/sdkapi/v1/pay/facebook/callback.do?waAppId={这里填写WINGSDK的AppId }

其它收款账号等信息需要按照Facebook官方要求配置好。参考链接：
https://developers.facebook.com/docs/games_payments/?locale=zh_CN
目前WINGSDK的Facebook网页支付使用的是动态定价，需要参考WINSDK后台配置文档来配置商品信息。

一.简介

WING H5 SDK主要是为满足HTML5类型游戏需要，为此类游戏提供登录、支付、数据收集等通用功能。该SDK适用于pc端与移动端的浏览器，facebook的gameroom，以及移动端应用程序的webview等HTML5运行环境。

二.功能简介

2.1.登录

SDK提供了有界面登录方式和无界面登录方式。有界面方式内置所有已经集成的登录方式，无需编写登录界面就可以集成多种登录方式。而无界面方式则需要CP提供相对应的登录界面来调用具体登录方式。
目前WING H5 SDK 支持的登录方式有Guest，Facebook，应用内登录。

2.2.支付

支付包括Facebook支付以及Web支付，其中Web支付又包括了多种支付方式比如Paypal、MOL、Xsolla等。

2.3.数据收集

数据收集模块提供了数据收集的接口，多渠道灵活调用。数据收集包含了丰富的应用内的事件类型，还支持用户自定义事件类型。

2.4.调试模式

调试模式提供窗口查看日志，帮助开发者更快的集成SDK与定位相关的开发问题。

三.集成WING H5 SDK

3.1.适用范围

该SDK适用于HTML5类型的游戏或应用，特别是在Facebook上线的页游。为这些游戏提供登录、支付、数据收集等基础功能，同时提供调试窗口，满足游戏能顺利运行的基本功能需求，更多的功能目前还在持续开发中。

3.2.如何集成

WING H5 SDK推荐使用标签方式引入JS，同时也支持AMD、CommonJS等方式引入。

3.3.接口说明

以下是WING H5 SDK各个接口的具体使用说明。

3.3.1.初始化

初始化方法：wing.init(paramObj);

初始化sdk库，在调用其他方法前，必须先调用此方法。

参数说明：

示例：

3.3.2.登录

3.3.2.1.获取登录方式

方法：wing.user.getLoginWay();

返回结果参数说明：

data数据结构：

示例：

3.3.2.2.用户登录

方法：wing.user.login(paramObj);

参数说明：

示例：

返回结果参数说明：

注：
1：platform 字段不传入时，将获取该应用可用的登录方式，用窗口展示给用户选择；
2：platform字段传入具体平台值时，不再弹出登录方式选择框，直接跳到对应的登录方式
3：Facebook内嵌游戏应当同时传入platform=FACEBOOK，FB=true。

3.3.3.支付

3.3.3.1.获取商品列表

方法：wing.pay.getProducts();

示例：

3.3.3.2.购买商品

方法：wing.pay.payUI(params);

参数说明：

示例：

注：
1：对于网页支付方式如Paypal等，支付后在弹出窗口关闭时回调，result不返回数据
2：对于Facebook支付，支付完成后，result返回Facebook所有数据
如：

3：channel字段为可选字段，传入该值则直接使用对应支付方式，否则弹出所有支付方式选择窗口

3.3.4.公共参数设置

SDK包括serverId等公共参数，这些参数主要用于数据跟踪和统计。
公共参数必须严格按照文档进行设置，在后续的接口中会使用到这些公共的参数，没有按照要求配置会导致部分接口调用失败。

3.3.4.1.设置游戏用户id

wing.setGameUserId()

参数说明：

示例：

3.3.4.2.设置服务器id

wing.setServerId()

参数说明：

示例：

3.3.4.3.设置等级

wing.setLevel()

参数说明：

示例：

3.3.5.数据收集

使用SDK数据收集接口配合大数据平台，可以轻松统计玩家习惯以及充值等行为，为游戏的市场营销提供数据依据。
目前数据收集支持以下平台： WING SDK 后台、 Facebook 后台
WINGSDK数据收集使用在游戏的过程中打点的方式，如图所示:

以上流程图中涉及到的几个接口：setServerId、setGameUserId、setLevel、ghw_user_import事件、ghw_user_create事件是有时序要求的，其它的事件如ghw_initiated_purchase、ghw_purchase、ghw_level_achieved、ghw_user_info_update、ghw_gold_update和ghw_task_update事件则需要在事件发生的对应时机调用接口发送。

SDK内部集成多个数据收集渠道，对于同一个事件，不同的渠道对应的事件名称和参数值可能不尽相同，可以使用下面数据发送接口应对此类需求。

3.3.5.1.数据发送

方法：wing.trackEvent(WAEvent);

参数说明：

示例：

示例说明：setDefaultEventName方法用于设置发送事件的名称，GHW_PURCHASE为SDK定义的购买事件名称，所有SDK预定义的事件名称可以在下文的3.3.7.1.事件常量章节查看。setDefaultValue为设置事件默认价值，addDefaultEventValue为设置默认事件参数/值，其中SDK定义参数在下文3.3.7.2.参数常量章节可查看。setChannelEventName为设置渠道自定义事件名称，用于发往第三方平台时更改事件命名。setChannelEventValues为事件渠道自定义的参数/值，用于发往第三方平台时，替换默认事件参数。

下面是WAEvent对象的具体说明。

3.3.5.2.事件对象

全局对象：wing.WAEvent

实例化
方法：builder()

参数：无

示例：

WAEvent对象是SDK提供的帮助类，用于封装需要SDK追踪的数据，可以使用链式调用的方式使用该对象。在使用前必须调用初始化方法builder()才能使用。下列是WAEvent剩余的所有方法，点击链接跳转到具体的方法查看说明。

1)设置默认事件名称
方法：setDefaultEventName(eventName)
此方法为所有渠道的单个事件设置默认事件名称，如果渠道没有单独设置则使用此默认值。

参数：

示例：

2)设置默认事件值
方法：setDefaultValue(val)
此方法为所有渠道的单个事件设置默认事件值，如果渠道没有单独设置则使用此默认值。

参数：

示例：

3)设置一个事件参数
方法：addDefaultEventValue(paramName, val)
此方法为所有渠道的单个事件设置事件参数，如果渠道没有单独设置则使用此默认参数。每次添加一个，可调用多次。

参数：

示例：

设置多个事件参数
方法：addAllDefaultEventValue(obj)
此方法为所有渠道的单个事件设置事件参数，如果渠道没有单独设置则使用此默认参数。每次可添加多个，只可调用一次。

参数：

示例：

5)设置渠道自定义事件名称，针对渠道需要设置特定的事件名称
说明：使用该方法单独为某一渠道设置事件名称，该事件名称将替换掉setDefaultEventName设置的事件名称。

方法：setChannelEventName(channelName, eventName)

参数：

示例：

6)设置事件渠道自定义的参数/值
说明：使用该方法单独为某一渠道的某个事件设置参数值，如果不设置则使用addDefaultEventValue或addAllDefaultEventValue方法设置的默认参数。

方法：setChannelEventValues(channelName, obj)

参数：

示例：

7)禁用渠道
说明：发送某事件时，不发送该事件到指定渠道。

方法：disableChannel(channelName)

参数：

示例：

8)禁用所有第三方渠道
说明：发送某事件时，不发送该事件到所有第三方渠道。

方法：disableAllChannel()

参数：无

示例：

9)获取事件信息方法列表
说明：使用下面方法可以获取前面方法设置的参数值。

示例：

3.3.6.调试

SDK提供了调试模式供开发者使用，具体打开方式如下：

在初始化时设置debug=true，开发时浏览器打开开发者模式，在控制台即可看到相关操作日志，开发者可以根据日志快速排查问题，提高效率。

3.3.7.常量

以下是SDK内部预定义常量。

3.3.7.1.事件常量

以下是SDK预定义事件。

事件对象：wing.WAEvent.WA_EVENT_TYPE

事件名称对应常量：

3.3.7.2.参数常量

以下是SDK预定义事件的参数定义
参数对象：wing.WAEvent.WA_EVENT_PARAMETER_NAME

参数常量：

3.3.7.3.第三方平台常量

参数对象：wing.WAEvent.TRACKING_CHANNEL

参数常量：

四.代码说明

4.1.登录类型对照表:

4.2.支付类型对照表:

4.3.状态码