Android 和 IOS 阿里百川 淘宝授权登录插件

一.使用前准备工作:

• 首先到 阿里百川网站 ->注册->新建应用->填写好相关应用的包名-> 获取应用的 安全图片 用于验证应用使用的合法性.

二.获取应用安全图片

• 选择自己要使用的应用,生成对应的 安全图片.
• 百川更新到 4.0 以上版本后，统一使用了 V5 版本安全图片。
• 安卓 Android 需要上传apk 安装包来获取安全图片,apk安装包, 你可以使用你自有安卓证书或者 官方的公有证书, 提交云打包生成apk 安装包后,再到百川上传来获取安全图片.
• 如果 包名 或 证书有更改 都需要重新获取安全图片,不然会初始化会失败.

.三 如何使用插件, 必须提交云打包 或 制作自定义基座 ,才能有效果.

1.本地 uniapp 项目 需要在根目录下,放上 nativeplugins 插件文件夹, 主要是存放安全图片用于提交到服务器上打包使用,包含 ios 和 android 子目录, 插件名称: Html5app-Baichuan 文件夹名不能修改, 具体看图片所示.

提示： 如果需要使用支付宝功能，要把插件包中的 UTDID.framework 和 utdid4all-1.1.5.3_proguard.jar 文件删除掉，如果不需要则保留一起打包。

提醒: 文件可以在右上角: 下载示例项目ZIP 中.

• 需要支付宝功能： 插件包保留 安全图片即可。

• IOS 苹果 : yw_1222.jpg

• Android 安卓: yw_1222.jpg

• 无需支付功能：

• IOS 苹果 : UTDID.framework + yw_1222.jpg

• Android 安卓: utdid4all-1.1.5.3_proguard.jar + yw_1222.jpg

2. IOS 的呼起淘宝客户端需要特别设置下,在配置 manifest.json 文件中,找到 ios 项,加入以下代码.

        "ios" : {
                "urltypes" : [
                {
                "urlschemes" : ["tbopen25816891"] //tbopen+您应用的AppKey
                }
                ],
                "urlschemewhitelist" : "tbopen,tmall"
        }

3. urlschemes 的名称设置是 tbopen+AppKey, AppKey是你在百川创建应用时,产生的一个AppKey ,一串数字,不要填错,填错也会初始失败.

四. 百川插件使用 方法介绍.

1. 实例化插件 ,在需要用到插件的页面引入

const plug= uni.requireNativePlugin('Html5app-Baichuan');

2.淘宝授权登录 login() , 传入参数: 无

    plug.login({},result=>{



    });  

• 授权成功后,返回数据格式

{   "code":0,
    "msg": "授权登录成功",
    "userinfo": {
        "userId":"377595336"
        "openSid": "0eabd286ea99153feb7ca57ed90e125a4bd5dea63df9098cf1d31c2eaf4d7c53af4c5d51c8a9d4dbd1b8cba89a17b73f3",
        "nick": "幸福的理由",
        "avatar": "https://wwc.alicdn.com/avatar/getAvatar.do?userId=377595347&width=160&height=160&type=sns",
        "topAuthCode": "ZK95uSkF2xkTapWJ5ft7hPgY30544960",
        "topAccessToken": "63012176f80b654232d09ebc8dc0c3bb88f2af295540867377595347",
        "openId": "AAEV68PLAJTzOBwg1t3AMMnAi",
        "topExpireTime":"7776000"
    }

}

userId 和 topExpireTime 参数目前只有android 版本才有。

• 用户取消 返回数据

  {   "code":1,"msg": "用户取消授权"}

• 其他原因

  {   "code":2,"msg": "授权登录失败","errorcode":"错误代码","error":"错误原因"}

3.退出登录 logout() , 传入参数: 无

    plug.logout({},result=>{


    });   

• 返回数据

  {   "code":0,"msg": "退出登录成功"}

4.打开商品详情页 detailPage() , 打开商品详情页有两种方式

openType=> 参数是打开页面的方式: 0=> 使用APP端打开,1=>智能选择打开方式.

itemid=> 商品 ID

url=>商品链接

• 第一种,通过 商品 ID ,来打开详情页

   plug.detailPage({
            "itemid":"587811576939",
            "openType":1
            },result=>{
  
        }); 

• 第二种,通过商品链接,来打开详情页

        plug.detailPage({
                        url:"https://m.tb.cn/h.ekVpYGo",
                       "openType":0
        },result=>{


        }); 

5.打开店铺 shopPage()

openType => 参数是打开页面的方式: 0=> 使用APP端打开,1=>智能选择打开方式.

shopid=> 店铺ID

        plug.shopPage({shopid:"332454339","openType":0},result=>{


        }); 

6.打开优惠券页面 openCoupon()

openType => 参数是打开页面的方式: 0=> 使用APP端打开,1=>智能选择打开方式.

