带货直播小程序如何接入微信登录功能

发布来源:云豹科技
发布人:云豹科技
2021-01-13 10:05:48

曾经,直播小程序是很鸡肋的存在,由于微信生态系统的限制,微信小程序直播系统不如直播APP系统流畅低延时,甚至不能开播,而随着互联网技术的不断发展,如今的直播小程序已经可以实现开播、打赏、带货等一系列功能,今天就来和大家分享下,带货直播小程序如何接入微信登录功能。 


直播小程序


一、 带货直播小程序接入微信登录功能的作用

微信登录功能是实现带货直播小程序“带货”功能的基础,直播带货之所以转化率高,正因为其缩短了用户“被种草”到“进入店铺了解产品”再到“冲动消费”之间的距离,在用户最冲动的时候提供消费手段,是平台运营者应该做的,实现微信登录后,用户可不下载APP,直接从微信端登录直播平台,在购物时直接调取微信支付,实现快速购物的用户需求。

二、 带货直播小程序如何实现微信登录功能

首先,为使带货直播小程序实现微信登录,我们要先获得微信账号的唯一标识openid,而微信为了数据安全,禁止用户直接访问https://api.weixin.qq.com,因此,我们需要先通过wx.login获取临时凭证code,使用该临时凭证通过访问微信指定的接口便可获取用户的登录信息。

 

Wx.login({
success:function(res){
var code=res.code;
}
});


这样,便可以拿到临时凭证code,然后,我们使用该code值访问指定接口,便可以获取用户的登录信息。


$AppID=”自己小程序的appid”;
$AppSecret=”自己小程序的secret”;
$url="https://api.weixin.qq.com/sns/jscode2session?appid={$AppID}&secret={$AppSecret}&js_code={$code}&grant_type=authorization_code";
$ch = curl_init();
curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, FALSE);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, TRUE);
curl_setopt($ch, CURLOPT_URL, $url);
$json =  curl_exec($ch);
curl_close($ch);
$arr=json_decode($json,1);

 

此时$arr会返回unionid和openid,此处我们用到的是unionid.


直播小程序


下面,我们就可以使用 wx.getUserInfo方法获取用户的微信信息,并联合unionid通过请求三方登录接口,将用户信息写入带货直播小程序的数据库了。

下面是云豹科技写的一个demo程序,可以作为参考。


wx_login:function(){
        var app=getApp();
        var _this=this;
        //console.log("canIUse:"+this.data.canIUse);
        // 登录
        wx.login({
            success:function(res){
                var code=res.code;
                //console.log("code:"+code);
                var methodName='Login.getUnionid';
                var unionid='';
                var data={"code":code};
                var wx_userinfo='';
                var sign='';
                var sign_data='';
                var system='';
                var source='';
                util.requestData(methodName,data,function(code,msg,info){
                    unionid=info[0].unionid;
                    //console.log("unionid:"+unionid);
                    //console.log(info);
                    app.globalData.openid=info[0].openid;
                    //将openid存入缓存
                    wx.setStorageSync('openid',info[0].openid);
 
                });
 
                //获取系统消息
                wx.getSystemInfo({
                    success (res) {
                        system=res.system;
                        if(system.indexOf("iOS")!=-1){
                            source='ios';
                        }else if(system.indexOf("Android")!=-1){
                            source='android';
                        }
                    }
                });
 
                //获取授权的微信用户信息
                //https://developers.weixin.qq.com/community/develop/doc/0000a26e1aca6012e896a517556c01
                wx.getSetting({
                    success: res => {
                        if (res.authSetting['scope.userInfo']) {
                            // 已经授权,带货直播小程序可以直接调用 getUserInfo 获取头像昵称,不会弹框
                            wx.getUserInfo({
                                success: res => {
                                    // 可以将 res 发送给后台解码出 unionId
                                    
                                    // console.log("获取用户信息:");
                                    // console.log(res);
                                    // console.log(res.userInfo);
                                    wx_userinfo=res.userInfo;
                                    
                                    //生成sign
                                    sign_data={"openid":unionid};
                                    sign=util.createSign(sign_data);
                                    //console.log(sign);
                                    _this.setData({
                                        "login_hidden":false
                                    });
                                    //调用三方登录接口
                                    methodName="Login.userLoginByThird";
                                    data={
                                        "openid":unionid,
                                        "type":"wx",
                                        "nicename":wx_userinfo.nickName,
                                        "avatar":encodeURI(wx_userinfo.avatarUrl),
                                        "sign":sign,
                                        "source":source
                                    };
 
                                    util.requestData(methodName,data,function(code,msg,info){
                                        //console.log(typeof(info));
                                        wx.setStorageSync('userinfo',info[0]);
                                        app.globalData.userinfo=info[0];
                                        //console.log(wx.getStorageSync("userinfo"));
                                        //console.log(app.globalData.userinfo);
                                        setTimeout(function(){
                                            _this.setData({
                                                "login_hidden":true
                                            });
                                            wx.switchTab({ 
                                                url: '/pages/my/index',
                                            })
                                        },100);
                                        
                                        //console.log("微信登陆跳转结束");
                                        
                                    });
                                }
                            })
                        }
                    },
 
                    fail:res=>{
                        //console.log("微信授权失败:"+res);
                    }
                })
 
 
            }
        })
    }


直播小程序


util.requestData方法是集成的一个公共方法:


const requestData = function(methodName,data,success_callback,error_callback,complete_callback){
  let app=getApp();
  var site_url=app.globalData.site_url;
  /* console.log(site_url+methodName);
  console.log(data); */
  wx.request({
    url: site_url+methodName,
    data:data,
    dataType:"json",
    method:"get",
    async:false,
    success:function(res){ //接口调用成功回调
      console.log("res:"+res);
      var ret=res.data['ret'];
      console.log(methodName+" ret:"+ret);
      
      if(ret==200){ //http响应正确
        var data=res.data;
        //console.log(data);
        var code=data.data.code;
        var msg=data.data.msg;
        var info=data.data.info;
        //console.log(code);
        
        if(code!=0){
          if(code==700){
            wx.navigateTo({
              url: '/pages/login/login'
            });
            return;
 
          }else{
            wx.showToast({
              title: msg,
              icon: 'none',
              duration: 2000
            });
            /* setTimeout(function(){
              wx.navigateBack(1);
            },1500); */
            return;
          }
          
          return;
        }else{ //请求成功,返回信息
          success_callback(code,msg,info);
 
        }
      }else{ //http响应失败
        wx.showToast({
          title: '请求错误',
          duration: 2000
        });
      }
    },
    fail:function(e){ //接口调用失败回调
      wx.hideLoading(); //将loading弹窗隐藏
      wx.showToast({
        title: '请求错误',
        duration: 2000
      });
      if(error_callback){
        error_callback;
      }
    },
    complete:function(){ //接口调用结束回调
      wx.hideLoading(); //将loading弹窗隐藏
      if(complete_callback){
        complete_callback;
      }
    }
  })
}


以上就是关于微信小程序通过微信号登录的相关总结,更多云豹带货直播小程序的相关知识会在日后逐步放出,敬请期待,有关直播小程序直播平台开发搭建等问题可联系云豹技术人员获得技术支持。 

声明:以上内容为云豹科技作者本人原创,未经作者本人同意,禁止转载,否则将追究相关法律责任www.yunbaokj.com

声明:
以上内容为云豹科技作者本人原创,未经作者本人同意,禁止转载,否则将追究相关法律责任
立即查看