[QT Network Cloud Disk Client]——ログインインターフェース機能の実装

目次

1. アカウントを登録する

2. サーバーのIPアドレスとポート番号の設定

3. ログイン機能

4. 設定ファイルを読み取ります。

5. メインインターフェイスを表示します

---

1. アカウントを登録する

1. 登録ページをクリックし、 ユーザー名、ニックネーム、パスワード、確認用パスワード、携帯電話番号、メールアドレスの入力ボックスにデータを入力します。

「OK」をクリックして、スロット関数 on_reg_but_clicked をトリガーします。

2.on_reg_but_clicked は、各入力ボックスのデータ形式の正当性を検証します。たとえば、携帯電話番号は数字のみで構成できます。

正規表現を使ってチェックする

3. データに問題がない場合、クライアントは http リクエストをサーバーに送信します。

POST http://119.23.41.13:80/register HTTP/1.1
Content-Type: application/json

{
    "email": "[email protected]",  //邮箱
    "firstPwd": "e10adc3949ba59abbe56e057f20f883e",//密码，用md5值进行加密
    "nickName": "lisi", //昵称
    "phone": "13727989171", //电话号码
    "userName": "lisi"  //用户名
}

サーバーの応答:

"code":	"002" //账号注册成功
"code":	"003" //用户已经存在
"code":	"004" //账号注册失败

 成し遂げる：

//注册框的流程
void Dialog::on_reg_but_clicked()
{
        /*
          1.获取输入框中的数据
          2.校验数据格式是否正确
          3.封装http请求，发送http请求
          4.接收http响应，处理http响应
        */
        QString usr=ui->usr_edit->text();
        QString nickname=ui->nickname_edit->text();
        QString password=ui->pasword_edit2->text();
        QString confirmpassword=ui->confirm_edit->text();
        QString mail=ui->mailbox_edit->text();
        QString phone=ui->phone_edit->text();
        QRegExp reg(USER_REG);

        //校验账号的规则
        if(!reg.exactMatch(usr))
        {
            //校验失败
            QMessageBox::warning(this,"警告","输入的账号格式有误");
            return;
        }

        reg.setPattern(PASSWD_REG);
        if(!reg.exactMatch(password)){
            QMessageBox::warning(this,"警告","输入的密码格式有误");
            return;
        }

        reg.setPattern(EMAIL_REG);
        if(!reg.exactMatch(mail)){
            QMessageBox::warning(this,"警告","输入的邮箱格式有误");
            return;
        }

        reg.setPattern(PHONE_REG);
        if(!reg.exactMatch(phone)){
            QMessageBox::warning(this,"警告","输入的手机号码格式有误");
            return;
        }

        if(confirmpassword!=password){
            QMessageBox::warning(this,"警告","确认密码不匹配");
            return;
        }

        //
        QNetworkAccessManager* manger=new QNetworkAccessManager();
        //封装http请求
        QNetworkRequest request;
        //从配置文件中获取到ip地址和port端口号
        QString ip=Common::getInstant()->getConfValue("web_server","ip");
        QString port=Common::getInstant()->getConfValue("web_server","port");
        QString url=QString("http://%1:%2/register").arg(ip).arg(port);
        request.setUrl(QUrl(url));
       //设置文件类型
        request.setHeader(QNetworkRequest::ContentTypeHeader,QVariant("application/json"));
        //将data数据以QJson的格式发送给服务器

        QJsonObject object;
        object.insert("email", mail);//邮箱
        object.insert("userName", usr);//账号
        object.insert("phone", phone);
        object.insert("nickName", nickname);
        object.insert("firstPwd", m_common->getStrMd5(password));
        QJsonDocument doc(object);

        QByteArray data=doc.toJson();
        //发送数据
        QNetworkReply* rely=manger->post(request,data);
        connect(rely,&QNetworkReply::readyRead,this,[=]{
            //响应到达,读取所有的数据
            QByteArray s=rely->readAll();
             qDebug() << "服务器返回数据:" << QString(s);
             //将s数据转换为Json对象
              QJsonParseError err;
             QJsonDocument document=QJsonDocument::fromJson(s,&err);

            if(err.error!=QJsonParseError::NoError){
                qDebug()<<"QJson格式错误";
                return;
            }
            //将QJson字符串转换为QJson对象
            QJsonObject object1;
            object1=document.object();

            //获取状态码
            QString value1=object1["code"].toString();
            if(value1=="002"){
                QMessageBox::information(this,"提示","账号注册成功");
            }

            if(value1=="003"){
                QMessageBox::warning(this,"警告","该账号已经存在");
            }

            if(value1=="004"){
                QMessageBox::critical(this,"注册失败","注册失败");
            }
             rely->deleteLater();
       });
}

2. サーバーのIPアドレスとポート番号の設定

 

1. [OK] ボタンをクリックして、サーバーの IP およびポート番号の情報を取得します。

