Certificado SSL em localhost utilizando XAMPP no macOS

Certificado SSL em localhost utilizando XAMPP no macOS

Complete o seu ambiente de desenvolvimento local instalando um certificado SSL válido. Guia de Instalação completo, utilizando XAMPP, Google Chrome e macOS High Sierra.

Olá Desenvolvedor(a), recentemente troquei meu sistema operacional de trabalho, do Windows 10 para o macOS High Sierra. E apesar de já ter tido contato com versões mais antigas do sistema da maçã, acabei encontrando dificuldades em algumas tarefas pontuais as quais eu já estava acostumado Windows.

Uma dessas tarefas foi a configuração de um certificado SSL válido em ambiente local, para conseguir testar algumas API’s de forma mais cômoda (sem precisar ficar subindo o código a cada vez que eu queira testar).

Inicialmente, se você acessar https://localhost sem o certificado configurado, vai receber essa mensagem:

Certificado SSL em localhost utilizando XAMPP no MacBook

A verdade é que vasculhei a internet e os fóruns, e demorei bastante a encontrar uma solução que realmente resolvia o problema. Mas após muitos testes e estudos, cheguei a um tutorial que funcionou muito bem aqui, e é relativamente rápido e sem firulas.

AMBIENTE DE DESENVOLVIMENTO

Mas atenção, você precisa saber que este tutorial é baseado no ambiente de desenvolvimento que eu utilizo, automatizado pelo XAMPP.

Não quero aqui, de forma alguma, discutir características do XAMPP, sua usabilidade, seus prós e seus contras. O fato é que já utilizei outras configurações, até instalando manualmente todos os componentes básicos de um ambiente de desenvolvimento PHP, como servidor e banco de dados, por exemplo. E não encontrei nenhuma forma mais simples, rápida e funcional do que utilizar o XAMPP.

Estou falando sobre isso, porque o tutorial leva em conta que você também já tenha o XAMPP instalado, configurado e funcionando na sua máquina. Caso não tenha, ou não utilize, você pode adapta-lo para o seu ambiente, porém você precisará ter algum conhecimento sobre servidores.

A versão do XAMPP que estou utilizando é a 7.2.5. Caso você vá baixar agora, estou deixando o link para facilitar. Atente-se apenas para NÃO fazer o download do XAMPP-VM, e sim a versão comum.

Clique Aqui Para Baixar o XAMPP

A instalação é bem simples, e apesar de existirem algumas configurações de otimização, você provavelmente conseguirá utiliza-lo da forma como ele é instalado. Mas então vamos lá para o SSL.

CONFIGURANDO O CERTIFICADO SSL

Se você, assim como eu, está vindo do Windows, poderá se assustar um pouco com o que vamos fazer, pois utilizaremos o terminal para executar alguns comandos, mais ou menos como o CDM do Windows funciona. Mas com o passar dos dias você se acostuma, e perceberá que muitas tarefas são mais facilmente executadas a partir do terminal.

O primeiro passo é abrir o Terminal (você pode pressionar as teclas Command + Barra de Espaço para abrir o Spotlight e digitar Terminal).

Com o terminal aberto navegue até a pasta ssl.crt dentro do diretório do XAMPP. Se você não mudou o caminho original de instalação o comando ficará assim.

copy
cd /Applications/XAMPP/xamppfiles/etc/ssl.crt/

Crie um arquivo chamado cert-ssl.cnf, para isso utilize o comando touch:

copy
touch cert-ssl.cnf

Abra esse arquivo, copie e cole os dados abaixo:

copy
[ req ]
default_bits		= 2048
default_keyfile 	= privkey.pem
distinguished_name	= req_distinguished_name
attributes		= req_attributes
x509_extensions	= v3_ca

[ req_distinguished_name ]
countryName			= Country Name (2 letter code)
countryName_default		= AU
countryName_min			= 2
countryName_max			= 2
stateOrProvinceName		= State or Province Name (full name)
localityName			= Locality Name (eg, city)
0.organizationName		= Organization Name (eg, company)
organizationalUnitName		= Organizational Unit Name (eg, section)
commonName			= Common Name (e.g. server FQDN or YOUR name)
commonName_max			= 64
emailAddress			= Email Address
emailAddress_max		= 64

[ req_attributes ]
challengePassword		= A challenge password
challengePassword_min		= 4
challengePassword_max		= 20

[ v3_ca ]
basicConstraints = CA:FALSE
keyUsage = nonRepudiation, digitalSignature, keyEncipherment
subjectAltName = @alt_names

[alt_names]
DNS.1 = localhost
DNS.2 = www.localhost
IP.1 = 127.0.0.1
IP.2 = 192.168.0.23

Você tem duas formas de fazer isso. Uma é utilizando um editor de texto como o SublimeText, por exemplo, ou mesmo o bloco de notas. Daí você utiliza o Finder para navegar até o arquivo que você criou e o edita.

