Autenticación de usuarios en aplicações existentes con OpenID Connect y NGINX Plus

Uso de la compatibilidad con JWT para proporcionar SSO a aplicações existentes

[ Editor : esta publicación describe cómo usar NGINX Plus con proveedores de OpenID Connect que admiten el flujo implícito para la autenticación. La información es técnicamente correcta, pero algunas acciones (como usar cron para obtener claves públicas) ya no son necesarias debido a las actualizaciones de nuestra implementación de referencia. Para la implementación actual, consulte nuestro repositorio de GitHub .

En NGINX Plus R15 y versiones posteriores, también puede usar NGINX Plus como la parte confiada en el flujo de código de autorización de OpenID Connect.]

OAuth 2.0 ha hecho mucho para transformar la flexibilidad y la experiencia del usuario a la hora de autenticarse en sitios web y aplicações. Pero a pesar del nombre, la especificación OAuth 2.0 dice muy poco sobre la verificación de la identidad del usuario final y nada sobre el inicio de sesión único (SSO). Ahí es donde entra en juego OpenID Connect : es esencialmente la pieza faltante que transporta la información de identidad en los tokens de acceso OAuth 2.0.

Los tokens de identidad de OpenID Connect cumplen con la especificación JSON Web Token (JWT) . Los tokens JWT (pronunciado “jot”) son compactos, fáciles de transmitir y proporcionan un esquema central común para describir la información de identidad. Lo bueno de los JWT es que se pueden aplicar a casi cualquier caso de uso de identidad, desde autenticar clientes API hasta proporcionar SSO para aplicações empresariales. De hecho, muchas organizaciones que utilizan Google Apps pueden utilizar a Google como proveedor de identidad para proporcionar SSO a sus aplicações empresariales . Dicho esto, el uso de OpenID Connect y JWT no impide que se utilicen para autenticar o proporcionar SSO a aplicações web existentes.

NGINX Plus R10 y versiones posteriores incluyen soporte JWT nativo, lo que permite a NGINX Plus validar tokens y decorar solicitudes ascendentes con la identidad del usuario autenticado de una manera que la aplicação pueda consumir fácilmente. En esta publicación de blog demostramos cómo utilizar el soporte JWT nativo en NGINX Plus para habilitar SSO para aplicações existentes sin necesidad de realizar cambios en las aplicações en sí. Utilizamos Google como proveedor de identidad y un sitio web simple para representar la aplicação. El flujo de extremo a extremo se ve así:

Habilitar OpenID Connect para su aplicação web

Nuestro ejemplo tiene dos componentes: la configuración de NGINX Plus y la página de inicio de sesión HTML.

Configuración de NGINX Plus

La configuración de NGINX Plus para validar JWT es muy simple.

servidor { escucha 80;
raíz /var/www/public_html;

ubicación /private/ {
auth_jwt "Cuenta de Google" token=$cookie_auth_token;
auth_jwt_key_file /etc/nginx/google_certs.jwk;
}
}

El bloque de ubicación especifica que cualquier solicitud a URL que comiencen con /private/ debe ser autenticada. La directiva auth_jwt define el ámbito de autenticación que se devolverá (junto con un401 ) si la autenticación no es exitosa y en qué parte de la solicitud NGINX Plus puede encontrar el JWT. En este caso, espera encontrar el token en una cookie llamada auth_token . De forma predeterminada, NGINX Plus espera que los clientes presenten el JWT como un Bearer Token , utilizando el encabezado Authorization como es común con las aplicações AJAX y los clientes API , pero también puede obtener el JWT de otros encabezados HTTP, argumentos de cadenas de consulta o una cookie como en este ejemplo.

La directiva auth_jwt_key_file le dice a NGINX cómo validar el elemento de firma del JWT. La validación de la firma garantiza que el JWT fue emitido por Google y no se ha modificado desde entonces. Google publica sus claves públicas y las actualiza periódicamente. Para mantener un conjunto de claves actualizado, utilice cron(8) para obtenerlas cada hora, como en esta entrada de crontab de muestra.

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

Página de inicio de sesión basada en HTML

Para mantener este ejemplo simple y directo, no estamos construyendo una aplicação completa. En su lugar, utilizamos el siguiente HTML básico para crear una página de inicio de sesión. El archivo HTML se llama /var/www/public_html/index.html (coincide con la ruta raíz que definimos en la configuración de NGINX Plus).

<html>
<head>
<meta http-equiv="cache-control" content="no-cache" />
<meta http-equiv="expires" content="0" />
<title>Demostración de 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="id_cliente_de_inicio_de_sesión_de_google"
content="ID de cliente.apps.googleusercontent.com">
<script src="/js.cookie.js"></script>
</head>
<body>
<h2>Demostración de NGINX OpenID Connect</h2>
<hr/>
<h3>Inicia sesión con una cuenta de Google y visita el <a href="/private/">área privada</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>Cerrar sesión</a>';
};
función 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>

Hemos resaltado dos dependencias claves en el bloque .

