微信小程序授权登录

最新推荐文章于 2025-10-22 14:55:04 发布

原创最新推荐文章于 2025-10-22 14:55:04 发布 · 249 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#小程序 #openid #javascript #session #http

项目实训同时被 2 个专栏收录

6 篇文章

订阅专栏

微信小程序

1 篇文章

订阅专栏

本文详细介绍了微信小程序的授权登录过程，包括前端调用wx.login获取code，后端使用code换取openid和session_key，以及如何实现安全的用户登录状态管理。提供了前端和后端的代码实现示例，帮助开发者理解并实现在小程序中进行用户身份验证。

微信小程序授权登录

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

在这里插入图片描述

基本步骤如下

小程序调用wx.login接口获取临时登录凭证code，这个code只存在5分钟
通过wx.request接口，将临时登录凭证传送到后台服务器code
后台服务器接收到前端传送过来的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。
微信服务器接收后端服务器发送的appid、appsecret、code进行校验。校验通过后向开发者服务器发送session_key、openid。
后端服务器接收到微信服务器传送过来的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实现

。。。