如何结合QML与C++实现用户输入驱动的Firebase登录

一、修改C++认证类，让QML可调用 #

1. 确保你的认证类继承自QObject并添加Q_OBJECT宏，将signUserIn改为接收邮箱、密码参数的可调用函数（用Q_INVOKABLE声明或定义为槽函数）：

#include <QObject>
#include "firebase/auth.h"

class FirebaseAuth : public QObject
{
    Q_OBJECT
public:
    explicit FirebaseAuth(QObject *parent = nullptr);

    // 声明QML可调用的登录函数
    Q_INVOKABLE void signUserIn(const QString &email, const QString &password);

private:
    firebase::auth::Auth* m_auth;
};

2. 实现signUserIn函数，替换硬编码值为传入的参数：

void FirebaseAuth::signUserIn(const QString &email, const QString &password)
{
    if (!m_auth) {
        // 处理初始化失败逻辑
        return;
    }

    // 转换参数格式适配Firebase接口
    std::string emailStr = email.toStdString();
    std::string passwordStr = password.toStdString();

    m_auth->SignInWithEmailAndPasswordAsync(
        emailStr.c_str(),
        passwordStr.c_str(),
        [](const firebase::auth::SignInResult& result) {
            if (result.error != firebase::auth::kAuthErrorNone) {
                // 登录失败逻辑，后续可通过信号通知QML
            } else {
                // 登录成功逻辑，后续可通过信号通知QML
            }
        }
    );
}

3. 在main.cpp中将认证类实例暴露给QML上下文：

#include <QGuiApplication>
#include <QQmlApplicationEngine>
#include "firebaseauth.h"

int main(int argc, char *argv[])
{
    QGuiApplication app(argc, argv);

    QQmlApplicationEngine engine;
    FirebaseAuth auth;
    // 将实例设为QML可访问的全局属性
    engine.rootContext()->setContextProperty("firebaseAuth", &auth);

    const QUrl url(u"qrc:/main.qml"_qs);
    QObject::connect(&engine, &QQmlApplicationEngine::objectCreated,
                     &app, [url](QObject *obj, const QUrl &objUrl) {
        if (!obj && url == objUrl)
            QCoreApplication::exit(-1);
    }, Qt::QueuedConnection);
    engine.load(url);

    return app.exec();
}

二、修改QML界面，绑定输入并触发登录 #

用TextField和PasswordInput收集用户输入，按钮点击时调用C++的登录函数：

import QtQuick 2.15
import QtQuick.Controls 2.15

Window {
    width: 400
    height: 300
    visible: true
    title: qsTr("Firebase登录")

    Column {
        anchors.centerIn: parent
        spacing: 16

        TextField {
            id: emailInput
            width: 300
            placeholderText: qsTr("输入邮箱")
        }

        PasswordInput {
            id: passwordInput
            width: 300
            placeholderText: qsTr("输入密码")
        }

        Button {
            text: qsTr("登录")
            anchors.horizontalCenter: parent.horizontalCenter
            onClicked: {
                // 调用C++暴露的登录函数，传入输入框内容
                firebaseAuth.signUserIn(emailInput.text, passwordInput.text)
            }
        }
    }
}

三、可选：添加登录结果反馈 #

在C++认证类中定义信号，用于通知QML登录状态：

class FirebaseAuth : public QObject
{
    Q_OBJECT
    // ... 原有代码 ...
signals:
    void loginSuccess();
    void loginFailed(const QString &errorMsg);
};

在登录回调中触发信号，QML中连接信号处理：

// 在Window内添加信号连接
Connections {
    target: firebaseAuth
    function onLoginSuccess() {
        console.log("登录成功")
        // 可添加页面跳转或弹窗提示逻辑
    }
    function onLoginFailed(errorMsg) {
        console.log("登录失败：" + errorMsg)
        // 可添加错误提示逻辑
    }
}

内容的提问来源于stack exchange，提问作者Aryan Ghadge