CyberMind-FR
086e62584e
Created new independent package to integrate SecuBox marketing and documentation website. Includes demo pages, tutorials, and multi-language content previously deployed separately. Package contents: - 36 static files (HTML, JS, JSON) - 16 module demo pages (auth, bandwidth, cdn-cache, client-guardian, etc.) - 3 blog tutorials (setup guides) - 13 language translations (en, fr, de, es, pt, it, nl, ru, ar, zh, ja, ko, hi) - Campaign and landing pages Files accessible at: /luci-static/secubox/ Main URL: http://router-ip/luci-static/secubox/index.html Package info: - Version: 0.1.0-1 - Size: ~500KB - Dependencies: luci-base only - No RPCD/backend components 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
221 lines
11 KiB
HTML
221 lines
11 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="fr">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Portail captif avec OAuth et Vouchers | CyberMind Blog</title>
|
|
<meta name="description" content="Configurez un système d'authentification complet pour votre réseau WiFi avec Auth Guardian : portail captif, OAuth, vouchers et gestion des sessions.">
|
|
<style>
|
|
:root { --primary: #06b6d4; --primary-dark: #0891b2; --dark: #0f172a; --darker: #020617; --card: #1e293b; --text: #f1f5f9; --text-muted: #94a3b8; --border: #334155; }
|
|
* { margin: 0; padding: 0; box-sizing: border-box; }
|
|
body { font-family: 'Georgia', serif; background: var(--darker); color: var(--text); line-height: 1.8; }
|
|
.header { background: var(--dark); border-bottom: 1px solid var(--border); padding: 20px 0; }
|
|
.header-inner { max-width: 800px; margin: 0 auto; padding: 0 24px; display: flex; justify-content: space-between; align-items: center; }
|
|
.logo { font-family: system-ui, sans-serif; font-weight: 700; font-size: 20px; color: var(--text); text-decoration: none; display: flex; align-items: center; gap: 8px; }
|
|
.nav a { color: var(--text-muted); text-decoration: none; margin-left: 24px; font-family: system-ui, sans-serif; font-size: 14px; }
|
|
.hero { background: linear-gradient(135deg, var(--primary-dark), var(--primary)); padding: 80px 24px; text-align: center; }
|
|
.hero-inner { max-width: 800px; margin: 0 auto; }
|
|
.hero-tag { display: inline-block; background: rgba(255,255,255,0.2); padding: 6px 16px; border-radius: 50px; font-size: 14px; margin-bottom: 20px; font-family: system-ui, sans-serif; }
|
|
.hero h1 { font-size: 42px; line-height: 1.2; margin-bottom: 16px; }
|
|
.hero-meta { opacity: 0.9; font-size: 16px; font-family: system-ui, sans-serif; }
|
|
.content { max-width: 800px; margin: 0 auto; padding: 60px 24px; }
|
|
h2 { font-size: 28px; margin: 48px 0 24px; color: var(--text); font-family: system-ui, sans-serif; }
|
|
h3 { font-size: 22px; margin: 32px 0 16px; color: var(--text); font-family: system-ui, sans-serif; }
|
|
p { margin-bottom: 24px; color: var(--text-muted); }
|
|
.lead { font-size: 20px; color: var(--text); margin-bottom: 32px; }
|
|
ul, ol { margin: 0 0 24px 24px; color: var(--text-muted); }
|
|
li { margin-bottom: 12px; }
|
|
code { background: var(--card); padding: 2px 8px; border-radius: 4px; font-family: monospace; font-size: 14px; color: var(--primary); }
|
|
pre { background: var(--card); padding: 24px; border-radius: 12px; overflow-x: auto; margin: 24px 0; border: 1px solid var(--border); }
|
|
pre code { background: none; padding: 0; color: var(--text); }
|
|
.info-box { background: rgba(6, 182, 212, 0.1); border-left: 4px solid var(--primary); padding: 20px 24px; border-radius: 0 12px 12px 0; margin: 32px 0; }
|
|
.info-box p { margin: 0; color: var(--text); }
|
|
.feature-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin: 32px 0; }
|
|
.feature-card { background: var(--card); padding: 24px; border-radius: 12px; border: 1px solid var(--border); }
|
|
.feature-card h4 { font-family: system-ui, sans-serif; margin-bottom: 8px; display: flex; align-items: center; gap: 8px; }
|
|
.feature-card p { margin: 0; font-size: 14px; }
|
|
.cta-box { background: linear-gradient(135deg, var(--primary-dark), var(--primary)); padding: 40px; border-radius: 16px; text-align: center; margin: 48px 0; }
|
|
.cta-box h3 { color: white; margin-bottom: 16px; font-family: system-ui, sans-serif; }
|
|
.cta-box p { color: rgba(255,255,255,0.9); margin-bottom: 24px; }
|
|
.cta-btn { display: inline-block; background: white; color: var(--primary-dark); padding: 14px 32px; border-radius: 10px; text-decoration: none; font-family: system-ui, sans-serif; font-weight: 600; }
|
|
.footer { background: var(--dark); border-top: 1px solid var(--border); padding: 40px 24px; text-align: center; }
|
|
.footer p { color: var(--text-muted); font-family: system-ui, sans-serif; font-size: 14px; margin: 0; }
|
|
@media (max-width: 768px) { .feature-grid { grid-template-columns: 1fr; } .hero h1 { font-size: 32px; } }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<header class="header">
|
|
<div class="header-inner">
|
|
<a href="https://cybermind.fr" class="logo">🧠 CyberMind</a>
|
|
<nav class="nav">
|
|
<a href="https://cybermind.fr/blog">Blog</a>
|
|
<a href="../index.html" class="back-link" data-i18n="demo.backToMain">← Retour à l'accueil</a>
|
|
</nav>
|
|
</div>
|
|
</header>
|
|
|
|
<div class="hero">
|
|
<div class="hero-inner">
|
|
<span class="hero-tag">📚 Tutorial</span>
|
|
<h1>Portail captif avec OAuth et Vouchers</h1>
|
|
<p class="hero-meta">Par Gandalf • 22 décembre 2024 • 15 min de lecture</p>
|
|
</div>
|
|
</div>
|
|
|
|
<article class="content">
|
|
<p class="lead">
|
|
Vous gérez un réseau WiFi public, un gîte, un café ou simplement votre réseau invité ?
|
|
<strong>Auth Guardian</strong> vous permet de contrôler qui accède à votre réseau avec un portail
|
|
captif élégant, l'authentification OAuth (Google, GitHub) et un système de vouchers.
|
|
</p>
|
|
|
|
<div class="feature-grid">
|
|
<div class="feature-card">
|
|
<h4>🎨 Portail personnalisable</h4>
|
|
<p>Logo, couleurs, message d'accueil entièrement configurables.</p>
|
|
</div>
|
|
<div class="feature-card">
|
|
<h4>🔑 OAuth2 intégré</h4>
|
|
<p>Google, GitHub, Facebook, Twitter en quelques clics.</p>
|
|
</div>
|
|
<div class="feature-card">
|
|
<h4>🎟️ Système de vouchers</h4>
|
|
<p>Générez des codes d'accès temporaires pour vos invités.</p>
|
|
</div>
|
|
<div class="feature-card">
|
|
<h4>🍪 Sessions sécurisées</h4>
|
|
<p>Cookies HttpOnly, SameSite, timeouts configurables.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<h2>1. Installation</h2>
|
|
|
|
<pre><code>opkg update
|
|
opkg install luci-app-auth-guardian nodogsplash
|
|
/etc/init.d/rpcd reload</code></pre>
|
|
|
|
<h2>2. Configuration du portail captif</h2>
|
|
|
|
<p>Le portail captif intercepte les connexions HTTP et redirige vers une page d'authentification :</p>
|
|
|
|
<pre><code># /etc/config/authguard
|
|
|
|
config authguard 'global'
|
|
option enabled '1'
|
|
option interface 'br-lan'
|
|
option auth_method 'splash'
|
|
option session_timeout '3600' # 1 heure
|
|
option idle_timeout '600' # 10 min d'inactivité
|
|
|
|
config splash 'default'
|
|
option enabled '1'
|
|
option title 'Bienvenue'
|
|
option message 'Connectez-vous pour accéder au réseau'
|
|
option logo '/path/to/logo.png'
|
|
option background_color '#0f172a'
|
|
option button_color '#06b6d4'
|
|
option require_terms '1'</code></pre>
|
|
|
|
<h2>3. Configuration OAuth</h2>
|
|
|
|
<h3>Google Sign-In</h3>
|
|
|
|
<ol>
|
|
<li>Allez sur <a href="https://console.cloud.google.com" style="color: var(--primary);">Google Cloud Console</a></li>
|
|
<li>Créez un projet et activez l'API "Google+ API"</li>
|
|
<li>Configurez l'écran de consentement OAuth</li>
|
|
<li>Créez des identifiants OAuth 2.0 (Application Web)</li>
|
|
<li>Ajoutez l'URI de redirection : <code>https://votre-routeur/auth/callback/google</code></li>
|
|
</ol>
|
|
|
|
<pre><code>config oauth 'google'
|
|
option enabled '1'
|
|
option client_id 'VOTRE_CLIENT_ID.apps.googleusercontent.com'
|
|
option client_secret 'VOTRE_CLIENT_SECRET'
|
|
option redirect_uri '/auth/callback/google'</code></pre>
|
|
|
|
<h3>GitHub Authentication</h3>
|
|
|
|
<pre><code>config oauth 'github'
|
|
option enabled '1'
|
|
option client_id 'VOTRE_GITHUB_CLIENT_ID'
|
|
option client_secret 'VOTRE_GITHUB_SECRET'
|
|
option redirect_uri '/auth/callback/github'</code></pre>
|
|
|
|
<div class="info-box">
|
|
<p>💡 <strong>Conseil :</strong> Pour un usage en réseau local sans accès Internet,
|
|
préférez le système de vouchers ou l'authentification par splash simple.</p>
|
|
</div>
|
|
|
|
<h2>4. Système de Vouchers</h2>
|
|
|
|
<p>Les vouchers sont parfaits pour les hôtels, cafés ou événements :</p>
|
|
|
|
<pre><code>config voucher 'system'
|
|
option enabled '1'
|
|
option validity '86400' # 24 heures
|
|
option bandwidth_limit '10000' # 10 Mbps max
|
|
option prefix 'WIFI' # Format: WIFI-XXXX</code></pre>
|
|
|
|
<h3>Générer des vouchers en CLI</h3>
|
|
|
|
<pre><code># Générer 10 vouchers
|
|
for i in $(seq 1 10); do
|
|
code="WIFI-$(head -c 4 /dev/urandom | hexdump -e '"%08X"' | cut -c1-4)"
|
|
echo "$code"
|
|
done</code></pre>
|
|
|
|
<h2>5. Bypass et Whitelist</h2>
|
|
|
|
<p>Certains appareils peuvent contourner l'authentification :</p>
|
|
|
|
<pre><code>config bypass 'whitelist'
|
|
# Appareils de confiance (par MAC)
|
|
list mac 'AA:BB:CC:DD:EE:FF' # Serveur NAS
|
|
list mac '11:22:33:44:55:66' # Imprimante
|
|
|
|
# IPs fixes
|
|
list ip '192.168.1.100'
|
|
|
|
# Domaines autorisés sans auth
|
|
list domain 'captive.apple.com' # iOS
|
|
list domain 'connectivitycheck.gstatic.com' # Android
|
|
list domain 'www.msftconnecttest.com' # Windows</code></pre>
|
|
|
|
<h2>6. Sécurité des sessions</h2>
|
|
|
|
<pre><code>config session 'policy'
|
|
option max_sessions '100'
|
|
option session_cookie 'authguard_session'
|
|
option secure_cookie '1' # HTTPS only
|
|
option httponly '1' # Pas d'accès JavaScript
|
|
option samesite 'Strict' # Protection CSRF</code></pre>
|
|
|
|
<div class="cta-box">
|
|
<h3>🔐 Sécurisez votre réseau WiFi</h3>
|
|
<p>Installez Auth Guardian et contrôlez qui accède à votre réseau.</p>
|
|
<a href="../demo-auth.html" class="cta-btn">Voir la démo</a>
|
|
</div>
|
|
|
|
<h2>Conclusion</h2>
|
|
|
|
<p>
|
|
Auth Guardian transforme votre routeur OpenWrt en portail d'authentification professionnel.
|
|
Que vous gériez un réseau d'entreprise, un lieu public ou simplement votre réseau invité,
|
|
vous avez maintenant le contrôle total sur les accès.
|
|
</p>
|
|
</article>
|
|
|
|
<footer class="footer">
|
|
<p>
|
|
<a href="https://cybermood.eu" style="color: var(--primary); text-decoration: none;">CyberMood.eu</a>
|
|
© 2025 <a href="https://cybermind.fr" style="color: var(--text-muted); text-decoration: none;">CyberMind.fr</a>
|
|
— Open Source Apache-2.0 — 🇫🇷 Made in France with ❤️
|
|
</p>
|
|
</footer>
|
|
|
|
<!-- Multi-language System -->
|
|
<script src="/i18n.js"></script>
|
|
</body>
|
|
</html>
|