RitoLabo

Laravel Socialite 4.x でソーシャルログイン(OAuth認証)を行う

  • 公開:
  • カテゴリ: PHP Laravel
  • タグ: Laravel,Socialite,OAuth

Laravel には Socialite という、ソーシャルログインを実現するためのパッケージがあります。

今回は Socialite 4.x を利用して SNS のアカウントを使ったソーシャルログイン(OAuth認証)を実装してみます。

アジェンダ
  1. 開発環境
  2. Laravel Socialite
  3. インストール
  4. 設定情報の追加
  5. Service Provider 登録
  6. Event Listener 登録
  7. ソーシャルログインの実装
  8. 動作確認
  9. コールバックでユーザー情報を取得する

開発環境

今回の開発環境は以下の通りです。

  • CentOS 8
  • PHP 7.4
  • Laravel 7
  • Socialite 4.x

Socialite のバージョンに関して、本記事では4系を扱います。3系と互換性が無いので、3系の場合はこちらの記事を参考にしてください。

また、本記事執筆時で最新の Laravel を使います。これ未満のバージョンの動作確認は行っていません。

Laravel Socialite

Laravel Socialite(ソーシャライト) は、ソーシャルログイン(OAuth認証)のインターフェースを提供するパッケージです。これを利用する事で、ソーシャルログインを簡単に実装する事ができます。

Laravel Socialite
https://github.com/laravel/socialite

Google / Twitter / GitHub / Facebook など、代表的な SNS やサービスなどは一応は網羅されていて、Socialite で導入できます。

他にも対応している SNS やサービスが沢山あるので、詳細は以下を確認してください。(Instagram とか YouTube とか LINE とかまである。Slack とかもいけるみたい)

Socialite Providers
https://socialiteproviders.netlify.app/

Socialite 4.x を使うためには以下がシステム要件となっています。

  • PHP >= 7.1.3

要件としては PHP のバージョンだけですが、Laravel のバージョンも 5.6 以上には上げておく事を推奨します。

(PHP 7.1.3 以上が必要なのは 5.6 からなので個人的な推奨ラインとして。もちろん最新版が理想です。)

インストール

Socialite をインストールします。Laravel のルートディレクトリで以下の composer コマンドを実行します。

# socialite install
composer require laravel/socialite

今回は Twitter アカウントでのソーシャルログインを実装しますが、4系ではアダプタの提供がサービスごとに別々になったみたいなので、Twitter のアダプタもインストールします。

# socialite twitter provider install
composer require socialiteproviders/twitter

設定情報の追加

予め作成した SNS などの APP 情報設定ファイルに追加します。

config/services.php
'twitter' => [
'client_id' => env('TWITTER_KEY'),
'client_secret' => env('TWITTER_SECRET'),
'redirect' => env('TWITTER_REDIRECT_URI'),
]

env 経由にしているので、.env に key や secret を記述します。

.env
TWITTER_KEY=xxxxxxxxxx
TWITTER_SECRET=xxxxxxxxxx
TWITTER_REDIRECT_URI=http://yourdomain.com/login/twitter/callback

Service Provider 登録

サービスプロバイダを登録します。

config/app.php
'providers' => [
.
.
.

\SocialiteProviders\Manager\ServiceProvider::class, // 追加
],

Event Listener 登録

イベントリスナーを登録します。

app/Providers/EventServiceProvider.php
// 追加
use SocialiteProviders\Manager\SocialiteWasCalled;


protected $listen = [
Registered::class => [
SendEmailVerificationNotification::class,
],
// 追加
SocialiteWasCalled::class => [
//TwitterExtendSocialite::class,
'SocialiteProviders\\Twitter\\TwitterExtendSocialite@handle',
],
];

ソーシャルログインの実装

初期設定は完了したので、あとはルーティングやコントローラを作成して、OAuth認証を実装していきます。

