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

最新推荐文章于 2025-04-10 11:35:49 发布

计算机搬砖艺术家

最新推荐文章于 2025-04-10 11:35:49 发布

阅读量1.1k

点赞数 4

分类专栏： uniapp 文章标签： uni-app laravel 微信小程序

本文链接：https://blog.csdn.net/man2017/article/details/139048290

版权

uniapp 专栏收录该内容

19 篇文章

订阅专栏

实现微信小程序手机号一键登录的流程主要分为以下几个步骤，这里将结合UniApp（一个使用Vue.js开发所有前端应用的框架）和Laravel（一个PHP Web开发框架）来详细介绍。这个过程涉及前端的微信小程序接口调用、后端的用户验证与处理，以及两者的交互。

1. 准备工作

微信小程序开发环境：确保你已经注册了微信小程序并获取了AppID。
UniApp：安装并配置好UniApp开发环境。
Laravel后端：搭建并配置好Laravel项目，包括数据库连接等。
微信开发者平台：在微信公众平台注册小程序，获取AppID和AppSecret，并在小程序管理后台开启“微信登录”功能，同时需要申请“短信服务”。

2. 前端（UniApp）实现

2.1 获取用户授权并发起登录请求

在微信小程序中，首先需要用户授权获取手机号码。通过wx.login获取code，然后通过wx.getUserProfile或wx.getPhoneNumber获取用户信息或手机号（需用户授权）。

// pages/login/index.vue
onLoad() {
  // 调用微信登录接口获取code
  wx.login({
    success: (res) => {
      if (res.code) {
        this.code = res.code; // 保存code用于后续请求
        // 请求后端进行微信登录验证并获取手机号
        this.getPhoneNumber();
      } else {
        console.log('登录失败！' + res.errMsg);
      }
    }
  });
},
getPhoneNumber(e) {
  if (e && e.detail.errMsg === 'getPhoneNumber:ok') {
    // 用户同意授权获取手机号
    wx.request({
      url: `${this.$api.baseUrl}/login/phone`, // 后端接口地址
      method: 'POST',
      data: {
        code: this.code,
        encryptedData: e.detail.encryptedData,
        iv: e.detail.iv,
      },
      success: (res) => {
        if (res.data.status === 'success') {
          // 登录成功，根据返回的token等信息进行后续操作
          uni.setStorageSync('token', res.data.token);
          this.$router.replace('/home');
        } else {
          uni.showToast({ title: '登录失败', icon: 'none' });
        }
      },
      fail: (err) => {
        console.error('请求失败', err);
      }
    });
  }
}

3. 后端（Laravel）实现

3.1 微信登录验证并获取手机号

在Laravel中，你需要创建一个控制器方法来处理微信小程序发来的登录请求。这通常涉及到使用微信的API来验证code，解密获取到的手机号码，并进行用户注册或登录逻辑。

// Laravel 控制器示例，如 App\Http\Controllers\WechatController.php

use Illuminate\Http\Request;
use Illuminate\Support\Facades\Http;
use GuzzleHttp\Client;

class WechatController extends Controller
{
    public function loginWithPhone(Request $request)
    {
        $code = $request->input('code');
        $encryptedData = $request->input('encryptedData');
        $iv = $request->input('iv');

        // 使用code换取session_key和openid
        $result = Http::asForm()->post('https://api.weixin.qq.com/sns/jscode2session', [
            'appid' => env('WECHAT_APP_ID'),
            'secret' => env('WECHAT_APP_SECRET'),
            'js_code' => $code,
            'grant_type' => 'authorization_code',
        ]);

        if ($result->successful()) {
            $data = $result->json();
            $sessionKey = $data['session_key'];

            // 解密手机号
            $client = new Client();
            $response = $client->post('https://api.weixin.qq.com/wxa/business/getuserphonenumber', [
                'json' => [
                    'iv' => $iv,
                    'encrypted_data' => $encryptedData,
                    'session_key' => $sessionKey,
                ],
            ]);

            $phoneNumberRes = json_decode($response->getBody(), true);
            if ($phoneNumberRes['errcode'] == 0) {
                $phoneNumber = $phoneNumberRes['phoneNumber'];

                // 在这里处理用户登录或注册逻辑，例如查找或创建用户，生成Token等
                // ...

                return response()->json(['status' => 'success', 'token' => $generatedToken]);
            } else {
                return response()->json(['status' => 'fail', 'message' => '获取手机号失败']);
            }
        } else {
            return response()->json(['status' => 'fail', 'message' => '微信登录验证失败']);
        }
    }
}