RitoLabo

Laravel5.5のSocialite(ソシエリート)で手軽にSNSソーシャルログイン機能(OAuth認証)を実装する

  • 公開:
  • カテゴリ: PHP Laravel
  • タグ: Laravel,composer,artisan,5.5,5.4,5.3,Package,Socialite,Twitter,Facebook,Google+,SNS

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

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

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

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

尚、今回のデモンストレーションはLaravel5.5で行いますが、5.4と5.3でのみ同様の手順で実装できます。その他の環境は以下の通りです。

  • Linux CentOS 7.2
  • PHP 7.1
  • MySQL 5.7

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

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

Laravel Socialiteとは?

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

[公式]Laravel 5.5 Laravel Socialite

[GitHub]laravel/socialite

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

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

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

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認証で用いられるであろう以下3つのアカウントで実装していきます。

Twitter Application Management
https://apps.twitter.com/
Facebook for Developers
https://developers.facebook.com/quickstarts/
Google APIs Console
https://console.developers.google.com/apis

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

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('auth/twitter', 'OAuthLoginController@getAuth');
Route::get('auth/callback/twitter', 'OAuthLoginController@authCallback');
//Facebook
Route::get('auth/facebook', 'OAuthLoginController@getAuth');
Route::get('auth/callback/facebook', 'OAuthLoginController@authCallback');
//Google
Route::get('auth/google', 'OAuthLoginController@getAuth');
Route::get('auth/callback/google', 'OAuthLoginController@authCallback');

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

コントローラ

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

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

TwitterのOAuth認証ページ

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

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

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

コールバックの実装

次は、コールバック部分の実装です。
各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'<pre>'; print_r($user); echo'<pre>'; exit;

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

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

まとめ

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

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

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

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

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