nodeMCU 와이파이 스캔해서 AP이름과 비밀번호 알아오기

nodeMCU는 ESP8266 모듈이라 WiFi에 접속도 가능하고(Station mode), 스스로가 WiFi를 터뜨릴 수도(Soft AP mode) 있다.

목표 기능

(1) 와이파이 스캔이 가능하다.

(2) 스캔한 와이파이 목록 중에서 와이파이를 선택한 후, 비밀번호를 입력받는다.

(3) 아두이노 IDE, 즉 sktech에서 선택한 와이파이의 이름과 비밀번호를 확인할 수 있다.

Step1. 와이파이 스캔하기.

(1) 관련 헤더파일 추가

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

(2) 스캔 기능 추가

void scanWiFiList()
{
  int numberOfNetworks = WiFi.scanNetworks();
 
  for(int i =0; i<numberOfNetworks; i++){
      Serial.println(WiFi.SSID(i));
  }
}

void setup() {
  // put your setup code here, to run once:
  Serial.begin(9600);
  scanWiFiList();

}

void loop() {
  // put your main code here, to run repeatedly:

}

<출력결과>

근처에서 잡히는 모든 와이파이가 검색되어서 출력이 되는것을 확인할 수 있다.

목표기능 (1) 클리어.

Step2. 웹페이지 띄우기.

현재 아두이노에서만 출력 되었을 뿐, 사용자가 사용할 수 없다.

따라서 웹페이지를 띄워 AP를 선택하게 한다.

(1) softAP 모드로 실행하기 위해 ssid와 패스워드 정하기

#define WIFI_MAX_SIZE 30 //최대 30개의 AP 목록만 받아온다. 
const char* ssid = "KWE_Solution";
const char* password = "12345678";

(2) 서버 및 AP 목록을 담을 배열 선언

ESP8266WebServer server(80);
String wifiList[WIFI_MAX_SIZE];

(3) Soft AP 모드 실행

void setup() {
  // put your setup code here, to run once:
  Serial.begin(9600);
  scanWiFiList();

  WiFi.softAP(ssid, password);
  IPAddress myIP = WiFi.softAPIP();
  
  Serial.print("AP IP address: ");
  Serial.println(myIP);
  server.on("/", handleRoot);
  server.begin();
  Serial.println("HTTP server started");
}

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

(4) scanWifiList 함수 변경

void scanWiFiList()
{
  int numberOfNetworks = WiFi.scanNetworks();
 
  for(int i =0; i<numberOfNetworks; i++){
      wifiList[i] = WiFi.SSID(i);
  }
}

(5) 웹페이지 띄우기

void handleRoot()
{
  server.send(200, "text/html", prepareSelectWifiListPage());
}

String prepareSelectWifiListPage(){
  
  String strList ="<ul>";
  for(int i =0; i< WIFI_MAX_SIZE; i++){
      if(wifiList[i] != "")
      {
       strList += "<li><a name='" + wifiList[i] + "' onclick='select(this.name)'>" + wifiList[i] + "</a> </li>";
      }
  }
  strList += "</ul>";
  String apName = "";
  String apPw = "";
  
  String htmlPage =
     String("<!DOCTYPE HTML>") +
            "<html> <head>" +
            "<meta http-equiv=\"Content-Type\" Content=\"text/html; charset=utf-8\">\r\n" +
            "<meta name='viewport' content='width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no'>\r\n" + 
            "<title>WIFI 목록</title>\r\n"+
            "<style>\r\n"+
            ".a:hover{cursor:pointer;}\r\n"+
            "</style></head>\r\n"+
            "<body>\r\n"+
            "<h1>WiFi List</h1>\r\n"+
            "인증가능한 WiFi를 선택하세요. <br>\r\n"+
            "<div id='wifiList'>"+ strList + "</div>\r\n"
            "<div id='selected'></div>\r\n"
            "<div id='_pw'>\r\n"+
            "<form method='get' action='/action_page'>\r\n"+
            "<input type='text' id='ap' name='apName'> 을 선택하셨습니다. 아래에 비밀번호를 입력하세요. <br>\r\n"+
            "<input type='password' id='pw' name='apPw'> <input type='submit' value='connect'>\r\n"+
            "</form>\r\n"+
            "</div>\r\n"+
            "</body>\r\n"+
            "<script>\r\n"+
            "document.getElementById('_pw').style.visibility = 'hidden';\r\n"+
            "function select(apName){\r\n"+
            "document.getElementById('ap').value = apName;\r\n"+
            "document.getElementById('_pw').style.visibility = 'visible';\r\n"+
            "document.getElementById('pw').value = ''}\r\n"+
            "function connection(){ \r\n"+
            "var pw = document.getElementById('pw').value;\r\n"+
            "} \r\n"+ 
            "</script> \r\n"+
            "</html> \r\n";
  return htmlPage;
}

