Gerando SSL grátis pra qualquer site. Sem tocar na linha de comando.

Não tem mais desculpa. Vamos encriptar tudo.

Eu já falei sobre HTTPS/SSL não uma, mais duas vezes aqui no blog. E não vou cansar de falar até eu ver todos os sites com um cadeadinho na barra de navegação.

O post de hoje vem resolver todos os problemas e calar todas as desculpas. Nunca foi tão fácil gerar e instalar SSL feito agora. E aprenderemos passo-a-passo como fazer isso. No tutorial de hoje usaremos o Let’s Encrypt, já mencionado em posts anteriores.

Além disso, tem uma novidade: se você gosta de vídeo-tutoriais, é só dar play abaixo e ver seguir os passos do vídeo. Se você prefere texto, tudo bem, basta seguir em frente sem olhar para o lado. Mas cuidado com o mestiço.

Primeira Etapa

Acesse o site https://zerossl.com. Quando ele carregar, clique no botão Online Tools, e depois, clique em Start, na seção “FREE SSL Certificate Wizard”

Segunda Etapa: O Mago

Encontramos o form que fará todo o trabalho pra gente na requisição de um SSL para o Let’s Encrypt. Vamos com carinho e dedicação preencher cada etapa, sem pular nada.

#0: Preencha o domínio ou subdomínio que você quer instalar um certificado SSL. Confirme que aceita os termos de uso e clique em Next.

Sua tela deve estar mais ou menos assim. Não peencha nenhum outro campo!

Após isso, ele irá exibir uma mensagem questionando se você deseja que a versão prefixada com www seja adicionada a requisição do certificado. Isso é bem útil se você está instalando num domínio completo. Selecione o que for melhor para o seu caso.

Você verá uma mensagem de que ele está gerando a requisição. Aguarde, pois demora um pouco as vezes. Ao estar concluído, repare que o campo de domínio ficou vazio e o textarea abaixo dele ficou preenchida. Isso significa que a chave de requisição do seu domínio foi criada. Baixe ela e guarde num lugar seco sem odor.

#1: Sem mudar nada, aperte Next novamente. Estamos “repetindo” um passo, mas a grande diferença é que agora estamos utilizando uma chave devida pra isso. Nessa etapa estaremos gerando a account key. Ambas essas chaves são importantes para a validação e principalmente a renovação do certificado, já que os certificados do Let’s Encrypt são validos por apenas 90 dias (mas são renováveis indefinidamente).

Depois de gerar a account key, as sua tela deve estar semelhante ao screenshot a seguir:

Lembre sempre de baixar as chaves

Depois disso, é só apertar em Next e ir pra etapa de verificação.

Verificando se o seu site é seu mesmo

Pra você instalar o certificado em um site, o Let’s Encrypt precisa ter certeza que ele é seu mesmo. Convenhamos, é uma dúvida razoável. Além de evitar que a galera peça certificado a torto e a direito a seu bel prazer.

O jeito que a galera da ZeroSSL usou pra fazer isso foi bem interessante. Você tem que criar um arquivo específico, numa pasta específica do seu subdomínio, com um conteúdo específico. Ele vai dar match nisso tudo e, funcionando, a identidade do site está confirmada. É mais ou menos parecido quando você vai verificar um site com o Google, a qual você sobe um arquivo html no seu servidor.

A tela de verificação é semelhante ao screenshot a seguir:

Observe que todas as informações estão claras. No caso, temos que criar um arquivo texto (sem extensão) com o nome descrito abaixo de File, o conteúdo sendo a string depois de Text e a pasta em si sendo /.well-known/acme-challenge/. Tudo bem explicadinho pelo site do ZeroSSL.

Meia duzia de CTRL+C/V depois você tá pronto pra correr pro abraço. Após enviar o arquivo pro seu servidor, aperte novamente em Next.

OEAAAAAA

Se você chegou a página de confirmação, meus parabéns! Seu certificado (composto de dois arquivos) estará lá em baixo. Basta baixar ambos e instalar no seu servidor.

A fantástica tela final (tm)

Como você instala no seu servidor, aí ja é outra história, e outro post… Cada caso é um caso. Pode me perguntar no Twitter, se eu manjar eu te ajudo.

Livin’ la vida Encrypted.

Usando bibliotecas externas com TypeScript

A dica de hoje é curtinha mais bem importante pra você que está iniciando seus trabalhos com Angular 2 (principalmente Ionic 2) e TypeScript.

O JavaScript sempre foi o Luquita da Galera quando falamos de tipos. Sempre ouvimos que qual quer coisa é um Object — ou quase qualquer coisa. Como tudo na vida, isso tem seu lado bom e seu lado ruim (tirando sorvete, que é a exceção que prova a regra).

No post, vou usar de base a criação de um projeto no Ionic 2. Mas o princípio é exatamente o mesmo usando o Angular-CLI ou algum outro starter que você anda usando por aí, já que em todos temos em comum o gerenciamento de pacotes via NPM.

