微信小程序> 微信小程序开发用户授权登录

微信小程序开发用户授权登录

浏览量:1514 时间: 来源:我是达达呀

用wx.login获取登录凭证code

<!--pages/user/index.wxml--><view hidden='{{boolean}}'><view wx:if="{{isLogin == 1}}"><!-- 个人信息 --><view class='infomation'><!-- 基本信息 --><view class="gameTitle"><navigator hover-class="none" href=""><image src="{{dataList.head_photo}}"></image></navigator><view><view class="gameName"><navigator hover-class="none" href="">{{dataList.username}}</navigator></view><view class="gameSummary" wx:if="{{dataList.title == ''}}"><navigator hover-class="none" href="">这个玩家很懒,什么也没留下</navigator></view><view class="gameSummary" wx:if="{{dataList.title != ''}}"><navigator hover-class="none" href="">{{dataList.title}}</navigator></view></view></view></view><!-- “我的”列表 --><view class='myList'><view class='list'></view></view> </view><view wx:if="{{isLogin == 2}}"><view class='bgBox'></view><view class="unLogin"></view></view></view>

小程序

wx.checkSession

  • 小程序 wx.checkSession 校验登陆态

    • success :接口调用成功,session_key未过期;

    • fail :接口调用失败,session_key已过期;

  1. 小程序端 wx.login 获取code 并 wx.request 提交 code 给己方服务器
  2. 服务器 提交Appid + appSecret + code 到微信方服务器 获取 session_key & openid
  3. 服务器 根据 session_key & openid  生成 3rd_session(微信方提出的基于安全性的考虑,建议开发者不要将openid等关键性信息进行数据传输) 并返回 3rd_session 到小程序端
  4. 小程序端 wx.setStorage 存储 3rd_session 在后续用户操作需要凭证时 附带该参数
  5. 小程序端 wx.getUserInfo 获取用户信息 + wx.getStorage 获取 3rd_session 数据后,一并 wx.request 提交给己方服务器
  6. 服务器 SQL 用户数据信息更新
//用户登陆function userLogin() {  wx.checkSession({    success: function () {      //存在登陆态    },    fail: function () {      //不存在登陆态      onLogin()    }  })} function onLogin() {  wx.login({    success: function (res) {      if (res.code) {        //发起网络请求        wx.request({          url: 'Our Server ApiUrl',          data: {            code: res.code          },          success: function (res) {            const self = this            if (逻辑成功) {              //获取到用户凭证 存儲 3rd_session               var json = JSON.parse(res.data.Data)              wx.setStorage({                key: "third_Session",                 data: json.third_Session              })              getUserInfo()            }            else {             }          },          fail: function (res) {           }        })      }    },    fail: function (res) {      }  }) } function getUserInfo() {  wx.getUserInfo({    success: function (res) {      var userInfo = res.userInfo      userInfoSetInSQL(userInfo)    },    fail: function () {      userAccess()    }  })} function userInfoSetInSQL(userInfo) {  wx.getStorage({    key: 'third_Session',    success: function (res) {      wx.request({        url: 'Our Server ApiUrl',        data: {          third_Session: res.data,          nickName: userInfo.nickName,          avatarUrl: userInfo.avatarUrl,          gender: userInfo.gender,          province: userInfo.province,          city: userInfo.city,          country: userInfo.country        },        success: function (res) {          if (逻辑成功) {            //SQL更新用户数据成功          }          else {            //SQL更新用户数据失败          }        }      })    }  })}

第三方服务器和微信服务器:
注意:session_key是微信服务器生成的针对用户数据进行加密签名的密钥,不应该进行传输到客户端.

生成3rd_session
用于第三方服务器和小程序之间做登录态校验.为了保证安全性,3rd_session应该长度够长,一定有效时间, session_key + openid, key, 为 value, 写入到session存储.

3rd_session写入storage:
后续用户进入小程序,先从storage读取3rd_session
根据请求,在session存储中查找合法的session_key和openid

App({  onLaunch: function() {    wx.login({      success: function(res) {        var code = res.code;        if (code) {          console.log('获取用户登录凭证:' + code);        } else {          console.log('获取用户登录态失败:' + res.errMsg);        }      }    });  }})

唯一标识(openid)和会话密钥(session_key)

小程序

wx.checkSession

检测当前用户登录态是否有效

