Autenticação com GitHub no Ruby On Rails (Passo a Passo)

 

Nesse tutorial você vai aprender como incluir autenticação via GitHub (ou seja, permitir que o usuário faça login e se registre usando o GitHub) nos seus APPs Ruby On Rails usando as gems devise, omniauth e omniauth-github através da criação de um pequeno APP passo a passo.

Antes de prosseguirmos um aviso, nós criamos uma imersão onde ensinamos como criar um e-commerce profissional (simmm profissional mesmooo) do zero usando Ruby On Rails, React e React Native.

Se você quer se tornar um mestre nessas tecnologias, se inscreva nessa lista (clicando aqui) para ser avisado(a) assim que as inscrições forem abertas.

Bora para o tutorial o/


Pré requisitos

• Ruby 3
• Ruby On Rails 6

Caso você não possua o Ruby e o Ruby On Rails instalados clique aqui.


Preparando o Projeto

1 – Crie o projeto rodando:

2 – Entre no projeto rodando:

3 – Rode no console para subir o projeto:

4 – Acesse localhost:3000


Instalando o Devise

1 – Inclua no Gemfile a biblioteca de autenticação devise:

Ps: Usamos essa branch para instalar o devise porque enquanto eu escreo esse tutorial o devise ainda não aceita na master o omniauth 2, talvez já tenha mudado.

2 – Adicione a gem ao projeto rodando:

3 – Instale o devise:

4 – Gere o Model User já com o devise incluido (nele teremos os dados do usuário e autenticação):

5 – Crie o seu banco de dados:

6 – Realize a migração (onde vamos incluir a tabela User que foi gerada anteriormente):


Instalando o OmniAuth e gerando suas credencias no GitHub

1 – Coloque no seu Gemfile a biblioteca omniauth responsável por realizar a integração com autenticações externas (como Github, Facebook, Linkedin e etc):

2 – Adicione a gem ao projeto rodando:

3 – Logado no sua conta do Github acesse https://github.com/settings/apps e depois clique OAuth APPs e em New OAuth APP

4 – Preencha os dados:

• Nome do APP: LoginWithGithubXYZ (escolha o nome que desejar)
• Url: http://localhost:3000
• Url de Callback: http://localhost:3000/users/auth/github/callback

5 – Clique no botão ao final para criar o APP

6 – Você será redirecionado para uma página com o seu Client id, clique em “Generate New client Secret” e salve esses dados (Client Id e Client Secret).

7 – No arquivo config/initializers/devise.rb acrescente a seguinte linha substituindo os dados que salvou anteriormente:


Criando o Callback de conexão e atualizando o User

1 – Nos controllers da sua aplicação crie o seguinte arquivo: callbacks_controller.rb

2 – Coloque no arquivo criado:

Aqui criamos um controller para receber a chamada do GitHub avisando que o usuário realizou o login através da sua conta do GitHub, nessa chamada recebemos os dados do usuário e depois logamos e redirecionamos ele.

3 – No seu routes.rb existe a rota do devise, atualize ela:

4 – Vamos adicionar ao model User o campo provider e uid para informar qual o provider (autenticação externa) foi usado para realizar o login do usuário:

5 – Realize a migração:

6 – No model User acrescente a opção omniautable para permitir o login social no devise:


Criando ou logando usuário via Github

1 – No model User crie o seguinte método:

2 – Gere as telas de autenticação usadas pelo devise:

3 – Na tela de Login (app/views/devise/sessions/new.html.erb) inclua antes do fechamento do form:


Conclusão

Fica fácil realizar autenticações complexas quando você usa as ferramentas certas, esse combo de devise + omniauth ajuda muito nesse processo todo.

Agora que você já sabe como realizar a autenticação com o GitHub eu deixo o seguinte desafio: Procure pela gem omniauth-facebook e tente implementar a autenticação com o Facebook também.

Se você gostou deste tutorial e quer continuar aprendendo sobre Rails de forma profissional se inscreva na lista especial (clicando aqui) para ser avisado quando abrirmos uma nova turma do Bootcamp OneBitCode.

Grande abraço o/

 

 

Referências

5 1 vote
Article Rating
março 30, 2021
Subscribe
Notify of
guest
0 Comentários
Inline Feedbacks
View all comments
Feito com s2 por OneBitCode
0
Would love your thoughts, please comment.x
()
x
%d blogueiros gostam disto: