微信小程序授权登录


微信小程序授权登录

先看微信官方文档如何描述微信小程序的登录

在这里插入图片描述

基本步骤如下

  1. 小程序调用wx.login接口获取临时登录凭证code,这个code只存在5分钟

  2. 通过wx.request接口,将临时登录凭证传送到后台服务器code

  3. 后台服务器接收到前端传送过来的code,整合小程序AppID,AppSecret(小程序密钥)和 “grant_type=authorization_code”。携带这些数据请求auth.code2Session 接口,换取 用户唯一标识 OpenID 和 会话密钥 session_key。请求地址为:https://api.weixin.qq.com/sns/jscode2session?appid=APPID&secret=SECRET&js_code=JSCODE&grant_type=authorization_code。请求方式为GET。![在这里插入图片描述](https://img-blog.csdnimg.cn/20210129223439718.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3Vwc3RyZWFtNDgw,size_16,color_FFFFFF,t_70#pic_center)

  4. 微信服务器接收后端服务器发送的appid、appsecret、code进行校验。校验通过后向开发者服务器发送session_key、openid。

  5. 后端服务器接收到微信服务器传送过来的session_key、openid后,自定义用户登录的状态,并反馈到前端。

代码实现

方法一:仅在前端实现(不推荐,因为不安全)


dologin:function(e){
    wx.login({
      success (res) {
      //保存用户信息
		app.globalData.userInfo = res.detail.userInfo
        if (res.code) {
        
          //发起网络请求
          wx.request({
            url: 'https://api.weixin.qq.com/sns/jscode2session',
            method: "GET",
            data: {
              appid:'wxxxxxxxxx',
              secret:'xxxxxxxxxxxxxxxxxxxxx',
              js_code: res.code,
              grant_type: 'authorization_code'
            },
            success:function(result){
              console.log(result)
              //返回的openID和session_key
            },
          })

          wx.switchTab({
            url: '../person/person',
          })

        } else {
          console.log('登录失败!' + res.errMsg)
        }
      }
    })
  },

方法二:后端SprinBoot实现

。。。


Author: stream
Reprint policy: All articles in this blog are used except for special statements CC BY 4.0 reprint policy. If reproduced, please indicate source stream !
  TOC