小程序集成微信手机号登录

小程序集成微信手机号登录，能让用户快速授权并安全地获取其手机号，提升登录体验和转化率。由于其实现涉及前后端配合和一些需要特别注意的细节，我会为你梳理一份清晰的技术集成方案。

在深入了解细节之前，你可以通过下面的流程图快速把握前端 和后端在处理手机号登录时的核心步骤与协作关系：

flowchart TD
    A[小程序前端] --> B1[调用 wx.login 获取 code]
    B1 -- 缓存code --> C1[用户点击授权按钮]
    C1 --> D1[触发 getPhoneNumber 回调]
    D1 --> E1[获取 encryptedData, iv,<br>及/或新接口的 code]
    
    A --> B2[新接口: 直接获取 code]
    B2 -- 无需session_key解密 --> C2[将 code 发送至后端]
    
    E1 --> F[将 code(或encryptedData/iv)<br>及login的code(旧接口)发送至后端]
    
    F --> G[后端处理]
    C2 --> G
    
    subgraph G [后端逻辑]
        H{判断接口版本}
        H -- 新接口 --> I[使用新code调用微信接口<br>phonenumber.getPhoneNumber]
        I --> K[直接得到明文手机号]
        
        H -- 旧接口 --> J[使用login的code调用微信接口<br>jscode2session 得 session_key]
        J --> L[使用 session_key 解密<br>encryptedData 得到手机号]
        
        K --> M[查询/创建用户<br>返回自定义登录态token]
        L --> M
    end
    
    M --> N[前端接收token<br>存储并更新登录状态]

上图展示了新旧两种接口的主要路径。接下来，我们重点看看两种接口方案下，前端和后端需要完成的具体工作。

📱 微信小程序手机号登录技术集成方案

新旧接口方案对比

小程序获取手机号的接口经历了升级，目前存在新旧两种方案，它们在流程和实现上有所不同。下表对比了它们的主要区别，以便你做出选择：

特性	新方案 (2022年2月后)	旧方案
触发方式	仍需通过 <button> 组件，open-type="getPhoneNumber"	同上
获取凭证	回调事件中获取 新的、专用的 code	回调事件中获取 encryptedData 和 iv
后端解密	无需session_key和解密，直接凭新code调微信接口换取手机号	需要用 session_key 解密 encryptedData 得到手机号