Outra forma, que é até mais rápida, é utilizar o próprio terminal para fazer essa operação. Neste caso, com o auxílio do editor **VIM**. Veja como é fácil.

Digite o comando abaixo para abrir o arquivo que você acabou de criar com o VIM.

copy
vim cert-ssl.cnf

Uma tela assim se abrirá no terminal:

Certificado SSL em localhost utilizando XAMPP no MacBook

Para inserir as informações após o VIM ser aberto você precisará apertar a tecla I. Feito isso, basta colar o código já informado anteriormente utilizando o atalho COMAND + V.

Para sair e salvar, você precisa apertar a tecla ESC, e depois digitar :wq.

Pronto, já criamos o arquivo base para a configuração do certificado SSL. Agora vamos partir para a geração do certificado e da chave.

E podemos fazer tudo isso a partir de um comando só! No meu caso, vou chamar o certificado de localhost mas você pode chamar do que quiser ok!

copy
sudo openssl req -x509 -nodes -days 3650 -newkey rsa:2048 -keyout localhost.key -out localhost.crt -config cert-ssl.cnf

Perceba que estamos utilizando o comando sudo, e por isso você precisará digitar a sua senha para completar o comando.

ATENÇÃO: Se você já tiver utilizado o comando SUDO em alguma operação anterior, nesta mesma sessão do Terminal, não precisará digita-lo novamente. Assim, se ao digitar o comando utilizando sudo, você receber a mensagem “command not found”, significa que o super usuário já está ativo, e assim você poderá utilizar o comando sem o sudo.

Quando executar o comando, verá a seguinte tela:

Certificado SSL em localhost utilizando XAMPP no MacBook

Agora, serão solicitadas algumas informações. Recomendo que você digite conforme a minha recomendação, para evitar qualquer tipo de erro. Após digitar cada linha pressione ENTER.

Country Name: BR
State Province: Sao Paulo
Locality Name: Sao Paulo
Organization Name: Digite o Nome da Sua Empresa
Organizational: Deixe em Branco
Common Name: localhost
Email Address: Seu E-mail

Na verdade, os únicos dados obrigatórios mesmo são o Country Name e o Common Name. Porém, eu prefiro completar tudo para não correr o risco de dar algum erro.

Neste momento, se você conferir a pasta ssl-crt terá os arquivos localhost.crt e localhost.key que é o certificado e a chave de autenticação do mesmo.

O que precisamos fazer agora, é dizer ao apache, onde está o certificado e a chave, para que o navegador os encontre.

Neste processo, recomendo que você utilize um editor de texto gráfico (como o Sublime Text ou o bloco de notas). Dessa forma você evita pequenos erros de digitação que podem trazer erros para a configuração.

Você precisará abrir o arquivo httpd-ssl.conf dentro do diretório do XAMPP. Se você não mudou o caminho padrão de instalação este arquivo estará dentro deste diretório: Applications/XAMPP/xamppfiles/etc/extra/.

Agora procure pelas linhas:

SSLCertificateFile "/Applications/XAMPP/xamppfiles/etc/ssl.crt/server.crt"
SSLCertificateKeyFile "/Applications/XAMPP/xamppfiles/etc/ssl.key/server.key"

E troque por essas:

copy
SSLCertificateFile "/Applications/XAMPP/xamppfiles/etc/ssl.crt/localhost.crt"
SSLCertificateKeyFile "/Applications/XAMPP/xamppfiles/etc/ssl.crt/localhost.key"

Nesse momento o seu Certificado SSL já estará instalado, porém ainda não será reconhecido pelo Google Chrome. Vamos resolver isso logo.

Acesse o diretório onde está o seu certificado /Applications/XAMPP/xamppfiles/etc/ssl.crt/ e dê um duplo clique no arquivo localhost.crt.

Uma caixa de diálogo será aberta. Em Chaves, selecione Sistema e clique em Adicionar.

Certificado SSL em localhost utilizando XAMPP no MacBook

Uma chave será incluída no aplicativo Acesso às Chaves (quando clicar em adicionar, esse aplicativo estará aberto no Doc, basta clicar em cima dele.

Agora dê um duplo clique em cima do certificado localhost que você acabou de adicionar, e na aba Confiar marque Confiar Sempre para todos os itens.

Pronto! Reinicie o seu navegador e também os serviços do Apache, e pronto, o seu certificado SSL em ambiente local, utilizando o XAMPP, já estará funcionando.

Chegamos ao fim de mais um artigo! E se esse artigo te ajudou de alguma forma, compartilhe com seus amigos desenvolvedores. E não se esqueça de deixar os seus comentários (de qualquer natureza mesmo) logo aqui abaixo! Muito obrigado por ter se dedicado a ler até aqui!

Gostou desse artigo? Veja mais em Desenvolvimento