2. サーバーの形式とポート番号を検証し、検証が成功したら、サーバーの IP アドレスとポート番号をcfg.json構成ファイルに書き込みます。

 

 //点击服务器设置页的按钮，将ip地址和端口写入到配置文件中
void Dialog::on_ok_button_clicked()
{
    QString ip=ui->ip_edit->text();
    QString port=ui->port_eidt->text();
    QRegExp reg(IP_REG);
    //校验账号的规则
    if(!reg.exactMatch(ip))
    {
        //校验失败
        QMessageBox::warning(this,"警告","输入的IP地址有误");
        return;
    }

     reg.setPattern(PORT_REG);
    //校验账号的规则
    if(!reg.exactMatch(port))
    {
        //校验失败
        QMessageBox::warning(this,"警告","输入的端口号有误");
        return;
    }

    m_common->writeWebInfo(ip,port);
    QMessageBox::warning(this,"提示","配置成功");
    ui->stackedWidget->setCurrentWidget(ui->login_page);
    return;
}


// 将服务器的ip和port写入到配置文件
void Common::writeWebInfo(QString ip, QString port, QString path)
{

    QMap<QString,QVariant> web_server;
    web_server.insert("ip",ip);
    web_server.insert("port",port);

    QString usr_base64=getConfValue("login","user");
    QString pwd_base64=getConfValue("login","pwd");
    QString remember=getConfValue("login","remember");

    QMap<QString,QVariant> login;
    login.insert("user",usr_base64);
    login.insert("pwd",pwd_base64);
    login.insert("remember",remember);

    QMap<QString, QVariant> json;
    json.insert("web_server", web_server);
    json.insert("login", login);

    QJsonDocument jsonDocument = QJsonDocument::fromVariant(json);
    if ( jsonDocument.isNull() == true)
    {
        qDebug() << "QJsonDocument::fromVariant错误";
        return;
    }

    QFile file(CONF_FILE);
    if(!file.open(QFile::WriteOnly)!=0)
    {
            qDebug()<<"打开文件失败";
            return;
    }

    file.write(jsonDocument.toJson());
    file.close();

    qDebug()<<"配置成功";
}

 

3. ログイン機能

 1. クリックしてログインし、ユーザー名とパスワードを取得します。

2.ユーザー名とパスワードの形式が正当であることを確認し、正当であれば、http リクエストをサーバーに送信します。

POST http://119.23.41.13:80/login HTTP/1.1
Content-Type: application/json

{
    "pwd": "e10adc3949ba59abbe56e057f20f883e", //密码，用md5进行加密
    "user": "zhangsan"                         //用户名
}

http 応答:

//登录成功的响应
HTTP/1.1 200 OK

{
	"code":	"000",
	"token":	"86569b8a537abf45acbb811f0244a69e"
}

//登录失败的响应
HTTP/1.1 200 OK

{
	"code":	"001",
}

ログインに成功した後:

1. クライアントはサーバーにアクセスするたびに、その ID を検証するためにトークンを追加する必要があるため、トークンを保存する必要があります。

2. logininfoinstanceインスタンス オブジェクトを作成し、後で読み取るためにユーザー名、トークン、サーバー IP、およびポート番号をlogininfoinstanceに保存します。

3. ユーザーの ユーザー名とパスワードを cfg.json ファイル に書き込む必要があり ます。漏洩を防ぐために、ユーザー名とパスワードは 2 回暗号化する必要があります (最初は desc 暗号化、次に Base64 暗号化)。 

4. メインインターフェイスの作成とメインインターフェイスの表示 

コード： 

