LoginSignup
12
4

More than 5 years have passed since last update.

RailsのdeviseとStripe(とBootstrap)の組み合わせで、ただただユーザー登録したユーザーに定期更新購読させるだけのappを作りました①

Last updated at Posted at 2018-09-04

前書き

初心者向けに自分なりの言葉で柔らかく書いたつもりです。非エンジニアですが、メモ目的とアウトプットの恩恵のために記事にしました。間違っているところなどありましたら、コメントをください。
あとコードにコメントが多く視認性が悪いかもしれません。そこは申し訳なく…

※stripe実装やBootstrap実装は長くなってしまっているので②③の記事で分けて記述しています。
RailsのdeviseとStripe(とBootstrap)の組み合わせで、ただただユーザー登録したユーザーに定期定額課金させるだけのappの実装方法②
RailsのdeviseとStripe(とBootstrap)の組み合わせで、ただただユーザー登録したユーザーに定期定額課金させるだけのappの実装方法③

参考記事

Rails実装開始

環境

  • ruby 2.3.1p112
  • Rails 5.2.0
  • devise (4.4.3)
  • stripe (3.17.2)

プロジェクト作成

好きな場所にプロジェクトを作成する。

$ rails new stripe1.0.0
$ cd stripe1.0.0

devise実装

gem編集

devise機能を実装するためにgemからインストールする準備として、いつも通りGemfileに'devise'の記述を追加。

Gemfile
source 'https://rubygems.org'

gem '~~~~~~'
gem '~~~~~~'

# gemと並んでいる行の好きな行に下記の行を追加
gem 'devise'
gem '~~~~~~'

gemをRailsにインストール。

$ bundle install

プロジェクト内にdevise機能を実装

$ rails g devise:install

デフォルトURLの指定

config/environments/development.rb
config.action_mailer.default_url_options = { host: 'localhost', port: 3000 }

ルート(トップページ)となるページの作成

トップページにするコントローラーとアクションを作成する。
まずはコントローラーから作成。
コントローラー名(Home部分)は何でも良い。

$ rails g controller Home

アクションの追加

app/controllers/home_controller.rb
class HomeController < ApplicationController

    def index
    end

end

前述のコントローラー作成時に$ rails g controller Home indexとしてもアクション付きのコントローラーができるのでそれでも良い。

ルート(トップページ)に設定

:config/routes.rbにトップにしたコントローラー#アクションを記述。

config/routes.rb
Rails.application.routes.draw do
  # トップにするコントローラー#アクションを記述
  root 'home#index'
end

application.html.erbにメッセージを追加

viewの共通部分を描写するapplication.html.erbに認証メッセージを描写できるようにする。

app/views/layouts/application.html.erb
<!DOCTYPE html>
<html>
  <head>

    <!-- 好きなタイトルにする -->
    <title>Stripe1.0.0</title>
    <%= csrf_meta_tags %>
    <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>

  </head>

  <body>

    <!-- メッセージが入るところ -->
    <p class="notice"><%= notice %></p>
    <p class="alert"><%= alert %></p>

    <!-- 他のViewファイル(~~~.html.erb)が入るところ -->
    <%= yield %>

  </body>
</html>

deviseのviewを作成

サインアップ画面や、ログイン画面、認証情報編集画面、パスワード変更画面、メールアドレス変更画面などのdeviseのViewを生成。

$ rails g devise:views

deviseのUserを作成

通常のUserモデルにdevise認証で必要なカラムを追加したUserモデルを生成するコマンドを実行。

$ rails g devise User

Userモデル生成時に生成されたマイグレーションファイルを以下のようにコメントを外して変更する。

変更前

db/migrate/0123456789_devise_create_users.rb
class DeviseCreateUsers < ActiveRecord::Migration[5.0]
  def change
    create_table :users do |t|
      ## Database authenticatable
      t.string :email,              null: false, default: ""
      t.string :encrypted_password, null: false, default: ""

      ## Recoverable
      t.string   :reset_password_token
      t.datetime :reset_password_sent_at

      ## Rememberable
      t.datetime :remember_created_at

      ## Trackable
      t.integer  :sign_in_count, default: 0, null: false
      t.datetime :current_sign_in_at
      t.datetime :last_sign_in_at
      t.string   :current_sign_in_ip
      t.string   :last_sign_in_ip

      ## Confirmable
      # t.string   :confirmation_token
      # t.datetime :confirmed_at
      # t.datetime :confirmation_sent_at
      # t.string   :unconfirmed_email # Only if using reconfirmable

      ## Lockable
      # t.integer  :failed_attempts, default: 0, null: false # Only if lock strategy is :failed_attempts
      # t.string   :unlock_token # Only if unlock strategy is :email or :both
      # t.datetime :locked_at


      t.timestamps null: false
    end

    add_index :users, :email,                unique: true
    add_index :users, :reset_password_token, unique: true
    # add_index :users, :confirmation_token,   unique: true
    # add_index :users, :unlock_token,         unique: true
  end
end

変更後

