ASA 8.0 SSLVPN (WebVPN): Personalização avançada do portal

Introduction

A versão de software 8.0 da Cisco Adaptive Security Appliance (ASA) 5500 Series introduz as características avançadas de personalização que permitem o desenvolvimento de portais web atrativos para usuários sem clientes. Este documento detalha as muitas opções disponíveis para personalizar a página de login, ou tela de boas-vindas e a página do portal web.

Prerequisites

Requirements

A Cisco recomenda que você saiba como usar o Cisco Adaptive Security Device Manager (ASDM) para configurar políticas de grupo e perfis de conexão no ASA.

Consulte estes documentos para obter informações gerais:

• A seção Configuring Clientless SSL VPN do Cisco Security Appliance Command Line Configuration Guide, Versão 8.0

• Guia do usuário do ASDM 6.0

Antes de configurar um portal da Web personalizado, você deve concluir algumas etapas básicas de configuração do ASA. Consulte a seção Requisitos de configuração deste documento para obter mais informações.

Componentes Utilizados

As informações neste documento são baseadas nestas versões de software e hardware:

• Cisco ASA versão 8.x

• Cisco ASDM versão 6.x

The information in this document was created from the devices in a specific lab environment. All of the devices used in this document started with a cleared (default) configuration. If your network is live, make sure that you understand the potential impact of any command.

Requisitos de configuração

Você deve configurar o ASA em preparação para as etapas de personalização apresentadas neste documento.

Conclua estes passos:

1. No ASDM, escolha Configuration > Remote Access VPN > Clientless SSL VPN Access > Group Policies para criar uma política de grupo, Marketing por exemplo, e marque a caixa de seleção Clientless SSL VPN em tunneling protocol.

   Figura 1: Criar uma nova política de grupo (marketing)

   

2. Escolha Configuration > Remote Access VPN > Clientless SSL VPN > Connection Profiles para criar um perfil de conexão, como sslclient, junto com os detalhes necessários do servidor de autenticação, servidor AAA por exemplo, e atribua a política de grupo Marketing.

   Figura 2: Criar um novo perfil de conexão (sslclient)

   

3. Para continuar a configuração do perfil de conexão, clique em Avançado e configure um group-url para o perfil de conexão.

   Figura 3: Configurar URLs de grupo para o perfil de conexão

   

   Observação: neste exemplo, group-url é configurado em três formatos diferentes. O usuário pode inserir qualquer um deles para se conectar ao ASA por meio do perfil de conexão do sslclient.

4. Escolha Configuration > Remote Access VPN > Clientless SSL VPN Access > Portal > Customization e adicione estes dois objetos de personalização:

   • Login_Personalizado

   • Personalizar_marketing

   Figura 4: Criar uma nova personalização (Custom_Login)

   

   Observação: a Figura 4 ilustra como criar o objeto Custom_Login. Repita as mesmas etapas para adicionar o objeto de personalização Custom_Marketing. Entretanto, não edite esses objetos de personalização no momento. Várias opções de configuração são discutidas nas seções subsequentes deste documento.

Conventions

Consulte as Convenções de Dicas Técnicas da Cisco para obter mais informações sobre convenções de documentos.

Visão geral da personalização

Em um cenário típico sem cliente, um usuário remoto insere o FQDN do ASA em um navegador para fazer logon nele. A partir daí, uma página de login ou tela de boas-vindas é exibida. Após a autenticação bem-sucedida, o usuário visualiza um portal da Web com todos os aplicativos autorizados.

Em versões anteriores à 8.0, o portal da Web oferece suporte à personalização limitada, o que significa que todos os usuários do ASA experimentam as mesmas páginas da Web. Essas páginas da Web, com gráficos limitados, são muito diferentes das páginas de intranet típicas.

Melhor aparência

O ASA apresenta um recurso de personalização completo, que permite a integração da funcionalidade de "login" com suas páginas da Web atuais. Além disso, há melhorias significativas na personalização do portal da Web. Os exemplos neste documento permitem que você personalize as páginas do ASA para ter uma aparência semelhante às suas páginas de intranet existentes, o que fornece uma experiência de usuário mais consistente quando as páginas do ASA são navegadas.

