More than 5 years have passed since last update.

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

Last updated at 2018-09-25Posted 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認証で長くなってしまったので②の記事で紹介しています。
こちらをご覧下さい。

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up

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

前書き

参考記事

Rails周り

devise周り

stripe周り

bootstrap周り

Rails実装開始

環境

プロジェクト作成

devise実装

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

デフォルトURLの指定

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

アクションの追加

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

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

deviseのviewを作成

deviseのUserを作成

application.html.erbにheaderの追加

メールの設定

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

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

アクセス制限

stripe実装