ایجاد فرم ورود به وبسایت با کتابخانه‌ی chilkat

[سید محمد عباسی 14]

 

در این آموزش با کمک کتابخانه‌ی  chilkat که در اینجا معرفی شده است،‌ وارد حساب کاربری خود در iostream می‌شویم!. فرم را می‌توانید به سلیقه‌ی خود طراحی کنید . که فرم ورود به این صورت است.

کد:

import QtQuick 2.12
import QtQuick.Controls 2.12
import QtQuick.Window 2.12
import QtQuick.Dialogs 1.2
import QtQuick.Controls.Material 2.3
ApplicationWindow{
    id:window
    width: 300
    height: 350
    title: "فرم ورود"
    visible: true
    flags: Qt.FramelessWindowHint | Qt.Window
    x:  Screen.width / 2 - width / 2
    y:  Screen.height / 2 - height / 2
    header: Label{
        id: header
        color: "#fff"
        text: "iostream"
        font.family: "Times New Roman"
        font.pointSize: 40
        topPadding: -5
        verticalAlignment: Text.AlignVCenter
        horizontalAlignment: Text.AlignHCenter
        background: Rectangle{
            color: "#23ab85"

        }
    }
    Button {
        id: close
        x: 0
        y: -6
        width: 34
        height: 45
        icon.name: "close-icon"
        icon.source: "qrc:/cancel.png"
        icon.color: "red"
        highlighted: true
        Material.accent: Material.shade("#fff",Material.Shade100)
        onClicked: window.close()
    }
    Item {
        MessageDialog{
          id:message
          title: "خطا"
          visible: false
        }
        anchors.fill: parent
        TextField {
            id: email
            x: 60
            y: 30
            width: 180
            font.pointSize: 15
            font.family: "Times New Roman"
            placeholderText: "نام کاربری یا ایمیل"
            Material.accent: Material.Green
        }
        TextField {
            id: password
            x: 60
            y: 80
            width: 180
            font.pointSize: 15
            font.family: "Times New Roman"
            placeholderText: "گذر واژه"
            Material.accent: Material.Green
            echoMode: TextField.Password
        }
        Button {
            id: _login
            x: 55
            y: 140
            width: 186
            height: 50
            text: "ورود "
            highlighted: true
            font.pointSize: 15
            font.family: "Times New Roman"
            topPadding: 3
            Material.accent: Material.shade("#3e4148",Material.Shade500)
            onClicked: {
                if(Login.login(email.text,password.text)){
                    userpanle._url=Login.panle()
                    userpanle.visible=true
                }
                else{
                    message.text="ورود ناموفق بود!"
                    message.visible=true
                }
            }
        }
    }
    footer: Label{
        text: "جامعه‌ی‌ برنامه‌نویسان مٌدرن ایران"
        color: "#fff"
        height: 50
        topPadding: -6
        verticalAlignment: Text.AlignVCenter
        horizontalAlignment: Text.AlignHCenter
        font.pointSize: 18
        font.family: "Times New Roman"
        background: Rectangle{
            color: "#23ab85"
        }
    }
   UserPanle{id: userpanle; visible: false;}
}

اکنون یک کلاس ایجاد کنید که بتوانیم درخواست‌های خود را ارسال کنیم!. در اینجا کلاس Login و دارای دو متد ‌login و userPanel است. 

#ifndef LOGIN_H
#define LOGIN_H

#include <QObject>
#include <QDesktopServices>
#include <QUrl>
#include <CkHttp.h>
#include <CkHttpRequest.h>
#include <CkHttpResponse.h>
class Login : public QObject
{
    Q_OBJECT
public:
    explicit Login(QObject *parent = nullptr);
    Q_INVOKABLE bool login(const QString & email_username,const QString & password);
    Q_INVOKABLE QString userPanel();
signals:
public slots:
private:
    QString m_finalRedirectUrl;
    CkHttp m_http;
};

#endif // LOGIN_H

متد login دو آرگومان ورودی دریافت می‌کند:

۱.نام کاربری یا ایمیل

2. گذرواژه 

این درمورد بعضی از وبسایت‌ها صدق نمی‌کند!.یعنی علاوه پُر کردن فیلد‌های خواسته شده، فیلد‌های دیگری را هم باید پُر  کنید تا به شما اجازه ورود بدهند!.

متد دوم مربوط به صحفه‌ای است که ما درخواست کرده‌ایم و نتیجه برگشت داده می‌شود!. در ادامه بیشتر توضیح خواهم داد.