Vamos criar um projeto e instalar, por exemplo, o AngularFire 2, já atualizado para o Angular 2 (com TypeScript). Também vamos instalar o SDK do Firebase, que é dependência do AngularFire:

Já inicializamos nosso App Incrível, agora vamos começar a trabalhar no nele.

O código de uma página (ou uma View) do Ionic 2 é uma coisa mais ou menos assim (afinal, ela nada mais é que um Component):

Agora vamos importar as bibliotecas que instalamos lá no início do projeto. Adicionamos algumas coisas no cabeçalho do código…

aí é só definir algumas variáveis ne inicialização, e então nós já podemos compilar e tes…

[ts] Cannot find module 'angularfire2'.
Ué?

Aí no meio do caminho aparece uma daquelas pedras que faz você se questionar sobre toda sua carreira de desenvolvedor. Céus, como assim o módulo não foi encontrado? Eu tenho certeza eu executei o comando de instalação. Será que eu executei mesmo? Sera que o npm tá funcionando? Qual o sentido da vida?

Calma, tá tudo bem. Se fosse um ES6/7 da vida já estaríamos rodando tudo sem maiores problemas. Mas estamos usando TypeScript, então temos certos compromissos com os tipos.

O TypeScript analisa seu código, fazendo type checking. E se você está utilizando um projeto externo, o qual os tipos não são primários nem compatíveis com os quais você criou, precisamos instalar as definições de tipos daquela biblioteca para que o TypeScript interprete seu código devidamente. É ai que entra em cena o Typings.

O Typings instala definições (arquivos .d.ts) de bibliotecas externas e as instala no seu projeto. Para tal, primeiramente devemos instalar globalmente o Typings no nosso sistema:

$ npm install -g typings

Após isso, devemos instalar as definições do AngularFire, que — por coincidência — a equipe cheirosa do Firebase disponibilizou junto do SDK no último release.

$ typings install file:node_modules/angularfire2/firebase3.d.ts --save --global && typings install

Depois disso, é só correr pro abraço. Projeto compilando e funcionado. E sem usar :any.

Mas, e se a gente quiser ir além?

Ok ok, tudo isso funciona muito bem quando eu estou gerenciando minhas libs via NPM. Mas, e quando eu não tenho NPM? Como faço pra usar jQuery??

Primeiramente, parabéns pela ousadia de querer usar jQuery com TypeScript. Mas continuando, sim, é possível. O jQuery até tem um repositório oficial no NPM, então vamos usar um exemplo melhor (e porque não dizer mais real) com a API do Google Maps.

Há um wrapper da API no NPM, mas vamos no roots. Vai que o Google resolve mudar tudo amanhã?

Para tal, apresento-lhe o DefinitelyTyped, que é um repositório estupidamente grande de definições para bibliotecas que não possuem definições.

Para instalar um repositorio do DT no seu projeto, é o mesmo comando do Typings:

$ typings install dt~google-maps --global
// o dt~ serve pra explicitar que estamos baixando do repositório do DefinitelyTyped

Prontinho! Agora o TypeScript vai reconhecer tranquilamente todas as chamadas da API de JavaScript do Google Maps.

Um viva a vida sem erros de tipo!

Recebendo e Enviando e-mails do GoDaddy via Gmail — de graça.

Pagar Google Apps só pra fazer um e-mail de contato? Não mais.

VaiPapai™

Comprar domínios é um esporte radical, o qual pratico assiduamente e batalho para que se torne olímpico para as olimpíadas de Tokyo 2020.

E quando você adquire um domínio, uma das coisas mais legais a se fazer é configurar um e-mail pra ele. Nem que seja um de contato, pra fazer aquele bolado.

Comprando seu domínio no GoDaddy (que não tá patrocinando o post, mas poderia) você pode pagar para ter um e-mail corporativo, usando a própria solução do GoDaddy, ou você pode configurar alguma externa, como o Google Apps for Domains. Já na parte gratuita, você tem duas opções: hospedar você mesmo seu servidor de e-mail (o que tecnicamente nem é gratuito, já que você tá pagando o hosting) ou usar os famigerados E-mails de Redirecionamento, esse de graça mesmo.

Os e-mails de redirecionamento, como o nome já denuncia, precisam de um outro e-mail de destino, como por exemplo um Gmail. Todos e-mails recebidos pelo e-mail de redirecionamento são encaminhados diretamente para sua caixa de entrada do e-mail de destino. A parte triste é que a outra via não funciona: você não consegue mandar e-mails por contas de redirecionamento. Só receber e automaticamente encaminhar.

Bem, teoricamente você não consegue.

Usando bastante paciência e a funcionalidade de Alias que o Gmail possui, iremos configurar um e-mail de redirecionamento para receber e enviar e-mails via uma conta do Gmail.

Separe sua próxima hora para invocar esse espírito.

Parte 0: O básico

A parte 0 é o mínimo que você precisa fazer. Ela é bem básica — e de certa forma, óbvia — para fazer tudo funcionar. Você vai precisar:

  • 1 conta do Gmail
  • 1 domínio no GoDaddy, com o redirecionamento de e-mail configurado
  • 1 Personal Computer ou Macintosh. Não dá pra fazer do celular.
  • 1 Long Neck de Heineken (recomendado)

