Guest WIFI QR code generator for display on local network webpage (visible from TV, smartphones...) and random password rotation

저는 제 프로젝트를 공유하고 싶습니다. 제 TV는 홈 화면에서 런처 버튼을 통해 접근할 수 있는 전체 화면의 웹 페이지를 표시할 수 있습니다. 그래서 제 TV에서 친구와 친척이 방문할 때 편리하게 내 게스트 Wi-Fi QR 코드를 가져와 네트워크에 간단하게 참여할 수 있게 하면 좋을 것 같았습니다.

(여기, 여기 및 여기에서 영감을 받아서, 매일 밤 cron 작업에 의해 실행되는 작은 스크립트를 만들었습니다. 기본적으로 이 스크립트는 다음과 같은 두 가지 작업을 수행합니다:

매일 밤 게스트 Wi-Fi 비밀번호를 새로운 무작위 값으로 변경합니다.
로컬로 호스팅된 웹 페이지를 업데이트하여 새로운 비밀번호를 평문 및 QR 코드로 표시합니다.

이 스크립트에 대한 질문과 의견은 이 SNB 포럼 스레드에서 확인하실 수 있습니다.

요구 사항

이 작업을 수행하려면 몇 가지 전제 조건이 필요합니다:

Entware

먼저, 몇 가지 다른 패키지를 설치하려면 라우터에 Entware가 있어야 하며, 이를 위해서는 연결된 USB 저장 장치가 필요합니다.

필요한 패키지:

lighttpd 및 선택적으로 lighttpd-mod-access (접근 권한을 제어하기 위해 필요하며 편의에 따라 다른 모듈도 추가 가능하지만 php는 필요하지 않음)
qrencode: WIFI 비밀번호를 QR 코드로 변환하기 위해 필요합니다.* coreutils-base64: QR 코드를 데이터 URI로 포맷하려면 필요합니다.

Entware와 lighttpd 설정의 자세한 내용은 다루지 않겠습니다. 이에 관한 많은 자료들이 도움을 제공하고 있습니다.## 스크립트

다음은 스크립트입니다. 저는 jffs에 너무 많이 쓰는 것을 좋아하지 않으므로 이를 /mnt/MERLIN/rotateGuestPassword.sh 경로에 USB 키에 놓았습니다. 이 스크립트는 단일 기본 HTML 파일을 생성하고 웹 서버에 직접 배치합니다.

#!/bin/sh

## 스크립트의 설정
```# 사용할 게스트 네트워크 목록# 이 예제에서는 2.4GHz 및 5GHz 네트워크 중 첫 번째 네트워크의 비밀번호를 변경합니다.# 다음과 같이 "nvram show | grep ssid | grep "^w""와 같은 명령을 사용하여 무선 네트워크 목록을 얻을 수 있습니다.# 이 명령은 네트워크의 SSID를 나열하며 필요한 부분은 밑줄 앞에 있는 부분입니다.# 라우터에 원하는 만큼 많은 네트워크를 설정할 수 있습니다. 그러나 TV에서 표시할 때 스크롤이 필요하지 않고 최상의 결과를 얻으려면 최대 2개의 네트워크가 가장 좋습니다.
wl_list="wl0.1 wl1.1"# 웹 서버에 HTML 파일을 저장할 경로
html_file="/opt/share/www/guest_wifi.html"# 생성된 비밀번호를 위한 문자 목록.# 비밀번호 생성 명령을 깨뜨릴 수 있는 비알파벳 문자에 주의하세요...# 일부 사람들은 오류를 피하기 위해 I, i 및 1을 제거하지만 QR 코드를 사용할 것이라면 상관하지 않을 것입니다...
char_list="ABCDEFGHIJKLMNPQRSTUVWXYZabcdefghijklmnpqrstuvwxyz123456789"# 생성된 비밀번호의 길이# 비밀번호는 8자에서 63자 사이여야 합니다.
pw_length=20

## 스크립트 설정 종료# 무작위 비밀번호 가져오기
getRandomPassword(){
    random_password=`cat /dev/urandom | env LC_CTYPE=C tr -dc "$char_list" | head -c $pw_length; echo;`    
}# 임시 HTML 파일 작성 시작
cat <<EOF > "$html_file".tmp
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>홈 게스트 와이파이</title>
        <style>
            html {
                background:#e9dcc3;             
                text-align:center;
                font-family:Verdana,Arial,Helvetica
            }
            .container {
                position: absolute;
                top: 0;
                bottom: 0;
                left: 0;
                right: 0;
                width: 100%;
                height: 660px;
                margin: auto;   
            }
            .item {
                margin: auto 50px;
                width: 660px;
                display: inline-block;
                height: 660px;
                background-color: #fff;
                border-top: solid 10px #e9dcc3;
                border-bottom: solid 10px #e9dcc3;
            }
            img {
                margin:auto;
                max-height:450px;
                max-width:450px;
            }
        </style>
    </head>
    <body>
        <div class="container">
EOF# 네트워크 목록 반복
for wl in $wl_list
do
    # 비밀번호 생성   
    getRandomPassword
    
    # 현재 처리 중인 네트워크의 SSID 가져오기   
    ssid=`nvram get "$wl"_ssid`
  
    # 현재 처리 중인 네트워크의 새로운 비밀번호 설정   
    nvram set "$wl"_wpa_psk="$random_password"

    # HTML 임시 파일에 이 네트워크에 대한 블록 추가
    cat <<EOF >> "$html_file".tmp
            <div class="item">
                <h1>게스트 와이파이</h1>
EOF


네트워크 목록을 반복합니다.
```
for wl in $wl_list
do
    # 비밀번호 생성
    getRandomPassword

    # 현재 처리 중인 네트워크의 SSID 가져오기
    ssid=`nvram get "$wl"_ssid`

    # 현재 처리 중인 네트워크의 새로운 비밀번호 설정
    nvram set "$wl"_wpa_psk="$random_password"

    # HTML 임시 파일에 이 네트워크에 대한 블록 추가
    cat <<EOF >> "$html_file".tmp
            <div class="item">
                <h1>게스트 와이파이</h1>
EOF
```
# QR 코드를 데이터 URI 이미지로 추가
```
echo "                <img src=\"data:image/svg+xml;base64,"$(qrencode -o - "WIFI:S:$ssid;T:WPA;P:$random_password;;" -s 10 -t SVG | base64 | tr -d '\r\n')"\" />" >> "$html_file".tmp
```
# 블록 작성 마무리
```
    cat <<EOF >> "$html_file".tmp
                <h2>
                    SSID : $ssid<br />
                    보안 : WPA / WPA2<br />
                    비밀번호 : $random_password
                </h2>
            </div>
EOF

done
```# 임시 HTML 파일 작성 완료
```
cat <<EOF >> "$html_file".tmp
        </div>
    </body>
</html>
EOF
```# 변경 사항을 저장하여 다시 부팅해도 유지하기
```
nvram commit
```# 변경 사항을 적용하기 위해 WIFI 재시작
```
service restart_wireless
```# 최종 HTML 파일 덮어쓰기
```
mv -f "$html_file".tmp "$html_file"
```

### Cron 작업

크론 작업은 매일 밤에 스크립트를 실행합니다. 다음과 같이 cru 명령을 사용하여 설정했습니다.

```
cru a rotateGuestPassword "0 4 * * * /mnt/MERLIN/rotateGuestPassword.sh"
```

## 웹 페이지에 액세스

기본 lighttpd 구성을 사용하여 포트 81에서 수신 대기하고 있는 경우 생성된 QR 코드가 포함된 웹 페이지는 http://192.168.0.1:81/guest_wifi.html을 통해 액세스할 수 있습니다. 여기서 192.168.0.1은 라우터 IP이고 $html_file로 /opt/share/www/guest_wifi.html을 선택한 것으로 가정합니다.

그런 다음 TV를 홈 화면으로 이 웹 페이지를 열도록 설정하기만 하면 됩니다.

물론 액세스 제어를 설정하지 않은 경우 로컬 네트워크의 모든 기기에서 이 웹 페이지에 액세스할 수 있습니다. TV를 표시할 필요가 없습니다.

## 고지, 참고 사항 및 개선 사항

이 스크립트는 현재 상태 그대로 제공되며 지원 또는 보증을 제공하지 않습니다. Merlin 386.3_2에서 내 AX3000에서 잘 작동하지만 그 이상은 말할 수 없습니다. 이것은 조금 더러우며 최소한이지만 단일 파일이며 단일 HTML 파일을 생성합니다. 교육 목적으로 더 간단했습니다. 개선할 여지가 많이 있으므로 의견을 남기거나 조정하십시오.

현재 entware에서 사용 가능한 qrencode 버전은 PNG 파일을 생성할 수 없으므로 SVG 형식을 사용합니다. 물론 데이터 URI 대신에 svg 파일을 생성하고 웹 서버에 저장하는 것도 가능합니다.

HTML 파일은 스크립트에 의해 변경되는 변수만 변경한 템플릿에서 작성될 수 있습니다. HTML 레이아웃을 크게 개선할 수 있습니다.현재 HTML 레이아웃에서 25자 이상의 비밀번호 길이를 선택하면 제대로 표시되지 않습니다. 그런 긴 비밀번호가 필요한 만큼 신경 쓰신다면 그것을 수정하는 것은 여러분의 몫입니다.

Guest WIFI QR code generator for display on local network webpage (visible from TV, smartphones...) and random password rotation - XIYO/asuswrt-merlin.ng-kr GitHub Wiki

요구 사항

Entware

필요한 패키지:

⚠️ GitHub.com Fallback ⚠️

Guest WIFI QR code generator for display on local network webpage (visible from TV, smartphones...) and random password rotation - XIYO/asuswrt-merlin.ng-kr GitHub Wiki

요구 사항

Entware

필요한 패키지:

⚠️ **GitHub.com Fallback** ⚠️

⚠️ GitHub.com Fallback ⚠️