url=> 优惠券链接

        plug.openCoupon({"url":"https://m.tb.cn/h.ekVpYGo","openType":1},ret=>{


        });

7. 打开我的购物车 OpenMyCart()

openType => 参数是打开页面的方式: 0=> 使用APP端打开,1=>智能选择打开方式.

        plug.OpenMyCart({"openType":1},result=>{});         

8. 检查授权登录状态,checkSession() 传入参数:无

        plug.checkSession({},result=>{

        });

• 返回数据参数

  1.已经登录

  {   "code":0,"msg": "用户已授权登录"}

  2.登录失效

  {   "code":1,"msg": "登录已失效，请重新授权登录"}

9.获取用户已经授权的信息,getUserInfo() 传入参数:无

        plug.getUserInfo({},result=>{

        }); 

• 返回数据参数

1.成功获取

 {   "code":0,
    "msg": "获取用户资料成功",
    "userinfo": {
        "openSid": "0eabd286ea99153feb7ca57ed90e125a4bd5dea63df9098cf1d31c2eaf4d7c53af4c5d51c8a9d4dbd1b8cba89a17b73f3",
        "nick": "幸福的理由",
        "avatar": "https://wwc.alicdn.com/avatar/getAvatar.do?userId=377595347&width=160&height=160&type=sns",
        "topAuthCode": "ZK95uSkF2xkTapWJ5ft7hPgY30544960",
        "topAccessToken": "63012176f80b654232d09ebc8dc0c3bb88f2af295540867377595347",
        "openId": "AAEV68PLAJTzOBwg1t3AMMnAi"
    }

 }

2.获取失败

  {   "code":1,"msg": "登录已失效，请重新授权登录"}

五、 淘宝客 授权登录 说明

详细浏览: 淘宝开放平台官网 授权登录,拼接网址.参考, 百川授权后， 再调用淘宝客授权即可免登录。

1. H5 使用 code 方式授权

https://oauth.taobao.com/authorize?response_type=code&client_id=27600xxx&redirect_uri=http://www.html5-app.com/oauth/&state=1212&view=wap

把网址中的参数，替换成自己的即可.

             plug.taobaoOauth({"url":"https://oauth.taobao.com/authorize?response_type=code&client_id=27600xxx&redirect_uri=http://www.html5-app.com/oauth/&state=1212&view=wap"},ret=>{

                  _this.title=JSON.stringify(ret);
             });

链接获取授权码参数

用户授权文档介绍

*回调不走回调地址，客户端直接返回 code 和 state ，你再把它们提交到服务器上效果是一样的。

1.授权成功 返回参数:

{"code":"tALgRQe0RJHRqMziZnnG1i3F7297724","state":"1212","msg":"授权成功","retcode":0}

2. 其他的返回

{"retcode":1,"msg":"用户主动关闭页面"}

2. H5 使用 token 方式授权

授权网址

https://oauth.taobao.com/authorize?response_type=token&client_id=27600005&state=1212&view=wap

链接获取授权码参数

1.授权成功 返回参数:

{
    "view": "wap#access_token",
    "expires_in": "7776000",
    "re_expires_in": "0",
    "w2_expires_in": "0",
    "refresh_token": "6101e25821fd21a87317aedd9b8557d241349eee0e34710377595347",
    "msg": "授权成功",
    "taobao_open_uid": "AAEV68PLAJTzOBwgt3AMMnAi",
    "taobao_user_nick": "%E6%BB%A1%E6%BB%A1%E5%B9%B8%E7%A6%8F%E7%9A%84%E7%90%86%E7%94%B1",
    "r2_expires_in": "0",
    "top_sign": "974C2C1F8415752732D0175A3B05EFB0",
    "w1_expires_in": "1800",
    "token_type": "Bearer",
    "retcode": 0,
    "r1_expires_in": "1800",
    "state": "1212"
}

2. 其他的返回

{"retcode":1,"msg":"用户主动关闭页面"}

六、百川 4.0及以上 版 相比之前的3.x版本.

• 新版官方介绍主要是增强了安全组件
• 新版去掉了，强制使用 H5 页面打开
• 新版本没有了，我的订单打开选项

安卓 Android 扫一扫下载 APP体验

uniapp 原生插件如何使用，可以参考这个：https://ask.dcloud.net.cn/article/36106

详细使用参考，可以在本页面右上角=》 下载示例项目ZIP

返回小把手logo 图标设置，在百川后台，应用设置处，上传应用图标即可显示。

七、 百川常见问题

• 授权不能拉起手淘，授权提示“缺少协议参数xxxx”

  一般是安全图片的问题，更新安全图片之后再尝试一下

• 提示网络不通 等等

  一般是安全图片的问题，更新安全图片之后再尝试一下

• "error":"获取配置数据为空" ，loginService对象为空导致失败

  一般是安全图片的问题，更新安全图片之后再尝试一下

插件 QQ 交流群：891416757 （有任何疑问可以加群咨询）