GitHubログイン機能を実装した

Issue

PRの種類

[x] feat: 機能追加
[ ] bugfix: バグ修正
[ ] docs: ドキュメント更新
[ ] style: コードの意味に影響しない変更
[ ] refactor: リファクタリング
[ ] perf: パフォーマンス向上
[x] test: テスト関連
[ ] chore: ビルド、補助ツール、ライブラリ関連、その他

詳細

OmniAuthを使ったGitHubログイン機能を実装しました
ログアウト機能を実装しました
Userのモデル/リクエスト/システムスペックを作成しました

参考

動作確認方法

1. 事前準備

動作確認の前にGitHub上でOAuthアプリの登録を行い、取得したClient IDとClient secretsをconfig/credentials.yml.encに設定する必要があります。

1-1. OAuthアプリの登録

https://github.com/settings/profile > Developer settings > OAuth Apps > New OAuth Appの順に選択。 OAuthアプリ登録フォームが表示されるので、以下の項目を入力してRegister applicationを選択。

Application name
- nijikai-go
Homepage URL
- http://localhost:3000/
Authorization callback URL
- http://localhost:3000/auth/github/callback

取得したClient IDとClient secretsをメモしておく。

1-2. `Client ID`と`Client secrets`を`config/credentials.yml.enc`に設定する

EDITOR="code --wait" bin/rails credentials:editを実行してconfig/credentials.yml.encに以下を追加

github:
  client_id: "<Client ID>"
  client_secret: "<Client secrets>"

※EDITOR="code --wait" bin/rails credentials:edit実行時にエラーが出る場合は、config/master.keyとconfig/credentials.yml.encを削除して再度実行する

2. 動作確認

feat/#66/add-github-loginをローカルに取り込む
bin/devでサーバを起動し、ブラウザからlocalhost:3000にアクセス
「サインアップ / ログインをして2次会グループを作成」をクリックしてログインできること、2次会グループ作成画面(/groups/new)に遷移することを確認する
トップ画面に戻り「ログアウト」をクリックして、ログアウトできることを確認する

スクリーンショット

変更前

トップページスクリーンショット 2024-04-14 12 25 18

変更後

ログイン前のトップページスクリーンショット 2024-04-14 12 19 48

ログイン後にgroups/newに遷移スクリーンショット 2024-04-14 12 19 59

ログイン後のトップページスクリーンショット 2024-04-14 12 20 09

ログアウト後にトップページに遷移スクリーンショット 2024-04-14 12 20 17

djkazunoko / nijikai-go