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

Posted 2023-02-14

【中文标题】Qt5 和 QML：如何使用 WebEngine Quick Nano Browser 自动输入用户名和密码

【英文标题】：Qt5 and QML: How to automatically input username and password using WebEngine Quick Nano Browser

【发布时间】：2019-11-16 16:11:03

【问题描述】：

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

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

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

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

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

预期的结果将是我一运行应用程序，我想直接转到我的电子邮件而不输入username 和password

我正在运行的代码如下：

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

到目前为止我尝试了什么

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

This 是另一个使用不同方法的相同问题的示例（尽管在php 中）。这也有助于理解概念和主要思想。

this additional source 看起来是一个很好的例子，虽然这里使用了javascript。

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

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

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

【参考方案1】：

请勿使用示例 WebEngine Quick Nano Browser，因为我认为它没有必要，只会分散背景目标的注意力。

逻辑是要了解google login的工作原理，在这种情况下，您必须找到一种使用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"
    

【讨论】：

感谢 eyllanesc，这正是我正在寻找的示例。是的，我现在正在研究 DOM 的元素是如何工作的。再次感谢！ :)