商家场景嵌入江湖页面案例
一、案例场景描述
商家在其APP内或者H5环境内嵌入江湖的页面。
二、准备工作
登录江湖平台 江湖地址，获取AppId、AppSecret参数:
三、场景效果展示
从商家H5页面中，点击icon，进入江湖的页面
商家的H5页面：
嵌入到商家H5中的江湖H5页面：
1、无感登录效果展示案例下载 案例下载（Java版本）
2、打开案例首页，首页访问路径为：根路径+"/index.html" ，例如：http://case-center.jd.com/index.html
3、填写参数信息
| 参数名称 | 是否必填 | 参数说明 |
|---|---|---|
| app唯一凭证 | 是 | Appid,第三方app唯一凭证 |
| app凭证密钥 | 是 | AppSecret,第三方app唯一凭证密钥 |
| 用户唯一标识 | 是 | app中用户唯一标识 |
| 目标访问地址 | 是 | 最终跳转的url地址 |
信息填写参考如图所示：
4、点击无感登录，可跳转到指定的目标访问地址，如图：
四、实现过程
1、实现流程图：
2、实现步骤
2.1、商家调用江湖接口获取获取ACCESS_TOKEN
接口地址：https://big.jd.com/auth/getToken
请求类型：GET
接口入参：
| Key | Value | 是否必填 | 备注 |
|---|---|---|---|
| appId | String | 是 | 第三方app唯一凭证 |
| appSecret | String | 是 | 第三方app唯一凭证 |
| clientId | String | 是 | app中用户唯一标识 |
| userIp | String | 是 | 用户的ip |
| userOS | String | 是 | 用户操作系统 |
| userOSVersion | String | 是 | 用户操作系统版本 |
| userUA | String | 是 | 用户浏览器UA |
| networkType | String | 是 | 用户网络 |
| phone | String | 是 | 用户手机号 |
返回值：
| 名称 | 类型 | 备注 |
|---|---|---|
| success | Boolean | 是否成功 |
| resultCode | String | 返回Code: 000000:返回成功 |
| resultMsg | String | 返回消息：成功 |
| value | String | ACCESS_TOKEN |
请求样例（postman模拟）：
2.2、商家调用江湖接口返回跳转链接
接口地址：https://big.jd.com/bigger/skip
请求类型：GET
接口入参：
| Key | Value | 是否必填 | 备注 |
|---|---|---|---|
| returnUrl | String | 是 | 要跳转的目标地址，需编码传参 |
| accessToken | String | 是 | 获取的ACCESS_TOKEN，需编码传参 |
返回值： HTML页面
请求样例（postman模拟）：
拼接链接样例（Java版本）："https://big.jd.com/bigger/skip?returnUrl=" + URLEncoder.encode(URLEncoder.encode(returnUrl, "UTF-8"), "UTF-8") + "&accessToken=" + URLEncoder.encode(accessToken, "UTF-8");
注意：
每次生成无感登录模式访问地址，可以重新获取accessToken
3、注意事项
3.1、目标访问地址要替换为运营人员搭建好的用户访问地址url。
3.2、订单查看页面地址：https://q.jd.com/m/react/index.html#@@{"params":{},"hash":"orderList"}@@
3.3、安卓APP打开H5进行微信支付需要客户的APP提供下申请H5时提交的授权域名：https://hpay.jd.com
如果是APP里调起H5支付，需要在webview中手动设置referer，如(
Map extraHeaders = new HashMap(); extraHeaders.put("Referer", "https://hpay.jd.com");