LoginSignup
5
5

More than 1 year has passed since last update.

【Heroku】Basic認証の手順

Last updated at Posted at 2021-05-25

概要

アプリの作成が完了し、Herokuへのデプロイも終わりました。
今回はBasic認証 (ユーザー認証) の実装をします。
ユーザー名とパスワードを知っているユーザーのみ、アプリへアクセスできるようにします。

Basic認証とは

Basic認証は、HTTP通信の規格に備え付けられているユーザー認証の仕組みのことです。
サーバーとの通信が可能なユーザーとパスワードを事前に設定し、それに一致したユーザーのみ、アプリを利用できるようにします。
image

今回はusernameを「abc」、パスワードを「1111」で実装していきます。

実装手順

手順① Basic認証をアプリへ導入

authenticate_or_request_with_http_basicメソッドを利用し、railsアプリにBasic認証を導入します。

Basic認証は、すべてのコントローラーで行います。
Basic認証の処理をapplication_controller.rbのprivate以下にメソッドとして定義し、before_actionで呼び出します。

controllers>application_controller.rb
class ApplicationController < ActionController::Base
end

              # ⬇︎ 以下のように編集 ⬇︎ 

class ApplicationController < ActionController::Base
  before_action :basic_auth 

  private

  def basic_auth
    authenticate_or_request_with_http_basic do |username, password|
      username == 'abc' && password == '1111'
    end
  end
end

上記の記述でどのページにアクセスしてもBasic認証が要求されるようになりました。

Basic認証の動作を確認

% rails s

間違ったユーザー名とパスワードではアクセスできないことを確かめるため、適当な文字を入力します。
image from Gyazo

もう一度同じ画面が表示されれば成功です。
ユーザー名に「abc」、パスワードに「1111」を入力すればログインできます。
(ユーザー名とパスワードは自身で適切なものを考えて実行して下さい)

手順② Basic認証のコードを改良

現時点でBasic認証をアプリへ導入できました。しかし、ユーザー名とパスワードがコードに記述されているため、安全性にかけます。
そのため、コードに直接ユーザー名とパスワードを記述するのではなく、環境変数を利用する実装に切り替えます。

環境変数を設定

basic_authメソッド内で直接記述しているユーザー名とパスワードを、開発環境の環境変数に格納します。
以下のコマンドを入力します。
(ここから出てくるコマンドの詳細は下の方の「必要知識」に記載しています)

% vim ~/.zshrc

以下が表示されれば成功です。
image

「iキー」を押し、インサートモードに移行します。
左下に「INSERT」と表示されたら成功です。

image

zshの内部に、以下を追加します。
image
既にzsh内に記述がある場合、その記述の「下」に追加します。既存の記述を削除してしまうと、パソコンが正常に動作しなくなる危険性があります。

記述を追加したら「escキー」を押し「INSERT」が消えたことを確認し、「:wq」と入力します。
その後「Enterキー」を押して終了します。

最後に「sourceコマンド」を実行します。

% source ~/.zshrc            # 記述された内容を実行

これでBASIC_AUTH_USERBASIC_AUTH_PASSWORDという名前で、それぞれユーザー名とパスワードを定義できました。次に、この環境変数をアプリ側で読み込むように記述します。

controllers>application_controller.rb
class ApplicationController < ActionController::Base
  before_action :basic_auth

  private

  def basic_auth
    authenticate_or_request_with_http_basic do |username, password|
      username == ENV["BASIC_AUTH_USER"] && password == ENV["BASIC_AUTH_PASSWORD"]  # この1行を変更
    end
  end
end

これで環境変数を使いBasic認証を行えるユーザー名とパスワードを定義できました。

環境変数が反映されているか確認します。
サーバー再起動後、環境変数として設定したユーザー名とパスワードでログインができれば、成功です。
(Basic認証が現れない場合、シークレットウィンドウにて確認してみましょう)

手順③ 本番環境で環境変数を設定

Heroku上に環境変数を設定

以下のコマンドを入力します。

% heroku config:set BASIC_AUTH_USER="abc"
% heroku config:set BASIC_AUTH_PASSWORD="1111"

Heroku上で環境変数を確認

% heroku config

以下が確認できれば成功です。

BASIC_AUTH_PASSWORD:      1111
BASIC_AUTH_USER:          abc

最後に変更したコードをコミットし、Herokuへデプロイします。

% git add .
% git commit -m "Basic認証を導入" 
% git push heroku master

Heroku上の挙動を確認

Heroku上に公開したアプリへアクセスし、Basic認証が行えるか確認しましょう。
設定したユーザー名とパスワードでログインができれば、成功です。

必要知識

zsh(ズィーシェル)

「zsh」はログインシェルと呼ばれるものです。
プログラムを実行する際に、ユーザーの要求に1番最初に対応する役割を担います。
隠しファイルのため、特別な設定なしではFinderなどには表示されていないです。
環境変数を記載する場所は、設定ファイルである「.zshrc」の中です。

bash(バッシュ)

「bash」とは、 zshと同じくログインシェルの1つです。zshとの違いは、OSがCatalina以降であれば「zsh」、Mojave以前であれば「bash」が自動で適用されます。
環境変数を記載する場所は、設定ファイルである「.bash_profile」の中です。

vim(ヴィム)

「vim」とは、サーバー上で使用できるテキストエディタです。
vimコマンドを用いることで、指定したファイルの編集をターミナルから行うことが可能です。
これらの設定ファイルは、vimというコマンドを用いて編集します。

使用例
 % vim ~/.zshrc  

vimには「通常モード」と「インサートモード」があります。

通常モードは、コマンドを打つことでファイルを保存したりvimを終了したりできます。
「通常モード」のコマンドには以下のようなものがあります。

コマンド 説明
:w 作成・編集したファイルを保存
:q vimを終了
:q! 編集した内容を保存せず、vimを強制終了
:wq 編集した内容を保存して、vimを強制終了

インサートモードは、ファイルに編集を加えることができます。
「i」キーを押すことで「insert(インサート)モード」になり、文字の入力が可能です。
ファイル編集後は、Escキーを押すと「通常モード」に戻ります。

また、ファイル編集後は、sourceコマンドを実行する必要があります。
「sourceコマンド」とは、シェルに記述された内容を実行する役割を担います。今回は、zshファイルに記述された内容を実行します。

使用例
% source ~/.zshrc

必要知識は以上です。

最後に

Basic認証は少ない工程で実装できるため、非常に便利ですが安全にはかける場合もあります。
必要最低限の認証機能を実装したい場合のみ、Basic認証を利用するようにしていきます。

環境

ruby 2.6.5
Rails 6.0.3.5
heroku 7.51.0

参考リンク

ベーシック認証(Basic認証)とは?設定方法と注意点・エラーになる原因を解説

5
5
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
5
5