Autenticación de usuarios en aplicaciones existentes con OpenID Connect y NGINX Plus

NGINX | 07 de septiembre de 2016

Liam CrillyDirector sénior de Gestión de Producto

Uso de la compatibilidad con JWT para proporcionar SSO a aplicaciones existentes

[Editor – En esta entrada se describe cómo utilizar 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 utilizar cron para obtener claves públicas) ya no son necesarias debido a las actualizaciones de nuestra implementación de referencia. Para consultar la implementación actual, visite nuestro repositorio de GitHub.

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

OAuth 2.0 ha contribuido en gran medida a transformar la flexibilidad y la experiencia de usuario de la autenticación en sitios web y aplicaciones. Sin embargo, pese a su 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). Aquí es donde entra en juego OpenID Connect: es, en esencia, la pieza que faltaba para incluir información de identidad en los tokens de acceso de OAuth 2.0.

Los tokens de identidad de OpenID Connect cumplen la especificación JSON Web Token (JWT). Los tokens JWT (pronunciado «yot») son compactos, fáciles de transferir y proporcionan un esquema básico común para describir la información de identidad. La gran ventaja de los JWT es que pueden aplicarse a casi cualquier caso de uso relacionado con la identidad, desde la autenticación de clientes de API hasta el inicio de sesión único (SSO) en aplicaciones empresariales. De hecho, muchas organizaciones que utilizan Google Apps pueden utilizar Google como proveedor de identidad para ofrecer inicio de sesión único (SSO) en sus aplicaciones empresariales. Dicho esto, el uso de OpenID Connect y los JWT no impide que se utilicen para autenticarse en aplicaciones web existentes o proporcionarles inicio de sesión único (SSO).

NGINX Plus R10 y las versiones posteriores incluyen compatibilidad nativa con JWT, lo que permite a NGINX Plus validar tokens y añadir la identidad del usuario autenticado a las solicitudes dirigidas a servidores ascendentes de una forma que la aplicación pueda procesar fácilmente. En esta entrada del blog mostramos cómo utilizar la compatibilidad nativa con JWT de NGINX Plus para habilitar el SSO en aplicaciones existentes sin necesidad de modificarlas. Utilizamos Google como proveedor de identidades y un sitio web sencillo para representar la aplicación. El flujo de principio a fin es el siguiente:

NGINX Plus valida la identidad del usuario mediante OAuth 2.0 y OpenID Connect para el SSO basado en Google

Habilitación de OpenID Connect para su aplicación web

Nuestro ejemplo consta de 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 sencilla.

server {    listen 80;
    root /var/www/public_html;

    location /private/ {
        auth_jwt "Google account" token=$cookie_auth_token;
        auth_jwt_key_file /etc/nginx/google_certs.jwk;
    }
}

