ESP32-Web-Server编程- 实现 Web 登录网页

概述

是时候实现更加安全的网页了。登录机制是最简单的控制网页访问权限的方法。

需求及功能解析

本节演示如何在 ESP32 上部署一个 Web 服务器，并建立登录页面的机制，用户可以实现登录、登出的功能，控制通过网页访问 ESP32 的内部信息的权限。

目录结构

├── CMakeLists.txt
├── main
│   ├── CMakeLists.txt
│   └── main.c                 User application
├── components
│   └── fs_image
└── README.md                  This is the file you are currently reading

• 目录结构主要包含主目录 main，以及组件目录 components.
• 其中组件目录components中包含了用于存储网页文件的 fs_image 目录（即前述前端文件）。

前端代码

登录机制的实现主要是在 JS 文件内。首先在 components/fs_image/web_image/js/index.js 中设置了检查函数，通过检查 是否使能了 login_user，来判断是否跳转到登录界面 login.html.

$(function(){
	if(!sessionStorage.getItem('login_user')){
		window.location = "./login.html";
	}
	$("#logout").click(function(){
		var xhr = new XMLHttpRequest();
        xhr.open("GET", "./logout", true);
        xhr.send();
        setTimeout(function(){ window.open("/logged-out","_self"); }, 1000);
	})
})

然后在 components/fs_image/web_image/login.html 中设计登录界面，登录界面包含登录需要的 logemail、password 输入框，和登录提交 submit 按钮。

<div class="form-group">
    <input type="email" name="logemail" class="form-style" placeholder="账号" id="loginuser" autocomplete="off">
    <i class="input-icon uil uil-at"></i>
</div>	
<div class="form-group mt-2">
    <input type="password" name="logpass" class="form-style" placeholder="密码" id="loginpwd" autocomplete="off">
    <i class="input-icon uil uil-lock-alt"></i>
</div>
<a href="#" id="submit" class="btn mt-4">提交</a>

在点击提交时，会触发 components/fs_image/web_image/js/login.js 中的提交帐号、密码的函数 submit().

后端代码

后端代码主要是增加了校验前端网页提交的帐号、密码的函数 login_post_handler()。

{"/loginpwd", HTTP_POST, login_post_handler, rest_context},

在该函数中，接收推动数据，并解析推送数据中的帐号、密码：

static esp_err_t login_post_handler(httpd_req_t* req)
{
    char user[USER_NAME_MAX_LEN];
    char password[PASSWORD_MAX_LEN];
    char* buf = ((rest_server_context_t*) (req->user_ctx))->scratch;
    int str_len = 0;
    if (recv_post_data(req, buf) != ESP_OK) {
        web_response_error(req, HTTPD_500);
        ESP_LOGE(TAG, "recv post data error");
        goto error_handle;
        return ESP_FAIL;
    }

    str_len = httpd_find_arg(buf, "loginuser", (char *)user, sizeof(user), false);
    if ((str_len == -1) || (strlen((char *)user) == 0)) {
        ESP_LOGE(TAG, "user is abnormal");
        goto error_handle;
    } else {
        if (web_str_check(user, web_user_name) != true) {
            ESP_LOGE(TAG, "user_name is wrong");
            goto error_handle;
        }
    }

    str_len = httpd_find_arg(buf, "loginpwd", (char *)password, sizeof(password), false);
    if ((str_len == -1) || (strlen((char *)password) == 0)) {
        ESP_LOGE(TAG, "loginpwd is abnormal");
        goto error_handle;
    } else {
        if (web_str_check(password, web_pwd) != true) {
            ESP_LOGE(TAG, "loginpwd is wrong");
            goto error_handle;
        }
    }
    
    web_response_OK(req);
    return ESP_OK;
error_handle:
    web_response_error(req, HTTPD_400);
    return ESP_FAIL;
}

默认帐号、密码是：

static char web_user_name[USER_NAME_MAX_LEN] = "laowang";
static char web_pwd[PASSWORD_MAX_LEN] = "esp32";

示例效果

点击右上脚的“退出”按钮，可以退出该网页:

讨论

总结

1）本节主要是介绍在 ESP32 Web 上部署登录、登出功能的网页，通过登录机制，可以控制访问 ESP32 Web 的权限。

资源链接

1）ESP32-Web-Server ESP-IDF系列博客介绍
2）对应示例的 code 链接 （点击直达代码仓库）

3）下一篇：

(码字不易感谢点赞或收藏)