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

Question

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

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

基本上作为一个例子，启动应用程序后(我的电子邮件地址是硬编码的)，我可以看到 gmail 的 username 页面，但在这里我必须输入我的用户名，用于访问具有密码的下一页::

在这里我必须输入我的密码:

只有完成此操作后，我才能访问我的电子邮件。

预期结果是，一旦我运行应用程序，我想直接转到我的电子邮件，而无需输入用户名和密码

我正在运行的代码如下:

#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();
}

到目前为止我尝试过的

1. 我做了很多研究和this source对于尝试理解如何对条目进行硬编码的概念很有用。但是，如何进入下一个 passowrd 页面`？

2. This是使用不同方法解决同一问题的另一个示例(尽管在 php 中)。这对于理解概念和主要思想也很有用。

3. this additional source尽管这里使用了 JavaScript，但看起来是一个非常好的示例。

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

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

非常感谢任何可能已经经历过此操作或可能提供一些指导或示例来说明如何在 WebEngine Quick Nano 浏览器 中实现此操作的人。

Answer 1

不要使用示例WebEngine Quick Nano 浏览器，因为我认为它没有必要，而且只会分散对背景目标的注意力。

逻辑是理解google登录是如何工作的，在这种情况下，你必须找到一种方法使用javascript获取DOM元素，例如通过id、class、name等，并根据所需的逻辑进行修改。另请注意，URL 会发生变化，因此必须在每个 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"
    }
}