Virtualização

As várias opções de personalização reforçam a capacidade do ASA de fornecer virtualização durante a experiência do usuário. Por exemplo, um grupo de marketing pode ser apresentado com uma página de login e um portal da Web com aparência e toque completamente diferentes das páginas apresentadas aos grupos de vendas ou de engenharia.

Páginas suportadas

O ASA oferece suporte a dois tipos diferentes de páginas WebVPN personalizáveis.

Página de login

Quando um usuário insere o https://asa.cisco.com/sslclient group-url em um navegador para se conectar ao ASA, esta página de login padrão é exibida:

Figura 5: Página de login padrão

Para modificar esta página de login, você edita a personalização associada ao perfil de conexão. As etapas necessárias para modificar essa personalização aparecem na seção Personalizar página de login deste documento. Por enquanto, faça o seguinte:

1. Escolha Configuration > Remote Access VPN > Clientless SSL VPN Access > Connection Profiles.

2. Edite o perfil de conexão do sslclient e associe a personalização Custom_Login a este perfil de conexão.

Figura 6: Associar a personalização (Custom_Login) ao perfil de conexão (sslclient)

Página do portal

Depois que o usuário é autenticado, esta página padrão do portal da Web ¹ é exibida:

Figura 7: Página do portal padrão

^{1. Isso pressupõe que todos os plug-ins (VNC, ICA, SSH e RDP) estejam ativados. Se os plug-ins não estiverem habilitados, você não perceberá as guias.}

Para modificar este portal da Web, você edita a personalização associada à política de grupo. As etapas necessárias para modificar essa personalização aparecem no Portal da Web Personalizar deste documento. Por enquanto, faça o seguinte:

1. Escolha Configuration > Remote Access VPN > Clientless SSL VPN Access > Group Policies.

2. Edite a política do grupo de marketing e associe a personalização Custom_Marketing a esta política de grupo.

Figura 8: Associar a personalização (Custom_Marketing) à política de grupo (Marketing)

Observação: vários perfis de conexão, cada um com seu próprio esquema de autenticação, como RADIUS, LDAP ou Certificados, podem ser associados a uma única política de grupo. Portanto, você tem a opção de criar várias páginas de login, por exemplo, uma personalização de login para cada perfil de conexão, e todas elas podem ser associadas à mesma personalização do portal da Web associada à política de grupo de marketing.

Personalizar portal da Web

Este é um exemplo de portal da Web personalizado:

Figura 9: Página personalizada do portal da Web

Observe que a página tem um título com um esquema de cores de gradiente, um logotipo para Marketing, alguns marcadores da Web com miniaturas, um RSS Feed e uma página de intranet personalizada. A página de intranet personalizada permite que o usuário final navegue em sua página de intranet e use simultaneamente as outras guias no portal da Web.

Observação: você ainda precisa manter o layout da página da Web com quadros superior e esquerdo, o que significa que, estritamente falando, esta página não é totalmente personalizável. Você pode alterar muitos pequenos componentes para ter uma aparência o mais próxima possível dos seus portais de intranet.

Esta seção aborda como configurar cada componente individual no portal da Web com o editor de personalização no ASDM.

Painel de Título

Figura 10: Painel de Título

Para configurar o painel de título, estas opções de personalização são ativadas:

Figura 11: Editor de personalização: Configuração do painel de título

URL do logotipo

Para personalizar o logotipo no painel de título, carregue a imagem do logotipo no ASA.

Figura 12: Faça upload do logotipo Marketing de arquivo.gif como conteúdo da web para o ASA

1. Escolha Acesso VPN SSL sem cliente > Portal > Conteúdo da Web, clique em Importar e forneça o caminho para o arquivo de logotipo em seu computador local. Carregue-o como conteúdo da Web no diretório /+CSCOU+/.

2. Insira a URL do logotipo de/+CSCOU+/marketing.gif, como mostrado na Figura 12.

3. Insira ASA VPN Marketing como o texto.

4. Clique em ... para escolher Font Color (Cor da fonte) e Background Color (Cor do plano de fundo).

5. Ative a opção Gradiente para criar um padrão de cor gradual atraente.