db/migrate/0123456789_devise_create_users.rb
class DeviseCreateUsers < ActiveRecord::Migration[5.0]
  def change
    create_table :users do |t|
      ## Database authenticatable
      t.string :email,              null: false, default: ""
      t.string :encrypted_password, null: false, default: ""

      ## Recoverable
      t.string   :reset_password_token
      t.datetime :reset_password_sent_at

      ## Rememberable
      t.datetime :remember_created_at

      ## Trackable
      t.integer  :sign_in_count, default: 0, null: false
      t.datetime :current_sign_in_at
      t.datetime :last_sign_in_at
      t.string   :current_sign_in_ip
      t.string   :last_sign_in_ip

      ## Confirmable
      t.string   :confirmation_token
      t.datetime :confirmed_at
      t.datetime :confirmation_sent_at
      t.string   :unconfirmed_email # Only if using reconfirmable

      ## Lockable
      t.integer  :failed_attempts, default: 0, null: false # Only if lock strategy is :failed_attempts
      t.string   :unlock_token # Only if unlock strategy is :email or :both
      t.datetime :locked_at


      t.timestamps null: false
    end

    add_index :users, :email,                unique: true
    add_index :users, :reset_password_token, unique: true
    add_index :users, :confirmation_token,   unique: true
    add_index :users, :unlock_token,         unique: true
  end
end

変更前

app/models/user.rb
class User < ApplicationRecord
  # Include default devise modules. Others available are:
  # :confirmable, :lockable, :timeoutable and :omniauthable
  devise :database_authenticatable, :registerable,
         :recoverable, :rememberable, :trackable, :validatable
end

変更後

app/models/user.rb
class User < ApplicationRecord
  # Include default devise modules. Others available are:
  # :confirmable, :lockable, :timeoutable and :omniauthable
  devise :database_authenticatable, :registerable,
         :recoverable, :rememberable, :trackable, :validatable,# ←,を忘れないように
         # ここから追加
         :confirmable, :lockable, :timeoutable
end

マイグレーションを実行してdeviseに適用したUserテーブルを作成。

$ rails db:migrate

application.html.erbにheaderの追加

viewの共通部分を描写するapplication.html.erbにhead部分を追加して、どの画面でもサインアップやログイン、ログアウトなどができるようにリンクを追加して改造する。

app/views/layouts/application.html.erb
<!DOCTYPE html>
<html>
  <head>

    <title>Stripe1.0.0</title>
    <%= csrf_meta_tags %>
    <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %>
  </head>

  <body>

    <!-- 追加する箇所*************************** -->
    <header>
      <nav>
        <ul>
        <% if user_signed_in? %>
          <li>
            <%= link_to ‘認証情報の変更’, edit_user_registration_path %>
          </li>
          <li>
            <%= link_to ‘ログアウト’, destroy_user_session_path, method: :delete %>
          </li>
        <% else %>
          <li>
            <%= link_to ‘サインアップ’, new_user_registration_path %>
          </li>
          <li>
            <%= link_to ‘ログイン’, new_user_session_path %>
          </li>
        <% end %>
        </ul>
      </nav>
    </header>
    <!-- ************************************** -->


    <!-- メッセージが入るところ -->
    <p class="notice"><%= notice %></p>
    <p class="alert"><%= alert %></p>

    <!-- 他のViewファイル(~~~.html.erb)が入るところ -->
    <%= yield %>

  </body>
</html>

メールの設定

config/initializers/devise.rbに、送信に使用するメールアドレスを設定する。

config/initializers/devise.rb

  Devise.setup do |config|
  #
  #
  config.mailer_sender = 'メールアドレス'# 送信元の表示設定
  #
  #
end

config/environments/development.rbにメールのsftp情報を編集

config/environments/development.rb

  # mail setting
  config.action_mailer.delivery_method = :smtp
  config.action_mailer.smtp_settings = {
    :address => "smtpサーバー名",
    :port => '587',
    :user_name => "アカウント名",
    :password => "パスワード",
    :authentication => :login,
    :enable_starttls_auto => true
  }
end

サインアップ時に登録メールアドレスにメールが送信され、メール内にあるリンクを押すことによって認証を完了させる、よくあるあれ。
もしもメールが届かなかった場合でも、サインアップ完了時にターミナルに表示される文字列の中に、アクセスするためのリンクのアドレスが表示されているので、これをコピーしてブラウザで検索させることでも完了させることができる。

届いたメールの本文等を編集したい場合はapp/views/devise/confirmation_instructions.html.erbに項目があるので編集する。

ログイン時に間違えて良い回数の設定

config/initializers/devise.rb
  config.unlock_strategy = :email# emailをアンロックにする
  config.maximum_attempts = 5# 失敗の回数

タイムアウトにする時間の設定

config/initializers/devise.rb
  config.timeout_in = 30.minutes

アクセス制限

viewの共通部分を描写するapplication_controller.rbにアクセス制限の記述をする。

app/controllers/application_controller.rb
class ApplicationController < ActionController::Base
  before_action :authenticate_user!# アクセス制限
end

stripe実装

記事の初めにも記述しましたが、stripe実装は今回のdevise認証で長くなってしまったので②の記事で紹介しています。
こちらをご覧下さい。

12
4
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
12
4