Modernine TV
ชื่อผู้แจ้ง : ชื้อผู้แจ้งข่าว admin     สถานีฯ admin      เวลาที่แจ้งข่าว แจ้งวันที่ : 7 เมษายน 2561 เวลา 09:15:58      ถูกเปิดอ่านแล้ว 194 ครั้ง  194 / 0 ครั้ง   ลดขนาดตัวอักษร ลดขนาดตัวอักษร 
ประเภท : [ บทความ ]      Mini PC Control      NodeMCU      NodeMCU
ชื่อเรื่อง : NodeMCU ESP8266 ทำรหัสผ่าน User Login


เห็นมั้ย..เราก็พึ่งเรียนรู้ NodeMCU ESP8266
อยากสร้างรหัสผ่าน User Login ก็ค้นหามาเรียนรู้เอง

ทำระบบ Login ให้ Web Server ใน ESP8266 มีรหัสผ่าน Username และ Password  สำหรับจำกัดผู้ใช้ เพื่อความปลอดภัย ในการใช้งาน อุปกรณ์ควบคุมด้วย ESP6288 WEB Server

ที่มาจาก




#include <ESP8266WiFi.h>
#include <WiFiClient.h>
#include <ESP8266WebServer.h>

const char* ssid = "........";
const char* password = "........";

ESP8266WebServer server(80);

//Check if header is present and correct
bool is_authentified() {
  Serial.println("Enter is_authentified");
  if (server.hasHeader("Cookie")) {
    Serial.print("Found cookie: ");
    String cookie = server.header("Cookie");
    Serial.println(cookie);
    if (cookie.indexOf("ESPSESSIONID=1") != -1) {
      Serial.println("Authentification Successful");
      return true;
    }
  }
  Serial.println("Authentification Failed");
  return false;
}

//login page, also called for disconnect
void handleLogin() {
  String msg;
  if (server.hasHeader("Cookie")) {
    Serial.print("Found cookie: ");
    String cookie = server.header("Cookie");
    Serial.println(cookie);
  }
  if (server.hasArg("DISCONNECT")) {
    Serial.println("Disconnection");
    server.sendHeader("Location", "/login");
    server.sendHeader("Cache-Control", "no-cache");
    server.sendHeader("Set-Cookie", "ESPSESSIONID=0");
    server.send(301);
    return;
  }
  if (server.hasArg("USERNAME") && server.hasArg("PASSWORD")) {
    if (server.arg("USERNAME") == "admin" &&  server.arg("PASSWORD") == "admin") {
      server.sendHeader("Location", "/");
      server.sendHeader("Cache-Control", "no-cache");
      server.sendHeader("Set-Cookie", "ESPSESSIONID=1");
      server.send(301);
      Serial.println("Log in Successful");
      return;
    }
    msg = "Wrong username/password! try again.";
    Serial.println("Log in Failed");
  }
  String content = "<html><body><form action='/login' method='POST'>To log in, please use : admin/admin<br>";
  content += "User:<input type='text' name='USERNAME' placeholder='user name'><br>";
  content += "Password:<input type='password' name='PASSWORD' placeholder='password'><br>";
  content += "<input type='submit' name='SUBMIT' value='Submit'></form>" + msg + "<br>";
  content += "You also can go <a href='/inline'>here</a></body></html>";
  server.send(200, "text/html", content);
}

//root page can be accessed only if authentification is ok
void handleRoot() {
  Serial.println("Enter handleRoot");
  String header;
  if (!is_authentified()) {
    server.sendHeader("Location", "/login");
    server.sendHeader("Cache-Control", "no-cache");
    server.send(301);
    return;
  }
  String content = "<html><body><H2>hello, you successfully connected to esp8266!</H2><br>";
  if (server.hasHeader("User-Agent")) {
    content += "the user agent used is : " + server.header("User-Agent") + "<br><br>";
  }
  content += "You can access this page until you <a href=\"/login?DISCONNECT=YES\">disconnect</a></body></html>";
  server.send(200, "text/html", content);
}

//no need authentification
void handleNotFound() {
  String message = "File Not Found\n\n";
  message += "URI: ";
  message += server.uri();
  message += "\nMethod: ";
  message += (server.method() == HTTP_GET) ? "GET" : "POST";
  message += "\nArguments: ";
  message += server.args();
  message += "\n";
  for (uint8_t i = 0; i < server.args(); i++) {
    message += " " + server.argName(i) + ": " + server.arg(i) + "\n";
  }
  server.send(404, "text/plain", message);
}