Barra de ferramentas

Figura 13: Barra de ferramentas personalizada

Para configurar este endereço/barra de ferramentas, edite estas opções de personalização:

Figura 14: Editor de personalização: Configuração da barra de ferramentas

Observação: por padrão, a barra de ferramentas está ativada. Neste exemplo, os campos restantes, como Título da caixa de prompt, Texto do botão Procurar e Aviso de logoff, são renomeados, como mostrado.

Marcadores da Web com miniaturas

Figura 15: Favoritos personalizados com miniaturas

Para adicionar miniaturas ao lado dos marcadores, faça o seguinte:

1. Carregue a imagem necessária no diretório /+CSCOU+/.

   Figura 16: Carregar a imagem em miniatura para associar a marcadores

   

2. Associe a imagem em miniatura a marcadores ASA.

   1. Escolha Portal > Bookmarks.

   2. Clique em Add. Digite Applications para o Bookmark List Name.

   3. Clique em Add. Insira o marketing do ASA para o título do favorito.

   4. Digite http://cisco.com/go/asa como o valor do URL e escolha Opções avançadas.

   5. Clique em Gerenciar. Escolha a miniatura carregada anteriormente /+CSCOU+/5550-1.gif e clique em OK.

      Figura 17: Associar miniaturas a marcadores

      

3. Associe os marcadores à política de grupo do ASA.

   1. Escolha Configuration > Remote Access VPN > Clientless SSL VPN Access > Group Policies e edite a política de marketing.

   2. Escolha Portal. Desmarque Herdar ao lado de Lista de favoritos e selecione Aplicativos no menu suspenso.

      Figura 18: Associar marcadores à política de grupo (marketing)

      

Painéis personalizados: RSS Feed

Figura 19: Feed RSS personalizado

Para exibir um feed RSS personalizado, edite estes elementos de personalização:

Figura 20: Painéis personalizados: Configuração do feed RSS

Observação: feeds RSS para o Cisco Security Advisory: http://newsroom.cisco.com/data/syndication/rss2/SecurityAdvisories_20.xml.

Painéis personalizados: Página Intranet Personalizada

Figura 21: Página da Web da Intranet personalizada

Para configurar esta página da Web de intranet personalizada, edite estes elementos de personalização:

Figura 22: Editor de personalização: Configuração de painéis personalizados

Observação: URL da página do Cisco CCO: http://cisco.com/en/US/netsol.

Nomes da guia Aplicativos personalizados

Figura 23: Nomes da guia Aplicativos personalizados

Para configurar os nomes das guias do aplicativo, edite estes elementos de personalização:

Figura 24: Personalizar nomes da guia Aplicativo

Observação: você habilita os aplicativos de forma seletiva e também os reorganiza com os links para cima e para baixo.

Miniaturas de aplicativos personalizadas

Figura 25: Miniaturas de aplicativos personalizadas

Para adicionar as miniaturas favoritas ao lado dos nomes dos aplicativos, como os ícones no exemplo, faça o seguinte:

1. Na página do portal, clique com o botão direito do mouse na imagem da miniatura padrão para localizar seu nome e local.

   • Para a guia Início, o local da imagem em miniatura é /+CSCOU+/nv-home.gif.

   • Para a guia Aplicações Web, a localização da miniatura é /+CSCOU+/nv-web-access.gif.

2. Importe a imagem desejada como conteúdo da Web para o ASA com o nome capturado na etapa um.

   Por exemplo, se quiser associar o disney.gif à guia Aplicações Web, importe-o como nv-web-access.gif.

   Figura 26: Importar miniaturas para guias de aplicativos

   

Páginas de ajuda personalizadas para aplicativos

Por padrão, a Cisco fornece arquivos de ajuda para uso de aplicativos. Essas páginas podem ser substituídas por suas próprias páginas HTML personalizadas. Por exemplo, na Figura 27, você pode adicionar uma imagem personalizada à página de ajuda.

Figura 27: Página de Ajuda Personalizada

Para personalizar os arquivos de ajuda, faça o seguinte:

1. Escolha Portal > Help Customization e clique em Import.

2. Selecione o idioma.

