Qt5和QML:如何使用WebEngine Quick Nano Browser自动输入用户名和密码 [英] Qt5 and QML: How to automatically input username and password using WebEngine Quick Nano Browser

问题描述

我正在使用Qt和QML编写一个小型应用程序，该应用程序使用Qt文档

I am writing a small application using Qt and QML that uses the example in the Qt documentation WebEngine Quick Nano Browser.

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

In this example I am trying to access to my email. I can do it, but I am trying to enter username and password automatically so that I can instantly log into my emails.

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

Basically as an example, after launching the application (my email address is hard-coded) I can see the username page of gmail, but here I have to type my username to access to the next page that has the password::

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

Here I have to type my password:

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

Only after doing that I can access to my email.

期望结果将是我运行该应用程序后的结果，我想直接输入我的电子邮件，而无需输入username和password

The Expected result would be as soon as I run the application, I would like to go straight to my email without inputting username and password

我正在运行的代码如下:

The code that I am running is the following:

#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. 我曾做过很多研究，并且这源对于试图理解有关如何对条目进行硬编码的概念很有用.但是，如何进入下一个passowrd页面?

1. I have beed doing a lot of research and this source was useful in trying to understand the concept on how to hard code the entries. However, how do I proceed to the next passowrd page`?

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

This is another example (although in php) of the same problem with a different approach. That also was useful to undertand the concept and the main idea.

此其他来源看起来是一个很好的例子，尽管此处使用JavaScript.

this additional source looks a very good example, although JavaScript is used here.

现在，在阅读了更多信息之后，我发现了这篇文章认为最好的方法是将某些JavaScript集成到QML代码中?如果这是正确的路线，我是JavaScript中的新手.如果这是对的，我该怎么做?

Now after reading much more information I found this post which makes me think that the best approach would be to integrate some JavaScript inside the QML code? I am a newbie in JavaScript if that would be the right route. And if this is the right thing, how can I do that?

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

I am considering to use QNetworkAccessManager in this application, but I am not sure how to best implement it.

非常感谢那些可能已经通过或可能提供一些指导或示例的人，以感谢他们如何在WebEngine Quick Nano Browser中实施此操作.

Thanks to anyone who may have already gone through this or that may provide some guidance or an example to how implement this in the WebEngine Quick Nano Browser is very appreciated.

推荐答案

请勿使用示例 WebEngine Quick Nano浏览器，因为我认为这是不必要的，只会分散后台目标的注意力.

Do not use the example WebEngine Quick Nano Browser as I see it unnecessary and only distract from the background objective.

逻辑是了解Google登录的工作原理，在这种情况下，您必须找到一种方法来使用javascript获取DOM的元素，例如通过id，class，name等，并根据所需的逻辑对其进行修改.还要注意，URL会发生变化，因此在每个URL中都必须执行不同的脚本.

The logic is to understand how google login works, in this case you must find a way to obtain the elements of the DOM using javascript for example through id, class, name, etc. and modify it according to the desired logic. Also note that the url changes so that in each one a different script must be executed.

考虑到上述情况，解决方案是:

Considering the above, the solution is:

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自动输入用户名和密码的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！