//登录按钮
void Dialog::on_login_toolButton_clicked()
{
    qDebug()<<"登录";
    //获取账号密码
    QString account=ui->account_edit->text();
    QString password=ui->password_edit->text();

    //
    QRegExp reg(USER_REG);

    //校验账号的规则
    if(!reg.exactMatch(account))
    {
        //校验失败
        QMessageBox::warning(this,"警告","输入的账号格式有误");
        return;
    }

    reg.setPattern(PASSWD_REG);

    if(!reg.exactMatch(password)){
        QMessageBox::warning(this,"警告","输入的密码格式有误");
        return;
    }

    //封装http请求
    QNetworkRequest request;
    //从配置文件中获取到ip地址和port端口号

    QString ip=Common::getInstant()->getConfValue("web_server","ip");
    QString port=Common::getInstant()->getConfValue("web_server","port");
    QString url=QString("http://%1:%2/login").arg(ip).arg(port);//设置登录的url
    request.setUrl(QUrl(url));

    //设置文件类型
    request.setHeader(QNetworkRequest::ContentTypeHeader,QVariant("application/json"));
    //将data数据以QJson的格式发送给服务器

    QJsonObject object;
    object.insert("user", account);
    object.insert("pwd",  m_common->getStrMd5(password));

    QJsonDocument doc(object);
    QByteArray data=doc.toJson();
    //发送数据
    QNetworkReply* rely=manger->post(request,data);
    connect(rely,&QNetworkReply::readyRead,this,[=]{
        //响应到达,读取所有的数据
        QByteArray s=rely->readAll();
         qDebug() << "服务器返回数据:" << QString(s);
         //将s数据转换为Json对象
         QJsonParseError err;
         QJsonDocument document=QJsonDocument::fromJson(s,&err);

        if(err.error!=QJsonParseError::NoError){
            qDebug()<<"QJson格式错误";
            return;
        }
        //将QJson字符串转换为QJson对象
        QJsonObject object1;
        object1=document.object();

        //获取状态码
        QString value1=object1["code"].toString();
        if(value1=="000"){

            //登录成功
            //0.获取token，将用户信息写入到logininstant中。
            //1.判断有没有记住密码，如果有记住密码，获取记住密码的状态
            //2.将账号和密码信息记录到配置文件中
            //3.显示登录成功页面（主页面）

             //获取token
            QString token=object1["token"].toString();
                qDebug()<<"token:"<<token;
            //获取token，将用户信息写入到logininstant中。
            saveLoginInfoData(account,token,ip,port);


            // QMessageBox::information(this,"登录成功","账号登录成功");
            //判断有没有记住密码
            bool checkBox=ui->rember_checkBox->isChecked();
            if(checkBox==false)
            {
                //没有记住密码直接清除密码框
                ui->password_edit->clear();
            }

            //将账号密码保存到配置文件中
            m_common->writeLoginInfo(account,password,checkBox);
            //获取

           showMainWindow(account);
        }

        if(value1=="001"){
            QMessageBox::warning(this,"警告","登录");
        }
    });
}

​
//common.h文件：
//将用户信息 写入到配置文件
void writeLoginInfo(QString user, QString pwd, bool isRemeber, QString path=CONF_FILE);

// 服务器信息写入到配置文件
void writeWebInfo(QString ip, QString port, QString path=CONF_FILE);

​相关接口（接口实现自行跳转项目链接去查看） 

4. 設定ファイルを読み取ります。

1. ログイン インターフェイスが作成されると、プログラムは最初にconf.json ファイルの内容を読み取り、アカウント番号とパスワード、サーバー IP、およびポート番号をログイン インターフェイスに書き込みます。
2. 
3. 設定ファイルの書き込み時にアカウント番号とパスワードが暗号化されるため、アカウント番号とパスワードを読み取るには、ログイン インターフェイスを表示する前に、 base64復号化とdesc 復号化が必要です。
4. desc の暗号化と復号化を行うには、des.c ファイルと des.h ファイルをプロジェクトに追加する必要があります

//读取配置文件信息，将账号密码，服务器端口号写到界面中
 void Dialog::readConf()
 {
     QString user_base64=m_common->getConfValue("login","user");
     QString pwd_base64=m_common->getConfValue("login","pwd");
     QString remember=m_common->getConfValue("login","remember");

     //对账号进行base64解密和desc解密
     QByteArray usr_des=QByteArray::fromBase64(user_base64.toLocal8Bit());
     unsigned char usr[1024]={0};
     int usr_len;
     //进行desc解密
     if(DesDec((unsigned char*)usr_des.data(),usr_des.length(),usr,&usr_len)!=0){
         qDebug()<<"desc解密失败";
     }

     //账号解密成功，将账号显示到登录窗口
     QString s=QString::fromLocal8Bit((const char*)usr,usr_len);
     ui->account_edit->setText(s);

     if(remember=="yes")
     {
         ui->rember_checkBox->setCheckState(Qt::Checked);
         //记住密码，将密码显示到密码框上
         QByteArray pwd_des=QByteArray::fromBase64(pwd_base64.toLocal8Bit());
         unsigned char pwd[1024]={0};
         int pwd_len=0;
         //进行desc解密
         if(DesDec((unsigned char*)pwd_des.data(),pwd_des.length(),pwd,&pwd_len)!=0){
             qDebug()<<"密码解密失败";
         }

         //账号解密成功，将账号显示到登录窗口
         QString s1=QString::fromLocal8Bit((const char*)pwd,pwd_len);
         ui->password_edit->setText(s1);
     }


    //将ip地址和端口号显示到服务器设置页面
     QString ip=m_common->getConfValue("web_server","ip");
     QString port=m_common->getConfValue("web_server","port");

     ui->ip_edit->setText(ip);
     ui->port_eidt->setText(port);
 }

5. メインインターフェイスを表示します

ログインに成功すると、メイン ページが表示されます。

 

//创建主界面，并显示主界面
void Dialog::showMainWindow(QString account)
{
    //获取主页面
    mainwindow=MainWindow::getinstant();
    mainwindow->setUser(account);//将用户名显示到主页面上
    mainwindow->show();//显示主页面
    this->hide();//隐藏主页面
   
    connect(mainwindow,&MainWindow::switchUser,this,[=](){
        mainwindow->hide();
        this->show();
    });
}