入门指引

1.申请入驻

  1. 提前准备京东Pin账号。

  2. 登录江湖

  3. 选择"我是渠道分销商"。

  4. 特别说明:店铺名称可以填写“描述主营业务”。

  5. 等待运营审核。

具体入驻指引操作手册,请参考 江湖解决方案指引

2.尝试接入一个产品

例如建一个自定义的生鲜商城,首先完成入驻,参考入驻流程。

  1. 进入“商品管理”,点击“创建商品组”,输入“商品组名称”,例如:生鲜商城。

  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的接入方式如下:

  1. 引入我方提供无感登录工具类jar包

  2. 使用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 无感登录模式访问地址
  3. 跳转至目标链接

    调用代码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. 交互流程说明:

    1). 商家调用江湖接口获取获取ACCESS_TOKEN-(当前使用postman模拟)

    2). 拼接无感登录访问地址

    3). 使用第二步生成的无感登录访问地址,跳转至目标链接

  2. 具体方法如下

    1). 获取ACCESS_TOKEN-(当前使用postman模拟)

    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 注意事项

  1. 目标访问地址要替换为运营人员搭建好的用户访问地址url。

  2. appid和appSecret获取方式请查看appid、appsecret参数

  3. 订单查看页面地址: https://q.jd.com/m/react/index.html#@@{"params":{},"hash":"orderList"}@@

  4. 安卓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
  5. 每次生成无感登录地址,需要重新获取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,帮助第三方应用在进行京东商品、活动等推广过程中,为用户带来更好的产品体验,实现提高转化率、拉动商业变现的目标。

  1. 第三方应用呼起京东APP流程说明: ​ 若用户设备安装了京东APP,点击联盟广告则直接呼起京东APP跳转至native页面,以避免用户再次输入登录账号、密码;若用户设备未安装京东APP,点击联盟广告则直接停留在三方应用内,应用可以自行使用webview访问对应广告的H5页面。

第三方应用呼起京东APP

  1. 第三方应用接入京东APP返回功能说明: ​ CPS联盟SDK支持第三方应用呼起京东APP,在跳转至京东APP后页面中部会出现一个返回第三方APP的功能按钮,点击返回按钮即可回呼至第三方应用,此功能用来提升APP间的跳转体验; 第三方应用接入京东APP

  2. 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包名,下载地址为必填)

安卓端

  1. iOS端(其中 APP名称,APP包名,下载地址为必填)

iOS端
备注:signmd5、SHA1信息需要通过以下小工具生成后提供给我们,点击下载小工具

iOS端

备注:signmd5、SHA1信息需要通过以下小工具生成后提供给我们,点击下载小工具

https://storage.jd.com/union-pic/app-release.apk?Expires=3675584629&AccessKey=tGVHZc3mI1510m9N&Signature=S5rImOeVzM4bIBNMo76TtF9%2B%2FMw%3D

app内webview打开h5调用原生集成调用sdk跳转京东商城

webview集成openJD函数:

以下两行必须设置: settings.setJavaScriptEnabled(true); settings.setDomStorageEnabled(true);

  1. 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);
        }
 }
1
2
3
4
5
6
7
8
9

第二步

在原生的WebView里,对WebView对象做一下设置,调下面方法:

   webView.addJavascriptInterface(webViewInterface, "Android");
1

其中,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);  
1

第五步

在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');  
}
1
2
3
  1. 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);
    }
};
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
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);
});
1
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')
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
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44

集成webview调用cps联盟sdk的demo如下

推广链接提供 ​ 推广链接必须有openjd=1和openjdtype=json这两个参数

最后更新: 3/10/2021, 11:48:32 PM