void setup(void) {
  Serial.begin(115200);
  WiFi.mode(WIFI_STA);
  WiFi.begin(ssid, password);
  Serial.println("");

  // Wait for connection
  while (WiFi.status() != WL_CONNECTED) {
    delay(500);
    Serial.print(".");
  }
  Serial.println("");
  Serial.print("Connected to ");
  Serial.println(ssid);
  Serial.print("IP address: ");
  Serial.println(WiFi.localIP());


  server.on("/", handleRoot);
  server.on("/login", handleLogin);
  server.on("/inline", []() {
    server.send(200, "text/plain", "this works without need of authentification");
  });

  server.onNotFound(handleNotFound);
  //here the list of headers to be recorded
  const char * headerkeys[] = {"User-Agent", "Cookie"} ;
  size_t headerkeyssize = sizeof(headerkeys) / sizeof(char*);
  //ask server to track these headers
  server.collectHeaders(headerkeys, headerkeyssize);
  server.begin();
  Serial.println("HTTP server started");
}

void loop(void) {
  server.handleClient();
}





เราก็ไม่ได้เก่ง เราเรียนจบไฟฟ้า อย่ามาคาดหวังจากเรามาก
เราจะแนะนำวิธีสร้าง Code ของเรา แบบงูๆปลาๆ... เด้อออ
เราก็พึ่งเรียนรู้ ESP8266  พึ่งจะใช้งาน  ก็ค้นหา Code มาทดลองใช้งาน
ถอดสคริปต์ Code พบว่า ใช้งาน Cookie ง่ายๆ ก็เอามาทดลองใช้งานดู





ถอด Code ออกมา ในบรรทัดที่ 43 จะเห็นรหัสผ่าน

- USERNAME = admin 
- PASSWORD = admin





คัดลอก Code มาทดลองใช้งาน
- ผมตั้งชื่อไฟล์ ว่า login_cookie
- อย่าลืมใส่ ชื่อ SSID WiFi และ Password WiFi ของท่าน ลงใน Code
- แล้วคลิก Upload โลดดดด





ต่อสาย USB แล้วเลือก Port ให้ตรงกัน
แล้ว Upload Code เข้าไปใน ESP8266 ง๊ายง่าย





ดูผลใน  Tools > Serial Monitor




เปิดใช้งาน WEB Server ของ NodeMCU ESP8266

ใช้มือถือสมาร์ทโฟน เข้า ip = 192.168.1.36
เป็น ip ที่ ESP8266 ของผม เข้าสู่ระบบเป็นประจำ

ป้อนรหัส
Username = admin
Password = admin

คลิกปุ่ม Submit
จะเข้าสู่ระบบได้เรียบร้อย





ที่เรามาบอก เพราะเราก็คัดลอก Code ของเขามาศึกษา เช่นกัน
เราไม่ได้เก่งมาแต่เกิด เราก็บอกตรงๆ ให้สหายพยายามศึกษาสิ

- คลิก disconnect เพื่อยกเลิก Cookie ไม่ให้จำค่าเดิม

- ทดลองป้อนระหัสมั่วๆ (ทดสอบการเข้าไม่ได้)

- จะไม่สามารถเข้าไปในเพจได้

- แสดงว่าระบบ Login ใช้งานได้จริง







วิธีถอด Code มาดัดแปลงใช้งาน

ในตัวอย่าง สังเกตุบรรทัดที่ 54 ถึง บรรทัดที่ 59
จะเป็น Code แสดง HTML ของหน้าเพจ Login Page





สหายบอก... เอาความลับไปเผยให้คนอื่นรู้หมด 55
เราไม่ได้มีความลับ เราไม่เก่ง แต่บอกวิธีคิดของเรา น่ะเซ่





ปรับแต่งหน้าเพจ LOGIN ให้สวยงามขึ้น





เนี่ยงัย...ผลที่ได้ สวยงามตามใจเรา




Code ที่แทรกเข้าไปใหม่

===============================================

#include <ESP8266WiFi.h>
#include <WiFiClient.h>
#include <ESP8266WebServer.h>

const char* ssid = "...............";
const char* password = "...............";

ESP8266WebServer server(80);

