1. Home
  2. PHP
  3. Laravel
  4. Laravel Socialite 3.x で手軽にSNSソーシャルログイン機能（OAuth認証）を実装する

Laravel Socialite 3.x で手軽にSNSソーシャルログイン機能（OAuth認証）を実装する

  • 公開日
  • 更新日
  • カテゴリ：Laravel
  • タグ：Laravel,Socialite,OAuth
Laravel Socialite 3.x で手軽にSNSソーシャルログイン機能（OAuth認証）を実装する

CMS や掲示板などでログイン機能を実装する際に、最近ではソーシャルログイン機能（OAuth認証）と言って、Twitter や facebook などの SNS のアカウントを利用してログインを行う流れが主流になっています。

通常のログイン機能の場合だと、メールアドレスを登録して、そこへ認証メールが来て…といちいち手順も多く、離脱してしまう傾向にある中、ソーシャルログイン機能であれば、ユーザがボタン１つでログイン（ユーザ登録も然り）を実現でき、気軽にその WEB アプリケーションを利用できるようになり、離脱も減り、エンゲージメントも高まります。

また、ユーザはいつも使っている SNS のアカウントでログインしますので、そもそも「パスワードを忘れにくい」というのも、長く使ってもらえる要因になるでしょう。

という事で今回は、Laravel の Socialite パッケージで、手軽に SNS ソーシャルログイン機能（OAuth認証）を実装してみたいと思います。

尚、今回のデモンストレーションは Laravel 5.5 で行います。その他の環境は以下の通りです。

  • Linux CentOS 7.2
  • PHP 7.1
  • MySQL 5.7

composer と artisan コマンドが叩ける環境であれば、この環境でなくても OK です。
また、laravel のルートディレクトリを「laravel/」とします。

Contents

  1. Laravel Socialite とは？
  2. Socialite のインストール
  3. 設定ファイルへの登録
  4. 各 SNS アプリ情報の追加
  5. OAuth認証処理の記述
    1. ルーティング
    2. コントローラ

Laravel Socialite とは？

「ララベル ソーシャライト」と読みます。 Socialite自体は完全サードパーティのパッケージですが、Laravel が公式でアナウンスしているパッケージです。

[GitHub]laravel/socialite

Socialite パッケージを導入すると、簡単に OAuth認証を実装する事ができます。

尚、Socialite が対応している SNS は以下になります。

  • Facebook
  • Twitter
  • LinkedIn
  • Google+
  • GitHub
  • Bitbucket

尚、本記事で導入している Socialite は 3.x になるので注意してください。（4.x とは互換性がありません）

Socialite のインストール

まずは、Laravel Socialite をインストールします。 laravel ルートディレクトリへ移動して、以下の composer コマンドを叩きます。

# laravel ルートディレクトリへ移動
cd /path/to/laravel

# composer コマンドで Socialite をインストール
composer require laravel/socialite

# 実行結果
[demo@localhost laravel]# composer require laravel/socialite
Using version ^3.0 for laravel/socialite
./composer.json has been updated
Loading composer repositories with package information
Updating dependencies (including require-dev)
Package operations: 6 installs, 0 updates, 0 removals
- Installing guzzlehttp/promises (v1.3.1): Loading from cache
- Installing psr/http-message (1.0.1): Loading from cache
- Installing guzzlehttp/psr7 (1.4.2): Loading from cache
- Installing guzzlehttp/guzzle (6.3.0): Loading from cache
- Installing league/oauth1-client (1.7.0): Downloading (100%)
- Installing laravel/socialite (v3.0.9): Downloading (100%)
Writing lock file
Generating optimized autoload files
> Illuminate\Foundation\ComposerScripts::postAutoloadDump
> @php artisan package:discover
Discovered Package: fideloper/proxy
Discovered Package: laravel/tinker
Discovered Package: laravel/socialite
Package manifest generated successfully.

インストールが完了したら、laravel/composer.json を開いて確認してみます。

"require": {
    "php": ">=7.0.0",
    "doctrine/dbal": "^2.6",
    "fideloper/proxy": "~3.3",
    "laravel/framework": "5.5.*",
    "laravel/socialite": "^3.0",  // ← ココ
    "laravel/tinker": "~1.0"
},

Socialite がインストールされた事が確認できました。

設定ファイルへの登録

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

laravel/config/app.php を開いて、「providers 」に以下を追記（一番最後とかで OK）します。

'providers' => [
 
  /**
   * Socialite
   */
  Laravel\Socialite\SocialiteServiceProvider::class,

],

次に、エイリアスを登録します、同じ app.php の「aliases 」に以下を追記します。

'aliases' => [

  'Socialite' => Laravel\Socialite\Facades\Socialite::class,

],

各 SNS アプリ情報の追加

OAuth認証を実装する際にはもちろん、各 SNS の認証アプリを作成しておく必要があります。