Configurar o redirecionamento é o trivial, feito pelo painel de controle do GoDaddy. Por lá você vai dizer qual o e-mail [email protected] redirecionará para [email protected]. Após configurar, espere um pouco e teste para ter certeza que o redirecionamento está funcionando.

Após estar tudo testado, siga em frente e olhe para o lado.

Parte 1: A segurança

Se você usa autenticação de duas etapas, você não vai sofrer tanto para essa primeira parte. Se não, bem. Você vai ter que se acostumar.

#0: Você precisa da autenticação de duas etapas ativa na sua conta Google para o método que estamos usando, pois precisamos criar uma senha de aplicativo específica para seu Gmail. E essa opção só é habilitada na sua conta quando a autenticação de dois fatores está devidamente configurada.

Se você ainda não tem 2FA ativo, pare de ler agora, clique aqui e configure para sua conta Google. Se você já tem, continue lendo.

#1: Vá no painel da sua conta Google (https://myaccount.google.com) e clique em “Login e segurança”:

#2: Procure por “Senhas de app” na seção “Como fazer login no Google”, e clique nele:

O Google vai pedir sua senha, informe e continue.

#3: Na parte em baixo do box dessa nova página, clique em “Selecionar app” e depois, clique em “Outros”:

Após clicar, preencha com um nome. Ele serve apenas de referência, não precisa ser um nome em específico. Após definir o nome, clique em Gerar.

So far, so good. Irá aparecer uma janelinha com uma senha de 16 caracteres. Anote ela que vamos precisar dela em breve.

Nem tenta, jovem. Já revoguei essa senha.

Parabéns padawan. Cumprimos a primeira etapa. Vamos pro castelo que está a princesa.

Parte 2: Escadaria da configuração

#0: Entre no seu Gmail e vá em Configurações > Contas e Importação e aperte em “Adicionar outro endereço de e-mail que você possui

#1: Bem-vindo a 2007! Com esse POP-UP (!!!) maravilhoso que acaba de abrir, iremos começar a configurar de verdade nosso e-mail. Todo cuidado, carinho e atenção é importante agora.

Essa feature, apesar de relativamente desconhecida, existe desde sempre no Gmail. Acho que nunca atualizaram.

Preencha os campos como indicado:

  • Coloque o nome da conta. No meu caso, por exemplo, é “Joselito Júnior” mesmo. Esse nome é o que aparece no envio/recebimento de e-mails.
  • Coloque o e-mail de redirecionamento. O do seu domínio.

Se você está seguro que preencheu devidamente, clique em “Próxima etapa”

#2: Agora vamos configurar o servidor SMTP. Mesmo que você nem faça ideia do que SMTP é.

Se o cuidado já tinha que ser grande antes, agora triplique-o.

A primeira coisa a se verificar é se o seu domínio está aparecendo no pop-up, na parte destacada em verde do screenshot acima. Se está, ótimo. Se não, volte uma casa e configure a primeira tela novamente.

A segunda coisa a se fazer é apagar todo o conteúdo das caixas de texto, e preenche-las da seguinte forma:

  • Servidor de SMTP: smtp.gmail.com (exatamente dessa forma)
  • Nome de usuário: [email protected] (NÃO é o seu e-mail de redirecionamento, é seu Gmail. No meu caso, seria [email protected])
  • Senha: usaremos a senha gerada na parte 1 desse tutorial.

Se tá tudo configurado com carinho, clique em “Adicionar conta”.

É possível que tenha dado ruim agora. Há dois erros mais prováveis:

  • Se deu erro de DNS, verifique se você trocou o endereço do SMTP
  • Se deu erro de autenticação, a senha gerada está errada. Repita o processo da parte 1.

Se tá tudo muito bom, tudo muito bem, você deve ter sido redirecionado para outra tela. Vem, jovem.

Parte 3: Honras e glórias

Se você foi redirecionado para a tela “ Verifique a confirmação e adicione seu endereço de e-mail” então é só correr pro abraço. Ou quase.

Pra não dizer que não precisa fazer mais nada, a única coisa que resta a fazer é clicar num link de confirmação que o Gmail mandou para a sua própria caixa de entrada (afinal, no Passo 0, configuramos o redirecionamento). A partir desse momento o seu e-mail irá aparecer Contas e importação, e na hora de envio você vai poder definir de qual conta você pretende enviar seus e-mails.

É só clicar ali em “De”, meu jovem.

Parte 4: Seja feliz

Depois dessa via-crúcis, está tudo funcionando e pronto pra uso para envio e recebimento de e-mails grátis com seu domínio. (vem Google, vem.)

Aproveite seu novo e-mail grátis, e que não é do Bol. O céu é o limite.

Agradecimentos ao TJ Kelly, semideus que desenvolveu a receita desse processo maligno e pecaminoso de configuração.

Pin It on Pinterest