//Check if header is present and correct
bool is_authentified() {
  Serial.println("Enter is_authentified");
  if (server.hasHeader("Cookie")) {
    Serial.print("Found cookie: ");
    String cookie = server.header("Cookie");
    Serial.println(cookie);
    if (cookie.indexOf("ESPSESSIONID=1") != -1) {
      Serial.println("Authentification Successful");
      return true;
    }
  }
  Serial.println("Authentification Failed");
  return false;
}

//login page, also called for disconnect
void handleLogin() {
  String msg;
  if (server.hasHeader("Cookie")) {
    Serial.print("Found cookie: ");
    String cookie = server.header("Cookie");
    Serial.println(cookie);
  }
  if (server.hasArg("DISCONNECT")) {
    Serial.println("Disconnection");
    server.sendHeader("Location", "/login");
    server.sendHeader("Cache-Control", "no-cache");
    server.sendHeader("Set-Cookie", "ESPSESSIONID=0");
    server.send(301);
    return;
  }
  if (server.hasArg("USERNAME") && server.hasArg("PASSWORD")) {
    if (server.arg("USERNAME") == "admin" &&  server.arg("PASSWORD") == "admin") {
      server.sendHeader("Location", "/");
      server.sendHeader("Cache-Control", "no-cache");
      server.sendHeader("Set-Cookie", "ESPSESSIONID=1");
      server.send(301);
      Serial.println("Log in Successful");
      return;
    }
    msg = "Wrong username/password! try again.";
    Serial.println("Log in Failed");
  }
  
  String content = "<html>\r\n";
  content += "<head>\r\n";
  content += "<meta name=\"viewport\" content=\"width=device-width, initial-scale=1, user-scalable=no\"/>";
  content += "<STYLE TYPE=\"text/css\">\r\n";
  content += "BODY {COLOR: #000000; FONT: 60px; font-family: arial,sans-serif; TEXT-DECORATION: none; TEXT-TRANSFORM: none; margin: 0 auto; position: relative;}\r\n";
  content += "input{font-family: arial,sans-serif;font-size:1.0em; border-radius: 6px ; padding:5px ; border:0.5; width: 90%;}\r\n";
  content += "#button3{font-family: arial,sans-serif;font-size: 1.0em;color: #FFFFFF;padding: 6px;text-align: center;background-color: #4CAF50; border:0;border-radius: 6px; width: 50%;}\r\n";
  content += "</STYLE>\r\n";
  content += "</head>\r\n";
  content += "</head>\r\n";
  content += "<body>\r\n";
  content += "<br><b><center>";
  content += "LOGIN for User";
  content += "</center><br>";      
  content += "<form action='/login' method='POST'>\r\n";
  content += "<center><input type='text' name='USERNAME' placeholder=\"USER :\"><br>\r\n";
  content += "<p><input type='password' name='PASSWORD' placeholder=\"PASSWORD :\"></center></p>\r\n";
  content += "<p><center><button id=\"button3\">SUBMIT</button></center></p>\r\n";
  content += "</form>\r\n";
  content += "<center>" + msg + "<br>";    
  content += "You also can go <a href='/inline'>Click here</a></center></body></html>";

  server.send(200, "text/html", content);
}

//root page can be accessed only if authentification is ok
void handleRoot() {
  Serial.println("Enter handleRoot");
  String header;
  if (!is_authentified()) {
    server.sendHeader("Location", "/login");
    server.sendHeader("Cache-Control", "no-cache");
    server.send(301);
    return;
  }
  String content = "<html><body><H2>hello, you successfully connected to esp8266!</H2><br>";
  if (server.hasHeader("User-Agent")) {
    content += "the user agent used is : " + server.header("User-Agent") + "<br><br>";
  }
  content += "You can access this page until you <a href=\"/login?DISCONNECT=YES\">disconnect</a></body></html>";
  server.send(200, "text/html", content);
}

//no need authentification
void handleNotFound() {
  String message = "File Not Found\n\n";
  message += "URI: ";
  message += server.uri();
  message += "\nMethod: ";
  message += (server.method() == HTTP_GET) ? "GET" : "POST";
  message += "\nArguments: ";
  message += server.args();
  message += "\n";
  for (uint8_t i = 0; i < server.args(); i++) {
    message += " " + server.argName(i) + ": " + server.arg(i) + "\n";
  }
  server.send(404, "text/plain", message);
}

