Authentification des utilisateurs sur des applications existantes avec OpenID Connect et NGINX Plus

Utilisation du support JWT pour fournir l'authentification unique pour les applications existantes

[ Éditeur – Cet article décrit comment utiliser NGINX Plus avec les fournisseurs OpenID Connect qui prennent en charge le flux implicite pour l’authentification. Les informations sont techniquement correctes, mais certaines actions (comme l'utilisation de cron pour récupérer des clés publiques) ne sont plus nécessaires en raison des mises à jour de notre implémentation de référence. Pour l'implémentation actuelle, consultez notre dépôt GitHub .

Dans NGINX Plus R15 et versions ultérieures, vous pouvez également utiliser NGINX Plus comme partie de confiance dans le flux de code d'autorisation OpenID Connect.]

OAuth 2.0 a beaucoup contribué à transformer la flexibilité et l’expérience utilisateur en matière d’authentification sur les sites Web et les applications. Mais malgré son nom, la spécification OAuth 2.0 ne dit pas grand-chose sur la vérification de l’identité de l’utilisateur final et rien sur l’authentification unique (SSO). C'est là qu'intervient OpenID Connect : il s'agit essentiellement de la pièce manquante qui transporte les informations d'identité dans les jetons d'accès OAuth 2.0.

Les jetons d'identité OpenID Connect sont conformes à la spécification JSON Web Token (JWT) . Les jetons JWT (prononcé « jot ») sont compacts, faciles à transmettre et fournissent un schéma de base commun pour décrire les informations d'identité. L’avantage des JWT est qu’ils peuvent être appliqués à presque tous les cas d’utilisation d’identité, de l’authentification des clients API à la fourniture de SSO pour les applications d’entreprise. En fait, de nombreuses organisations qui utilisent Google Apps peuvent utiliser Google comme fournisseur d’identité pour fournir l’authentification unique à leurs applications d’entreprise . Cela dit, l’utilisation d’OpenID Connect et de JWT ne les empêche pas d’être utilisés pour s’authentifier ou fournir une authentification unique pour les applications Web existantes.

NGINX Plus R10 et versions ultérieures incluent la prise en charge native de JWT, permettant à NGINX Plus de valider les jetons et de décorer les requêtes en amont avec l'identité de l'utilisateur authentifié d'une manière que l'application peut facilement consommer. Dans cet article de blog, nous montrons comment utiliser la prise en charge JWT native dans NGINX Plus pour activer SSO pour les applications existantes sans aucune modification requise sur les applications elles-mêmes. Nous utilisons Google comme fournisseur d’identité et un site Web simple pour représenter l’application. Le flux de bout en bout ressemble à ceci :

Activation d'OpenID Connect pour votre application Web

Notre exemple comporte deux composants : la configuration NGINX Plus et la page de connexion HTML.

Configuration de NGINX Plus

La configuration NGINX Plus pour la validation des JWT est très simple.

serveur { écouter 80 ;
racine /var/www/public_html ;

emplacement /privé/ {
auth_jwt "Compte Google" token=$cookie_auth_token ;
auth_jwt_key_file /etc/nginx/google_certs.jwk ;
}
}

Le bloc d'emplacement spécifie que toutes les demandes adressées aux URL commençant par /private/ doivent être authentifiées. La directive auth_jwt définit le domaine d'authentification qui sera renvoyé (avec un401 ) si l'authentification échoue, et où dans la demande NGINX Plus peut trouver le JWT. Dans ce cas, il s'attend à trouver le jeton dans un cookie nommé auth_token . Par défaut, NGINX Plus s'attend à ce que les clients présentent le JWT sous la forme d'un jeton porteur , en utilisant l'en-tête d'autorisation comme c'est le cas avec les applications AJAX et les clients API , mais il peut également obtenir le JWT à partir d'autres en-têtes HTTP, d'arguments de chaîne de requête ou d'un cookie comme dans cet exemple.

La directive auth_jwt_key_file indique à NGINX comment valider l'élément de signature du JWT. La validation de la signature garantit que le JWT a été émis par Google et n'a pas été modifié depuis. Google publie ses clés publiques et les actualise régulièrement. Pour maintenir un ensemble de clés à jour, utilisez cron(8) pour les récupérer toutes les heures, comme dans cet exemple d'entrée crontab .

0 * * * * wget https://www.googleapis.com/oauth2/v3/certs -O /etc/nginx/google_certs.jwk

Page de connexion basée sur HTML

Pour garder cet exemple simple et direct, nous ne créons pas une application entière. Au lieu de cela, nous utilisons le code HTML de base suivant pour créer une page de connexion. Le fichier HTML s'appelle /var/www/public_html/index.html (cela correspond au chemin racine que nous avons défini dans la configuration NGINX Plus).

<html>
<head>
<meta http-equiv="cache-control" content="no-cache" />
<meta http-equiv="expires" content="0" />
<title>Démo NGINX OpenID Connect</title>
<script src="https://apis.google.com/js/platform.js" async defer></script>
<meta name="google-signin-scope" content="profile email">
    <meta name="google-signin-client_id" 
content="ID client.apps.googleusercontent.com">
<script src="/js.cookie.js"></script>
</head>
<body>
<h2>Démo NGINX OpenID Connect</h2>
<hr/>
<h3>Connectez-vous avec un compte Google puis visitez la <a href="/private/">zone privée</a>.</h3>
<table><tr><td>
<div class="g-signin2" data-onsuccess="onSignIn" data-theme="dark"></div></td>
<script>
function onSignIn(googleUser) {
var profile = googleUser.getBasicProfile();
Cookies.set('auth_token', googleUser.getAuthResponse().id_token);
document.getElementById('google_signout').innerHTML = '<a href="#" onclick="signOut();"><img src="' + profile.getImageUrl() + '" width=32 height=32>Se déconnecter</a>';
};
function signOut() {
var auth2 = gapi.auth2.getAuthInstance();
auth2.signOut().then(function () {
Cookies.remove('auth_token');
document.getElementById('google_signout').innerHTML = '';
});
}
</script>
<td><div id="google_signout"></div></td>
</tr></table>
<hr/>
</body>
</html>

Nous avons mis en évidence deux dépendances clés dans le bloc .

• <meta name="google‑signin‑client_id"> tag – Nous utilisons API JavaScript OAuth 2.0 de Google pour exécuter le processus de consentement et d’authentification de l’utilisateur final OAuth 2.0. C'est ce qui nous donne le bouton de connexion et peut détecter si nous sommes connectés ou non. Pour que notre site Web soit authentifié par Google, nous devons créer un ID client OAuth 2.0 et le fournir comme attribut de contenu à cette balise, en remplaçant l'espace réservé ID client . Pour obtenir des instructions sur la création d’un nouvel ID client OAuth 2.0, consultez l’ annexe au bas de cet article.
• <script src="/js.cookie.js"> tag – Nous avons besoin d’un analyseur de cookies capable d’extraire le jeton d’identité du jeton d’accès OAuth 2.0 et de créer un cookie à envoyer au site Web. La ligne Cookies.set accomplit cela en utilisant la bibliothèque JavaScript Cookie , qui est incluse avec cette balise.

Avec ces éléments en place, nous disposons désormais d'une page d'accueil publique avec le mécanisme de connexion de Google et d'une zone privée protégée par NGINX Plus. Notez que nous n'avons créé aucun contenu pour notre espace privé, donc un404 une erreur est à prévoir lorsque nous essayons d'y accéder.

Lectures complémentaires

Pour plus de détails sur les fonctionnalités JWT avancées, consultez Authentification des clients API avec JWT et NGINX Plus . Il explique comment proxyer les demandes authentifiées avec les informations d'identité de l'utilisateur obtenues à partir du JWT, enregistrer les revendications JWT et prendre en charge plusieurs fournisseurs d'identité.

Pour découvrir la prise en charge native de JWT dans NGINX Plus, démarrez votre essai gratuit de 30 jours dès aujourd'hui ou contactez-nous .

Annexe – Création d’un identifiant client Google OAuth 2.0

[ Éditeur – Nous avons fait tous les efforts possibles pour représenter avec précision l'interface graphique des API Google au moment de la publication, mais l'interface graphique est très dynamique, avec des options de menu et des emplacements susceptibles de changer. Utilisez ces instructions comme référence et adaptez-les à l'interface graphique actuelle si nécessaire.]

1. Accédez au tableau de bord des API Google à l' adresse https://console.developers.google.com/apis/dashboard .

   La page qui s'ouvre dépend de votre historique avec les API Google. Vous devrez peut-être créer un compte, accepter les conditions d’utilisation et effectuer d’autres étapes non indiquées dans ces instructions.

   La capture d’écran suivante montre le coin supérieur gauche du tableau de bord. Cliquez sur le mot à droite du logo Google API (si vous avez déjà créé un projet, son nom peut apparaître à la place du mot Projet ). Sélectionnez Créer un projet .

   

    

2. Créer un nouveau projet. Ici, notre nouveau projet s'appelle NGINX OpenID . Après avoir cliqué sur le bouton Créer , il peut s'écouler plusieurs secondes avant qu'une notification apparaisse indiquant que votre projet a été créé.

   

    

3. Activez l'API Google+ pour votre projet. Il fournit des services d’authentification et d’identité OAuth 2.0.

   (Si le tableau de bord du gestionnaire d'API n'apparaît pas déjà dans la partie principale de la fenêtre, cliquez sur Tableau de bord dans la zone de navigation à gauche de l'écran.)

   La première étape pour activer l’API Google+ consiste à cliquer sur le bouton ACTIVER L’API .

   

    

4. Cliquez sur Google+ API (dans la section API sociales ).

   

    

5. Cliquez sur le bouton ACTIVER .

   

    

6. Pour créer des informations d’identification pour votre projet, cliquez sur Informations d’identification dans la zone de navigation à gauche de l’écran, puis cliquez sur le bouton Créer des informations d’identification .

   Sélectionnez l’ID client OAuth dans le menu déroulant.

   

    

7. Sélectionnez le bouton radio Application Web . Dans le champ Origines JavaScript autorisées , spécifiez l'URL de l'hôte sur lequel NGINX Plus est installé et le numéro de port que vous avez spécifié comme paramètre de la directive listen dans Activation d'OpenID Connect pour votre application Web (par exemple, mydomain.example.com:80 ). Cet exemple utilise localhost mais votre entrée doit être le nom d'hôte et le port de l'instance NGINX Plus réelle.

   Cliquez sur le bouton Créer (vous devrez peut-être cliquer dessus plusieurs fois pour démarrer le processus de création).

   

    

8. La fenêtre du client OAuth s’ouvre pour signaler votre ID client et votre secret client. Copiez l'ID client dans le contenu attribut de la <meta name="google-signin-client_id"> balise dans votre application (en remplaçant la balise en surbrillance ID client (espace réservé affiché ci-dessus). Vous n'avez pas besoin du secret client.

   

    

9. Sur l’écran principal des informations d’identification , cliquez sur Écran de consentement OAuth . Indiquez votre adresse e-mail et un nom de produit (tous les autres champs sont facultatifs).

   

    

Revenir à la section sur la création d’un exemple d’application qui utilise les informations d’identification

Pour découvrir la prise en charge native de JWT dans NGINX Plus, démarrez votre essai gratuit de 30 jours dès aujourd'hui ou contactez-nous .