网站使用微信小程序扫码登录的实现方法

这篇具有很好参考价值的文章主要介绍了网站使用微信小程序扫码登录的实现方法。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

前言

传统网站一般都会使用账号密码登录，但这种方式总有用户会忘记密码，找回密码需要一系列验证，也挺麻烦的，于是学习了一下扫码登录，这种方式不仅不会有忘记密码的烦恼，登录还十分快捷。用户体验较好.

一、效果预览

小程序扫码登录怎么实现,微信小程序,小程序,前端网站端点击小程序图片，弹出小程序码

小程序扫码登录怎么实现,微信小程序,小程序,前端小程序端授权页面

二、前提条件

1、需要有一个已上线的小程序。
2、需要扫码登录的网站。

三、实现原理见下图

小程序扫码登录怎么实现,微信小程序,小程序,前端实现原理图

四、实现步骤

1、生成小程序二维码
1.1、这一步需要先生成一个唯一的字符串，字符串长度不能超过32位，生成小程序码时要用到，用来确定是哪个请求发起的，这个唯一字符串贯穿整个生命周期。

1.2、调用微信接口获取二维码 https://api.weixin.qq.com/wxa/getwxacodeunlimit?access_token=自己获取accessToken

这里需要两个参数，一个是page，就是你扫码后要跳转到的小程序页面，二是scene，就是上面生成的唯一字符串

1.3 上面操作成正确，会获取二维码图片的十进制流，转成Base64直接返回到页面显示出二维码即可。

byte[] bytes = HttpRequest.post(url).body(body).execute().bodyBytes();
<img :src="'data:image/jpeg;base64,'+shareWxQrCode"/>

2、前端页面循环获取状态
前端使用轮训或者后台通过soket等技术通知前端扫码状态，根据上面生成的唯一的字符串来获取。

3、用户打开小程序扫码
用户扫码会跳到上面生成小程序时page指定的页面，在此页面onLoad方法中获取传过来的唯一凭证字符串

onLoad:function(query){
    var that = this;
    const scene = decodeURIComponent(query.scene)
}

4、将状态设置为已扫码，前端轮循时可以装状态显示给用户。在此页面需要获取用户信息，头像昵称等，根据业务需求，也可不用该信息，直接去获取用户openID

wx.login({
      success:(res)=>{
        wx.request({
          url: '你自己的后台地址',
          method:"POST",
          data:{
            code:res.code,
            scene:that.data.scene
          },
          success:(res)=>{
            if(res.statusCode==200){
              var sessionKey = res.data.result.sessionKey;
              var openid = res.data.result.openid;
              var json = {
                'openId': openid,
                 'sessionKey': sessionKey,
                'encryptedData': user.encryptedData,
                'rawData': user.rawData,
                'signature': user.signature,
                'iv': user.iv,
                'avatarUrl':that.data.avatarUrl,
                'nickName':that.data.nickName,
                'scene': that.data.scene
              }
              wx.request({
                url: '你后台根据openId检查用户信息的URL',
                method:"POST",
                data:json,
                success:(res)=>{
                  if(res.data.code==200){
                    wx.showToast({
                      title: '登录成功!',
                      icon: 'success',
                      duration: 3000
                    })
                  }
                }
              })
            }
          },fail: function (res) {
            
          }
        })
      }
    })