void setup(void) {
  Serial.begin(115200);
  WiFi.mode(WIFI_STA);
  WiFi.begin(ssid, password);
  Serial.println("");

  // Wait for connection
  while (WiFi.status() != WL_CONNECTED) {
    delay(500);
    Serial.print(".");
  }
  Serial.println("");
  Serial.print("Connected to ");
  Serial.println(ssid);
  Serial.print("IP address: ");
  Serial.println(WiFi.localIP());


  server.on("/", handleRoot);
  server.on("/login", handleLogin);
  server.on("/inline", []() {
    server.send(200, "text/plain", "this works without need of authentification");
  });

  server.onNotFound(handleNotFound);
  //here the list of headers to be recorded
  const char * headerkeys[] = {"User-Agent", "Cookie"} ;
  size_t headerkeyssize = sizeof(headerkeys) / sizeof(char*);
  //ask server to track these headers
  server.collectHeaders(headerkeys, headerkeyssize);
  server.begin();
  Serial.println("HTTP server started");
}

void loop(void) {
  server.handleClient();
}





ปรับแต่งหน้าเพจใหม่ ไฉไลกว่าเดิม...
เชื่อมต่อเข้าเซิร์ฟเวอร์ด้วยมือถือสมาร์ทโฟน
จะพบกับระบบ Login ให้ลงทะเบียนเพื่อความปลอดภัย





เมื่อเรานำมาใช้งาน ทำการล็อกอินเข้าไปแล้ว จะเข้าสู่ระบบควบคุม ได้

บางคนก็มาถามเราว่า
- ทำเว็บเพจ ให้ควบคุมได้ ใช้งานจริง ยังไง
- ทำปุ่มที่เป็นกรอบสี่เหลี่ยมมีมุมโค้งมนแบบนี้ ยังไง ??
- ทำหน้า WebPage Fixed หน้าจอ บนมือถือ ยังไง ??
- ทำปุ่ม ON-OFF มีสีสัน ยังไง ??
- ทำช่องกรอกข้อมูล Input Box สวยๆ ยังไง ??

เราก็ค้นหาเรียนรู้มา แต่เราไม่มีเวลามาเรียบเรียงแนะนำ เน้ออ 55





ออกแบบระบบ Login และ Logout ไว้ด้วยนะ
เอาไว้สร้าง Cookie และ ลบ Cookie ได้





   งานต่อไป กำหนด Address บันทึกความจำไว้ใน EEPROM เราต้องมาวางแผนกำหนด Address ต่างๆ ใช้เก็บข้อมูลต่างๆตามที่เราต้องการ สำหรับออกแบบโปรแกรมให้เรียกข้อมูลมาใช้งาน และให้ผู้ใช้งานสามารถใส่ข้อมูลบันทึกลงไปใน ESP8266 ได้ด้วยตัวเอง เราก็ต้องเรียนรู้เพิ่มเติมเรื่อง EEPROM กันต่อไป เอิ้กๆ




เขียนบทความมาเยอะ พักสมองบ้าง ว่างๆออกมาตัดหญ้า





เราปลูกพืชใส่กระถางไว้ ก็ยังมีต้นหญ้าปกคลุม





ตะไคร้ปลูกใส่กระถางเล็กๆ แค่นี้เรายังได้ขุดกินนะ





    เรามีที่ดินแค่นี้ ก็ดูแลทำความสะอาดได้ไม่ลำบาก คนอื่นจะดิ้นรนหาซื้อที่ดินเยอะแย๊ะ แล้วมาบ่นว่าลำบากที่ต้องมาดูแลที่ดินในสวน ไม่มีเวลาทำโน่น นี่ นั่น? จนไม่มีเวลามาพัฒนางานของตัวเอง หากทำโครงงานไม่เป็น ไม่ร่วมมือกันจริง ก็ไม่ต้องมาแก้ตัวกับเราหร้อกเน้าะ เอิ้กๆ




ตัดหญ้าใหม่ ไฉไลกว่าเดิม
ตัวเราก็มีเวลาทำอย่างอื่นได้ ชีวิตไม่จำเจ เน๊าะ





ดูแลตกแต่งสวน ก็เป็นการพักผ่อนหย่อนใจ เน๊าะ




จัดทำโดย คณะเจ้าหน้าที่บริษัท อสมท จำกัด ( มหาชน ) ผู้มีโอกาสเข้าร่วมอบรมเทคโนโลยีดิจิตอล ณ ประเทศญี่ปุ่น