devise_token_authとは？
devise_token_authはRailsでトークンベースの認証機能を作れるgemのこと。
フロントとバックを分けて開発している時なんかに使う。
クライアントは、発行されたトークンを用いてユーザー認証を行う。
メールアドレスを用いた本人確認や、パスワードのリセットといった、webアプリケーションによくある機能もこのgemで作ることができる。
実行環境
Ruby 3.3.0
Rails 7.0.8
環境設定
まずは必要なgemをインストール。
gem 'devise_token_auth'
gem "devise"
gem "rack-cors"
bundle install
CORSの制御のため、rack-corsも必要
deviseとdevise_token_authをインストール
rails g devise:install
rails g devise_token_auth:install User auth
末尾にUser authをつけることで、以下の設定になる。
ユーザー認証に使うクラスをUserとする
認証に関連するパスはauth/~となる(https://example.com/auth/sign_in) みたいな感じ
ユーザー認証時のルーティングを設定する。
今回はappディレクトリ配下にapi/v1/authディレクトリを作成し、registrationsコントローラーをオーバーライドする。
Rails.application.routes.draw do
namespace :api do
namespace :v1 do
mount_devise_token_auth_for 'User', at: 'auth', controllers: {
registrations: 'api/v1/auth/registrations'
}
end
end
end
ユーザー登録時に認証メールを送信するようにする。
User.rbにconfirmableを追加すればOK
devise :database_authenticatable, :registerable,
:recoverable, :rememberable, :validatable, :confirmable # 追加
あとはmigrateを実行すればOK
rails db:migrate
テストメール設定
ユーザー登録の際、メールアドレスを使って本人確認を行う。
ローカル環境で実際にメールを送信するわけにもいかないので、テスト用にletter_opener_webを使用する。
参考
Gemfileに追加してインストール。
group :development do
gem 'letter_opener_web', '~> 2.0'
end
bundle install
ルーティングの設定
routes.rbに以下を追記。
mount LetterOpenerWeb::Engine, at: "/letter_opener" if Rails.env.development?
config/environments/development.rb に以下を追記
- delivery_method
その名の通りメールの配信方法。letter_openerを使用する。 - perform_deliveries
実際にメールを送るかどうか。trueで送る。
config.action_mailer.delivery_method = :letter_opener
config.action_mailer.perform_deliveries = true
これで、http://localhost:3000/letter_opener/ にブラウザからアクセスすればletter_openerのGUIが表示されるはず。
CORS
APIとは異なるドメインからのリクエストを想定しているので、CORSの設定をする必要がある。
- config/initializers/cors.rb
Rails.application.config.middleware.insert_before 0, Rack::Cors do
allow do
# 開発環境の場合は、全てのオリジンからのリクエストを許可する
if Rails.env.development?
origins '*'
else
origins "example.com"
end
resource '*',
headers: :any,
expose: ["access-token", "expiry", "token-type", "uid", "client"],
methods: [:get, :post, :put, :patch, :delete, :options, :head]
end
end
実践(ユーザー登録)
テスト用に作ったクソザコフォームでテストしていく。
画面ははReactで作成しており、コードは以下のような感じ。
とりあえずこれで実行してみる。
import React, { useState } from 'react';
import axios from 'axios';
function UserSignUp() {
const [email, setEmail] = useState('');
const [password, setPassword] = useState('');
const handleSignUp = async () => {
try {
const response = await axios.post('http://localhost:3000/api/v1/auth', {
// パラメータとして送っているのはemailとpasswordの二つのみ。
email: email,
password: password
});
console.log(response.data);
} catch (error) {
console.error(error);
}
};
return (
<div>
<input
type="text"
placeholder="email"
value={email}
onChange={(e) => setEmail(e.target.value)}
/>
<input
type="password"
placeholder="Password"
value={password}
onChange={(e) => setPassword(e.target.value)}
/>
<button onClick={handleSignUp}>Sign Up</button>
</div>
);
}
export default UserSignUp;
実行すると、API側で422エラーが起きて「Unpermitted parameter: :registration.」というメッセージが出ているはず。
rails側でparamsをwrapしてしまい、以下のようなパラメーターが送られていたため、このような挙動になるらしい。
Parameters: {"email"=>"test@example.com", "password"=>"[FILTERED]", "registration"=>{"email"=>"test@example.com", "password"=>"[FILTERED]"}}
registrationsコントローラーのsign_up_paramsメソッドをオーバーライドし、registrationからパラメータを取得するようにします。
- app/controllers/api/v1/auth/registrations_controller.rb
class Api::V1::Auth::RegistrationsController < DeviseTokenAuth::RegistrationsController
private
def sign_up_params
params.require(:registration).permit(:email, :password)
end
end
もう一度実行すると、usersテーブルにレコードが作成されました！
letter_openerを開くと、アカウント認証メールが届いているはずです。
Confirm my accountをクリックすると、対象ユーザーのconfirmed_atが更新される。これでユーザー登録完了！
