Criando autenticação com o Facebook em 10 minutos! (Devise + Omniauth)

Screencast #1

Saiu o primeiro ScreenCast do Blog, nele eu falo sobre como criar uma autenticação (usando a conta do facebook) com o Devise e o Omniauth em 10 minutos. Talvez este assunto seja trivial para algumas pessoas, mas ainda existem muitas dúvidas e dificuldades na hora de fazer isso. Então eu decidi simplificar o assunto criando um tutorial em vídeo.

Pra acessar o repositório no GitHub com o código completo para consulta, clique aqui!

Lista de comandos
Parte 1 – Criar o App e instalar o devise
  1. Criar o App
  2. Incluir as dependências no Gemfile
  3. Rodar o bundle
  4. Gerar o Controller da Home
  5. Incluir o caminho nos routes
  6. Criar o arquivo “app/views/home/index.html.erb”
  7. Colar o seguinte códido dentro:

     

  8. Instalar o devise

  9. Criar o User do devise

  10. Rodar as migrations

  11. Colocar o before_action no “/app/controllers/application_controller.rb”

Parte 2

Nota: Devido à atualizações na plataforma developers.facebook.com, houve a necessidade de atualizar essa parte do tutorial para que seu APP local funcione. Para o bom funcionamento do tutorial a Parte 2 pode ser alterada no futuro caso aconteçam novas atualizações na plataforma. 🙂

1- Acesse developers.facebook.com e ative sua conta do facebook como developer. Em seguida, no Menu superior direito ‘Meus Aplicativos’ clique em ‘Adicionar um novo aplicativo’, escoha um nome e seu email para criar nossa interação.

 

2- Na tela seguinte vá em Login do Facebook e clique em ‘Configurar’

 

3- Na tela seguinte clique em Web e digite http://localhost:3000 no campo URL do site e clique em salvar.

 

4-  Em seguida clique no menu Login do Facebook -> Configurações e no campo URIs de redirecionamento do OAuth válidos insira o valor:

como na imagem e clique em ‘Salvar Alterações’.

Parte 3 – Criar o login e o signup social
  1. Alterar a parte “devise_for :users” no arquivo Routes, para:
  2. Adicionar o omniautable ao “app/models/user.rb”
  3. Adicionar os campos necessários para o omniauth no model User
  4. Rodar as migrations
  5. Incluir a configuração do omniauth no “config/initializers/devise.rb”. OBS: Está diferente do ScreenCast devido à atualização na integração.
  6. Vamos gerar o controller de callback
  7. Copiar o código pra dentro do “app/controllers/callbacks_controller.rb”
  8. Copiar o código para o “app/models/user.rb”

 

Precisa de ajuda?
  1. Dá uma olhada nos comentários aí em baixo e vê se sua dúvida não foi resolvida 🙂
  2. Pergunta aí em baixo que eu te responderei.
  3. Me adicione no Facebook que a gente bate um papo pra solucionar sua dúvida, adicionar agora!
Referências
  1. Projeto completo no GitHub, aqui.
  2. Para criar seu App no Facebook, clique aqui.
  3. Documentação do Devise, aqui.
  4. Documentação do OmniAuth, aqui.
Conclusão

Espero que este Post seja útil para você e torne a sua vida como programador mais fácil. Se você está gostando do conteúdo do blog compartilha ele com os seus amigos que podem ser beneficiados por esses conteúdos  (ajude esse blog a crescer 🙂 ) e não esqueça de assinar a Newsletter 🙂.

Muito obrigado pela sua atenção e um grande abraço.
Leonardo Scorza


Você é novo por aqui?

Primeira vez no OneBitCode? Curtiu esse conteúdo?
O OneBitCode tem muito mais para você!

O OneBitCode trás conteúdos de qualidade e em português sobre programação com foco em Ruby on Rails e outras tecnologias como Angular, Ionic, React, desenvolvimento de Chatbots e etc.

Se você deseja aprender mais, de uma forma natural e dentro de uma comunidade ativa, visite nosso Facebook e nosso Twitter, veja os screencasts e talks no Youtube, alguns acontecimentos no Instagram, ouça os Podcasts e faça parte de nossa Newsletter.

Além disso, também estamos com alguns e-Books muito interessantes para quem deseja se aprimorar como programador e também como freelancer (os e-Books são gratuitos!):

Espero que curta nossos conteúdos e sempre que precisar de ajuda com os tutoriais, fala com a gente!
Seja por
Facebook ou e-mail, estamos aqui para você 🙂

Bem-vindo à família OneBitCode \o/

outubro 19, 2017
Feito com s2 por OneBitCode
%d blogueiros gostam disto: