微信小步伐登岸并获取用户信息详解（openid、session_key）

微信小步伐作为一种轻量级的应用情势，因其便捷性和易用性受到了广大开发者和用户的喜好。在开发微信小步伐时，登录和获取用户信息是根本且关键的功能。本文将具体先容如安在微信小步伐中实现登录并获取用户信息。
  微信小步伐登录紧张依赖于微信提供的wx.login接口和code2Session接口。登录的根本流程：
1.调用wx.login获取暂时登录凭据code 。
2.使用获取到的code调用code2Session接口： 通过wx.request向微敬佩务器发送哀求，获取用户的openid和session_key。
一、条件条件

• 注册微信小步伐账号：
  
  
  
  • 在微信公众平台注册一个小步伐账号，并获取AppID和AppSecret。这些信息在后续的授权登录过程中至关紧张。
    
  
  
• 设置服务器域名：
  
  
  
  • 登录微信公众平台，进入小步伐背景，在“开发”->“开发设置”中设置服务器域名，确保你的后端服务器域名已在微信的合法域名列表中。
    
  
  
• 设置uniapp项目：
  
  
  
  • 在uniapp项目中，打开manifest.json文件，找到并填写微信小步伐的AppID。
    
  
  

二、前端实现

• 添加登录按钮：
  
  1. <template>
  2.   <view>
  3.     <button open-type="getUserInfo" @getuserinfo="getUserInfo">微信登录</button>
  4.   </view>
  5. </template>

  复制代码
  在你的小步伐页面（如pages/index/index.vue）中添加一个用于触发登录的按钮。这个按钮应使用<button>标签，并设置open-type="getUserInfo"来触发用户信息的获取。同时，绑定一个处置惩罚函数（如getUserInfo）来相应用户的授权活动。
  
• 处置惩罚授权逻辑：
  在页面脚本部分（如<script>标签内），编写getUserInfo方法来处置惩罚用户的授权信息。如果用户同意授权，则调用uni.login方法获取登录凭据（code），并将该code发送到后端服务器。
  
  1. <script>
  2. export default {
  3.   methods: {
  4.     getUserInfo(e) {
  5.       if (e.detail.userInfo) {
  6.         uni.login({
  7.           provider: 'weixin',
  8.           success: (loginRes) => {
  9.             const { code } = loginRes;
  10.             // 发送code到后台换取openId, sessionKey, unionId
  11.             uni.request({
  12.               url: 'https://你的服务器地址/api/login', // 你的登录API地址
  13.               method: 'POST',
  14.               data: { code },
  15.               success: (res) => {
  16.                 if (res.data && res.data.success) {
  17.                   const { openId, sessionKey, unionId } = res.data;
  18.                   // 将用户信息和session存储到本地
  19.                   uni.setStorageSync('userInfo', e.detail.userInfo);
  20.                   uni.setStorageSync('openId', openId);
  21.                   uni.setStorageSync('sessionKey', sessionKey);
  22.                   uni.setStorageSync('unionId', unionId);
  23.                 } else {
  24.                   uni.showToast({ title: '登录失败', icon: 'none' });
  25.                 }
  26.               },
  27.               fail: () => {
  28.                 uni.showToast({ title: '请求失败', icon: 'none' });
  29.               }
  30.             });
  31.           },
  32.           fail: (err) => {
  33.             console.log('uni.login 接口调用失败,将无法正常使用开放接口等服务', err);
  34.             uni.showToast({ title: '登录失败', icon: 'none' });
  35.           }
  36.         });
  37.       } else {
  38.         uni.showModal({
  39.           title: '警告',
  40.           showCancel: false,
  41.           confirmText: '返回授权',
  42.           success: (res) => {
  43.             if (res.confirm) {
  44.               console.log('用户点击了“返回授权”');
  45.             }
  46.           }
  47.         });
  48.       }
  49.     }
  50.   }
  51. }
  52. </script>

  复制代码

三、后端实现

