paint-brush
Como adicionar autenticação de usuário usando o Devise (Bootstrap no Rails 7)por@Temmarie
2,391 leituras
2,391 leituras

Como adicionar autenticação de usuário usando o Devise (Bootstrap no Rails 7)

por Grace Tamara Ekunola5m2023/06/28
Read on Terminal Reader

Muito longo; Para ler

Devise é um Ruby Gem que fornece autenticação de usuário e recursos de autorização para aplicativos Ruby. Neste tutorial, construiremos um aplicativo rails simples com o Devise que permite aos usuários criar contas, entrar e sair de suas contas. Também abordaremos como adicionar estilo ao aplicativo usando o Bootstrap.
featured image - Como adicionar autenticação de usuário usando o Devise (Bootstrap no Rails 7)
Grace Tamara Ekunola HackerNoon profile picture
0-item
1-item

A autenticação do usuário é um recurso de segurança essencial para aplicativos da Web, especialmente aqueles que lidam com dados confidenciais do usuário ou fornecem acesso restrito a determinadas funcionalidades. Ao exigir que os usuários se autentiquem antes de acessar o aplicativo, os desenvolvedores podem garantir que apenas usuários autorizados possam visualizar ou modificar os dados e a funcionalidade do aplicativo.


O que é Devise?

Devise é uma Ruby Gem que fornece autenticação de usuário e recursos de autorização para aplicativos Rails. Ele reduz o processo de adição de funcionalidade de inscrição, login e logout ao seu aplicativo sem ter que escrever tudo do zero.


Possui recursos integrados, como redefinição de senha e confirmação de conta. Ele oferece suporte a várias estratégias de autenticação, como e-mail e senha, OAuth, OpenID e muito mais.

O Devise possui uma documentação detalhada que abrange recursos básicos e avançados.


Neste tutorial, construiremos um aplicativo rails simples com o Devise que permite aos usuários criar contas, entrar e sair de suas contas. Também abordaremos como adicionar estilo ao aplicativo usando o Bootstrap.



Pré-requisitos


Antes de iniciar este tutorial, você deve ter um bom entendimento dos fundamentos de Ruby e Rails. Além disso, você deve ter o seguinte software instalado em seu computador:


  • Ruby: Se você não instalou o Ruby em sua máquina, você pode baixar a versão mais recente do site oficial Site Ruby .
  • Ruby on Rails: você deve configurar seu ambiente de desenvolvimento local seguindo os trilhos guia.
  • Node.js: Instalar Node.js para gerenciar o pipeline de ativos e executar o código JavaScript.
  • Fio
  • SQLite3
  • Um editor de texto como o Visual Studio Code
  • Um navegador como o Google Chrome


Também abordaremos como usar o Bootstrap no Rails 7 posteriormente no tutorial.



Etapa 1: criar um novo aplicativo Rails

  • Para criar um novo aplicativo rails, abra um terminal em seu diretório preferido e execute o comando:
 rails new authApp

Isso irá gerar um novo aplicativo Rails chamado authApp em um diretório authApp . Abra este diretório em seu editor de texto preferido.

  • Navegue até o diretório do aplicativo digitando: cd authApp
  • Em seu terminal, inicie seu servidor Rails executando: rails server
  • Abra http://127.0.0.1:3000/ em seu navegador para acessar a página de boas-vindas do Rails.

Página de boas-vindas do Rails



Etapa 2: criar uma página de destino

  • Gere um novo controlador que tratará a solicitação para o caminho raiz usando o comando: $rails generate controller home index

    Isso cria um novo controlador chamado `Home` com uma ação `index`.

  • Adicione o caminho raiz ao arquivo routes.rb na pasta 'config' adicionando a seguinte linha: root 'home#index'

  • No diretório app/views/home , você encontrará um novo arquivo chamado index.html.erb . Essa exibição conterá o código HTML da sua página de destino.

  • Reinicie o servidor e verifique o host local em seu navegador da web para visualizar sua página inicial recém-criada.


Pagina inicial


