Authentification Oauth2 google Multi sites

[yoyo]

voici un tutoriel pour mettre en place l'accès d'un site par Authentification Oauth2 Google. (un peu complex) 

1 - avoir un compte Gmail ou une organisation Gmail (attention bien faire la distinction des deux) 
2 - configuration compte Oauth2 sur console gmail.
3 - installer le module oauth2-proxy et configuration 
4 - Creation d'un Auth.exemple.net.conf
5 - Creation du repertoire auth dans www/html
6 - Gestion des errors 403, 404 etc..
7 - Modif des accès series.dehorama.net et series2.dehorama.net

   

[titreyoyo]1 & 2 compte Gmail et configuration compte Oauth2 [/titreyoyo] 

Pour commencer connecter vous sur un compte gmail (test@gmail.com ou dans votre organisation admin@exemple.net) Attention de bien différencier les deux car nous pouvons créer un 

projet pour chaque compte. il faut vraiment reffléchir sur quelle compte vous voulez créer votre authentification. vous pouvez aussi 

vous pouvez aussi créer un  projet sur test@gmail.com sur des sites en .com par exemple , et le compte organisation admin@exemple.net pour les sites sous .exemple.net 

Maintenant que vous avez choisi sur quelle compte google/gmail vous voulez créer votre compte Oauth vous aller sur : https://console.cloud.google.com/

   

Ensuite il faut cliquer en haut à gauche , sélectionner un projet et ensuite dans le popup qui va s'ouvrir à gauche creation d'un nouveau projet . comme le montre sur le screenshot :

   

Ensuite il faut créer son projet en indiquant nom du projet et ensuite cliquer sur Créer. (attention si vous passer par compte gmail, inutile de mettre une organisation en revanche vous pouvez mettre votre organisation si vous passer par le compte admin@exemple.net.) 

[alertyellow]vous pouvez avoir un projet sans organisation [/alertyellow]

   

une fois avoir créer votre projet vous pouvez maintenant sélectionner votre projet cliquer en haut à gauche sur Sélectionnez votre projet , un popup s'ouvre et choisissez votre projet:

   

Ensuite verifier que vous êtes bien dans votre projet et cliquer sur l'application API et Services. un nouveau menu s'affiche à gauche.

   

il faut cliquer sur "Ecran de consentement"

   

ensuite cliquer sur "premier pas"  

Ensuite il faut saisir les infos demandées: 

• - information du l'application (testfr) 
  
• - email 
  
• - Suivant 
  
• - Cliquer sur externe (on peut modifier après)
  
• - Suivant 
  
• - email 
  
• - Créer :
   
  

     

Cliquer ensuite sur Clients dans le menu de droite et ensuite sur le menu du haut Créer un client :

   

Ensuite il faut : 

• - Dans type d'application mettre "Application WEB" (Attention en fonction du type les infos à remplir sont differentes)
  
• - Nom indiqué un nom c'est juste pour pour l'affichage dans la console
  
• - dans Origines JavaScript autorisées  il faut indiquer l'url du site https://exemple.fr (pas de sous-domaine).
     Ce sont les sites web à partir desquels un navigateur a le droit d’utiliser ton OAuth Google.
  
• - URI de redirection autorisés TRES IMPORTANT C’est L’URL exacte où Google renvoie l’utilisateur après le login.
     https://auth.votresite.net/oauth2/callback  
  

   

Une fois avoir cliquer sur créer un popup s'ouvre avec L'id client et le code secret client (Attention le code est visible uniquement dans ce popup)

il faut récupérer le code secret client et le mettre de coté car nous aurons besoin plus tard. (vous pouvez supprimer et le recréer) 

   

une fois terminé et après avoir cliquer sur OK , vous revenez sur la liste des Clients 

   

Sélectionner votre client et vous aurez l'ensemble des informations avec la possibilité de modifier les Urls ..

   

La partie Google est terminé. 

[titreyoyo]3 -  installer le module oauth2-proxy et configuration[/titreyoyo]

sur le serveur proxy, il faut installer le module oauth2-proxy

Code :

wget https://github.com/oauth2-proxy/oauth2-proxy/releases/download/v7.13.0/oauth2-proxy-v7.13.0.linux-amd64.tar.gz

[alertred]verifier la dernière version sur le site de : https://github.com/oauth2-proxy/oauth2-proxy/releases [/alertred]

