Autenticando usuários em aplicações existentes com OpenID Connect e NGINX Plus

Liam CrillyDiretor Sênior de Gestão de Produtos

Como usar o suporte a JWT para fornecer SSO a aplicações existentes

[Editor – Este post descreve como usar o NGINX Plus com provedores OpenID Connect compatíveis com o Fluxo Implícito para autenticação. As informações estão tecnicamente corretas, mas algumas ações (como usar o cron para buscar chaves públicas) não são mais necessárias devido a atualizações em nossa implementação de referência. Para consultar a implementação atual, acesse nosso repositório no GitHub.

No NGINX Plus R15 e em versões posteriores, você também pode usar o NGINX Plus como a Parte Confiável no Fluxo de Código de Autorização do OpenID Connect.]

O OAuth 2.0 contribuiu muito para transformar a flexibilidade e a experiência do usuário na autenticação em sites e aplicativos. Mas, apesar do nome, a especificação OAuth 2.0 diz muito pouco sobre a verificação da identidade do usuário final e nada sobre logon único (SSO). É aí que entra o OpenID Connect — ele é, essencialmente, a peça que faltava para incluir informações de identidade nos tokens de acesso do OAuth 2.0.

Os tokens de identidade do OpenID Connect estão em conformidade com a especificação JSON Web Token (JWT). Os tokens JWT (pronuncia-se “jot”) são compactos, fáceis de transmitir e fornecem um esquema básico comum para descrever informações de identidade. A grande vantagem dos JWTs é que eles podem ser aplicados a praticamente qualquer caso de uso de identidade, desde a autenticação de clientes de API até o fornecimento de SSO para aplicações empresariais. Na verdade, muitas organizações que usam o Google Apps podem usar o Google como provedor de identidade para oferecer SSO às suas aplicações empresariais. Dito isso, o uso do OpenID Connect e de JWTs não impede que eles sejam usados para autenticar usuários em aplicações web existentes ou fornecer SSO para elas.

NGINX Plus R10 e versões posteriores incluem suporte nativo a JWT, permitindo que o NGINX Plus valide tokens e adicione a identidade do usuário autenticado às solicitações upstream de uma forma que a aplicação possa consumir facilmente. Nesta publicação do blog, demonstramos como usar o suporte nativo a JWT do NGINX Plus para habilitar o SSO em aplicações existentes sem exigir nenhuma alteração nas próprias aplicações. Usamos o Google como provedor de identidade e um site simples para representar a aplicação. O fluxo de ponta a ponta é o seguinte:

Habilitando o OpenID Connect para sua aplicação web

Nosso exemplo tem dois componentes: a configuração do NGINX Plus e a página de login em HTML.

Configuração do NGINX Plus

A configuração do NGINX Plus para validar JWTs é muito simples.

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;
    }
}

O bloco location especifica que todas as solicitações para URLs que começam com /private/ devem ser autenticadas. A diretiva auth_jwt define o realm de autenticação que será retornado (junto com um código 401) se a autenticação não for bem-sucedida e indica onde, na solicitação, o NGINX Plus pode encontrar o JWT. Nesse caso, ele espera encontrar o token em um cookie chamado auth_token. Por padrão, o NGINX Plus espera que os clientes apresentem o JWT como um Token Bearer, usando o cabeçalho Authorization, como é comum em aplicações AJAX e clientes de API, mas também pode obter o JWT de outros cabeçalhos HTTP, de argumentos da string de consulta ou de um cookie, como neste exemplo.

A diretiva auth_jwt_key_file informa ao NGINX como validar o elemento de assinatura do JWT. A validação da assinatura garante que o JWT foi emitido pelo Google e não foi modificado desde então. O Google publica suas chaves públicas e as atualiza regularmente. Para manter um conjunto de chaves atualizado, use o cron(8) para buscá-las a cada hora, como neste exemplo de entrada do crontab.

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

Página de login baseada em HTML

