微信小程序登录相关操作

微信小程序登录验证

标签(空格分隔): 微信


微信登录逻辑,先贴前端代码

wx.login({
  success: function (res) {
    if (res.code) {
      //发起网络请求
      wx.request({
        url: 'https://25eecc9a.ngrok.io/onLogin',
        data: {
          code: res.code
        },
        success:function(response){
          console.log(response.data)
          var oppenid = response.data.oppenid
          var session_key= response.data.session_key
          window.localStorage.setItem("openid",openid)
          window.localStorage.setItem("session_key", session_key)
        }
      })
    } else {
      console.log('获取用户登录态失败!' + res.errMsg)
    }
  }
});

解释:

wx.login方法从微信服务器获取code,然后把这个code发送给我们服务器,自己服务器拿着这个code和其他什么appid,secrect等东西,再去调用微信的一个接口,这个接口返回给我们服务器一个oppenid(唯一)session-key,后端把两货发送给前端我们就可以搞事情了!

小程序->微信服务器: 1. wx.login
微信服务器->小程序: 2. code
小程序->自己服务器: 3. code
自己服务器->微信服务器:4. appid+secrect+code+authorization_code
微信服务器->自己服务器: 5. openid+session_key


我是分割线


微信小程序登录相关操作_第1张图片
交互图

上面是前端代码,主要步骤是123,下面贴下后端步骤,主要是45的实现

app.get('/onLogin',function(req,res,next){
  console.log("onLogin 接口访问成功")
  // console.log("req code",req)
  let JSCODE=req.query.code
  let appid='xxx'
  let secret='xxx'
  let wechatUrl="https://api.weixin.qq.com/sns/jscode2session?appid="+appid+"&secret="+secret+"&js_code="+JSCODE+"&grant_type=authorization_code"
  let grant_type='authorization_code'
  console.log(JSCODE)
  request(wechatUrl,(err,response,body)=>{
    // console.log(response)
    let data=JSON.parse(body)
    console.log(data)
    res.set({
      "Access-Control-Allow-Origin": "*"
      ,"Access-Control-Allow-Methods": "POST,GET"
      ,"Access-Control-Allow-Credentials": "true"
    });
    res.json(data)
  })
})

主要流程就是酱紫,后端是自己撸的,这个一般是要查询一次数据库的,看看数据库有没有这个oppenid,如果有登录通过,如果没有gg。为了图方便我直接返回给了小程序session_key和openid,这样做是很不安全的。单纯demo演示


你可能感兴趣的:(微信小程序登录相关操作)