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

实现微信小程序手机号一键登录的全流程,主要分为以下几个步骤:前端(uni-app)收集用户授权、后端(Python)接收数据并处理登录逻辑、与微信服务器交互验证手机号、生成会话等。下面将详细介绍每一步,并提供简化的示例代码。

1. 前端(uni-app)部分

目标
  • 请求用户授权获取手机号码。
  • 将授权获得的手机号发送到后端。
步骤
  1. 安装微信SDK:在uni-app项目中,你需要使用微信SDK来请求用户的手机号。确保你的项目已经配置了微信小程序的开发环境。

  2. 请求用户授权:在需要获取手机号的页面,调用微信的wx.loginwx.getSettingwx.authorizewx.openSetting接口来请求用户授权获取手机号。

  3. 获取手机号:使用wx.getPhoneNumber获取加密的手机号码,并通过wx.request发送到后端服务器。

示例代码
// 在页面的onLoad或按钮点击事件中
uni.login({
    success: (loginRes) => {
        uni.getSetting({
            success: (settingRes) => {
                if (!settingRes.authSetting['scope.address']) {
                    uni.authorize({
                        scope: 'scope.address',
                        success: () => {
                            // 用户已授权,再次调用获取手机号
                            uni.getPhoneNumber({
                                success: (phoneNumberRes) => {
                                    const encryptedData = phoneNumberRes.encryptedData;
                                    const iv = phoneNumberRes.iv;
                                    // 发送至后端
                                    uni.request({
                                        url: 'https://your-backend-api.com/login', // 后端API地址
                                        method: 'POST',
                                        data: {
                                            encryptedData,
                                            iv,
                                            loginCode: loginRes.code // 微信登录code,用于后端获取session_key
                                        },
                                        success: (res) => {
                                            console.log('后端返回:', res.data);
                                        },
                                        fail: (err) => {
                                            console.error('请求失败:', err);
                                        }
                                    });
                                },
                                fail: (err) => {
                                    console.error('获取手机号失败:', err);
                                }
                            });
                        },
                        fail: () => {
                            uni.showModal({
                                title: '提示',
                                content: '需要您的授权才能继续',
                                showCancel: false
                            });
                        }
                    });
                }
            }
        });
    },
    fail: (err) => {
        console.error('登录失败:', err);
    }
});

2. 后端(Python Flask)部分

目标
  • 接收前端传来的加密数据和微信登录code。
  • 使用微信API获取session_key。
  • 解密手机号。
  • 验证手机号并完成用户登录逻辑。
步骤
  1. 安装微信SDK:使用如wechatpy等库来与微信服务器交互。

  2. 接收并解密:接收前端发来的数据,调用微信接口获取session_key,然后解密手机号。

  3. 验证并登录:验证手机号的有效性,创建或查找用户,生成会话信息返回给前端。

示例代码
from flask import Flask, request, jsonify
from wechatpy import WeChatClient
import wechatpy.exceptions

app = Flask(__name__)

# 微信小程序AppID和AppSecret
APP_ID = 'your_app_id'
APP_SECRET = 'your_app_secret'

@app.route('/login', methods=['POST'])
def login():
    encrypted_data = request.json.get('encryptedData')
    iv = request.json.get('iv')
    code = request.json.get('loginCode')

    # 使用code换取session_key和openid
    try:
        client = WeChatClient(APP_ID, APP_SECRET)
        session_info = client.mini_program.oauth.code_to_session(code=code)
        session_key = session_info['session_key']
    except wechatpy.exceptions.WeChatClientException as e:
        return jsonify({'error': '获取session_key失败', 'message': str(e)}), 400

    # 解密手机号
    try:
        from wechatpy.crypto import WeChatCrypto
        crypto = WeChatCrypto(session_key, '', APP_ID)
        phone_number = crypto.decrypt(encrypted_data, iv)
    except Exception as e:
        return jsonify({'error': '解密失败', 'message': str(e)}), 400

    # 这里添加验证手机号并登录的逻辑,例如查询数据库是否存在该手机号的用户
    # 假设验证成功,生成token
    token = generate_token_for_user(phone_number)  # 生成token的函数需自定义

    return jsonify({'success': True, 'token': token})

if __name__ == '__main__':
    app.run(debug=True)

注意事项

  • 以上代码仅为简化示例,实际应用中需要考虑更多安全性问题,如HTTPS、数据校验、异常处理等。
  • generate_token_for_user函数是一个占位符,你需要根据自己的认证系统实现生成Token的逻辑。
  • 确保在后端正确处理微信API调用的异常,如网络错误、参数错误等。
  • 请替换your_app_idyour_app_secret为你的实际微信小程序的AppID和AppSecret。
  • 代码中未包含数据库操作部分,实际应用中需要连接数据库进行用户信息的存储与查询。
根据提供的引用内容,uniapp微信小程序可以通过以下步骤实现手机号一键登录: 1.在uniapp项目中安装并引入wx-server-sdk模块,该模块可以用于调用云函数。 2.在云函数中使用wx-server-sdk模块的getPhoneNumber方法获取用户手机号码。 3.在小程序端使用wx.login方法获取用户的code。 4.将获取到的code和encryptedData、iv等信息传递给云函数。 5.在云函数中使用code、encryptedData、iv等信息调用微信提供的解密算法,获取用户的手机号码。 6.将获取到的手机号码返回给小程序端,实现一键登录功能。 以下是示例代码: 1.云函数代码: ```javascript const cloud = require('wx-server-sdk') cloud.init() const wxContext = cloud.getWXContext() const appid = 'your appid' // 替换成自己的appid const appsecret = 'your appsecret' // 替换成自己的appsecret const wxServerSDK = require('wx-server-sdk') wxServerSDK.init({ env: wxContext.ENV, appid: appid, secret: appsecret }) exports.main = async (event, context) => { const wxContext = cloud.getWXContext() const { code, encryptedData, iv } = event const session = await wxServerSDK.cloud.callFunction({ name: 'login', data: { code: code } }) const sessionKey = session.result.session_key const phone = await wxServerSDK.cloud.callFunction({ name: 'getPhoneNumber', data: { appid: appid, sessionKey: sessionKey, encryptedData: encryptedData, iv: iv } }) return phone.result } ``` 2.小程序端代码: ```javascript // 获取用户手机号码 getPhoneNumber: function (e) { wx.cloud.callFunction({ name: 'getPhoneNumber', data: { code: this.globalData.code, encryptedData: e.detail.encryptedData, iv: e.detail.iv }, success: res => { console.log(res.result) // TODO: 处理获取到的手机号码 }, fail: err => { console.error(err) } }) } ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值