uni-app 微信小程序能否实现一键登录获取手机号

发布于 1周前 作者 eggper 来自 Uni-App

uni-app 微信小程序能否实现一键登录获取手机号

微信小程序 能否实现一键登录获取手机号?

相同的代码,微信小程序里,在uni.login之后,无法获取openid和access_token。

烦劳大神解释一下!

4 回复

承接双端(Android,iOS)原生插件开发,uni-app开发,出售各类型源码。欢迎咨询
QQ:1559653449 V X:fan-rising

uni.login 再小程序中是获取code 用code去后台换取access_token,然后获取openid的

当然可以,在uni-app中实现微信小程序的一键登录并获取手机号,通常需要使用微信提供的手机号绑定接口。以下是一个简要的实现步骤和相关代码案例。

步骤一:配置微信小程序

  1. 登录微信公众平台,进入小程序管理后台。
  2. 设置 - 接口权限,找到“手机号绑定接口”,申请开通。
  3. 开发 - 开发设置,配置服务器域名(如果需要后端服务)。

步骤二:编写前端代码

在uni-app中,你可以使用wx.loginwx.getPhoneNumber接口来实现一键登录并获取手机号。

// pages/index/index.vue
<template>
  <view>
    <button
      open-type="getPhoneNumber"
      @getphonenumber="getPhoneNumber"
      style="width: 100%; height: 50px; background-color: #1aad19; color: #fff; line-height: 50px; text-align: center;">
      一键登录并获取手机号
    </button>
  </view>
</template>

<script>
export default {
  methods: {
    getPhoneNumber(e) {
      const encryptedData = e.detail.encryptedData;
      const iv = e.detail.iv;
      
      // 这里需要将encryptedData和iv发送到你的后端服务器进行解密
      uni.request({
        url: 'https://your-server.com/decryptPhoneNumber', // 后端解密接口
        method: 'POST',
        data: {
          encryptedData: encryptedData,
          iv: iv
        },
        success: (res) => {
          if (res.data && res.data.phoneNumber) {
            console.log('获取到的手机号:', res.data.phoneNumber);
            // 在这里处理获取到的手机号
          } else {
            console.error('获取手机号失败:', res.data);
          }
        },
        fail: (err) => {
          console.error('请求失败:', err);
        }
      });
    }
  }
}
</script>

步骤三:编写后端代码

后端需要使用微信提供的解密接口来解密前端传来的加密数据。以下是一个简单的Node.js示例:

// app.js
const express = require('express');
const axios = require('axios');
const crypto = require('crypto');

const app = express();
const port = 3000;

app.use(express.json());

app.post('/decryptPhoneNumber', async (req, res) => {
  const { encryptedData, iv, sessionKey } = req.body;
  
  // 调用微信接口获取sessionKey(这里假设已经通过wx.login获取并存储)
  // const sessionKey = await getSessionKeyFromWeChat(code);

  const session = crypto.createDecipheriv('aes-128-cbc', Buffer.from(sessionKey, 'base64'), Buffer.from(iv, 'base64'));
  session.setAutoPadding(true);

  let decoded = session.update(Buffer.from(encryptedData, 'base64'));
  decoded = Buffer.concat([decoded, session.final()]);

  const phoneNumberInfo = JSON.parse(decoded.toString());
  res.json({ phoneNumber: phoneNumberInfo.phoneNumber });
});

app.listen(port, () => {
  console.log(`Server running at http://localhost:${port}/`);
});

注意:上面的后端代码只是一个示例,具体实现中需要处理错误,并且getSessionKeyFromWeChat函数需要你根据微信登录接口的实现来获取sessionKey

回到顶部