Extraction du fichier (création du dossier oauth2-proxy-v7.13.0.linux-amd64) 

Code :

tar xvf oauth2-proxy-v7.13.0.linux-amd64.tar.gz

Déplacement du binaire 

Code :

mv oauth2-proxy-v7.13.0.linux-amd64/oauth2-proxy /usr/local/bin/

chmod +x /usr/local/bin/oauth2-proxy

Verification 

Code :

oauth2-proxy --version

Maintenant il faut créer le fichier de configuration oauth2-proxy.cfg : 

Code :

nano /etc/oauth2-proxy.cfg

ou dans un repertoire /etc/oauth2.

Code :

mkdir /etc/oauth2

nano /etc/oauth2/oauth2-proxy.cfg

ajouter les lignes suivantes dans le fichier de config, Version multi sites et Autoriser uniquement certains emails.

Code :

# Adresse ip et port local du service oauth2-proxy

http_address = "127.0.0.1:4180" 

provider = "google"

#email_domains = [ "*" ]

# créer un liste de emails autorisés a acceder a votre application dans le fichier emails.txt 

authenticated_emails_file = "/etc/oauth2-proxy/emails.txt"

# client id et client secret que vous avez eu au moment de la création du clients Oauth2 sur le site de google.

client_id = "xxxxxxapps.googleusercontent.com"

client_secret = "xcxcxcxcvvvvvvvvvvvv"

# code secret à generer avec openssl rand -base64 32

cookie_secret = "t232222DDDD"

cookie_secure = true

# expiration du cookie  reconnection google.

cookie_refresh = "1h"

cookie_expire = "2h"

# 168 = 7 jours

# Tous les sites protégés partagent le même cookie

cookie_domains =[

  ".test.net"

]

cookie_samesite = "lax"

# Important pour éviter la redirection directe vers Google authentification

whitelist_domains = [

  "https://series.dehorama.net",

  "https://series2.dehorama.net",

  "https://auth.dehorama.net",

  "auth.dehorama.net",

  "series2.dehorama.net",

  "series.dehorama.net"

]



# Le domaine principal de l’auth (important !) lien que vous devez retrouvez sur le site de console.google dans la section 

# client et  dans URI de redirection autorisés --> https://auth.dehorama.net/oauth2/callback

redirect_url = "https://auth.dehorama.net/oauth2/callback"

Generation de la clef cookie_secret 

Code :

openssl rand -base64 32

Concernant les emails autorisés :/etc/oauth2-proxy/emails.txt"

Code :

mail1@test.fr

mail2@test.fr

mail3@gmail.com

Créer un service systemd pour oauth2-proxy

Code :

sudo nano /etc/systemd/system/oauth2-proxy.service

Code :

[Unit]

Description=OAuth2 Proxy

After=network.target



[Service]

ExecStart=/usr/local/bin/oauth2-proxy --config=/etc/oauth2-proxy.cfg

Restart=always

User=root

Group=root

[Install]

WantedBy=multi-user.target

Activer :

Code :

sudo systemctl daemon-reload

sudo systemctl enable oauth2-proxy --now

[titreyoyo]4 - Creation d'un auth.dehorama.net.conf[/titreyoyo]


En mode multisite avec oauth2-proxy, on doit absolument utiliser un domaine dédié à l’authentification, comme dans notre exemple 
auth.dehorama.net.conf .


La raison : 

• un provider OAuth (Google, Keycloak, etc.) n’accepte qu’un redirect_url unique par client (ou une liste limitée)
  
• oauth2-proxy centralise les sessions
  
• tous les sites protégés renvoient vers auth.exmple.net/oauth2/start
  
• le cookie d’identification est partagé entre sous-domaines
  

Donc il faut :

1.  créer un sous domaine auth.votresite.com (via gandhi , infomaniak ou ovh...)
   
2.  crée le fichier de conf nginx  
   
3.  lancer le cerbot pour créer le certificat https 
   

Voici le fichier nginx complet auth.dehorama.net 

Code :

server {

    listen 80;

    server_name auth.dehorama.net;



    # Redirection vers HTTP

    return 301 https://auth.dehorama.net$request_uri;

}