• 处置惩罚登录哀求：
  在你的服务器上，编写一个接口（如/api/login）来处置惩罚从小步伐前端发送过来的code。该接口应使用code调用微信的jscode2session接口，以调换用户的openId、sessionKey和unionId。
   
  
  1. const express = require('express');
  2. const request = require('request');
  3. const app = express();
  4. const APPID = '你的AppID';
  5. const APPSECRET = '你的AppSecret';
  7. app.use(express.json());
  9. app.post('/api/login', (req, res) => {
  10.   const { code } = req.body;
  11.   if (!code) {
  12.     return res.status(400).json({ success: false, message: '缺少code参数' });
  13.   }
  14.   const url = `https://api.weixin.qq.com/sns/jscode2session?appid=${APPID}&secret=${APPSECRET}&js_code=${code}&grant_type=authorization_code`;
  15.   request.get(url, (err, response, body) => {
  16.     if (err) {
  17.       return res.status(500).json({ success: false, message: '请求微信接口失败' });
  18.     }
  19.     const data = JSON.parse(body);
  20.     if (data.errcode) {
  21.       return res.status(400).json({ success: false, message: data.errmsg });
  22.     }
  23.     res.json({ success: true, openId: data.openid, sessionKey: data.session_key, unionId: data.unionid });
  24.   });
  25. });
  27. app.listen(3000, () => {
  28.   console.log('服务器启动成功,监听端口3000');
  29. });

  复制代码
  
  

四、注意事项 

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

 登录流程时序图

具体先容

在小步伐开发过程，js 中所看到的 wx.xxx()，其本身就含有一个接口哀求，只是一些哀求路径和哀求参数都已经内嵌了xxx内里了。
以是在 wx.xxx() 的括号中，只需编写success函数和fail函数基于微信小步伐的API来形貌一个范例的登录流程，如下：
1.调用 wx.login接口:
起首，你必要在小步伐中调用 wx.login 接口，这会向微敬佩务器发送哀求以获取一个暂时的 code。

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

复制代码

wx.login 返回的 code 只能在短时间内有效，因此必要尽快使用。
2.服务器端互换 openid 和 session_key:
将 code、小步伐的 appid 和 appsecret 发送到你的后端服务器。
服务器使用这些信息向微信API发起哀求，调换用户的 openid（标识用户唯一性的ID）和 session_key（用于对用户数据举行加密的密钥）。
这一步通常涉及调用微信的API接口如 sns/jscode2session。

1. wx.login({
2.         success: res => {
3.             if (res.code) {
4.               let URL='https://api.weixin.qq.com/sns/jscode2session?appid=##################&secret=*****************
5.                                                          ***************&js_code='+res.code+'&grant_type=authorization_code'
6.               wx.request({
7.                 url: URL ,
8.                  success:function(res){
9.                    console.log(res.data)//res.data中有openid
10.                 }
11.               })
12.             }  
13.     } })

复制代码

上述的方式不精确，小步伐中不能有api.weixin.qq的接口调用，把appid和secret放在小步伐，这个用法便是告诉人家你家的门钥匙放在了砖头下面。url和data固然是由服务端告诉你。得有服务端，即url 是你的背景服务所在，后背景发起调用，获取openid返给客户端。
3.验证署名和获取用户信息:
如果必要获取用户信息，你可以调用 wx.getUserInfo 接口，但这会弹出用户授权提示框。
示例代码：

1.      wx.getUserInfo({
2.        success(res) {
3.          // res.userInfo 包含用户信息
4.          // 发送 res.userInfo.openid 和 res.userInfo.iv, encryptedData 到服务器解密
5.        },
6.        fail() {
7.          console.log('用户未授权')
8.        }
9.      })
10.      

复制代码

wx.getUserInfo 返回的 encryptedData 和 iv 必要在服务器端联合 session_key 使用特定算法解密，以获取明文的用户信息。
4.服务器处置惩罚用户信息:
服务器解密后，可以存储用户信息，并天生一个服务器端的会话标识（session_id 或 token），用于后续接口调用的身份验证。
5.客户端生存会话标识:
客户端收到服务器返回的会话标识后，将其生存在本地，通常是小步伐的全局存储（wx.setStorageSync）。
6.后续接口调用:
在后续的网络哀求中，客户端必要带上这个会话标识，以便服务器验证用户身份。
其他资源

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