Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

「Devise で認証機能を追加」を更新して、"Logout" リンクを Rails 7 Turbo 向けに修正する #801

Merged
merged 1 commit into from
Mar 24, 2024
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
93 changes: 45 additions & 48 deletions _pages/devise.md
Original file line number Diff line number Diff line change
@@ -1,51 +1,43 @@
---
layout: default
layout: guide
title: Devise で認証機能を追加
permalink: devise
---

# Devise で認証機能を追加

*Created by Piotr Steininger, [@polishprince](https://twitter.com/polishprince)*
*Created by Piotr Steininger, [@polishprince](https://twitter.com/polishprince). Updated by Ernesto Jimenez, [@ernesto_jimenez](https://twitter.com/ernesto_jimenez)*, and [Hasan Diwan](https://units.d8u.us/twitter?src`=railsgirlsGuide)*

*Updated by Ernesto Jimenez, [@ernesto_jimenez](https://twitter.com/ernesto_jimenez)*

** このガイドは、すでに [ Rails Girls アプリ・チュートリアル ](/app) でアプリを作った方を対象にしています。 **
**このガイドは、すでに [ Rails Girls アプリ・チュートリアル ](/app) でアプリを作った方を対象にしています。**

## *1.* devise gem を追加


## *1.*devise gem を追加

アプリの `Gemfile` を開いて、次の行を追加します。

{% highlight ruby %}
gem 'devise'
{% endhighlight %}

そして、ターミナルもしくはコマンドプロンプト(Windows用)を開いてアプリのディレクトリへ移動し、次のコマンドを実行しましょう。
gem を追加するには、以下のコマンドを実行します。

{% highlight sh %}
bundle
bundle add devise
bundle install
{% endhighlight %}

gem のインストールができました。Rails のサーバーを再起動するのを忘れずに!

**Rails のサーバーを再起動するのを忘れずに!**

## *2.*アプリに devise をセットアップ
## *2.* アプリに devise をセットアップ

次は、先ほどのディレクトリでこのコマンドを実行しましょう
ターミナルで以下のコマンドを実行します

{% highlight sh %}
rails generate devise:install
rails g devise:install
{% endhighlight %}

## *3.*Devise の環境設定
## *3.* Devise の環境設定

environments ファイルにデフォルトの url オプションを定義します。
`config/environments/development.rb` を開いて次の行を追加しましょう。

{% highlight ruby %}
config.action_mailer.default_url_options = { host: 'localhost:3000' }
config.action_mailer.default_url_options = { host: "localhost", port: 3000 }
{% endhighlight %}

`end` と書かれているところの前に追加してください。
Expand All @@ -69,55 +61,60 @@ config.action_mailer.default_url_options = { host: 'localhost:3000' }

また、 `app/views/ideas/show.html.erb` を開いて、

{% highlight ruby %}
{% highlight erb %}
<p id="notice"><%= notice %></p>
{% endhighlight %}

を削除します
の行を削除します

同じように `app/views/comments/show.html.erb` についても削除を行います。これらの `notice` 行は `app/views/layouts/application.html.erb` ファイルに同じ行を追加したので、必要ありません。

## *4.*User model をセットアップ
## *4.* User モデルを作成

User model を作るために bundled generator script を使います
User モデルを作るために生成用のスクリプトを実行します

{% highlight sh %}
rails generate devise user
rails g devise user
rails db:migrate
{% endhighlight %}

**Coachより:** 生成された User モデルについて説明をしてください。フィールドとは何ですか?
{% coach %}
生成された User モデルについて説明をしてください。フィールドとは何ですか?
{% endcoach %}

## *5.*ユーザーを作成
## *5.* 最初のユーザーを作成

これでユーザを作成する準備がすべて整いました。Devise がアカウントの作成、ログイン、ログアウトなどに関するすべてのコードやルーティングを生成してくれています。
これで最初のユーザーを作成する準備がすべて整いました。Devise がアカウントの作成、ログイン、ログアウトなどに関するすべてのコードやルーティングを生成してくれています。

Rails のサーバーが起動している事を確認したら、[http://localhost:3000/users/sign_up](http://localhost:3000/users/sign_up) をブラウザで開いてユーザーを作成してください。

## *6.*サインアップとログインリンクの追加
## *6.* サインアップとログインリンクの追加

あと、やらなければいけないことは、ユーザーがログインできる適切なリンク、または案内をナビゲーションバー右上のコーナーに追加することです。
そのために、 `app/views/layouts/application.html.erb` を開いて、

{% highlight erb %}
<p class="navbar-text pull-right">
<% if user_signed_in? %>
Logged in as <strong><%= current_user.email %></strong>.
<%= link_to 'Edit profile', edit_user_registration_path, class: 'navbar-link' %> |
<%= link_to "Logout", destroy_user_session_path, method: :delete, class: 'navbar-link' %>
<% else %>
<%= link_to "Sign up", new_user_registration_path, class: 'navbar-link' %> |
<%= link_to "Login", new_user_session_path, class: 'navbar-link' %>
<% end %>
<p class="navbar-text float-right">
<% if user_signed_in? %>
Logged in as <strong><%= current_user.email %></strong>.
<%= link_to "Edit profile", edit_user_registration_path, class: "navbar-link" %> |
<%= link_to "Logout", destroy_user_session_path, data: { turbo_method: :delete }, class: "navbar-link" %>
<% else %>
<%= link_to "Sign up", new_user_registration_path, class: "navbar-link" %> |
<%= link_to "Login", new_user_session_path, class: "navbar-link" %>
<% end %>
</p>
{% endhighlight %}

これらを、次の行の上に追加します。

{% highlight erb %}
<ul class="nav navbar-nav">
<li class="active"><a href="/ideas">Ideas</a></li>
</ul>
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="/ideas">Ideas</a>
</li>
...
</ul>
{% endhighlight %}

最後にログインしていない時に登録した内容を確認できないようにします。
Expand All @@ -127,17 +124,17 @@ Rails のサーバーが起動している事を確認したら、[http://localh
before_action :authenticate_user!
{% endhighlight %}

`end` と書かれているところの前に追加してください
`class ApplicationController < ActionController::Base` と書かれているところの次の行に追加してください

ブラウザを開いてログインやログアウトを試してみてください。

**Coachより:** `user_signed_in?` や `current_user` ヘルパーについて話してみてください。何が便利だったでしょうか?
{% coach %}
`user_signed_in?` や `current_user` ヘルパーについて話してみてください。どうしてそれらのヘルパーは便利なのでしょうか?
{% endcoach %}

## 次は?

* User model のその他の項目も追加しましょう
* User モデルにその他の項目も追加しましょう
* users と ideas 間のリレーションを追加しましょう。
* それぞれ自分の ideas だけ編集と自分のコメントだけ削除できるように users に制限をかけましょう。
* ロールやパーミッションを使うように拡張しましょう。( CanCan のような人気の認証 gem も使ってみてください。)


* ロールやパーミッションを使うように拡張しましょう。(CanCan のような人気の認証 gem も使ってみてください。)
Loading