3. Selecione o arquivo .inc. Por exemplo, se desejar editar a página de ajuda que corresponde à guia de acesso do Aplicativo Web, selecione o arquivo web-access-hlp.inc.

4. Escolha seu arquivo HTML personalizado.

   Figura 28: Importar arquivos de ajuda personalizados para acesso a aplicativos

   

Testar a personalização

Neste momento, faça login no ASA em https://asa.cisco.com/sslclient. Após a autenticação bem-sucedida, você verá o portal da Web personalizado.

Personalizar página de login

Esta é a página de login padrão:

Figura 29: Página de login padrão

Esta é uma página de login totalmente personalizada:

Figura 30: Página de login totalmente personalizada

A nova página de login inclui um logotipo, título e imagem personalizados junto com a caixa de diálogo login/senha. A página de login é totalmente personalizável, o que significa que você pode criar qualquer página HTML e inserir a caixa de diálogo login/senha no local desejado.

Observação: embora toda a página de login seja personalizável, a caixa de diálogo específica de login/senha que o ASA carrega para o usuário final não é totalmente personalizável.

Com a personalização completa, você pode fornecer HTML para sua própria tela de login e inserir o código HTML da Cisco que chama funções no Security Appliance que cria o formulário de Login e a lista suspensa Seletor de idiomas.

As próximas seções deste documento descrevem as modificações necessárias no código HTML e as tarefas necessárias para configurar o Security Appliance para usar o novo código.

Comece com seu próprio arquivo HTML

Este HTML foi obtido no editor do Microsoft FrontPage. Ele inclui o título, o logotipo personalizado, uma imagem e um rodapé.

Observação: as imagens 5550.gif e asa.gif são salvas no diretório login_files. Os espaços em branco são intencionais e são substituídos pela caixa de diálogo login/senha em etapas posteriores.

Neste ponto, a página parece com a Figura 31. Observe como ele inclui espaço em branco para permitir a inserção da caixa de diálogo em etapas futuras.

Figura 31: Página inicial da Web

Modificar os links para o local da imagem

Para todas as imagens, substitua o caminho pela palavra-chave /+CSCOU+/, que é um diretório interno no ASA. Quando você carrega uma imagem no ASA, ela é salva no diretório /+CSCOU+/ interno do sistema de arquivos ASA. Mais tarde, quando o ASA carrega esse HTML modificado, ele carrega os arquivos de imagem corretamente.

Figura 32: Código HTML modificado

Observação: no primeiro link, login_files/5550.gif é substituído por /+CSCOU+/5550.gif.

Renomear o arquivo HTML

A próxima etapa é renomear este arquivo login.html para login.inc.

A extensão .inc é necessária para que o ASA reconheça isso como um tipo especial de arquivo e inclua o script java necessário para suportar a caixa de diálogo login/senha.

Adicionar código ao arquivo login.inc

Este código HTML deve ser adicionado no local onde você deseja exibir a caixa de diálogo login/senha.

<body onload="csco_ShowLoginForm('lform');
   csco_ShowLanguageSelector('selector')" 
bgcolor="white">

<table> <tr><td colspan=3 height=20 align=right>

<div id="selector" style="width: 300px"></div> </td></tr>

<tr> <td align=middle valign=middle>


     
     

      
      

Loading...

</div> </td> </tr> </table>
     
     

Observação: as duas primeiras funções csco_ShowLoginForm(lform) e csco_ShowLanguageSelector(seletor) são duas funções de script java cuja definição é importada pelo ASA quando rende o arquivo .inc. Neste código, basta chamar a função para exibir a caixa de diálogo de login/senha junto com o seletor de idioma.

Observação: a caixa de diálogo é representada como um elemento da tabela. Isso pode ser envolto em outras imagens ou texto ou alinhado conforme você vê adequado para sua página HTML.

Neste cenário, a caixa de diálogo login/senha aparece acima da imagem asa.gif no centro. Quando você insere o código, a página HTML final é semelhante a esta:

Carregue o login.inc e os arquivos de imagem como conteúdo da Web para o ASA

A próxima etapa é carregar o arquivo login.inc final e os arquivos de imagem como conteúdo da Web para o ASA. Você precisa selecionar a opção inferior para salvar os arquivos no diretório /+CSCOU+/.