Passo 3: Instale e configure o Bootstrap


  • Nesta seção, usaremos import maps , que carregam JS. Primeiro, verifique se você tem mapas de importação instalados executando cat config/importmap.rb . Caso contrário, execute rails importmap:install
  • Em seguida, adicione Bootstrap 5 JS ao Rails por meio de mapas de importação: $ bin/importmap pin bootstrap . Isso adiciona JS, bootstrap e popperjs a config/importmap.rb .
  • Importe o Bootstrap em app/javascript/application.js usando import 'bootstrap'; .
  • Adicione gem 'bootstrap', '~> 5.1.3' ao seu Gemfile e execute bundle install .
  • Em app/assets/stylesheets/application.css , importe Bootstrap usando @import "bootstrap"; e renomeie o arquivo para application.scss .
  • Verifique se o arquivo app/views/layouts/application.html.erb contém:
 <%= stylesheet_link_tag "application", "data-turbo-track": "reload" %> <%= javascript_importmap_tags %>
  • Adicione estilos como preferir em seu arquivo app/views/home/index.html.rb .
  • Recarregue o servidor e veja as alterações.


Página inicial com estilos Bootstrap


Etapa 4: Instalar e configurar o Devise

  • Navegue até o Gemfile e adicione a gem Devise usando o comando:

    gem 'devise', github: 'heartcombo/devise', branch: 'main'

  • Execute bundle install para instalar o Devise.

  • Execute rails g devise:install para configurar o Devise em seu projeto. Isso gera vários arquivos iniciais para o Devise e fornece instruções no terminal.

  • Descomente a linha config.navigational_formats = ['*/*', :html, :turbo_stream] no arquivo devise.rb . Isso adiciona turbo_stream como um formato de navegação, que é necessário para o Devise 4.9.2 funcionar com o Rails 7. Deixar de fazer isso resultará em um erro undefined method user_url .

  • Abra app/layouts/applications.html.erb e adicione as seguintes linhas para aviso e mensagens de alerta:


 <p class="notice"><%= notice %></p> <p class="alert"><%= alert %></p>



Etapa 5: Criando um modelo de usuário com o Devise


  • Para criar um modelo de usuário com o Devise, execute rails g devise user no terminal. Isso gerará os arquivos necessários e a configuração necessária para implementar a autenticação do usuário.

  • Crie a tabela user executando o comando migration: rails db:migrate .

  • Reinicie o servidor para carregar o novo arquivo inicializador do Devise e configure tudo para que a autenticação do usuário funcione.

  • Vá para http://localhost:3000/users/sign_up em seu navegador para acessar o formulário de inscrição para criar uma conta inserindo um e-mail e senha.


  • Navegue até o arquivo index.html.erb e adicione as seguintes linhas de código:

 <% if user_signed_in? %> <p>Welcome, <%= current_user.email %>!</p> <%= link_to "Sign out", destroy_user_session_path, method: :delete %> <% else %> <%= link_to "Sign in", new_user_session_path %> <% end %>


Essas linhas criam links de inscrição, entrada e saída para seu aplicativo. user_signed_in é um método auxiliar fornecido pelo Devise que retorna true se o usuário atual estiver conectado e false caso contrário.


  • Atualize sua página no navegador para revisar as alterações.



Página de login



  • Para revisar as alterações, basta atualizar a página em seu navegador. Se você ainda não fez login, haverá um botão de login visível na tela. Clique nele e conclua o processo de registro. Depois de se inscrever com sucesso, você será direcionado para a página inicial, onde poderá visualizar o endereço de e-mail do usuário conectado no momento, uma mensagem de boas-vindas e um botão de sair.


Ao seguir essas etapas, você integrou com sucesso a gem Devise e configurou a autenticação do usuário para seu aplicativo.



Conclusão

Neste tutorial, usamos o Devise para adicionar autenticação de usuário ao nosso aplicativo Rails. Desenvolvemos um aplicativo onde os usuários podem criar contas, cadastrar e sair. Também integramos o Bootstrap para melhorar a aparência do projeto. Para expandir seu conhecimento sobre o Devise e explorar outros métodos e auxiliares, consulte o arquivo README no repositório GitHub do Devise.