Para manter este exemplo simples e direto, não vamos criar uma aplicação completa. Em vez disso, usaremos o HTML básico a seguir para criar uma página de login. O arquivo HTML se chama /var/www/public_html/index.html (isso corresponde ao caminho root que definimos na configuração do 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>

Destacamos duas dependências importantes no bloco <head>.

• <meta name="google‑signin‑client_id"> – Estamos usando a API JavaScript OAuth 2.0 do Google para realizar o processo de consentimento e autenticação OAuth 2.0 do usuário final. É ela que disponibiliza o botão de login e detecta se estamos conectados ou não. Para que nosso site seja autenticado pelo Google, precisamos criar um ID do cliente OAuth 2.0 e fornecê-lo como o atributo content dessa tag, substituindo o espaço reservado client-ID. Para obter instruções sobre como criar um novo ID do cliente OAuth 2.0, consulte o Apêndice no final deste artigo.
• <script src="/js.cookie.js"> tag – Precisamos de um analisador de cookies que possa extrair o token de identidade do token de acesso OAuth 2.0 e criar um cookie para ser enviado ao site. A linha Cookies.set faz isso usando a biblioteca JavaScript Cookie, que é incluída por meio dessa tag.

Com esses elementos implementados, agora temos uma página inicial pública com o mecanismo de login do Google e uma área privada protegida pelo NGINX Plus. Observe que não criamos nenhum conteúdo para nossa área privada, portanto, é esperado um erro 404 ao tentarmos acessá-la.

Leitura adicional

Para obter detalhes sobre funcionalidades avançadas de JWT, consulte Autenticação de clientes de API com JWT e NGINX Plus. Esse artigo explica como encaminhar solicitações autenticadas por proxy usando informações de identidade do usuário obtidas do JWT, registrar declarações do JWT e oferecer suporte a vários provedores de identidade.

Para conhecer o suporte nativo a JWT no NGINX Plus, inicie hoje mesmo sua avaliação gratuita de 30 dias ou entre em contato conosco.

Apêndice – Como criar um ID do cliente OAuth 2.0 do Google

[Editor – Fizemos todos os esforços para representar com precisão a interface gráfica das APIs do Google no momento da publicação, mas ela é altamente dinâmica, e as opções e localizações dos menus estão sujeitas a alterações. Use estas instruções como referência e adapte-as à interface atual conforme necessário.]

1. Acesse o painel das APIs do Google em https://console.developers.google.com/apis/dashboard. A página exibida dependerá do seu histórico com as APIs do Google. Talvez seja necessário criar uma conta, aceitar os termos de uso e realizar outras etapas não mostradas nestas instruções. A captura de tela a seguir mostra o canto superior esquerdo do painel. Clique na palavra à direita do logotipo Google APIs (se você já tiver criado um projeto, o nome dele poderá aparecer no lugar da palavra Projeto). Selecione Criar projeto.
   
    
2. Crie um novo projeto. Neste exemplo, nosso novo projeto se chama NGINX OpenID. Depois que você clicar no botão Criar, pode levar alguns segundos até que uma notificação seja exibida informando que o projeto foi criado.
   
    
3. Ative a API do Google+ para seu projeto. Ela fornece serviços de autenticação OAuth 2.0 e identidade. (Se o painel do Gerenciador de APIs ainda não aparecer na parte principal da janela, clique em Painel na área de navegação à esquerda da tela.) A primeira etapa para ativar a API do Google+ é clicar no botão ATIVAR API.
   
    
4. Clique em API do Google+ (na seção APIs sociais).
   
    
5. Clique no botão ATIVAR.
   
    
6. Para criar credenciais para seu projeto, clique em Credenciais na área de navegação à esquerda da tela e, em seguida, clique no botão Criar credenciais. Selecione ID do cliente OAuth no menu suspenso.
   
    
7. Selecione o botão de opção Aplicativo da Web. No campo Origens JavaScript autorizadas, especifique a URL do host em que o NGINX Plus está instalado e o número da porta que você especificou como parâmetro da diretiva listen em Como habilitar o OpenID Connect para seu aplicativo da Web (por exemplo, mydomain.example.com:80). Este exemplo usa localhost, mas você deve inserir o nome do host e a porta da instância real do NGINX Plus. Clique no botão Criar (talvez seja necessário clicar nele mais de uma vez para iniciar o processo de criação).
   
    
8. A janela Cliente OAuth é exibida com o ID e a chave secreta do cliente. Copie o ID do cliente para o atributo content da tag <meta name="google-signin-client_id"> no seu aplicativo (substituindo o espaço reservado client-ID destacado acima). Você não precisa da chave secreta do cliente.
   
    
9. Na tela principal de Credenciais, clique em Tela de consentimento OAuth. Informe seu endereço de e-mail e o nome de um produto (todos os outros campos são opcionais).
   
    

Voltar à seção sobre a criação de um aplicativo de exemplo que usa as credenciais

Para conhecer o suporte nativo a JWT no NGINX Plus, inicie hoje mesmo sua avaliação gratuita de 30 dias ou entre em contato conosco.

Sobre o autor

Liam CrillyDiretor Sênior de Gestão de Produtos

Mais publicações de Liam Crilly