この辺からのファイル名やパスは公式リファレンスに沿うので、適宜好きな名前やパスにしてください。

コントローラを作成します。以下の artisan コマンドを実行します。

php artisan make:controller Auth/LoginController

コントローラを定義します。

app/Http/Controllers/Auth/LoginController.php
<?php

declare(strict_type=1);

namespace App\Http\Controllers\Auth;

use App\Http\Controllers\Controller;
use Laravel\Socialite\Facades\Socialite;

class LoginController extends Controller
{
public function redirectToProvider()
{
return Socialite::driver('twitter')->redirect();
}

public function handleProviderCallback()
{
$user = Socialite::driver('twitter')->user();
}
}
  • redirectToProvider() では、SNS の OAuth認証画面へリダイレクトしています。
  • handleProviderCallback() では、OAuth認証後に SNS から戻ってきた時の処理(コールバック)を定義しています。ここでは、ユーザー情報を取得しています。

基本的にはこれだけです。簡単ですね。

今回は twitter だけですが、別の SNS やサービスの場合も、基本的にはこれと同じで、その分追加(もしくは共通化)すれば実現できると思います。

最後にルーティングを定義します。

routes/web.php
Route::get('login/twitter', 'Auth\LoginController@redirectToProvider');
Route::get('login/twitter/callback', 'Auth\LoginController@handleProviderCallback');

Twitter でのソーシャルログインを行うためにアクセスしてきた場合のルーティング(上部)と、OAuth認証後に SNS から戻ってきた時のルーティング(下部)を定義しています。

動作確認

実際にブラウザからアクセスして確認してみます。
http://your-domain/login/twitter

Twitter の OAuth認証画面にリダイレクトされ、以下の画面が表示されました。

Twitter OAuth 認証画面

「連携アプリを認証」を押下すろと、ソーシャルログインが行われ、自分のサイトへ戻ってきます。

Twitter ソーシャルログイン コールバック

ここで、ユーザー情報なども一緒に渡ってくるので、あとはそれらを記録したり表示すれば、一連の流れは完了です。

コールバックでユーザー情報を取得する

最後に、ソーシャルログイン後のコールバックでユーザーインスタンスの取得後、ユーザー情報などを取得できるのでメモ程度に雑多に残します。

// コールバックでユーザーインスタンスを取得
$user = Socialite::driver('twitter')->user();


$user->getId(); // その SNS で一意の ID
// 123456789

$user->getNickname(); // twitter でいうところの @xxxx
// rito328

$user->getName(); // 名前
// rito

$user->getEmail(); // メールアドレス
// samole@example.com

$user->getAvatar(); // アイコンやアバターの画像 URL
// http://pbs.twimg.com/profile_images/1085152018702905344/jBBrHWeZ_normal.jpg

$user->accessTokenResponseBody;
// => Array
//(
// [oauth_token] => xxxxx-xxxxx
// [oauth_token_secret] => xxxxxxxxxx
// [user_id] => xxxxxxxxxx
// [screen_name] => xxxxx
//)

$user->getXXX() は全プロバイダ共通なので、どのソーシャルログインでも一定値は取れると思います。

メールアドレスだけ、サービス、もしくは個人の設定、もしくは サービスで作成する APP の権限範囲によっては取得できない(空で返ってくる)とかはあるかもしれません。

$user->accessTokenResponseBody は、OAuth2 なのか OAuth1 なのかによって変わりそう。

まとめ

Laravel Socialite の4系は記述がよりシンプルになったなと感じました。対応している SNS などのサービスも多いので、Laravel でソーシャルログインを実装するのであれば使わない手は無いなと思います。

ただ、Socialite 自体よりも、最近はソーシャルログインさせるための SNS の APP の作成が大変だなと思いました。(なかなか厳しくなってて気軽に作れない。理由書かされたりとか。)

Laravel でソーシャルログインを実装するのであれば Socialite を活用して安全に実現していきたいですね。

[Github] サンプルコード