server {

    listen 443 ssl;

     http2 on;

    server_name auth.dehorama.net;



     # --- ERREURS OAUTH2-PROXY ---

     # --- ERREURS PERSONNALISÉES ---

     error_page 401 /errors/401.html;

     error_page 403 /errors/403.html;

     error_page 404 /errors/404.html;

     error_page 500 /errors/500.html;



      # empêcher auth_request de s'appliquer aux erreurs

     location ^~ /errors/ {

     alias /var/www/html/auth/errors/;

     auth_request off;

     }



    # Certificat

    include /etc/nginx/snippets/letsencrypt.conf;

    ssl_certificate /etc/letsencrypt/live/auth.dehorama.net/fullchain.pem;

    ssl_certificate_key /etc/letsencrypt/live/auth.dehorama.net/privkey.pem;



    # -----------------------------

    # 1️⃣ PAGE LOGIN PERSO (HTML)

    # -----------------------------

    root /var/www/html/auth;

    index index.html;



location =  /login {

 try_files /index.html =404;

}

    # -----------------------------------------

    # 2️⃣ OAUTH2-PROXY (GOOGLE LOGIN)

    # -----------------------------------------

    # TOUT /oauth2/* doit être proxifié

        location /oauth2/ {

        proxy_pass http://127.0.0.1:4180;

        proxy_set_header Host $host;

        proxy_set_header X-Real-IP $remote_addr;

        proxy_set_header X-Scheme $scheme;

        proxy_set_header X-Forwarded-Proto $scheme;

        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;

   



        # ⭐️⭐️⭐️ INDISPENSABLE ⭐️⭐️⭐️

        # Permet à Nginx d'intercepter le 403 d'OAuth2-Proxy

        proxy_intercept_errors on;



        # Quand oauth2-proxy renvoie 403 → affiche ta page Dehorama

        #error_page 403 = /errors/403.html?$args;

    error_page 403 /errors/403.html;

  }







    # -----------------------------------------

    # 3️⃣ PAGE DE TEST / STATUS

    # -----------------------------------------

    location = /oauth2/healthz {

        proxy_pass http://127.0.0.1:4180/oauth2/healthz;

    }

}

[titreyoyo]5 - Creation du repertoire auth dans www/html[/titreyoyo]

Maintenant il faut créer le dossier auth dans www/html

creation du répertoire : 

Code :

mkdir /var/www/html/auth

et un autre repertoire pour les errors 

Code :

/var/www/html/auth/errors

dans le repertoire auth il faudra créer votre logo logo.dehorama.png et un fichier index.html pour la connexion .

fichier index.hml

Code :

<!DOCTYPE html>

<html lang="fr">

<head>

    <meta charset="UTF-8">

    <title>Connexion - Dehorama</title>

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



    <style>

        body {

            background: #0d1117;

            color: #fff;

            font-family: Arial, sans-serif;

            margin: 0;

            display: flex;

            flex-direction: column;

            justify-content: center;

            align-items: center;

            height: 100vh;

        }



        .login-box {

            background: #161b22;

            padding: 40px;

            border-radius: 20px;

            width: 90%;

            max-width: 420px;

            text-align: center;

            box-shadow: 0 4px 26px rgba(0, 0, 0, 0.45);

        }



        /* --- LOGO DEHORAMA --- */

        .logo-container {

            margin-bottom: 25px;

        }



        .logo-container img {

            width: 160px;

            height: auto;

            filter: drop-shadow(0 0 12px rgba(0, 150, 255, 0.7));

        }



        .title {

            font-size: 28px;

            margin-top: 10px;

            font-weight: bold;

            color: #58a6ff;

            text-shadow: 0 0 6px rgba(88,166,255,0.6);

        }



        /* --- BOUTON GOOGLE --- */

        .google-btn {

            background: #fff;

            color: #444;

            display: flex;

            align-items: center;

            justify-content: center;

            width: 100%;

            padding: 14px;

            border-radius: 8px;

            text-decoration: none;

            font-weight: bold;

            font-size: 17px;

            margin-top: 25px;

            transition: 0.2s;

        }



        .google-btn:hover {

            background: #e7e7e7;

        }



        .google-btn img {

            width: 22px;

            margin-right: 10px;

        }

    </style>



    <!-- SCRIPT POUR PRENDRE rd= AUTOMATIQUEMENT -->

    <script>

        function getParameter(name) {

            const url = new URL(window.location.href);

            return url.searchParams.get(name);

        }



        document.addEventListener("DOMContentLoaded", function() {

            let rd = getParameter("rd");



            // Par défaut → redirection vers series

            if (!rd) rd = "https://series.dehorama.net";



            const btn = document.getElementById("google-login-btn");

            btn.href = "https://auth.dehorama.net/oauth2/start?rd=" + encodeURIComponent(rd);

        });

    </script>



