Como hospedar uma página de login com o Cloud Run

Para usar identidades externas com o Identity-Aware Proxy (IAP), seu app precisa de uma página de login. O IAP redirecionará os usuários para esta página para autenticação antes que eles acessem recursos seguros.

Neste artigo, mostramos como implantar e personalizar uma página de login pré-criada usando o Cloud Run. Essa é a maneira mais rápida de começar a usar identidades externas e não requer que você escreva código.

Também é possível criar uma página de login por conta própria. Criar a própria página é mais difícil, mas aumenta o controle sobre o fluxo de autenticação e a experiência do usuário. Para saber mais, consulte Como criar uma página de login com o FirebaseUI e Como criar uma página de login personalizada.

Antes de começar

Como testar a página de login

A página de login inicial criada pelo IAP é totalmente funcional. Para testar:

  1. Acesse um recurso protegido pelo IAP. Você será redirecionado automaticamente para a página de login.

  2. Selecione um locatário e um provedor para fazer login. Se você não encontrar nenhum locatário ou provedor listado, verifique se configurou um usando o Identity Platform.

  3. Faça login com suas credenciais.

Você será redirecionado para o recurso protegido.

Como personalizar a página de login

É possível personalizar a página de login usando um arquivo de configuração JSON. Veja algumas opções:

  • Adicionar um cabeçalho e um logotipo à página de login.
  • Especificar os locatários e provedores disponíveis.
  • Como personalizar os ícones e o estilo de cada locatário e botão de provedor.
  • Adição de links para a política de privacidade e os Termos de Serviço do app.

Nas seções a seguir, explicamos como acessar e atualizar o arquivo de configuração JSON.

Como conseguir um token de acesso

Para administrar a página de login, você precisa de um token de acesso do Google. A maneira mais fácil de conseguir uma é ativar o Google como um provedor do Identity Platform. Se o app já usa o Google como provedor de identidade, pule esta seção.

  1. Acesse Provedores do Identity Platform no Console do Cloud.

    Acessar a página "Provedores do Identity Platform"

  2. Clique em Adicionar um provedor.

  3. Selecione Google na lista de provedores.

  4. Configure o ID do cliente da Web e a chave secreta do cliente da Web:

    1. Em uma guia separada, abra a página do IAP.

      Acessar a página do IAP

    2. Expanda o menu Ver mais do recurso e clique em Editar cliente OAuth.

    3. Copie os campos ID do cliente e Chave secreta do cliente na configuração do provedor do Google para o Identity Platform.

    4. Adicione o URL de redirecionamento do Identity Platform à lista de URIs de redirecionamento autorizados para o cliente OAuth. O URL é formatado como https://<var>PROJECT_ID</var>.firebaseapp.com/__/auth/handler.

  5. Clique em Salvar nas duas páginas.

Como fazer login no painel do administrador

A configuração JSON para a página de login hospedada pelo Cloud Run. As etapas a seguir mostram como acessar o painel. Você precisará do papel Administrador do Storage (roles/storage.admin).

  1. Acesse a página do IAP no Console do Cloud.

    Acessar a página do IAP

  2. Selecione seu recurso na lista.

  3. Inicie o URL listado em Personalizar página no painel de informações. Ele precisa ser semelhante a este: https://servicename-xyz-uc.a.run.app/admin.

  4. Faça login com a mesma Conta do Google usada para configurar o IAP. Será exibido um editor de texto contendo o arquivo de configuração JSON.

Como modificar a configuração

O esquema de configuração da página de login é baseado na FirebaseUI e herda muitas das propriedades dela. O código a seguir mostra um exemplo de configuração com dois locatários:

{
  "AIzaSyC5DtmRUR...": {
    "authDomain": "awesomeco.firebaseapp.com",
    "displayMode": "optionFirst",
    "selectTenantUiTitle": "Awesome Company Portal",
    "selectTenantUiLogo": "https://awesome.com/abcd/logo.png",
    "styleUrl": "https://awesome.com/abcd/overrides/stylesheet.css",
    "tosUrl": "https://awesome.com/abcd/tos.html",
    "privacyPolicyUrl": "https://awesome.com/abcd/privacypolicy.html",
    "tenants": {
      "tenant-a-id": {
        "fullLabel": "Company A Portal",
        "displayName": "Company A",
        "iconUrl": "https://companya.com/img/icon.png",
        "logoUrl": "https://companya.com/img/logo.png",
        "buttonColor": "#007bff",
        "signInOptions": [
          "password",
          "facebook.com",
          "google.com",
          "microsoft.com",
          {
            "provider": "saml.okta-cicp-app",
            "providerName": "Corp Account",
            "fullLabel": "Employee Corporate Login",
            "buttonColor": "#ff0000",
            "iconUrl": "https://companya.com/abcd/icon-1.png"
          },
          {
            "provider": "oidc.okta-oidc",
            "providerName": "Contractor Account",
            "fullLabel": "Contractor Account Portal",
            "buttonColor": "#00ff00",
            "iconUrl": "https://companya.com/abcd/icon-2.png"
          }
        ],
        "tosUrl": "https://companya.com/abcd/tos.html",
        "privacyPolicyUrl": "https://companya.com/abcd/privacypolicy.html"
      },
      "tenant-b-id": {
        "fullLabel": "Company B Portal",
        "displayName": "Company B",
        "iconUrl": "https://companyb.com/img/icon.png",
        "logoUrl": "https://companyb.com/img/logo.png",
        "buttonColor": "#007bff",
        "immediateFederatedRedirect": true,
        "signInOptions": [
          {
            "provider": "saml.okta-bla-app",
            "providerName": "Corp Account",
            "buttonColor": "#0000ff",
            "iconUrl": "https://companyb.com/abcd/icon.png"
          }
        ],
        "tosUrl": "https://companyb.com/abcd/tos.html",
        "privacyPolicyUrl": "https://companyb.com/abcd/privacypolicy.html"
      }
    }
  }
}

