uniapp+Thinkphp5实现微信小程序手机号一键登录全流程（附前后端代码及详细解释）

admin管理员组

文章数量:1537356

实现微信小程序手机号一键登录的流程主要包括以下几个步骤：用户授权、获取手机号码、后端验证与注册/登录处理。这里将结合uni-app作为前端框架和ThinkPHP5作为后端框架来详细介绍这一过程，并提供关键代码示例。

1. 前端准备（uni-app）

1.1 引入微信SDK

首先，在uni-app项目中，需要引入微信SDK以便调用微信接口。uni-app自带微信SDK支持，无需额外安装。

1.2 获取用户授权

在需要实现一键登录的页面，首先请求用户授权获取手机号。

// pages/login/index.vue
onLoad() {
  this.checkAuth();
},
methods: {
  async checkAuth() {
    const { authorize } = await uni.authorize({
      scope: 'scope.userInfo',
    });
    if (authorize === 'authorize') {
      // 已授权，继续获取手机号
      this.getPhoneNumber();
    } else {
      // 用户未授权，提示用户授权
    }
  },
  async getPhoneNumber(e) {
    if (e.detail.errMsg !== 'getPhoneNumber:ok') return;
    const { code } = await uni.login();
    const iv = e.detail.iv; // 加密算法的初始向量
    const encryptedData = e.detail.encryptedData; // 包括敏感数据在内的完整用户信息的加密数据
    this.sendToServer(code, iv, encryptedData);
  },
  async sendToServer(code, iv, encryptedData) {
    // 发送code、iv、encryptedData到后端
  }
}

2. 后端处理（ThinkPHP5）

2.1 配置微信小程序API密钥

确保你的ThinkPHP5项目已经配置了微信小程序的AppID和AppSecret，用于获取session_key和解密手机号。

2.2 接收并处理前端发送的数据

创建一个控制器方法来接收前端发来的数据，并使用微信提供的接口解密手机号。

// application/api/controller/Login.php
use think\Request;
use think\facade\Log;

class Login extends Controller
{
    public function wxLogin(Request $request)
    {
        $code = $request->param('code');
        $iv = $request->param('iv');
        $encryptedData = $request->param('encryptedData');

        // 使用code换取session_key和openid
        $result = $this->getSessionKey($code);
        if ($result['errcode']) {
            Log::error('获取session_key失败：' . json_encode($result));
            return json(['status' => 0, 'msg' => '登录失败']);
        }
        $sessionKey = $result['session_key'];

        // 解密手机号
        $decryptedData = $this->decryptData($sessionKey, $iv, $encryptedData);
        if (!$decryptedData || !isset($decryptedData['purePhoneNumber'])) {
            Log::error('解密失败');
            return json(['status' => 0, 'msg' => '解密失败']);
        }
        $phoneNumber = $decryptedData['purePhoneNumber'];

        // 根据手机号进行登录或注册处理
        $user = $this->handleUserLoginOrRegister($phoneNumber);

        return json(['status' => 1, 'msg' => '登录成功', 'data' => $user]);
    }

    private function getSessionKey($code) {
        // 调用微信接口，此处省略具体实现
    }

    private function decryptData($sessionKey, $iv, $encryptedData) {
        // 使用sessionKey和iv解密encryptedData，此处需使用相应库进行解密，如overtrue/wechat-sdk
    }

    private function handleUserLoginOrRegister($phoneNumber) {
        // 根据手机号查找或创建用户，返回用户信息
    }
}

3. 解释说明

• 前端: 首先，通过uni.authorize获取用户授权，然后调用wx.login获取code，再通过getPhoneNumber接口获取加密的手机号信息。最后，将code、iv、encryptedData发送给后端。
• 后端: 通过接收到的code调用微信接口换取session_key，利用session_key和前端传来的iv、encryptedData解密出手机号。之后，根据手机号在数据库中查找或创建用户，并返回用户信息给前端完成登录流程。

此流程涉及前后端交互、微信接口调用及数据加密解密，需确保理解并正确配置微信小程序的开发环境与密钥。代码仅为示例，实际应用时还需考虑异常处理、安全性等因素。

本文标签： 手机号一键后端流程代码