Customização dos logos do IdP Shibboleth com MFA

Este guia apresenta as etapas para personalização dos logos utilizados no IdP Shibboleth v5.1.4 (ou superior) com Painel MFA v2.3.2, cuja instalação foi realizada com o template fornecido pela CAFe.

Antes de iniciar a substituição dos logos no servidor do IdP, prepare previamente todos os arquivos de imagem seguindo as recomendações indicadas a seguir:

Formato: PNG transparente

Proporção sugerida: Prefira versões horizontais do logo, evite quando possível logotipos quadrados ou empilhados verticalmente

· Dimensões mínimas: 640 pixels de largura e 140 pixels de altura

· Dimensões máximas: 1200 pixels de largura e 1200 pixels de altura

Margens: Corte a imagem rente ao limite do logo, evitando espaços vazios ou fundos brancos sobrando ao redor da marca

Logos para customização

Todos os logotipos disponíveis para personalização aparecem nas páginas web com uma imagem padrão, conforme os exemplos a seguir:

1. Logos das páginas de login

2. Logo das páginas do Painel MFA

3. Logos dos e-mails enviados pelo Painel MFA

Substituição dos arquivos no servidor do IdP

Faça a cópia dos arquivos de logos gerados para o servidor de instalação do IdP e sobrescreva os arquivos descritos a seguir, mantendo os nomes originais, de acordo com o local do logotipo a ser substituído.

Após as alterações indicadas, será necessário reiniciar os serviços do IdP e Painel MFA, o que poderá levar a indisponibilidade de acesso ao IdP.

1. Logos das páginas de login

· Logo principal das páginas de login:

Sobrescreva o arquivo /opt/shibboleth-idp/edit-webapp/images/logo-instituicao.png pelo arquivo com o logo principal da instituição.

· Logo do cabeçalho das páginas de login:

Sobrescreva o arquivo /opt/shibboleth-idp/edit-webapp/images/logo-menu.png pelo arquivo com o logo para o cabeçalho.

As páginas de login possuem uma versão de alto contraste para acessibilidade e os logotipos para essa versão podem ser personalizados. Caso não possua os logotipos no formato negativo para essa finalidade, sugerimos que sejam utilizados os mesmos arquivos de logotipos anteriores. Para isso, substitua os arquivos descritos a seguir:

· Logo principal das páginas de login (alto contraste):

Sobrescreva o arquivo /opt/shibboleth-idp/edit-webapp/images/logo-instituicao_hc.png pelo arquivo com o logo principal da instituição na versão negativa.

· Logo do cabeçalho das páginas de login (alto contraste):

Substitua o arquivo /opt/shibboleth-idp/edit-webapp/images/logo-menu_hc.png pelo arquivo com o logo para o cabeçalho na versão negativa.

2. Logo das páginas do Painel MFA

· Logo do cabeçalho das páginas do Painel MFA:

Sobrescreva o arquivo /opt/dashboard/resources/assets/img/logo-menu.png pelo arquivo com o logo para o cabeçalho.

As páginas do Painel MFA também possuem uma versão de alto contraste para acessibilidade e o logotipo para essa versão pode ser personalizado. Caso não possua o logotipo no formato negativo para essa finalidade, sugerimos que seja utilizado o mesmo arquivo de logotipo anterior. Para isso, substitua o arquivo descrito a seguir:

· Logo do cabeçalho das páginas do Painel MFA (alto contraste):

Sobrescreva o arquivo /opt/dashboard/resources/assets/img/logo-menu_hc.png pelo arquivo com o logo para o cabeçalho na versão negativa.

3. Logos dos e-mails enviados pelo Painel MFA

· Logo da instituição para e-mails do Painel:

Sobrescreva o arquivo /opt/dashboard/resources/email/logo-institution.png pelo arquivo com o logo principal da instituição para envio de e-mail pelo Painel MFA.

· Logo do departamento para e-mails do Painel:

Sobrescreva o arquivo /opt/dashboard/resources/email/logo-department.png pelo arquivo com o logo principal do departamento para envio de e-mail pelo Painel MFA.

Caso não possua uma imagem para ser utilizada como logo do departamento, é possível configurar para que o e-mail seja enviado somente com o logo da instituição. Para isso, edite o arquivo /opt/dashboard/mfa.properties e remova o valor da propriedade mail.department.img.fullpath, deixando a linha conforme exemplo: mail.department.img.fullpath=

Rebuild do Shibboleth IdP e reinicialização dos serviços

Após a substituição e/ou edição dos arquivos indicados anteriormente, será necessário a execução dos seguintes comandos para que as alterações sejam aplicadas nas páginas de login e do Painel MFA:

Seguir a ordem abaixo de execução!

/opt/shibboleth-idp/bin/build.sh

systemctl restart jetty.service

systemctl restart mfa.service

Testar as alterações dos logos

Acesse via navegador o serviço https://sp.rnp.br/chimarrao e escolha sua instituição para ser redirecionado as páginas de login e verificar se os logos foram aplicados.

Para validação do logo das páginas do Painel MFA, acesse via navegador a URL https://idp.inst.edu.br/mfa, substituindo idp.inst.edu.br pelo FQDN do seu IdP.