認証アプリというのは、各 SNS のデベロッパーツールなどに登録して、OAuth サービスをつかえるようにする、いわゆる開発者の認証サービスのためのアカウントみたいなものです。（ネイティブアプリの事ではありません）

そこで発行される API-KEY などがここで必要になるので、まだ取得していない場合は、先に進む前に取得しましょう。

ここでは、最も多く OAuth認証で用いられるであろう以下３つのアカウントで実装していきます。

アカウントやその他情報が取得できたら、それらの情報を設定していきます。

laravel/config/services.php を開いて、追記します。

<?php

return [

    /*
    |--------------------------------------------------------------------------
    | Third Party Services
    |--------------------------------------------------------------------------
    |
    | This file is for storing the credentials for third party services such
    | as Stripe, Mailgun, SparkPost and others. This file provides a sane
    | default location for this type of information, allowing packages
    | to have a conventional place to find your various credentials.
    |
    */

    'mailgun' => [
        'domain' => env('MAILGUN_DOMAIN'),
        'secret' => env('MAILGUN_SECRET'),
    ],

    'ses' => [
        'key' => env('SES_KEY'),
        'secret' => env('SES_SECRET'),
        'region' => 'us-east-1',
    ],

    'sparkpost' => [
        'secret' => env('SPARKPOST_SECRET'),
    ],

    'stripe' => [
        'model' => App\User::class,
        'key' => env('STRIPE_KEY'),
        'secret' => env('STRIPE_SECRET'),
    ],

  /**
   * socialite Settings
   */
    'twitter' => [
      'client_id'     => env('TWITTER_API_KEY'),
      'client_secret' => env('TWITTER_API_SECRET'),
      'redirect'      => env('TWITTER_CALLBACKURL'),
    ],

    'facebook' => [
      'client_id'     => env('FACEBOOK_API_ID'),
      'client_secret' => env('FACEBOOK_API_SECRET'),
      'redirect'      => env('FACEBOOK_CALLBACKURL'),
    ],

    'google' => [
      'client_id'     => env('GOOGLEPLUS_API_ID'),
      'client_secret' => env('GOOGLEPLUS_API_SECRET'),
      'redirect'      => env('GOOGLEPLUS_CALLBACKURL'),
    ],
];

上記の設定では直接ソースコードに認証アプリ情報を記載せず、env ファイルでの管理にしていますので、続いて laravel/.env ファイルに情報を記述します。

####################################
# Social Settings
####################################
# Twitter
TWITTER_API_KEY=YOURKEY
TWITTER_API_SECRET=YOURSECRET
TWITTER_CALLBACKURL=https://www.yourdomain.com/oauth/callback/twitter

# Facebook
FACEBOOK_API_ID=YOURKEY
FACEBOOK_API_SECRET=YOURSECRET
FACEBOOK_CALLBACKURL=https://www.yourdomain.com/oauth/callback/facebook

# Google Plus
GOOGLEPLUS_API_ID=YOURKEY
GOOGLEPLUS_API_SECRET=YOURSECRET
GOOGLEPLUS_CALLBACKURL=https://www.yourdomain.com/oauth/callback/google

これで初期設定は完了です。

OAuth認証処理の記述

これからはいよいよ、OAuth認証の処理を記述いていきます。

ルーティング

まずはルーティングを行います。今回は、Twitter ・ facebook ・ Google+のソーシャルログイン機能を付与しますので、laravel/routes/web.php を開いて、以下のように記述します。

//Twitter
Route::get('oauth/twitter', 'OAuthLoginController@getAuth');
Route::get('oauth/callback/twitter', 'OAuthLoginController@authCallback');
//Facebook
Route::get('oauth/facebook', 'OAuthLoginController@getAuth');
Route::get('oauth/callback/facebook', 'OAuthLoginController@authCallback');
//Google
Route::get('oauth/google', 'OAuthLoginController@getAuth');
Route::get('oauth/callback/google', 'OAuthLoginController@authCallback');

各 SNS 毎に、認証用とコールバック用の計２つずつのルーティングを記述しています。 このルーティングのポイントは、認証用とコールバック用でどれも同じコントローラとメソッドを指定している点です。

コントローラ

続いて、コントローラを作成し、記述していきます。

artisan コマンドでコントローラを生成します。

# laravel ルートディレクトリへ移動
cd /path/to/laravel

# artisan コマンドで OAuthLoginController を生成
php artisan make:controller OAuthLoginController

# 実行結果
[demo@localhost laravel]# php artisan make:controller OAuthLoginController
Controller created successfully.

リクエストの実装

ここから OAuth認証の実装を行っていきます。 生成したコントローラを開き、まずはリクエスト部分を記述します。

リクエスト部分というのは、ルーターで設定した OAuth認証の URL にアクセスされた時に、各 SNS の OAuth認証ページへ送る部分になります。

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use Socialite;

