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

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

微信小程序登录主要依赖于微信提供的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博客