63
61

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

【学習アウトプット2】離脱率を下げる!かんたんログイン機能の実装

Last updated at Posted at 2019-04-13

新規登録、ログインというのはめんどくさいものです。Facebookログインがあると何処となく安心するのも、偏にこの入力の手間が省けるからです。

我々初学者は良いWeb企業に入るためにポートフォリオを作成します。しかし全力で作ったポートフォリオも、中身を見てもらえなければ悲しいですよね。

この記事では、これからRailsでポートフォリオを作成する人向けに、ボタン一押しでログインできる「かんたんログイン」機能の実装方法について述べます。

方法1 : htmlに隠しパラメータで忍ばせる

まずは結論から。ログインボタンを表示したい場所に以下のコードを記載すればOKです。

top.rb
<%= form_for(User.new, url:login_path) do |f| %>
  <%= f.hidden_field :email, value: "xxx@example.com" %>
  <%= f.hidden_field :password, value: "password" %>
  <%= f.submit "かんたんログイン", class:"btn btn-lg center-block btn-success"%> 
<% end %>

params[:user][:email]とparams[:user][:password]にテストユーザ用の情報をいれてlogin_path(sessions#create)に送ります。hidden_fieldの中身は表示されないので、見た目的にもスッキリします。(ソースには載っちゃいますが)

方法2 : サーバ側で処理する

まずtestsessionsコントローラーを作ります

$ rails g controller testsessions

ルーティングを追加します。使うアクションはcreateだけです。

routes.rb
resources :testsessions, only: :create

createアクションを追加します。

testsessions_controller.rb
class TestsessionsController < ApplicationController
  def create
    user=User.find_by(email:"test@example.com")
    session[:user_id] = user.id
    flash[:success] = "テストユーザとしてログインしました。"
    redirect_to user
  end
end

コントローラーの中で情報をいれていく感じです。これでサーバ側はOKです。あとはログインボタンを表示したい場所に以下のコードを記載すればOKです。classはお好みで。

top.rb
<%= link_to 'かんたんログイン', testsessions_path, method: :post, class:"btn btn-lg btn-success center-block" %>

こちらのやり方ではテストユーザの情報がソースに載りません。テストユーザのときはflashを変えたい、というときにもこちらの方が良いかと思います。
(普通に既存のsessions_controllerにif user.email=="xxx@example.com"...などして分岐させてもいいかもですが、ちょっとごちゃごちゃします。)

実際の画面

方法2で実装しました。
ezgif-4-225391ddeacd (1).gif

注意

ログイン後にemailやpasswordを変えられたり退会されてしまうと機能しなくなります!これらを変更する機能はビューに表示させないようにして、かつ念の為テストユーザー専用のフィルターをつけておきましょう。
スクリーンショット 2019-04-13 20.10.53.png

みなさんのポートフォリオがより多くの方に見てもらえますように!

63
61
1

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
63
61

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?