<출력결과>

와이파이에 내가 설정한 ssid가 적혀있는지 확인한다.

ssid를 선택한후, 내가 설정한 비밀번호를 입력하여 접속한다.

아두이노 화면

웹브라우저에서 아두이노에 적힌 192.168.4.1 로 접속한다.

위 목록에서 wifi를 선택하면 아래와 같이 비밀번호를 입력할 수 있는 창이 뜬다.

Step3. AP이름과 비밀번호 아두이노에서 받기.

이 부분은 html에 대한 지식이 필요하다.

form 태그를 통해 데이터를 수신할 것이다.

(1) 서버 시작시에 form 태그를 수신할 주소를 등록한다.

void setup(){
	server.on("/action_page", handleForm); //action_page에 접속하면 handleForm 함수를 실행한다.
}

(2) handleForm 함수 추가

void handleForm() {
 String apName = server.arg("apName"); 
 String apPw = server.arg("apPw"); 

 Serial.print("apName:");
 Serial.println(apName);

 Serial.print("apPw:");
 Serial.println(apPw);
 
 String s = "<a href='/'> Go Back </a>";
 server.send(200, "text/html", s); //Send web page
}

(3) prepareSelectWifiListPage() 함수 확인

이 부분에서 선택한 AP가 출력되는 부분과 패스워드를 입력받는 부분은 form 태그로 묶여있다.

따라서 connect버튼을 누르면 form태그 기능을 통해 /action_page 페이지로 넘어가면서 파라미터값을 받을 수 있게 되는 것이다.

"<form method='get' action='/action_page'>\r\n"+
  "<input type='text' id='ap' name='apName'> 을 선택하셨습니다. 아래에 비밀번호를 입력하세요. <br>\r\n"+
  "<input type='password' id='pw' name='apPw'> <input type='submit' value='connect'>\r\n"+
"</form>\r\n"+

<출력화면>

WiFi 리스트 조회.

WiFi 선택. 비밀번호 입력후, connect 버튼 클릭 시 action_page로 넘어가면서 아래와 같이 출력된다.

웹브라우저에 주소창을 보면 apName=smartfarm, apPw=1234567 을 확인할 수 있다.

아두이노 스케치 화면

handleForm 함수에서 인자값으로 들어온 apName, apPw값이 확인되는 것을 알 수 있다.

<또 해야할 것>

이 apName, apPW 값을 가지고 다시 STA 모드로 서버를 바로 열수있는 방법을 찾아봐야할 것.

참고자료

https://circuits4you.com/2019/03/20/esp8266-receive-post-get-request-data-from-website/

ESP8266 Node MCU Handling HTML web forms data | Circuits4you.com

In this tutorial we are getting data from web browser using HTML forms. ESP8266 is configured as server. When user clicks on button or text box data that we want to read it in ESP8266 (NodeMCU).

circuits4you.com

이노키🌿

nodeMCU 와이파이 스캔해서 AP이름과 비밀번호 알아오기

댓글

티스토리툴바

nodeMCU 와이파이 스캔해서 AP이름과 비밀번호 알아오기

관련글

댓글

티스토리툴바