Qt5和QML：如何使用WebEngine Quick Nano Browser自动输入用户名和密码

Question

我正在使用 Qt 和 QML 编写一个小型应用程序，该应用程序使用 Qt 文档 WebEngine Quick Nano Browser 中的示例。

在这个例子中，我试图访问我的电子邮件。我可以做到，但我正在尝试自动输入用户名和密码，以便我可以立即登录我的电子邮件。

基本上举个例子，启动应用程序后（我的电子邮件地址是硬编码的）我可以看到 gmail 的 username 页面，但在这里我必须输入我的用户名才能访问到具有 password::

的下一页

在这里我必须输入我的 password:

只有这样做之后我才能访问我的电子邮件。

一旦我运行申请，预期的 结果就会出现，我想直接转到我的电子邮件，而不输入 username 和 password

我运行ning的代码如下：

#include <QtGui/QGuiApplication>
typedef QGuiApplication Application;
#include <QtQml/QQmlApplicationEngine>
#include <QtQml/QQmlContext>
#include <QtWebEngine/qtwebengineglobal.h>

static QUrl startupUrl()
{
    QUrl ret;
    QStringList args(qApp->arguments());
    args.takeFirst();
    for (const QString &arg : qAsConst(args)) {
        if (arg.startsWith(QLatin1Char('-')))
             continue;
        ret = Utils::fromUserInput(arg);
        if (ret.isValid())
            return ret;
    }

    // first email
    return QUrl(QStringLiteral("https://accounts.google.com/signin"));
}

int main(int argc, char **argv)
{
    QCoreApplication::setOrganizationName("QtExamples");
    QCoreApplication::setAttribute(Qt::AA_EnableHighDpiScaling);

    Application app(argc, argv);

    QtWebEngine::initialize();

    QQmlApplicationEngine appEngine;
    Utils utils;
    appEngine.rootContext()->setContextProperty("utils", &utils);
    appEngine.load(QUrl("qrc:/ApplicationRoot.qml"));
    QMetaObject::invokeMethod(appEngine.rootObjects().first(), "load", Q_ARG(QVariant, startupUrl()));

    return app.exec();
}

到目前为止我尝试了什么

我进行了大量研究，有助于理解有关如何对条目进行硬编码的概念。但是，如何进入下一个 passowrd 页面`?
This 是使用不同方法处理相同问题的另一个示例（尽管在 php 中）。这对于理解概念和主要思想也很有用。
this additional source 看起来是一个很好的例子，尽管这里使用了 JavaScript。

现在，在阅读了更多信息后，我发现 this post 这让我认为最好的方法是在 QML 代码中集成一些 JavaScript？如果那是正确的路线，我是 JavaScript 的新手。如果这是正确的，我该怎么做？

我正在考虑在此应用程序中使用 QNetworkAccessManager，但我不确定如何最好地实施它。

感谢任何可能已经经历过此过程或可能提供一些指导或示例以说明如何在 WebEngine Quick Nano Browser 中实施此过程的人。非常感谢。

Answer 1

不要使用示例 WebEngine Quick Nano Browser，因为我认为它没有必要，只会分散背景 objective。

逻辑是理解google登录是如何工作的，在这种情况下你必须想办法使用javascript获取DOM的元素，例如通过id，class、name等，按照自己想要的逻辑进行修改。另请注意，url 发生了变化，因此必须在每个脚本中执行不同的脚本。

综合以上，解决方案是：

import QtQuick 2.13
import QtQuick.Controls 2.13
import QtWebEngine 1.9

ApplicationWindow{
    id: root
    width: 640
    height: 480
    visible: true

    property string username: "USERNAME"
    property string password: "PASSWORD"

    QtObject{
        id: internals
        property string script_username: "
            setTimeout(function() {
                var input_username = document.getElementById('identifierId');
                input_username.value = '%1';
                var button = document.getElementById('identifierNext');
                button.click();
            }, 1000);
        ".arg(username)

        property string script_password: "
            setTimeout(function() { 
                var input_password = document.getElementsByName('password')[0];
                input_password.value = '%1';
                var button = document.getElementById('passwordNext');
                button.click();
            }, 1000);
        ".arg(password)
    }

    WebEngineView {
        id: view
        anchors.fill: parent
        onUrlChanged: {
            if(url == "https://accounts.google.com/signin/v2/identifier?flowName=GlifWebSignIn&flowEntry=ServiceLogin"){
                view.runJavaScript(internals.script_username)   
            }
            else if(url == "https://accounts.google.com/signin/v2/sl/pwd?flowName=GlifWebSignIn&flowEntry=ServiceLogin&cid=1&navigationDirection=forward"){
                view.runJavaScript(internals.script_password)
            }
        }
        Component.onCompleted: view.url = "https://accounts.google.com/signin"
    }
}

Qt5和QML：如何使用WebEngine Quick Nano Browser自动输入用户名和密码

Qt5 and QML: How to automatically input username and password using WebEngine Quick Nano Browser

javascript

qt

qml

qt5

qwebengineview