class OAuthLoginController extends Controller
{
  /**
   * OAuth認証 リクエスト
   * @return mixed
   */
  public function getAuth() {
    $social = basename(parse_url($this->getUrl(), PHP_URL_PATH));
    return Socialite::driver($social)->redirect();
  }

  private function getUrl() {
    return (empty($_SERVER["HTTPS"]) ? "http://" : "https://") . $_SERVER["HTTP_HOST"] . $_SERVER["REQUEST_URI"];
  }
}

記述した部分を説明していきます。

use Socialite;

まずは、Socialite クラスを use します。エイリアスに登録してあるので、短い記述で済んでいます。

public function getAuth() {
  $social = basename(parse_url($this->getUrl(), PHP_URL_PATH));
  return Socialite::driver($social)->redirect();
}

getAuth() メソッドを定義しています。
ここでは URL を解析して、SNS 名を取得。それを Socialite クラスの driver() メソッドに渡しどの SNS の認証であるかをセットしています。そして、redirect() メソッドで SNS の OAuth認証画面へリダイレクトさせている。という流れになります。

private function getUrl() {
  return (empty($_SERVER["HTTPS"]) ? "http://" : "https://") . $_SERVER["HTTP_HOST"] . $_SERVER["REQUEST_URI"];
}

getUrl() メソッドを定義しています。現在の URL を取得する処理になりますが、getAuth() メソッドの中に「 $this->getUrl() 」という記述があり、ここで使用しています。

また、このメソッドについてはデモンストレーションという事もありわかりやすく private メソッドとして定義しましたが、helper関数として登録し使うとコントローラの中がすっきりします。

リクエスト部分は以上です。試しにルーティングで設定した twitter 用の URL でアクセスしてみます。
http://www.XXXX.net/oauth/twitter

しっかり OAuth認証ページへリダイレクトされました。

この記述のポイントは、コントローラにこの記述だけを行っておけば、あとは使いたい SNS の分ルーティングを行えば、記述が１つで済むという事です。

なんとなくイメージが沸かない場合は、ルーティングの設定を見返してみましょう。納得できるはずです。

コールバックの実装

次は、コールバック部分の実装です。
各 SNS の OAuth認証画面へリダイレクトできましたが、そこで認証（ログイン）が行われると、ログイン情報と共にこちらへ戻ってくるので、それを処理する部分になります。

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use Socialite;

class OAuthLoginController extends Controller
{
  /**
   * OAuth認証 リクエスト
   * @return mixed
   */
  public function getAuth() {
    $social = basename(parse_url($this->getUrl(), PHP_URL_PATH));
    return Socialite::driver($social)->redirect();
  }

  private function getUrl() {
    return (empty($_SERVER["HTTPS"]) ? "http://" : "https://") . $_SERVER["HTTP_HOST"] . $_SERVER["REQUEST_URI"];
  }

  /**
   * OAuth認証　コールバック
   */
  public function authCallback() {
    $social = basename(parse_url($this->getUrl(), PHP_URL_PATH));

    // ユーザ属性を取得
    $user = Socialite::driver($social)->user();

    // デバッグ（デモンストレーション用）
    echo'<pre>'; print_r($user); echo'<pre>'; exit;
  }
}

コールバック部分である authCallback() メソッドの記述を説明します。

$social = basename(parse_url($this->getUrl(), PHP_URL_PATH));

getAuth() メソッドの時と同じく、URL を解析して、SNS 名を取得しています。

// ユーザ属性を取得
$user = Socialite::driver($social)->user();

取得した SNS 名を Socialite クラスの driver() メソッドに渡し、user() メソッドでユーザ情報を取得しています。

// デバッグ（デモンストレーション用）
echo''; print_r($user); echo''; exit;

これは今回のデモンストレーション用です。この記述で取得したユーザ情報を画面に出力していますので、一度どんな情報を取得できたのか確認してみてください。

尚、きちんとしたソーシャルログイン機能（OAuth認証）の流れでは、この部分で取得したユーザ情報をデータベースへ格納したり照合したりして、ユーザ判別を行います。

まとめ

今回の作業はこれで完了になります。

コールバックで取得したユーザ情報をデータベースに問い合わせ、存在していなければ新たに登録し、存在していれば既存ユーザとしてログイン後のページへリダイレクトさせる事で、いわゆるソーシャルログイン機能が実現します。

Laravel Socialite は簡単にソーシャルログイン機能を実装できるとても便利なパッケージです。

ただし一つだけ気を付けたいのが、このパッケージはあくまでもログイン認証の部分だけを提供しており、OAuth認証を介してのユーザ投稿などを実装したい場合は各 SNS の SDK を使う必要があります。

とはいえ、ログイン機能のみでよければ手軽に導入できる便利なパッケージなので、是非試してみてください。

Author

rito

  • Backend Engineer
  • Tokyo, Japan
  • PHP 5 技術者認定上級試験　認定者
  • 統計検定 3 級