wx.checkSession({  success: function(){    //session 未过期,并且在本生命周期一直有效  },  fail: function(){    //登录态过期    wx.login() //重新登录    ....  }})

服务端处理逻辑

wx.checkSession({    success:function(res){      //session_key未过期    },    fail:(res=>{      // session_key已过期      // 进行登录操作      wx.login({        success: function(res) {          const url = '接口地址'   //本次项目中是从后台获取session_key的接口,可能流程不同,会有相应的变化          const data = {            //你要传的数据          }          wepy.request({            url: url,            method: 'POST',            data: data,          }).then(res=>{            if(res.data.code == 0){              //拿到的openid和session_key存到缓存中              //调用换取用户id接口[需求不同,可能接口会有相应的变化]              const url = '获取用户id的接口'              const data = {'要传的数据'}              wepy.request({                url: url,                method: 'POST',                data: data,              }).then((res)=>{                //该接口设计返回的参数包括换取的用户ID和返回的用户的微信中信息,也就是通过button获取的那个userInfo[我们为了后续的处理,所以后台这块返回用户信息,如果用户还未登录,用户信息,返回是空,反之则有值]                //存储用户ID                wx.setStorage({                  key:'userId',                  data:'获取到的用户ID'                })                //存储用户信息[userInfo]                wx.setStorage({                  key:'userInfo',                  data:'获取到的用户信息'                })              })            }          })        }      });    })  })
onShow(){    //从缓存中获取session_key    let skey = wx.getStorageSync('session_key');    if (!skey) {      //如果session_key不存在,再次执行登录      wx.login({        //该处登录同app.wpy[流程一样]      });    }else{      // session_key存在    }  }  //我们假设这个页面需要获取用户的信息,首先给一个button[open-type设置为getUserInfo],使用这个拿到用户的信息,  getUserInfo(e){      this.userInfo = e.detail.userInfo;  //e.detail.userInfo携带的就是用户的个人信息[包括头像、昵称等]      if(e.detail.userInfo){        wx.showToast({          title: '授权成功',          icon: 'success',          duration: 1500        })        //这里做这样的处理,是因为需求需要点击购物车按钮跳转订单待支付页,在没有获取到用户信息之前,跳转购物车的按钮隐藏,获取用户信息按钮显示,反之则返        this.button = 'none';   //获取用户信息button        this.myMenu = 'block';  //跳转待支付订单页        //更新缓存中的用户信息        wx.setStorage({          key:'userInfo',          data:this.userInfo        })      }else if(e.detail.errMsg == 'getUserInfo:fail auth deny'){        wx.showModal({          title: '提示',          content: '若不授权微信登录,则无法使用小程序。点击"授权"按钮并允许使用"用户信息"方可正常使用。',          showCancel:false,          confirmText:'授权',          success:(res=>{            wx.openSetting({              success: (res) => {              }            })          })        })      }    }

小程序

小程序

https://api.weixin.qq.com/sns/jscode2session?appid=APPID&secret=SECRET&js_code=JSCODE&grant_type=authorization_code

小程序

小程序

对称解密的目标密文为 Base64_Decode(encryptedData)。
对称解密算法初始向量 为Base64_Decode(iv),其中iv由数据接口返回。

signature = sha1( rawData + session_key )

//最终供外面调用的方法function login(){    console.log('logining..........');    //调用登录接口    wx.login({        success: function (e) {            console.log('wxlogin successd........');            var code = e.code;            wx.getUserInfo({                success: function (res) {                    console.log('wxgetUserInfo successd........');                    var encryptedData = encodeURIComponent(res.encryptedData);                    thirdLogin(code,encryptedData,res.iv);//调用服务器api                }            })        }    });}function  thirdLogin(code,encryptedData,iv){    var url = "eeee/xxx/login/ttttt";    var params = new Object();    params.code = code;    params.encryptedData = encryptedData;    params.iv =iv;    buildRequest(new Object(),url,params,{        onPre: function(page){},        onSuccess:function (data){            console.log('my  login successd........');            console.log(data);            getApp().globalData.session_id = data.session_id;            getApp().globalData.uid = data.uid;            getApp().globalData.isLogin = true;        },        onError : function(msgCanShow,code,hiddenMsg){        }    }).send();}

版权声明

即速应用倡导尊重与保护知识产权。如发现本站文章存在版权问题,烦请提供版权疑问、身份证明、版权证明、联系方式等发邮件至197452366@qq.com ,我们将及时处理。本站文章仅作分享交流用途,作者观点不等同于即速应用观点。用户与作者的任何交易与本站无关,请知悉。

产品经理

手机 : 13312967497

擅长 : 小程序流量变现

扫码领取礼包

最新资讯

热门模板

  • 头条
  • 搜狐
  • 微博
  • 百家
  • 一点资讯
  • 知乎