Figura 33: Importar os arquivos de imagem como conteúdo da Web para o ASA

Selecione o login.inc para ser o arquivo para personalização completa

Finalmente, no editor de personalização, selecione a guia Full Customization e forneça um link para o arquivo login.inc que você carregou. Quando o usuário final se conecta de um perfil de conexão associado a essa personalização, como o sslclient, o usuário vê a página de login totalmente personalizada.

Figura 34: Associe o login.inc para ser o arquivo para personalização completa

Teste a personalização completa

Quando você se conecta ao ASA por meio de https://asa.cisco.com/sslclient, a página de login totalmente personalizada é exibida.

Figura 35: Página de login final totalmente personalizada

Suporte CLI

Como explicado, todas as personalizações são editadas com o ASDM. No entanto, você ainda pode usar estes comandos CLI para excluir as personalizações e outros conteúdos da WebVPN:

reverter webvpn:

all                Revert all webvpn related data
  customization      Revert customization file
  plug-in            Revert plug-in options
  translation-table  Revert translation table
  url-list           Revert a list of URLs for use with WebVPN
  webcontent         Revert webcontent

Por exemplo:

• Para excluir uma personalização, execute o comando revert webvpn customization Custom_Marketing CLI.

• Para excluir o arquivo de logotipo, execute o comando revert webvpn webcontent /+CSCOU+/marketing.gif.

• Para excluir os marcadores, execute o comando revert webvpn url-list Marketing_URL_List.

• Para excluir todas as personalizações, conteúdos da Web, plug-ins e marcadores, execute o comando revert webvpn all.

Observação: como as personalizações do WebVPN não são salvas na configuração em execução, uma exclusão de gravação típica, a sequência de recarregamento não apaga personalizações ou conteúdos da Web do ASA. Você deve emitir explicitamente comandos revert webvpn ou excluir manualmente as personalizações do ASDM.

Faça backup das personalizações

Ao contrário dos outros comandos CLI, as personalizações não são salvas na configuração em execução. Em vez disso, você precisa exportar explicitamente as personalizações e elas são salvas no formato XML para o computador host.

Figura 36: Exportar personalização para backup ou replicação para outro ASA

Para restaurar as personalizações, importe-as com o arquivo XML obtido na etapa anterior.

Figura 37: Importar uma personalização de um arquivo XML exportado anteriormente

Observação: além de exportar/importar a personalização, você também precisa fazer manualmente backup/restaurar o conteúdo da Web, o que inclui os arquivos de imagem, os arquivos de ajuda e as imagens em miniatura, explicitamente. Caso contrário, a personalização não está totalmente funcional.

Conclusão

Os recursos avançados de personalização apresentados no ASA versão 8.0 permitem o desenvolvimento de páginas atraentes de portal da Web. Você pode alcançar a virtualização criando diferentes portais da Web personalizados para diferentes grupos. Além disso, a página de login pode ser totalmente personalizada para corresponder aos portais regulares da Web da intranet, o que proporciona uma experiência consistente ao usuário.

Troubleshoot

Você pode receber esta mensagem de erro depois que a personalização do WebVPN estiver habilitada:

%ERROR: csco_config.lua:36: csco_config.lua:552: copying
'disk0:/csco_config/locale/ja/LC_MESSAGES/PortForwarder.po' to a temporary ramfs file
failed

%ERROR: csco_config.lua:36: csco_config.lua:552: copying
'disk0:/csco_config/locale/ja/LC_MESSAGES/webvpn.po' to a temporary ramfs file failed

%ERROR: csco_config.lua:36: csco_config.lua:552: copying
'disk0:/csco_config/locale/fr/LC_MESSAGES/customization.po' to a temporary ramfs file
failed.

Para resolver esse problema, execute o comando revert webvpn all e recarregue o ASA.

Informações Relacionadas

• Página de Suporte do Cisco 5500 Series Adaptive Security Appliance
• Personalizar páginas VPN SSL sem cliente
• ASA 8.0: Como alterar o logotipo da WebVPN
• Suporte Técnico e Documentação - Cisco Systems