• <meta name="google‑signin‑client_id"> etiqueta – Estamos usando API de JavaScript OAuth 2.0 de Google para realizar el proceso de consentimiento y autenticación del usuario final de OAuth 2.0. Esto es lo que nos da el botón de inicio de sesión y puede detectar si hemos iniciado sesión o no. Para que Google autentique nuestro sitio web, necesitamos crear un ID de cliente OAuth 2.0 y proporcionarlo como atributo de contenido a esta etiqueta, reemplazando el marcador de posición de ID de cliente . Para obtener instrucciones sobre cómo crear un nuevo ID de cliente OAuth 2.0, consulte el Apéndice al final de este artículo.
• <script src="/js.cookie.js"> etiqueta – Necesitamos un analizador de cookies que pueda extraer el token de identidad del token de acceso OAuth 2.0 y crear una cookie para enviarla al sitio web. La línea Cookies.set logra esto mediante la biblioteca Cookie de JavaScript , que se incluye con esta etiqueta.

Con estas piezas en su lugar ahora tenemos una página de inicio pública con el mecanismo de inicio de sesión de Google y un área privada protegida por NGINX Plus. Tenga en cuenta que no hemos creado ningún contenido para nuestra área privada, por lo que404 Es de esperar que se produzca un error cuando intentamos acceder a él.

Más información

Para obtener detalles sobre la funcionalidad avanzada de JWT, consulte Autenticación de clientes de API con JWT y NGINX Plus . Explica cómo proxyizar solicitudes autenticadas con información de identidad del usuario obtenida del JWT, registrar reclamos de JWT y admitir múltiples proveedores de identidad.

Para explorar el soporte nativo de JWT en NGINX Plus, comience hoy su prueba gratuita de 30 días o contáctenos .

Apéndice: Creación de un ID de cliente de Google OAuth 2.0

[ Editor : Hemos hecho todo lo posible para representar con precisión la GUI de las API de Google en el momento de la publicación, pero la GUI es muy dinámica y las opciones y ubicaciones del menú están sujetas a cambios. Utilice estas instrucciones como referencia y adáptelas a la GUI actual según sea necesario.]

1. Acceda al panel de API de Google en https://console.developers.google.com/apis/dashboard .

   La página que se abre depende de tu historial con las API de Google. Es posible que tengas que crear una cuenta, aceptar los términos de uso y realizar otros pasos que no se muestran en estas instrucciones.

   La siguiente captura de pantalla muestra la esquina superior izquierda del tablero. Haga clic en la palabra a la derecha del logotipo de las API de Google (si anteriormente ha creado un proyecto, es posible que aparezca su nombre en lugar de la palabra Proyecto ). Seleccione Crear proyecto .

   

    

2. Crear un nuevo proyecto. Nuestro nuevo proyecto se llama NGINX OpenID . Tras hacer clic en el botón "Crear" , puede que pasen varios segundos hasta que aparezca una notificación indicando que el proyecto se ha creado.

   

    

3. Habilite la API de Google+ para su proyecto. Proporciona servicios de identidad y autenticación OAuth 2.0.

   (Si el panel de API Manager aún no aparece en la parte principal de la ventana, haga clic en Panel en el área de navegación a la izquierda de la pantalla).

   El primer paso para habilitar la API de Google+ es hacer clic en el botón HABILITAR API .

   

    

4. Haga clic en API de Google+ (en la sección API sociales ).

   

    

5. Haga clic en el botón HABILITAR .

   

    

6. Para crear credenciales para su proyecto, haga clic en Credenciales en el área de navegación a la izquierda de la pantalla, luego haga clic en el botón Crear credenciales .

   Seleccione el ID de cliente OAuth en el menú desplegable.

   

    

7. Seleccione el botón de opción de la aplicação web . En el campo Orígenes de JavaScript autorizados , especifique la URL del host donde está instalado NGINX Plus y el número de puerto que especificó como parámetro para la directiva listen en Habilitación de OpenID Connect para su aplicação web (por ejemplo, mydomain.example.com:80 ). Este ejemplo utiliza localhost, pero su entrada debe ser el nombre de host y el puerto de la instancia real de NGINX Plus.

   Haga clic en el botón Crear (es posible que tenga que hacer clic en él más de una vez para que comience el proceso de creación).

   

    

8. Aparecerá la ventana del cliente OAuth para informar su ID de cliente y su secreto de cliente. Copiar el ID del cliente a contenido atributo de la <meta name="id_del_cliente_de_inicio_de_sesión_de_google"> etiqueta en su aplicación (reemplazando la etiqueta resaltada) ID de cliente marcador de posición que se muestra arriba). No necesitas el secreto del cliente.

   

    

9. En la pantalla principal de Credenciales , haga clic en Pantalla de consentimiento de OAuth . Proporcione su dirección de correo electrónico y un nombre de producto (todos los demás campos son opcionales).

   

    

Regrese a la sección sobre la creación de una aplicação de muestra que utiliza las credenciales

Para explorar el soporte nativo de JWT en NGINX Plus, comience hoy su prueba gratuita de 30 días o contáctenos .