入门指引
1.申请入驻
提前准备京东Pin账号。
登录江湖。
选择"我是渠道分销商"。
特别说明:店铺名称可以填写“描述主营业务”。
等待运营审核。
具体入驻指引操作手册,请参考 江湖解决方案指引
2.尝试接入一个产品
例如建一个自定义的生鲜商城,首先完成入驻,参考入驻流程。
进入“商品管理”,点击“创建商品组”,输入“商品组名称”,例如:生鲜商城。
使用页面场景组件,绑定刚才创建的“生鲜商城”商品组,发布页面,即可输出到任意场景使用。
3.登录模式
通过系统自动创建场景页面或者组件,在用户实时购物交易时需要验证处理用户登录状态,不同的登录模式给用户的体验不同,目前系统主要支持五种登录模式,
3.1普通登录
如果通过江湖创建的页面直接加挂到客户流程场后,用户在商品交易过程中,商品结算页会自动检索是否是京东已登录状态,如果未登录会跳转到登录H5页面让用户通过京东账号进行登录,如图:
3.2联合登录
3.2.1江湖供应链系统与第三方请求时序图
3.2.2流程说明
3.2.2.1前期准备
1、第三方提供根据授权临时票据(CODE)换取用户信息接口
2、第三方通过江湖系统分配渠道Id(APPID)
3、第三方通过江湖系统生成商城地址(RETURNURL)
4、第三方通过渠道Id(APPID)、临时票据(CODE)、商城地址(RETURNURL)生成专属联合登录地址(http://big.jd.com/unionLogin?appId=APPID&code=CODE&returnUrl=RETURNURL)
5、第三方配置投放
3.2.2.2流程说明
1、第三方用户访问投放地址
2、第三方通过OAuth2.0协议请求用户授权登录京东
3、第三方用户确认生成授权临时票据(CODE)
4、第三方重定向到专属联合登录地址
5、京东侧根据临时票据(CODE)调用第三方换取用户信息接口
6、第三方返回用户信息
7、京东侧根据用户信息进行登录绑定,下发登录态
3.2.3案例
3.3无感登录
3.3.1江湖供应链系统与第三方请求时序图
3.3.2java方式接入
推荐使用jar方式接入,jar的下载链接:无感登录jar。也可以自己采用3.3.3中步骤,自己调用接口接入。jar的接入方式如下:
引入我方提供无感登录工具类jar包
使用AccessTokenUtil工具类生成返回链接
工具类名:com.jd.jr.jddx.feellessLogin.AccessTokenUtil
方法名:getRedirectUrl
接口入参:
参数名 参数类型 是否必填 备注 targetUrl String 是 目标地址(活动落地页) map Map<String,String> 是 商户信息 其中Map为
Key Value 是否必填 备注 appId String 是 第三方app唯一凭证 获取方式请查看appid、appsecret参数 appSecret String 是 第三方app唯一凭证密钥 clientId String 是 app中用户唯一标识 userIp String 是 用户的ip userOS String 否 用户的操作系统 userOSVersion String 否 用户的操作系统版本 userUA String 否 用户的浏览器UA networkType String 否 用户网络 phone String 否 用户手机号 返回值:
参数名 参数类型 备注 value String 无感登录模式访问地址 跳转至目标链接
调用代码demo如下:
/** * 通过无感登录跳转商城 * * @param request * @param response */ @RequestMapping("/toMall") public void toMall(HttpServletRequest request, HttpServletResponse response) { Map<String, String> map = new HashMap<>(); map.put("appId", "您的app唯一凭证"); map.put("appSecret", "您的app唯一凭证密钥"); map.put("clientId", "您的用户唯一标识"); map.put("userIp", "您的用户的ip"); map.put("userOS", "您的用户操作系统"); map.put("userOSVersion", "您的用户操作系统版本"); map.put("userUA", "您的用户浏览器UA"); map.put("networkType", "您的用户网络"); map.put("phone", "您的用户手机号"); String redirectUrl = null; try { redirectUrl = AccessTokenUtil.getRedirectUrl("目标访问地址", map); response.sendRedirect(redirectUrl); } catch (Exception e) { log.error("跳转商城连接失败,入参:{}", JSONObject.toJSONString(map)); } }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
3.3.3其他方式接入
交互流程说明:
1). 商家调用江湖接口获取获取ACCESS_TOKEN-(当前使用postman模拟)
2). 拼接无感登录访问地址
3). 使用第二步生成的无感登录访问地址,跳转至目标链接
具体方法如下
1). 获取ACCESS_TOKEN-(当前使用postman模拟)
接口地址:https://big.jd.com/auth/getToken
接口入参:
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 2). 拼接地址
说明:
ACCESS_TOKEN:第一步接口获取的value值
TARGET_URL:目标地址(活动落地页)
RETURN_URL:https://big.jd.com/bigger/skip
生成无感登录模式访问地址伪代码:
https://big.jd.com/bigger/skip + "?returnUrl=" + URLEncoder.encode(URLEncoder.encode(targetUrl, "UTF-8"), "UTF-8") + "&accessToken=" + URLEncoder.encode(accessToken, "UTF-8");
1
2
3最终生成的无感登录访问地址示例:
https://big.jd.com/bigger/skip?returnUrl=https%3A%2F%2Fjddb.jd.com%2Fm%2Fgylconfig%2Findex.html%3FgylCode%3DP286393260211634176&accessToken=a5bcecf70389f78837b5e5361a6d6af4b80b475f742f5c90be07164c76a7400430872e12946dc9d2cb1296579ebc98fe
1
3.3.4 注意事项
目标访问地址要替换为运营人员搭建好的用户访问地址url。
appid和appSecret获取方式请查看appid、appsecret参数
订单查看页面地址: https://q.jd.com/m/react/index.html#@@{"params":{},"hash":"orderList"}@@
安卓APP打开H5进行微信支付需要客户的APP提供下申请H5时提交的授权域名:https://hpay.jd.com
如果是APP里调起H5支付,需要在webview中手动设置referer,如
Map extraHeaders = new HashMap(); extraHeaders.put("Referer", "https://hpay.jd.com");
1
2每次生成无感登录地址,需要重新获取accessToken
4.唤起APP
三方APP内集成cps联盟sdk呼起京东APP接入文档
更新记录
创建日期 | 2020/5/18 | 原作者 | 焦丙乾 | 完成日期 | 2020/5/18 |
---|---|---|---|---|---|
变更记录 | |||||
变更日期 | 变更人 | 变更摘要 | |||
2020/5/25 | 焦丙乾 | 更新openJD入参、添加打开app回调处理 |
前言
CPS联盟是京东联合广大媒体合作伙伴推广京东商品、提高各品牌知名度的重点营销平台,现为第三方应用开发者提供SDK,帮助第三方应用在进行京东商品、活动等推广过程中,为用户带来更好的产品体验,实现提高转化率、拉动商业变现的目标。
为更方便三方对接cps联盟sdk实现调起京东商城功能,特输出此文档。该文档集成包含两部分内容:
- 支持app原生页面调用集成sdk跳转京东商城;
- 支持app内webview打开h5调用原生集成调用sdk跳转京东商城
cps联盟sdk与普通scheme方式调起APP的区别:支持返回第三方应用功能。
app原生页面调用集成sdk跳转京东商城
一、CPS联盟SDK呼起京东APP接入说明(支持返回第三方应用功能) CPS联盟是京东联合广大媒体合作伙伴推广京东商品、提高各品牌知名度的重点营销平台,现为第三方应用开发者提供SDK,帮助第三方应用在进行京东商品、活动等推广过程中,为用户带来更好的产品体验,实现提高转化率、拉动商业变现的目标。
- 第三方应用呼起京东APP流程说明: 若用户设备安装了京东APP,点击联盟广告则直接呼起京东APP跳转至native页面,以避免用户再次输入登录账号、密码;若用户设备未安装京东APP,点击联盟广告则直接停留在三方应用内,应用可以自行使用webview访问对应广告的H5页面。
第三方应用接入京东APP返回功能说明: CPS联盟SDK支持第三方应用呼起京东APP,在跳转至京东APP后页面中部会出现一个返回第三方APP的功能按钮,点击返回按钮即可回呼至第三方应用,此功能用来提升APP间的跳转体验;
CPS联盟SDK接入呼起流程说明:
第三方应用接入SDK呼起使用方法:
第三方应用调用SDK V1.0版本号的呼起服务,即可实现呼起京东APP,用户在京东APP中下单即可获取相应佣金。
安卓端SDK集成方法:http://3.cn/101-tbP7 (最新)
安卓端demo下载链接:http://3.cn/FwcxRM0
iOS端SDK集成方法:http://3.cn/2C1hteT
iOS端demo下载链接:http://3.cn/vBIauRG
备注:非京东域名链接不支持呼起;
二、如何获取直呼SDK说明
需要用户提供以下信息
1. 安卓端(其中 APP名称,APP包名,下载地址为必填)
- iOS端(其中 APP名称,APP包名,下载地址为必填)
备注:signmd5、SHA1信息需要通过以下小工具生成后提供给我们,点击下载小工具
备注:signmd5、SHA1信息需要通过以下小工具生成后提供给我们,点击下载小工具
app内webview打开h5调用原生集成调用sdk跳转京东商城
webview集成openJD函数:
以下两行必须设置: settings.setJavaScriptEnabled(true); settings.setDomStorageEnabled(true);
- android端集成与H5通信方式:
第一步:
声明一个类,比如叫 WebViewJSInterface 的一个class。类里边声明一个方法openJD提供给H5调用,方法需要用@JavascriptInterface注解,才能给H5调用
比如:
public class WebViewJSInterface {
@JavascriptInterface
public void openJD(String jsonString) {
Log.i("KeplerSdk", "openJD, jsonString: " + jsonString);
//JSONUrl类详见android demo
JsonUrl jsonUrl = new Gson().fromJson(jsonString, JsonUrl.class);
KeplerApiManager.getWebViewService().openAppWebViewPage(context, jsonUrl.getUrl(), mKeplerAttachParameter, mOpenAppAction);
}
}
2
3
4
5
6
7
8
9
第二步:
在原生的WebView里,对WebView对象做一下设置,调下面方法:
webView.addJavascriptInterface(webViewInterface, "Android");
其中,webViewInterface是一个上面自定义的WebViewJSInterface类型的对象,"Android" 为android环境标准常量,在H5里调用的时候根据这个名字去调用。
第三步: 添加js回调函数callBackJs,执行js全局监听函数**openJdCallback**
/**
* 回调h5页的js方法
*
* @param success 呼起京东App是否成功
* @param msg 成功/失败信息
* @param url 呼起京东App后要打开的url
*/
private void callBackJs(boolean success, String msg, String url) {
JSONObject jsonObject = new JSONObject();
try {
jsonObject.put("success", success);
jsonObject.put("msg", msg);
jsonObject.put("url", url);
} catch (JSONException e) {
e.printStackTrace();
}
//回调h5页的js方法:openJdCallback
webView.loadUrl("javascript:openJdCallback(" + jsonObject.toString() + ")");
}
第四步:
在onStatus方法内判断处理执行callBackJs
callBackJs(false, "未安装京东App", url);
第五步:
在H5里JS通过"Android" 这个名字来调 openJD(url) 函数,确保投放url参数里面有openjd=1&openjdtype=json
if (/Android/i.test(navigator.userAgent)){
Android.openJD('https://xxxx.jd.com?openjd=1\&openjdtype=json');
}
2
3
- iOS端集成与H5通信方式:
第一步:
webview中集成sdk方法并暴露给H5调用方法OpenJD&处理打开京东app回调
接入WebViewJavascriptBridge:
self.bridge = [WebViewJavascriptBridge bridgeForWebView:_webView];
[self.bridge registerHandler:@"openJD" handler:^(id data, WVJBResponseCallback responseCallback) {
NSMutableDictionary *resultDict = [NSMutableDictionary dictionary];
// 参数校验
if (nil == data || ![data isKindOfClass:NSString.class]) {
[resultDict setObject:@NO forKey:@"success"];
responseCallback(resultDict);
return ;
}
// 参数解析
id JSONObject = [weakSelf objectFromJSONString:(NSString *)data];
if (![JSONObject isKindOfClass:NSDictionary.class]) {
[resultDict setObject:@NO forKey:@"success"];
responseCallback(resultDict);
return ;
}
// URL
NSString *URLString = [((NSDictionary *)JSONObject) objectForKey:@"url"];
if (!URLString.length) {
[resultDict setObject:@NO forKey:@"success"];
responseCallback(resultDict);
return ;
}
// open App
[[KeplerApiManager sharedKPService] openKeplerPageWithURL:URLString userInfo:nil successCallback:^{
[resultDict setObject:@YES forKey:@"success"];
responseCallback(resultDict);
} failedCallback:^(NSInteger code, NSString * _Nonnull url) {
[resultDict setObject:@NO forKey:@"success"];
[resultDict setObject:[NSNumber numberWithInteger:code] forKey:@"code"];
[resultDict setObject:url forKey:@"msg"];
[resultDict setObject:URLString forKey:@"url"];
responseCallback(resultDict);
}];
}];
第三步:
在H5里JS通过JSBridege桥接的方式调用openJD函数
//封装iOS桥接方法:
function setupWebViewJavascriptBridge(callback) {
if (window.WebViewJavascriptBridge) {
return callback(WebViewJavascriptBridge);
}
if (window.WVJBCallbacks) {
return window.WVJBCallbacks.push(callback);
}
window.WVJBCallbacks = [callback];
var WVJBIframe = document.createElement("iframe");
WVJBIframe.style.display = "none";
WVJBIframe.src = "wvjbscheme://__BRIDGE_LOADED__";
document.documentElement.appendChild(WVJBIframe);
setTimeout(function() {
document.documentElement.removeChild(WVJBIframe);
}, 0);
}
//定义openJdCallback全局函数
window.openJdCallback = function (res) {
alert(JSON.stringify(res));
if(typeof res == 'string'){
res = JSON.parse(res);
}
if (res.success == true) {
//TOOD:执行成功
console.log('success');
} else {
console.log('false');
res.url && (window.location.href = res.url);
}
};
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
//调用桥接方法调起openJD方法
if (/iPhone/i.test(navigator.userAgent)) {
setupWebViewJavascriptBridge(function(bridge) {
bridge.callHandler("openJD", JSON.stringify({ url: url }), window.openJdCallback);
});
2
3
4
5
综合android和Ios端的h5调用方法可以使用以下方法集成
//H5下js定义兼容android和iOS函数
function openJD(url) {
try {
let bridgeFlag = 0;
let param = JSON.stringify({ url: url });
window.openJdCallback = function (res) {
if(typeof res == 'string'){
res = JSON.parse(res);
}
if (res.success == true) {
//TOOD:执行成功
console.log('success');
} else {
console.log('false');
res.url && (window.location.href = res.url);
}
};
if (/Android/i.test(navigator.userAgent)) {
Android.openJD(param);
} else if (/iPhone/i.test(navigator.userAgent)) {
let _timer1 = setTimeout(() => {
clearTimeout(_timer1);
_timer1 = null;
if (bridgeFlag === 1) {
bridgeFlag = 0;
} else {
window.location.href = url;
}
}, 1000)
setupWebViewJavascriptBridge(function (bridge) {
bridgeFlag = 1;
bridge.callHandler("openJD", param, window.openJdCallback);
});
} else {
window.location.href = url;
}
} catch (e) {
window.location.href = url;
}
}
//H5内调用函数示例
openJD('https://jddx.jd.com/m/xnhjlc/? groupId=2358&xxfSceneId=A298721878508216320&productCode=1836066878501&utm_term=wxfriends&utm_source=iOS\*url\*1587702925895&utm_medium=jrappshare&from=singlemessage&isappinstalled=0\#/goodsDetail')
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
集成webview调用cps联盟sdk的demo如下
- IOS端:联盟SDK_iOS.zip
- Android端:联盟SDK_Android.zip
- android测试包:联盟SDK_Demo.apk
推广链接提供 推广链接必须有openjd=1和openjdtype=json这两个参数