Para uma lista completa das propriedades disponíveis, consulte a documentação de referência.

Modificação do CSS

É possível usar a propriedade styleUrl para especificar um arquivo CSS personalizado. Os estilos neste arquivo modificarão o CSS padrão. O arquivo precisa ser de acesso público usando HTTPS. Por exemplo, hospedado em um bucket do Cloud Storage.

O exemplo a seguir demonstra a modificação do CSS padrão:

/** Change header title style. */
.heading-center {
  color: #7181a5;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 20px;
  font-weight: bold;
}

/** Use round edged borders for container. */
.main-container {
  border-radius: 5px;
}

/** Change page background color. */
body {
  background-color: #f8f9fa;
}

Como reimplantar a instância do Cloud Run

Em alguns casos, reimplante a instância do Cloud Run que hospeda a página de login. Exemplos de cenários:

  • Adicionar, modificar ou remover provedores de identidade
  • Como modificar configurações de locatário
  • Definir variáveis de ambiente
  • Como atualizar a imagem do contêiner para a versão mais recente

Atualizar e reimplantar regularmente a imagem do contêiner garante que você tenha as correções de bug e os patches de segurança mais recentes. Veja a lista de alterações entre as versões no GitHub.

É possível conseguir a versão atual do contêiner implantado usando o endpoint /versionz. Exemplo:

curl 'https://servicename-xyz-uc.a.run.app/versionz'

Para reimplantar a instância do Cloud Run:

  1. Acesse a página do Cloud Run no Console do Cloud.

    Acessar a página do Cloud Run

  2. Selecione a instância que hospeda a página de login.

  3. Clique em Editar e implantar nova revisão.

  4. Se quiser, especifique configurações avançadas para a revisão ou adicione uma variável de ambiente clicando na guia Variáveis e secrets.

  5. Clique em Deploy.

Opções avançadas

Como personalizar a página de login de maneira programática

Além de usar o console /admin, é possível atualizar a configuração JSON de maneira programática.

Para ver a configuração atual, use o endpoint /get_admin_config. Exemplo:

curl -H 'Authorization: Bearer [TOKEN]'
  'https://servicename-xyz-uc.a.run.app/get_admin_config'

Para atualizar a configuração, use /set_admin_config. Exemplo:

curl -XPOST -H 'Authorization: Bearer [TOKEN]' -H "Content-type: application/json"
  -d '[UPDATED-CONFIG]' 'https://servicename-xyz-uc.a.run.app/set_admin_config'

As duas chamadas REST exigem o escopo https://www.googleapis.com/auth/devstorage.read_write, e um token OAuth válido precisa ser anexado ao cabeçalho Authorization.

Definir variáveis de ambiente

É possível definir variáveis de ambiente na instância do Cloud Run para personalizar as configurações avançadas. A tabela a seguir lista as variáveis disponíveis:

Variável Descrição
DEBUG_CONSOLE Um valor booleano (0 ou 1) que indica se todos os erros e detalhes de solicitações de rede serão registrados. Os dados confidenciais não serão registrados. Essa configuração (0) está desativada por padrão.
UI_CONFIG Uma string contendo a configuração JSON para a página de login. Usar essa variável em vez do painel /admin evita a leitura e a gravação em um Cloud Storage ao acessar a configuração. Configurações inválidas são ignoradas. Usar o painel /admin para validar o JSON antes de definir essa variável pode ajudar a minimizar erros de sintaxe.
GCS_BUCKET_NAME Uma string que modifica o bucket padrão do Cloud Storage usado para armazenar a configuração JSON. O nome do arquivo é config.json e o local padrão é gcip-iap-bucket-[CLOUD-RUN-SERVICE-NAME]-[PROJECT-NUMBER].
ALLOW_ADMIN Um valor booleano (0 ou 1) que indica se o acesso ao painel de configuração /admin será permitido. 1: ativado por padrão.

Você precisará implantar uma nova revisão da instância do Cloud Run depois de atualizar as variáveis antes que as alterações entrem em vigor. Para saber mais sobre variáveis de ambiente, consulte a documentação do Cloud Run.

Como personalizar o domínio

Por padrão, os usuários veem o URL da instância do Cloud Run ao fazer login. Para especificar um domínio personalizado:

  1. Siga as etapas em Como mapear domínios personalizados para definir um domínio personalizado para a instância do Cloud Run.

  2. Configure o IAP para usar o novo URL de autenticação:

    1. Acesse a página do IAP no Console do Cloud.

      Acessar a página do IAP

    2. Selecione o recurso protegido pelo IAP.

    3. No painel lateral, selecione o ícone Editar ao lado do campo URL de login.

    4. Selecione Usar uma página de login hospedada atual e escolha seu domínio no menu suspenso.

    5. Clique em Save.

Como usar uma página de login para vários recursos do IAP

É possível proteger vários recursos do IAP usando a mesma página de login. Isso reduz o trabalho associado ao gerenciamento de várias configurações.

Para reutilizar uma página de login:

  1. Siga as etapas neste artigo para implantar a página de autenticação do primeiro recurso protegido pelo IAP.

  2. Ative o IAP para o segundo recurso. Quando você precisar especificar uma página de login, selecione Fornecerei meu próprio URL e digite o URL do serviço do Cloud Run como o URL.

  3. Reimplante o serviço do Cloud Run.

A seguir