تابع login را به این صورت تکمیل می‌کنیم!.

#include "login.h"
#include <QDebug>
Login::Login(QObject *parent) : QObject(parent)
{
    if(m_http.UnlockComponent("30-day trial")!=true)
        qDebug()<<m_http.lastErrorText();
}
bool Login::login(const QString &emailـusername, const QString &password)
{
    m_request.AddParam("auth",emailـusername.toUtf8());
    m_request.AddParam("password",password.toUtf8());
    m_request.put_Path("/login");
    CkHttpResponse* m_response;
    m_response= m_http.SynchronousRequest("www.iostream.ir",443,true,m_request);
    if(m_response->get_LastMethodSuccess()!=true)
    {
        qDebug()<<m_response->lastErrorText();
        return  false;
    }
    m_finalRedirectUrl= m_response->finalRedirectUrl();
    userPanel();
    delete m_response;
      return  true;
}

QString Login::userPanel()
{
   QDesktopServices::openUrl(QUrl(m_finalRedirectUrl));
   // return  m_finalRedirectUrl;
}

کلاس CkHttpRequest باید هر بار درخواستی را آماده، و سپس با متد SynchronousRequest از کلاس CkHttp ارسال کند. با استفاده از متد AddParam پارامتر ‌های لازم را اضافه می‌کنیم، مرورگر خود را باز کنید وارد صحفه‌ی ورود به حساب کاربری ‌شوید،‌ بر روی فیلد اول(نام کاربری یا ایمیل) کلیک راست کرده و گزینه Inspect را انتخاب کنید. تگ مربوط به این فیلد نمایش داده می‌شود.

<input type="text" placeholder="نام کاربری یا ایمیل" name="auth" id="auth" value="*************">

و فیلد دوم(گذرواژه) هم به همین صورت.

<input type="password" placeholder=" گذرواژه" name="password" id="password" value="********">

فرض بر این گرفته می شود شما با HTML  آشنایی دارید!.

متد AddParam دو ارگومان ورودی دریافت می‌کند:

1.نام فیلد 

2.مقدار فیلد

به ویژگی نام(name) دقت کنید،‌ با این ویژگی و نامی که برای آن انتخاب می‌کنیم می‌توانیم به مقدار(value) آن دسترسی داشته باشیم! پس  ورودی اول متد AddParam برابر با نام فیلد می‌شود(auth) و ورودی دوم هم مقدار فیلد است،‌ که در اینجا مقادیر از پارامتر‌های تابع ‌login دریافت می‌شوند.

با متد put_Path مسیر صحفه‌ی مورد نظر را مشخص می‌کنیم، که صحفه‌ی مورد نظر ما ‌login/ است. از کلاس CkHttpResponse  برای دریافت پاسخ استفاده می‌کنیم، هنگامی که ما درخواستی را ارسال می‌کنیم، یک پاسخ در قالب یک شئ از کلاس ‌CkHttpResponse برگشت داده می‌شود. پاسخ می‌تواند موفقیت آمیز باشد یا نباشد! که این مورد می‌تواند با متد get_LastMethodSuccess بررسی شود.

در نهایت درخواست خود را ارسال می‌کنیم! متد SynchronousRequest چهار آرگومان ورودی دریافت می‌کند:

1.نام میزبان 

2.پورت ورودی 

3.تایید کردن یا نکردن گواهینامه‌ی ‌ssl

4.درخواستی را که از قبل اماده کرده‌ایم

نام میزبان در این مثال www.iostream.ir است.

پورت ورودی 443 است که پروتکل ‌HTTPS از ان استفاده می‌کند.

می‌توانید تایید کنید که اطلاعات شما بصورت رمزنگاری شده فرستاده شوند یا نه.

درخواستی را که از قبل اماده کردیم  m_request.

با استفاده از متد finalRedirectUrl اخرین صحفه‌ای که کاربر منتقل شده است برگشت داده می‌شود، که در متغییر m_finalRedirectUrl ذخیره خواهد شد. اکنون می توانیم با استفاده از متد openUrl از کلاس  QDesktopServices  ادرس صحفه‌ی ذخیره شده را در مرورگر باز کنیم!. 

 

یا می‌توانید از ‌‌ WebEngineView  در ‌qml  برای نمایش استفاده کنید. به این صورت:

import QtWebEngine 1.7
import QtQuick.Window 2.3
Window{
    width: 1000
    height: 600
    title: "userPanel"
    visible: true
    property string _url: ""
    WebEngineView{
        anchors.fill: parent
        url: _url
    }
}