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 Browser 中实现此操作的任何人，非常感谢。

Answer 1

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

逻辑是了解google登录是如何工作的，在这种情况下你必须找到一种方法来使用javascript获取DOM的元素，例如通过id、class、name等，并根据需要的逻辑对其进行修改。另请注意，网址会发生变化，因此必须在每个网址中执行不同的脚本。

综合以上，解决方案是:

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"
    }
}