微信小程序登陆并获取用户信息详解（openid、session_key）

小程序 0

微信小程序作为一种轻量级的应用形式，因其便捷性和易用性受到了广大开发者和用户的喜爱。在开发微信小程序时，登录和获取用户信息是基础且关键的功能。本文将详细介绍如何在微信小程序中实现登录并获取用户信息。

微信小程序登录主要依赖于微信提供的wx.login接口和code2Session接口。登录的基本流程：

1.调用wx.login获取临时登录凭证code 。

2.使用获取到的code调用code2Session接口： 通过wx.request向微信服务器发送请求，获取用户的openid和session_key。

一、前提条件

  1. 注册微信小程序账号：

    • 在微信公众平台注册一个小程序账号，并获取AppID和AppSecret。这些信息在后续的授权登录过程中至关重要。

  2. 配置服务器域名：

    • 登录微信公众平台，进入小程序后台，在“开发”->“开发设置”中配置服务器域名，确保你的后端服务器域名已在微信的合法域名列表中。

  3. 配置uniapp项目：

    • 在uniapp项目中，打开manifest.json文件，找到并填写微信小程序的AppID。

二、前端实现

  1. 添加登录按钮：

    <template>  <view>    <button open-type="getUserInfo" @getuserinfo="getUserInfo">微信登录</button>  </view></template>

    在你的小程序页面（如pages/index/index.vue）中添加一个用于触发登录的按钮。这个按钮应使用<button>标签，并设置open-type="getUserInfo"来触发用户信息的获取。同时，绑定一个处理函数（如getUserInfo）来响应用户的授权行为。

  2. 处理授权逻辑：
    在页面脚本部分（如<script>标签内），编写getUserInfo方法来处理用户的授权信息。如果用户同意授权，则调用uni.login方法获取登录凭证（code），并将该code发送到后端服务器。

    <script>export default {  methods: {    getUserInfo(e) {      if (e.detail.userInfo) {        uni.login({          provider: 'weixin',          success: (loginRes) => {            const { code } = loginRes;            // 发送code到后台换取openId, sessionKey, unionId            uni.request({              url: 'https://你的服务器地址/api/login', // 你的登录API地址              method: 'POST',              data: { code },              success: (res) => {                if (res.data && res.data.success) {                  const { openId, sessionKey, unionId } = res.data;                  // 将用户信息和session存储到本地                  uni.setStorageSync('userInfo', e.detail.userInfo);                  uni.setStorageSync('openId', openId);                  uni.setStorageSync('sessionKey', sessionKey);                  uni.setStorageSync('unionId', unionId);                } else {                  uni.showToast({ title: '登录失败', icon: 'none' });                }              },              fail: () => {                uni.showToast({ title: '请求失败', icon: 'none' });              }            });          },          fail: (err) => {            console.log('uni.login 接口调用失败,将无法正常使用开放接口等服务', err);            uni.showToast({ title: '登录失败', icon: 'none' });          }        });      } else {        uni.showModal({          title: '警告',          content: '您点击了拒绝授权,将无法进入小程序,请授权之后再进入!',          showCancel: false,          confirmText: '返回授权',          success: (res) => {            if (res.confirm) {              console.log('用户点击了“返回授权”');            }          }        });      }    }  }}</script>

三、后端实现

  1. 处理登录请求：
    在你的服务器上，编写一个接口（如/api/login）来处理从小程序前端发送过来的code。该接口应使用code调用微信的jscode2session接口，以换取用户的openId、sessionKey和unionId。
     

    const express = require('express');const request = require('request');const app = express();const APPID = '你的AppID';const APPSECRET = '你的AppSecret';app.use(express.json());app.post('/api/login', (req, res) => {  const { code } = req.body;  if (!code) {    return res.status(400).json({ success: false, message: '缺少code参数' });  }  const url = `https://api.weixin.qq.com/sns/jscode2session?appid=${APPID}&secret=${APPSECRET}&js_code=${code}&grant_type=authorization_code`;  request.get(url, (err, response, body) => {    if (err) {      return res.status(500).json({ success: false, message: '请求微信接口失败' });    }    const data = JSON.parse(body);    if (data.errcode) {      return res.status(400).json({ success: false, message: data.errmsg });    }    res.json({ success: true, openId: data.openid, sessionKey: data.session_key, unionId: data.unionid });  });});app.listen(3000, () => {  console.log('服务器启动成功,监听端口3000');});

四、注意事项 

  • 安全性：确保在传输过程中保护用户的隐私信息，如openId和sessionKey。
  • 调试：在开发过程中，确保使用正确的AppID和AppSecret，并且服务器域名已正确配置在微信的合法域名列表中。
  • 用户体验：提供清晰的授权提示和错误处理机制，以提升用户体验。

 登录流程时序图

详细介绍

在小程序开发过程，js 中所看到的 wx.xxx()，其本身就含有一个接口请求，只是一些请求路径和请求参数都已经内嵌了xxx里面了。

所以在 wx.xxx() 的括号中，只需编写success函数和fail函数基于微信小程序的API来描述一个典型的登录流程，如下：

1.调用 wx.login接口:

首先，你需要在小程序中调用 wx.login 接口，这会向微信服务器发送请求以获取一个临时的 code。

wx.login({       success(res) {         if (res.code) {           // res.code 是微信返回的临时登录凭证           // 发送 res.code 到你的服务器进行换取 openId 和 sessionKey         } else {           console.log('登录失败！' + res.errMsg)         }       }    })

wx.login 返回的 code 只能在短时间内有效，因此需要尽快使用。

2.服务器端交换 openid 和 session_key:

将 code、小程序的 appid 和 appsecret 发送到你的后端服务器。

服务器使用这些信息向微信API发起请求，换取用户的 openid（标识用户唯一性的ID）和 session_key（用于对用户数据进行加密的密钥）。

这一步通常涉及调用微信的API接口如 sns/jscode2session。

wx.login({        success: res => {            if (res.code) {              let URL='https://api.weixin.qq.com/sns/jscode2session?appid=##################&secret=*****************                                                         ***************&js_code='+res.code+'&grant_type=authorization_code'              wx.request({                url: URL ,                  success:function(res){                    console.log(res.data)//res.data中有openid                }              })            }      } })

上述的方式不正确，小程序中不能有api.weixin.qq的接口调用，把appid和secret放在小程序，这个用法等于告诉人家你家的门钥匙放在了砖头下面。url和data当然是由服务端告诉你。得有服务端，即url 是你的后台服务地址，后后台发起调用，获取openid返给客户端。

3.验证签名和获取用户信息:

如果需要获取用户信息，你可以调用 wx.getUserInfo 接口，但这会弹出用户授权提示框。

示例代码：

     wx.getUserInfo({       withCredentials: true, // 表示需要带上登录时的小程序 code，用于校验       success(res) {         // res.userInfo 包含用户信息         // 发送 res.userInfo.openid 和 res.userInfo.iv, encryptedData 到服务器解密       },       fail() {         console.log('用户未授权')       }     })

wx.getUserInfo 返回的 encryptedData 和 iv 需要在服务器端结合 session_key 使用特定算法解密，以获取明文的用户信息。

4.服务器处理用户信息:

服务器解密后，可以存储用户信息，并生成一个服务器端的会话标识（session_id 或 token），用于后续接口调用的身份验证。

5.客户端保存会话标识:

客户端收到服务器返回的会话标识后，将其保存在本地，通常是小程序的全局存储（wx.setStorageSync）。

6.后续接口调用:

在后续的网络请求中，客户端需要带上这个会话标识，以便服务器验证用户身份。

其他资源

微信小程序获取各类信息（openid、session_key以及用户基本信息、解密unionId、手机号）及登录机制_weixin openid session key-CSDN博客

也许您对下面的内容还感兴趣：