11
13

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.

f.hiddel_fieldを使ったテストユーザーログイン機能

Posted at

サンプルアプリを覗いた時、正直ユーザーの新規作成 → ログインはちょっと面倒...
というわけで、以前作成したオリジナルアプリにテストユーザーとしてポチッとログインできる機能を追加しました。


オリジナルアプリはこちらです。
MemoMa
https://memoma-yyc.herokuapp.com/

過去記事
初めてのオリジナルWebサービス

結論

users/new.html.erb
<%= form_for(:session, url: login_path) do |f| %>
    <%= f.hidden_field :email, value: 'テストログイン用email' %>
    <%= f.hidden_field :password, value: 'テストログイン用password' %>
    <%= f.submit 'テストログイン', class: 'btn btn-default' %>
<% end %>

これだけです。

f.hidden_fieldで隠しフィールドを生成できます。

テストログイン用emailテストログイン用passwordに、テストログインユーザーとして登録した emila とpassword を入力してください。

入力する際はvalue:で指定します。

スクリーンショット 2019-04-13 17.38.32.png

装飾

ちょっと見た目がわかりにくいので説明を追加。

users/new.html.erb
<%= form_for(:session, url: login_path) do |f| %>
      <div class="test-user">
        <i class="fas fa-user"></i>
        <p>テストユーザーとしてログインできます</p>
        <p>⬇︎</p>
        <%= f.hidden_field :email, value: 'test@example.com' %>
        <%= f.hidden_field :password, value: '123456' %>
        <%= f.submit 'テストログイン', class: 'btn btn-default' %>
      </div>
<% end %>
スクリーンショット 2019-04-13 17.48.22.png

ログインページ

いきなりログインページに行く人もいるかもしれないので、一応ログインページにも同じものを追加。

スクリーンショット 2019-04-13 17.50.06.png

動作確認

Apr-13-2019 18-12-24.gif

できました!!
最後までお読みいただきありがとうございました(_ _)

参考サイト

Railsドキュメント:hidden_field

11
13
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
11
13

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?