概要
今回ポートフォリオを作成した際に実装したゲストログイン機能を紹介したいと思います。
実装した経緯
転職活動でポートフォリオを見てもらう際に、ゲストログイン機能があったほうがいいと考え実装しました。
ポートフォリオを見てもらう際に、ログインしないと各機能が使えない仕様では閲覧する採用者の方の負担が増えてしまいます。
その結果せっかく作成したポートフォリオを見てもらえないなんてことも起こる可能性があります。
なので ログインしなくても使用できるアプリーケーション設計、もしくは簡単にログインできる機能を付ける必要があると思い実装しました。
環境
| / | バーション |
|---|---|
| ruby | 3.0.3 |
| rails | 6.1.4 |
| nuxt | 2.15.8 |
| vuetify | 2.6.1 |
前提
今回はフロントエンドをNuxt.js、バックエンドのAPIとしてRailsを使用したSPA開発を前提としています。
ゲストログインの方式
ゲストログイン機能を実装する場合、下記の２種類の方法があります（初心者の私が思いつく限り）。
-
あらかじめゲストユーザーを作成し、その情報でログイン
→ この方法は簡単に実装できるが、複数のユーザーにログインさせるのは難しい。 -
ゲストユーザーをその都度作成し、ログイン
→ この方法だと都度ユーザーを作成するので、複数のユーザーにゲストログインさせることができる。
今回は2つ目の方式を採用します。
Rails側の処理
Rails側は全部で３つのステップがあります。
step 1 ゲストユーザー作成用のコントローラーを作成
下記コマンドを実行してコントローラーを作成します。
rails g controller guests
するとapp/controllers/guests_controller.rbが生成されます。
step 2 生成されたコントローラーにアクションを追加
コントローラーにcreateアクションを追加していきます。
class GuestsController < ApplicationController
def create
random_value = SecureRandom.hex(1) # ランダムな2文字の文字列を生成
random_pass = SecureRandom.hex(4) # ランダムな8文字の文字列を生成
user_params = {
name: "guest_#{random_value}",
email: "guest_#{random_value}@guest.com",
password: "#{random_pass}",
password_confirmation: "#{random_pass}"
}
user = User.create!(user_params)
render json: { email: user.email, password: user.password } # フロント側でログインに必要な値だけ送る
end
end
※ 今回2種類のランダムな文字列を生成していますが、バリデーションによって文字数は決めてください。
step 3 ルーティングの設定
Rails.application.routes.draw do
resources :guests, only: [:create]
end
Nuxt.js側の処理
step 1 @nuxtjs/axiosの導入
下記コマンドでaxiosをインストールします。
yarn add @nuxtjs/axios
その後各コンポーネントファイルに設定するのが面倒なので一括して設定します。
nuxt.config.js
export default {
// 省略
modules: ['@nuxtjs/axios']
// 省略
}
これでコンポーネントファイルでaxiosが使えるようになります。
step 2 コンポーネントファイルでRails側へ通信させる
※ templateはゲストログインのためのリンクのみ記載します。form等は各自実装してください。
<template>
<v-btn
text
plain
class="text-decoration-underline"
@click="guestSignIn"
>
ゲストとしてログイン
</v-btn>
</template>
<script>
export default {
methods: {
async guestSignIn () {
await this.$axios.post('/guests')
.then((res) => {
this.$auth.loginWith('local', { data: res.data }) // @nuxtjs/authを使用してログイン処理をしている
})
}
}
}
</script>
上記の例ではログイン処理にauthモジュールを使用していますが、ログイン処理は各々自由で大丈夫です。
まとめ
以上の手順でゲストを作成してログインすることができます。
しかし、一つ問題があります。
それは、データベースにゲストログインで作成されたユーザーデータがゲストログインごとに増えてしまいます。
このままではデータベースを圧迫しかねないので削除させる処理が必要です。
次回はゲストでログイン後にログアウトした場合、そのゲストアカウントを削除する機能の実装方法を説明します。
まだまだ未熟なのでコード的に不備がありましたら指摘してください。