Setup a wifi hotspot if no valid SSID

sebastienroy commented 4 months ago

It could be nice to setup a wifi hotspot to allow access to the radspeberry pi and then configure the ssid See https://www.raspberryconnect.com/projects/65-raspberrypi-hotspot-accesspoints/157-raspberry-pi-auto-wifi-hotspot-switch-internet

sebastienroy commented 4 months ago

A webserver is needed to a user to connect to a configuration page. The following webservers are availaible: nginx apache lighttpd - https://www.lighttpd.net/

css form: https://www.w3schools.com/css/css_form.asp

https://developer.mozilla.org/en-US/docs/Learn/Forms/Sending_and_retrieving_form_data

Flask framework can be usefull to create a temporary web server written in Python https://flask.palletsprojects.com/en/3.0.x/

sebastienroy commented 4 months ago

How to change the wifi credentials:

Installer Flask sur votre Raspberry Pi : Assurez-vous que Python est installé, puis installez Flask en utilisant la commande suivante :

pip install Flask

Créer le fichier Python pour le serveur web : Créez un fichier app.py avec le contenu suivant :

from flask import Flask, render_template, request
import subprocess

app = Flask(__name__)

@app.route('/')
def index():
    return render_template('index.html')

@app.route('/update_wifi', methods=['POST'])
def update_wifi():
    ssid = request.form['ssid']
    password = request.form['password']

    # Utilisez subprocess pour modifier les identifiants WiFi
    # (Remplacez la commande en fonction de votre système d'exploitation)
    subprocess.run(['sudo', 'wpa_passphrase', ssid, password, '>>', '/etc/wpa_supplicant/wpa_supplicant.conf'])

    render_template('confirmation.html')  # Ajoutez une page de confirmation

    # Arrêter le serveur Flask proprement
    shutdown = request.environ.get('werkzeug.server.shutdown')
    if shutdown is not None:
        shutdown()

    # Redémarrez le service wpa_supplicant pour prendre en compte les modifications
    subprocess.run(['sudo', 'systemctl', 'restart', 'wpa_supplicant'])

    return "Identifiants WiFi mis à jour avec succès !"

if __name__ == '__main__':
    app.run(debug=True, host='0.0.0.0')

Créer le dossier templates et y ajouter le fichier HTML : Créez un dossier templates dans le même répertoire que app.py, puis ajoutez un fichier HTML index.html avec le formulaire :

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Modifier les identifiants WiFi</title>
</head>
<body>
    <h1>Modifier les identifiants WiFi</h1>
    <form action="/update_wifi" method="post">
        <label for="ssid">SSID:</label>
        <input type="text" id="ssid" name="ssid" required><br>
        <label for="password">Mot de passe:</label>
        <input type="password" id="password" name="password" required><br>
        <input type="submit" value="Enregistrer">
    </form>
</body>
</html>

Ajoutez une page de confirmation (templates/confirmation.html) :

Créez un fichier confirmation.html dans le dossier templates avec un message de confirmation.

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Confirmation</title>
</head>
<body>
    <h1>Confirmation</h1>
    <p>Identifiants WiFi mis à jour avec succès !</p>
    <p>Le serveur va maintenant s'arrêter.</p>
</body>
</html>

Assurez-vous que l'utilisateur qui exécute l'application Flask (pi par défaut sur Raspberry Pi) a les droits nécessaires pour exécuter ces commandes avec sudo sans saisir de mot de passe. Vous pouvez configurer cela en modifiant le fichier /etc/sudoers avec la commande sudo visudo et en ajoutant une ligne comme celle-ci :

pi ALL=(ALL) NOPASSWD: /usr/bin/systemctl restart wpa_supplicant

Cela permettra à l'utilisateur pi de redémarrer le service wpa_supplicant sans saisir de mot de passe. Assurez-vous d'ajuster cela en fonction de vos besoins de sécurité.

Exécutez l'application Flask : Ouvrez un terminal et exécutez le fichier app.py avec la commande :

python app.py

Vous devriez voir un message indiquant que le serveur Flask est en cours d'exécution. Accédez au navigateur sur votre Raspberry Pi et allez à l'adresse http://localhost:5000 pour utiliser le formulaire.

Notez que cette approche est basique et ne gère pas la sécurité de manière exhaustive. Assurez-vous de prendre des mesures appropriées, comme utiliser HTTPS, pour protéger les informations sensibles, surtout si ce site est accessible depuis l'extérieur de votre réseau local.

sebastienroy commented 4 months ago

Voici quelques étapes que vous pouvez suivre pour améliorer la conception de votre site web et le rendre adaptatif aux différents dispositifs.

Ajouter une feuille de style CSS : Créez un fichier CSS dans le même dossier que votre fichier app.py. Nommez-le par exemple style.css.

Configurer le viewport : Dans votre fichier HTML (index.html), assurez-vous d'avoir la balise pour définir le viewport. Cela permet aux navigateurs de rendre correctement la page sur les différents appareils.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Modifier le fichier style.css : Ajoutez les règles CSS suivantes dans votre fichier style.css :


body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f4f4f4;
}

h1 {
    text-align: center;
    color: #333;
}

form {
    max-width: 400px;
    margin: 0 auto;
    padding: 20px;
    background-color: #fff;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

label {
    display: block;
    margin-bottom: 10px;
    color: #555;
}

input {
    width: 100%;
    padding: 10px;
    margin-bottom: 15px;
    box-sizing: border-box;
}

input[type="submit"] {
    background-color: #4caf50;
    color: white;
    cursor: pointer;
}

input[type="submit"]:hover {
    background-color: #45a049;
}

Ces règles CSS fournissent une base pour un design simple et propre. La propriété max-width: 400px; sur le formulaire limite sa largeur à 400 pixels, ce qui le rend adaptatif.

Inclure le fichier CSS dans le fichier HTML : Ajoutez la balise dans la section de votre fichier HTML pour lier le fichier CSS :

<link rel="stylesheet" href="/static/style.css">

Assurez-vous que Flask sert les fichiers statiques correctement. Pour ce faire, ajoutez cette ligne dans votre fichier app.py :

app = Flask(__name__, static_url_path='/static')

Et placez votre fichier style.css dans un dossier appelé static dans le même répertoire que votre fichier app.py.

Avec ces modifications, votre site web devrait avoir un design plus agréable et être adaptatif à différentes tailles d'écran. N'hésitez pas à ajuster les règles CSS en fonction de vos préférences de conception spécifiques.

sebastienroy commented 4 months ago

See details for the configuration of wpa_supplicant.conf

https://raspberrypi.stackexchange.com/questions/11631/how-to-setup-multiple-wifi-networks

sebastienroy commented 4 months ago

Allowed chars in SSID: https://community.cisco.com/t5/wireless-mobility-knowledge-base/characteristics-of-ssids/ta-p/3131765

password: https://community.tp-link.com/us/home/kb/detail/412692

sebastienroy / mamemasradio

Setup a wifi hotspot if no valid SSID #7