博客

uniapp+.net core实现微信小程序获取手机号功能

  • Post category:C#

uniapp+.netcore实现微信小程序获取手机号功能

本攻略将介绍如何使用 uniapp 和 .NET Core 实现微信小程序获取手机号功能。我们将使用微信提供的 API 来获取用户的手机号，并将其保存到数据库中。

步骤1：创建微信小程序

首先，我们需要在微信公众平台上创建一个小程序，并获取小程序的 AppID 和 AppSecret。我们还需要在小程序中添加获取手机号的权限。

步骤2：创建 .NET Core 项目

在 Visual Studio 中创建一个名为“WxPhone”的 .NET Core 项目。

步骤3：添加依赖项

在 .NET Core 项目中，我们需要添加以下依赖项：

  • Microsoft.AspNetCore.Mvc
  • Microsoft.EntityFrameworkCore
  • Microsoft.EntityFrameworkCore.SqlServer
  • Microsoft.EntityFrameworkCore.Tools

我们可以使用 NuGet 包管理器来添加这些依赖项。

步骤4：创建数据库

在 SQL Server 中创建一个名为“WxPhone”的数据库，并添加以下表：

CREATE TABLE [dbo].[User] (
    [Id] INT IDENTITY (1, 1) NOT NULL,
    [OpenId] NVARCHAR (50) NOT NULL,
    [PhoneNumber] NVARCHAR (20) NOT NULL,
    PRIMARY KEY CLUSTERED ([Id] ASC)
);

步骤5：创建 API

在 .NET Core 项目中，我们需要创建一个 API处理获取手机号的请求。我们可以在 Controllers 文件夹中创建一个名为“UserController”的控制器，并添加以下代码：

using Microsoft.AspNetCore.Mvc;
using Microsoft.EntityFrameworkCore;
using Newtonsoft.Json.Linq;
using System.Linq;
using System.Net.Http;
using System.Threading.Tasks;
using WxPhone.Models;

namespace WxPhone.Controllers
{
    [Route("api/[controller]")]
    [ApiController]
    public class UserController : ControllerBase
    {
        private readonly WxPhoneContext _context;

        public UserController(WxPhoneContext context)
        {
            _context = context;
        }

        [HttpPost]
        public async Task<IActionResult> PostAsync([FromBody] JObject data)
        {
            var code = data["code"].ToString();
            var encryptedData = data["encryptedData"].ToString();
            var iv = data["iv"].ToString();

            var url = $"https://api.weixin.qq.com/sns/jscode2session?appid=APPID&secret=APPSECRET&js_code={code}&grant_type=authorization_code";
            url = url.Replace("APPID", "your appid").Replace("APPSECRET", "your appsecret");

            using (var client = new HttpClient())
            {
                var response = await client.GetAsync(url);
                var content = await response.Content.ReadAsStringAsync();
                var json = JObject.Parse(content);
                var openId = json["openid"].ToString();

                var user = await _context.Users.FirstOrDefaultAsync(u => u.OpenId == openId);
                if (user == null)
                {
                    var sessionKey = json["session_key"].ToString();
                    var phoneNumber = WxPhoneHelper.DecryptPhoneNumber(encryptedData, sessionKey, iv);
                    user = new User { OpenId = openId, PhoneNumber = phoneNumber };
                    _context.Users.Add(user);
                    await _context.SaveChangesAsync();
                }

                return Ok(user);
            }
        }
    }
}

这个控制器包含一个名为“PostAsync”的方法，该方法接收一个包含 code、encryptedData 和 iv 的 JSON 对象。我们将使用这些数据来获取用户的手机号。首先，我们使用 code 调用微信 API 来获取用户的 openId 和 session_key。然后，我们使用 session_key 和 iv 来解密 encryptedData，以获取用户的手机号。最后，我们将用户的 openId 和手机号保存到数据库中，并返回用户的信息。

步骤6：创建 uniapp 项目

在 HBuilderX 中创建一个名为“WxPhone”的 uniapp 项目。

步骤7：创建页面

在 uniapp 项目中，我们需要创建一个页面来获取用户的手机号。我们可以在 pages 文件夹中创建一个名为“Index”的页面，并添加以下代码：

<template>
  <view class="container">
    <button type="primary @click="getPhoneNumber">获取手机号</button>
    <view v-if="phoneNumber">{{phoneNumber}}</view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      phoneNumber: ''
    }
  },
  methods: {
    async getPhoneNumber() {
      const res = await uni.login()
      const code = res.code
      const encryptedData = this.encryptedData
      const iv = this.iv
      const data = { code, encryptedData, iv }
      const response = await uni.request({
        url: 'http://localhost:5000/api/user',
        method: 'POST',
        data
      })
      this.phoneNumber = response.data.phoneNumber
    }
  }
}
</script>

这个页面包含一个按钮，当用户点击该按钮时，我们将调用 uni.login 方法来获取用户的 code。然后，我们将使用 code、encryptedData 和 iv 来调用我们的 API 来获取用户的手机号。最后，我们将用户的手机号显示在页面上。

示例1：获取用户的 openId

我们可以使用以下代码来获取用户的 openId：

uni.login({
  success(res) {
    console.log(res.code)
  }
})

这个代码将调用 uni.login来获取用户的 code。我们可以将 code 发送到我们的 API 来获取用户的 openId。

示例2：解密用户的手机号

我们可以使用以下代码来解密用户的手机号：

const phoneNumber = WxPhoneHelper.decryptPhoneNumber(encryptedData, sessionKey, iv)

这个代码将调用我们的解密方法来解密 encryptedData，并返回用户的手机号。

Tags: