Laravel

Laravel8 Jetstreamを導入した状態でsocialiteによるSNS認証を両立させる

投稿日:

Laravel8が大きく変わっていたので前回の記事で再入門した。
sailコマンドでコンテナの外からartisanコマンドを叩けて便利。

Laravel5,6あたりでSocialiteパッケージによりSNS認証を簡単に実装することができた.
Laravel8+JetstreamにSocialiteを導入してSNS認証してみた.
Jetstreamをインストールし,Jetstreamのrouteがある状態でSocialiteが機能するようにした.

JetstreamのAuthはlaravel/uiのようにお手軽にrouteを変更できない様子.
今回はそれには触れず, 最低限の修正でJetstreamとSocialiteを両立させてみる.

Jetstream導入

sailコマンド経由でインストールしていく。
composer, artisanだけでなく, npmもsailで実行できる.

migrationで作られたテーブル達を確認する.
sailからmysqlを叩くことはできそうだが、さらに-eオプションでSQLを続けられなかった。
sail mysqlでいつものmysql clientに繋がる. sailはあくまでもユーザインターフェースなのでこれで良いか.

http://localhostを叩くと、認証機能が追加されていることを確認できる。

registerから登録してログインすると認証後URL (./dashboard) にredirectされる.
profileに進むとまぁ普通に使いそうな機能が既にインプリメントされていることがわかる.

routeの確認

Jetstreamをインストールした直後にJetstreamにより作られたrouteを確認してみる.
いやー.. too much過ぎだろう…

Socialite導入

Laravel5とか6あたりではSocialiteパッケージを導入することでSNS認証を簡単に作れた.
Laravel8+Jetstreamでも同じように作れるのか試してみた.
以下の記事を参考にさせていただきました.
【Laravel】JetstreamでSNS認証(ソーシャルログイン)

OAuth idとsecret を取得しておく. (id,secretの発行にはこちらを参考にさせていただきました.)
Callback redirect先のURLとして http://localhost/login/google/callback を登録する.

Socialite実装

.envにOAuth認証id,secret,redirectURLを書く.
.env自体はhostから編集すれば良い.

config/servicesに以下の設定を追加する.

Routeを追加する. Laravel7までとLaravel8ではRouteの書き方が異なる.
Laravel7までは app/Providers/RouteServiceProvider.php に名前空間が定義されているため,
Routeに書くコントローラの名前空間を書かなくても自動的に解決してくれた.
例えば, LoginController::class と書くと,
自動的にApp/Http/Controllers/LoginController::class と解釈された.
Laravel8では, 名前空間を省略できなくなった.

Socialite Providerを config/app.php のproviders に追加する

app/Providers/EventServiceProvider.php を以下の通り変更する.

SNS認証によるログインを担うコントローラを自力で作成する.

作成したコントローラの中身は以下の通り.

viewを作成する. ファイル名は app/View/auth/login.blade.php.
Routeで書いた sns_login_redirect ページに遷移するリンクがあるだけ.

Welcomeページのログインを修正

普通は何らかの画面が既にあってそこにSocialiteを組み込むと思うが, 今回は何もないので,
とりあえずWelcomeページのログインをSocialite用に書き換えてみる.

Jetstreamのrouteを変えようとしたが闇が深そうなので見なかったことにする.
ちょっとJetstreamは出来が良くないのかなー..

デフォルトのWelcomeページのログインは, Jetstreamが生成する /login に合わせて作られてある.
このままだと, Jetstreamが作った認証機構が動く.
例えば以下のように変更するとWelcomeページのログインをSocialiteのものに差し替えることができる.
route(‘login’)をroute(‘sns_login.redirect’,’google’)に変更した.
また, registerは不要なので, registerへの遷移リンクを削除した.

動作確認

未ログインの状態で http://localhost を開くと, Welcome画面が表示され, Login への遷移リンクが表示される.
Loginを押下すると, Googleのログイン画面に遷移する.
アカウントを選択すると, http://localhost/login/google/callback にredirectがかかる.
もし当サイトにアカウントがなければ,アカウントを作成する.
アカウントがあれば,そのユーザでログインする.
晴れて, Googleアカウントと同じメールアドレスを持つユーザでログインした状態でダッシュボード(./dashbaord)が開く.

-Laravel
-

Copyright© ikuty.com , 2021 AllRights Reserved Powered by AFFINGER4.