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 () 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 .
Preparando o Projeto
1 – Crie o projeto rodando:
|
1 |
rails new GithubAutentication |
2 – Entre no projeto rodando:
|
1 |
cd GithubAutentication |
3 – Rode no console para subir o projeto:
|
1 |
rails s |
4 – Acesse localhost:3000
Instalando o Devise
1 – Inclua no Gemfile a biblioteca de autenticação devise:
|
1 |
gem 'devise', github: 'heartcombo/devise', branch: 'ca-omniauth-2' |
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:
|
1 |
bundle install |
3 – Instale o devise:
|
1 |
rails generate devise:install |
4 – Gere o Model User já com o devise incluido (nele teremos os dados do usuário e autenticação):
|
1 |
rails generate devise User |
5 – Crie o seu banco de dados:
|
1 |
rails db:create |
6 – Realize a migração (onde vamos incluir a tabela User que foi gerada anteriormente):
|
1 |
rails db:migrate |
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):
|
1 2 |
gem 'omniauth-github', github: 'omniauth/omniauth-github', branch: 'master' gem "omniauth-rails_csrf_protection" |
2 – Adicione a gem ao projeto rodando:
|
1 |
bundle install |
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:
|
1 |
config.omniauth :github, '<Client ID>', '<Client Secret>', scope: 'user:email' |
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:
|
1 2 3 4 5 6 |
class CallbacksController < Devise::OmniauthCallbacksController def github @user = User.from_omniauth(request.env["omniauth.auth"]) sign_in_and_redirect @user end end |
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:
|
1 |
devise_for :users, controllers: { omniauth_callbacks: "callbacks" } |
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:
|
1 |
rails g migration AddOmniauthToUsers provider:string uid:string |
5 – Realize a migração:
|
1 |
rake db:migrate |
6 – No model User acrescente a opção omniautable para permitir o login social no devise:
|
1 2 |
devise :database_authenticatable, :registerable, :recoverable, :rememberable, :validatable, :omniauthable |
Criando ou logando usuário via Github
1 – No model User crie o seguinte método:
|
1 2 3 4 5 6 7 |
def self.from_omniauth(auth) where(provider: auth.provider, uid: auth.uid).first_or_create do |user| user.email = auth.info.email user.password = Devise.friendly_token[0, 20] # user.name = auth.info.name - Poderiamos pegar o nome do usuário se quissemos end end |
2 – Gere as telas de autenticação usadas pelo devise:
|
1 |
rails generate devise:views |
3 – Na tela de Login (app/views/devise/sessions/new.html.erb) inclua antes do fechamento do form:
|
1 2 3 |
<div> <%= link_to 'Login com GitHub', user_github_omniauth_authorize_path, method: :post %> </div> |
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 () para ser avisado quando abrirmos uma nova turma do Bootcamp OneBitCode.
Grande abraço o/