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

曾经，直播小程序是很鸡肋的存在，由于微信生态系统的限制，微信小程序直播系统不如直播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