</head>



<body>



    <div class="login-box">



        <!-- LOGO DEHORAMA -->

        <div class="logo-container">

            <img src="/logo_dehorama.png" alt="Dehorama Logo">

        </div>



        <div class="title">DEHORAMA</div>

        <p>Veuillez vous connecter pour continuer</p>



        <!-- BOUTON GOOGLE DYNAMIQUE -->

        <a id="google-login-btn" class="google-btn" href="#">

            <img src="https://www.svgrepo.com/show/475656/google-color.svg" alt="Google">

            Continuer avec Google

        </a>



    </div>



</body>

</html>

 ensuite aller dans le repertoire errors voici les scripts pour les erreurs: 

error 401.html 

Code :

<!DOCTYPE html>

<html lang="fr">

<head>

<meta charset="UTF-8">

<title>Accès refusé</title>

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



<style>

    body { background: #0d1117; color:white; font-family:Arial; margin:0;

           display:flex; justify-content:center; align-items:center; height:100vh; text-align:center; }

    .box { background:#161b22; padding:40px; border-radius:16px; max-width:450px;

           box-shadow:0 0 20px rgba(0,150,255,0.4); }

    .logo { width:100px; filter:drop-shadow(0 0 10px rgba(0,150,255,0.7)); margin-bottom:20px; }

    h1 { color:#58a6ff; margin-bottom:10px; }

    p { color:#ccc; line-height:1.6; }



    .btn-login {

        display:inline-block; margin-top:25px; padding:12px 22px;

        background:#0d6efd; color:white; font-weight:bold; text-decoration:none;

        border-radius:8px; transition:0.2s; box-shadow:0 0 12px rgba(0,150,255,0.6);

    }

    .btn-login:hover {

        background:#0b5ed7; box-shadow:0 0 16px rgba(0,150,255,0.8);

    }

</style>

</head>



<body>

<div class="box">

    <img src="/logo_dehorama.png" class="logo">

    <h1>Accès refusé</h1>

    <p>Vous n’avez pas les autorisations nécessaires.<br>Veuillez vous reconnecter ou changer de compte.</p>

  <!-- Bouton dynamique -->

<a href="#" id="btn-login" class="btn-login">Retour à la connexion</a>

</div>



<script>

// --- Nettoyeur de paramètres OAuth2 de l'URL si présents ---

window.addEventListener("DOMContentLoaded", function() {

    const params = new URLSearchParams(window.location.search);

    let mustClean = false;

    // Liste des paramètres OAuth gênants à effacer

    ["code", "access_token", "scope", "authuser", "prompt"].forEach(key => {

        if(params.has(key)) {

            params.delete(key);

            mustClean = true;

        }

    });

    if(mustClean) {

        // Reconstruit l’URL propre (sans "code", "scope", ...)

        const newUrl = window.location.pathname + (params.toString() ? "?" + params.toString() : "");

        window.history.replaceState({}, document.title, newUrl);

    }

});



// --- Extraction et redirection avec le paramètre state ---

function getDestinationFromState() {

    const params = new URLSearchParams(window.location.search);

    const state = params.get("state");

    if (state && state.includes(":")) {

        // Récupère tout après le premier ":"

        return state.substring(state.indexOf(":") + 1);

    }

    return null;

}



document.getElementById("btn-login").addEventListener("click", function(e) {

    e.preventDefault();

    const destUrl = getDestinationFromState();

    // Redirige si l'URL extraite commence bien par https://

    if (destUrl && destUrl.startsWith("https://")) {

        window.location.href = destUrl;

    } else {

        // Fallback : page login locale

        window.location.href = "/login";

    }

});

</script>

</body>

</html>

 


erreur 403.html

Code :

<!DOCTYPE html>

<html lang="fr">

<head>

<meta charset="UTF-8">

<title>Accès refusé</title>

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



<style>

    body { background:#0d1117; color:white; font-family:Arial; margin:0;

           display:flex; justify-content:center; align-items:center; height:100vh; text-align:center; }

    .box { background:#161b22; padding:40px; border-radius:16px; max-width:450px;

           box-shadow:0 0 20px rgba(0,150,255,0.4); }

    .logo { width:100px; filter:drop-shadow(0 0 10px rgba(0,150,255,0.7)); margin-bottom:20px; }

    h1 { color:#58a6ff; margin-bottom:10px; }

    p { color:#ccc; line-height:1.6; }

    .btn-login {

        display:inline-block; margin-top:25px; padding:12px 22px;

        background:#0d6efd; color:white; font-weight:bold; text-decoration:none;

        border-radius:8px; transition:0.2s; box-shadow:0 0 12px rgba(0,150,255,0.6);

    }

    .btn-login:hover {

        background:#0b5ed7; box-shadow:0 0 16px rgba(0,150,255,0.8);

    }

</style>

</head>



<body>

<div class="box">

    <img src="/logo_dehorama.png" class="logo">

    <h1>Accès refusé</h1>

    <p>Vous n’avez pas les autorisations nécessaires.<br>Veuillez vous reconnecter ou changer de compte.</p>

    <a href="#" id="btn-login" class="btn-login">Retour à la connexion</a>

</div>



<script>

// --- Nettoyeur de paramètres OAuth2 de l'URL si présents ---

window.addEventListener("DOMContentLoaded", function() {

    const params = new URLSearchParams(window.location.search);

    let mustClean = false;

    // Liste des paramètres OAuth gênants à effacer

    ["code", "access_token", "scope", "authuser", "prompt"].forEach(key => {

        if(params.has(key)) {

            params.delete(key);

            mustClean = true;

        }

    });

    if(mustClean) {

        // Reconstruit l’URL propre (sans "code", "scope", ...)

        const newUrl = window.location.pathname + (params.toString() ? "?" + params.toString() : "");

        window.history.replaceState({}, document.title, newUrl);

    }

});



// --- Extraction et redirection avec le paramètre state ---

function getDestinationFromState() {

    const params = new URLSearchParams(window.location.search);

    const state = params.get("state");

    if (state && state.includes(":")) {

        // Récupère tout après le premier ":"

        return state.substring(state.indexOf(":") + 1);

    }

    return null;

}



document.getElementById("btn-login").addEventListener("click", function(e) {

    e.preventDefault();

    const destUrl = getDestinationFromState();

    // Redirige si l'URL extraite commence bien par https://

    if (destUrl && destUrl.startsWith("https://")) {

        window.location.href = destUrl;

    } else {

        // Fallback : page login locale

        window.location.href = "/login";

    }

});

</script>

</body>

</html>

erreur 404.html

Code :

<!DOCTYPE html>

<html lang="fr">

<head>

<meta charset="UTF-8">

<title>Accès refusé</title>

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



<style>

    body { background: #0d1117; color:white; font-family:Arial; margin:0;

           display:flex; justify-content:center; align-items:center; height:100vh; text-align:center; }

    .box { background:#161b22; padding:40px; border-radius:16px; max-width:450px;

           box-shadow:0 0 20px rgba(0,150,255,0.4); }

    .logo { width:100px; filter:drop-shadow(0 0 10px rgba(0,150,255,0.7)); margin-bottom:20px; }

    h1 { color:#58a6ff; margin-bottom:10px; }

    p { color:#ccc; line-height:1.6; }



    .btn-login {

        display:inline-block; margin-top:25px; padding:12px 22px;

        background:#0d6efd; color:white; font-weight:bold; text-decoration:none;

        border-radius:8px; transition:0.2s; box-shadow:0 0 12px rgba(0,150,255,0.6);

    }

    .btn-login:hover {

        background:#0b5ed7; box-shadow:0 0 16px rgba(0,150,255,0.8);

    }

</style>

</head>



<body>

<div class="box">

    <img src="/logo_dehorama.png" class="logo">

    <h1>Accès refusé</h1>

    <p>Vous n’avez pas les autorisations nécessaires.<br>Veuillez vous reconnecter ou changer de compte.</p>

  <!-- Bouton dynamique -->

<a href="#" id="btn-login" class="btn-login">Retour à la connexion</a>

</div>



<script>

// --- Nettoyeur de paramètres OAuth2 de l'URL si présents ---

window.addEventListener("DOMContentLoaded", function() {

    const params = new URLSearchParams(window.location.search);

    let mustClean = false;

    // Liste des paramètres OAuth gênants à effacer

    ["code", "access_token", "scope", "authuser", "prompt"].forEach(key => {

        if(params.has(key)) {

            params.delete(key);

            mustClean = true;

        }

    });

    if(mustClean) {

        // Reconstruit l’URL propre (sans "code", "scope", ...)

        const newUrl = window.location.pathname + (params.toString() ? "?" + params.toString() : "");

        window.history.replaceState({}, document.title, newUrl);

    }

});



// --- Extraction et redirection avec le paramètre state ---

function getDestinationFromState() {

    const params = new URLSearchParams(window.location.search);

    const state = params.get("state");

    if (state && state.includes(":")) {

        // Récupère tout après le premier ":"

        return state.substring(state.indexOf(":") + 1);

    }

    return null;

}



document.getElementById("btn-login").addEventListener("click", function(e) {

    e.preventDefault();

    const destUrl = getDestinationFromState();

    // Redirige si l'URL extraite commence bien par https://

    if (destUrl && destUrl.startsWith("https://")) {

        window.location.href = destUrl;

    } else {

        // Fallback : page login locale

        window.location.href = "/login";

    }

});

</script>

</body>

</html>

erreur 500.html

Code :

<!DOCTYPE html>

<html lang="fr">

<head>

<meta charset="UTF-8">

<title>Erreur serveur</title>

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



<style>

    body { background:#0d1117; color:white; font-family:Arial; margin:0;

           display:flex; justify-content:center; align-items:center; height:100vh; text-align:center; }

    .box { background:#161b22; padding:40px; border-radius:16px; max-width:450px;

           box-shadow:0 0 20px rgba(255,0,0,0.4); }

    .logo { width:100px; filter:drop-shadow(0 0 10px rgba(0,150,255,0.7)); margin-bottom:20px; }

    h1 { color:#ff6b6b; margin-bottom:10px; }

    p { color:#ccc; line-height:1.6; }



    .btn-login {

        display:inline-block; margin-top:25px; padding:12px 22px;

        background:#0d6efd; color:white; font-weight:bold; text-decoration:none;

        border-radius:8px; transition:0.2s; box-shadow:0 0 12px rgba(0,150,255,0.6);

    }

    .btn-login:hover {

        background:#0b5ed7; box-shadow:0 0 16px rgba(0,150,255,0.8);

    }

</style>

</head>



<body>

<div class="box">

    <img src="/logo_dehorama.png" class="logo">

    <h1>Erreur interne</h1>

    <p>Une erreur est survenue.<br>Veuillez réessayer plus tard.</p>



<a href="#" id="btn-login" class="btn-login">Retour à la connexion</a>

</div>



<script>

// --- Nettoyeur de paramètres OAuth2 de l'URL si présents ---

window.addEventListener("DOMContentLoaded", function() {

    const params = new URLSearchParams(window.location.search);

    let mustClean = false;

    // Liste des paramètres OAuth gênants à effacer

    ["code", "access_token", "scope", "authuser", "prompt"].forEach(key => {

        if(params.has(key)) {

            params.delete(key);

            mustClean = true;

        }

    });

    if(mustClean) {

        // Reconstruit l’URL propre (sans "code", "scope", ...)

        const newUrl = window.location.pathname + (params.toString() ? "?" + params.toString() : "");

        window.history.replaceState({}, document.title, newUrl);

    }

});



// --- Extraction et redirection avec le paramètre state ---

function getDestinationFromState() {

    const params = new URLSearchParams(window.location.search);

    const state = params.get("state");

    if (state && state.includes(":")) {

        // Récupère tout après le premier ":"

        return state.substring(state.indexOf(":") + 1);

    }

    return null;

}



document.getElementById("btn-login").addEventListener("click", function(e) {

    e.preventDefault();

    const destUrl = getDestinationFromState();

    // Redirige si l'URL extraite commence bien par https://

    if (destUrl && destUrl.startsWith("https://")) {

        window.location.href = destUrl;

    } else {

        // Fallback : page login locale

        window.location.href = "/login";

    }

});

</script>

</body>

</html>

[titreyoyo]7 - Modif des conf nginx series.dehorama.net et series2.dehorama.net[/titreyoyo]

Code :

#### MACHINE series  dehorama sickrage sickchill sickbeard



upstream series {

    server 192.168.x.x:1234;

}





#  http

server {

    listen 80;

    server_name series.dehorama.net;



    # ACME

    location ^~ /.well-known/acme-challenge/ {

        allow all;

    }



if ($host = series.dehorama.net) {

        return 301 https://$host$request_uri;

    } 



}



#

server {

    listen 443 ssl;

    http2 on;

    server_name series.dehorama.net;





# --- ERREURS PERSONNALISÉES ---



# --- ERREURS PERSONNALISÉES ---

error_page 401 /errors/401.html;

error_page 403 /errors/403.html;

error_page 404 /errors/404.html;

error_page 500 /errors/500.html;



# empêcher auth_request de s'appliquer aux erreurs

location ^~ /errors/ {

    alias /var/www/html/auth/errors/;

    auth_request off;

}

    #

    # SSL



    include /etc/nginx/snippets/letsencrypt.conf;

    ssl_certificate /etc/letsencrypt/live/cloud.dehorama.net/fullchain.pem; # managed by Certbot

    ssl_certificate_key /etc/letsencrypt/live/cloud.dehorama.net/privkey.pem; # managed by Certbot



    # -------------------------------------------------

    # ?  AJOUT OBLIGATOIRE POUR AUTH2 GOOGLE

    # -------------------------------------------------



    # 1) Vérifie si l’utilisateur est authentifié OAuth2

    auth_request /oauth2/auth;



    # 2) Si pas authentifié → redirection vers ta page login

    index index.php index.html index.htm;



    #error_page 401 @login_redirect;

    # 3) Proxy vers oauth2-proxy





     location  /oauth2/ {

        proxy_pass       http://127.0.0.1:4180;

        #proxy_pass     https://auth.dehorama.net/login;

        proxy_set_header Host    $host; 

        proxy_set_header X-Real-IP      $remote_addr;

        proxy_set_header X-Scheme       $scheme;

        proxy_set_header X-Original-URI $request_uri;

        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;

    proxy_set_header X-Forwarded-Proto $scheme;

    proxy_set_header X-Auth-Request-Redirect $scheme://$host$request_uri;

}



    # -----------------------------------------

    # ?  Sécurité renforcée

    # -----------------------------------------





    # NEW pour plus de securite trois ligne ci-dessous ok



       add_header 'Content-Security-Policy' "connect-src https: wss:";

       add_header 'Referrer-Policy' "no-referrer-when-downgrade";

       add_header 'Feature-Policy' 'geolocation https://$host';



       #proxy_hide_header X-Powered-By;

       add_header X-Xss-Protection "1; mode=block" always;

       add_header X-Content-Type-Options "nosniff"  always;

       add_header Strict-Transport-Security "max-age=15552000; includeSubdomains" always;

       add_header X-Frame-Options "SAMEORIGIN" always;



    ##########################################

    # 2️⃣ Site protégé

    ##########################################



    # -----------------------------------------

    # ?  Reverse Proxy 

    # -----------------------------------------



    location / {



        # Auth2 obligatoire

    auth_request /oauth2/auth;



        # Redirection si non logué

        error_page 401 @login_redirect;



    proxy_pass http://series; # Local emby ip and non SSL port

    proxy_hide_header X-Powered-By;

    proxy_set_header Range $http_range;

    proxy_set_header If-Range $http_if_range;

    proxy_set_header X-Real-IP $remote_addr;

    proxy_set_header Host $host;

    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;

        proxy_set_header X-Forwarded-Proto $scheme;

    #proxy_set_header X-Auth-Request-Redirect $scheme://$host$request_uri;

    proxy_set_header X-Auth-Request-Redirect $scheme://$host$request_uri;

    #Next three lines allow websockets

    proxy_http_version 1.1;

    proxy_set_header Upgrade $http_upgrade;

    proxy_set_header Connection "upgrade";

    }



  # --- REDIRECTION AUTH ---

    location @login_redirect {

        # redirection correcte avec rd=

    return 302 https://auth.dehorama.net/login?rd=$scheme://$host$request_uri;

    

    }





}

sans oublier de faire un restart sur nginx et Oauth2_proxy service . 

et voila c'est tout normalement maintenant votre site protegé par mail Google ou votre organisation .  

Exemple : series.dehorama.net