El bloque location especifica que se deben autenticar todas las solicitudes a URL que comiencen por /private/. La directiva auth_jwt define el dominio de autenticación que se devolverá (junto con un código 401) si la autenticación no se realiza correctamente, así como el lugar de la solicitud en el que NGINX Plus puede encontrar el JWT. En este caso, espera encontrar el token en una cookie denominada auth_token. De forma predeterminada, NGINX Plus espera que los clientes presenten el JWT como un token de portador, mediante la cabecera Authorization, como es habitual en las aplicaciones AJAX y los clientes de API, aunque también puede obtener el JWT de otras cabeceras HTTP, de parámetros de la cadena de consulta o de una cookie, como en este ejemplo.

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

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 que este ejemplo sea sencillo y claro, no vamos a crear una aplicación completa. En su lugar, utilizaremos el siguiente código HTML básico para crear una página de inicio de sesión. El archivo HTML se llama /var/www/public_html/index.html (esto coincide con la ruta root 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>NGINX OpenID Connect demo</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="client-ID.apps.googleusercontent.com"> <script src="/js.cookie.js"></script>
</head>
<body>
    <h2>NGINX OpenID Connect demo</h2>
    <hr/>
    <h3>Login with a Google account then visit the <a href="/private/">private area</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>Sign out</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>

Hemos destacado dos dependencias clave en el bloque <head>.

<meta name="google‑signin‑client_id"> – Estamos utilizando la API de JavaScript OAuth 2.0 de Google para llevar a cabo el proceso de consentimiento y autenticación OAuth 2.0 del usuario final. Esta API nos proporciona el botón de inicio de sesión y permite detectar si hemos iniciado sesión o no. Para que Google autentique nuestro sitio web, debemos crear un ID de cliente de OAuth 2.0 e incluirlo como atributo content de esta etiqueta, sustituyendo el marcador de posición client-ID. Para obtener instrucciones sobre cómo crear un nuevo ID de cliente de OAuth 2.0, consulta 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 de OAuth 2.0 y crear una cookie para enviarla al sitio web. La línea Cookies.set se encarga de ello mediante la biblioteca JavaScript Cookie, que se incluye con esta etiqueta.

Con estos elementos configurados, 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 que es de esperar que se produzca un error 404 al intentar acceder a ella.

Lecturas adicionales

Para obtener más información sobre las funcionalidades avanzadas de JWT, consulte «Autenticación de clientes de API con JWT y NGINX Plus». En este artículo se explica cómo redirigir mediante proxy solicitudes autenticadas con la información de identidad del usuario obtenida del JWT, registrar las declaraciones del JWT y admitir varios proveedores de identidad.

Para explorar la compatibilidad nativa con JWT de NGINX Plus, inicie hoy mismo su prueba gratuita de 30 días o póngase en contacto con nosotros.

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

[Editor – Hemos hecho todo lo posible por representar fielmente la interfaz gráfica de las API de Google en el momento de la publicación, pero esta es muy dinámica y las opciones de menú y sus ubicaciones pueden cambiar. Utilice estas instrucciones como referencia y adáptelas a la interfaz actual según sea necesario.]

Acceda al panel de Google APIs en https://console.developers.google.com/apis/dashboard. La página que se abra dependerá de su historial con Google APIs. Es posible que tenga que crear una cuenta, aceptar las condiciones de uso y realizar otros pasos que no se muestran en estas instrucciones. La siguiente captura de pantalla muestra la esquina superior izquierda del panel. Haga clic en la palabra situada a la derecha del logotipo de Google APIs (si ya ha creado un proyecto, puede que aparezca su nombre en lugar de la palabra Proyecto). Seleccione Crear proyecto.
Cree un proyecto nuevo. En este ejemplo, el nuevo proyecto se llama NGINX OpenID. Después de hacer clic en el botón Crear, pueden pasar varios segundos hasta que aparezca una notificación indicando que el proyecto se ha creado.
Habilite la API de Google+ para su proyecto. Esta proporciona servicios de autenticación OAuth 2.0 y de identidad. (Si el panel del Administrador de API aún no aparece en la parte principal de la ventana, haga clic en Panel en el área de navegación situada a la izquierda de la pantalla). El primer paso para habilitar la API de Google+ es hacer clic en el botón HABILITAR API.
Haz clic en API de Google+ (en la sección API sociales).
Haz clic en el botón «HABILITAR».
Para crear credenciales para tu proyecto, haz clic en Credenciales en el área de navegación situada a la izquierda de la pantalla y, a continuación, haz clic en el botón Crear credenciales. Selecciona ID de cliente de OAuth en el menú desplegable.
Seleccione el botón de opción Aplicación 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 indicó como parámetro de la directiva listen en Habilitación de OpenID Connect para su aplicación web (por ejemplo, mydomain.example.com:80). En este ejemplo se utiliza localhost, pero debe introducir 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 más de una vez para que se inicie el proceso de creación).
Se abrirá la ventana «Cliente de OAuth», en la que se mostrarán el ID y el secreto de cliente. Copie el ID de cliente en el atributo content de la etiqueta <meta name="google-signin-client_id"> de su aplicación (sustituyendo el marcador de posición resaltado client-ID que se muestra arriba). No necesita el secreto de cliente.
En la pantalla principal de Credenciales, haz clic en Pantalla de consentimiento de OAuth. Introduce tu dirección de correo electrónico y el nombre de un producto (todos los demás campos son opcionales).