2016-10-12

Laravelの公式パッケージに TwitterやGitHubなどで認証を行える Socialite があります。Twitter にログインして、ユーザー情報(ユーザーID、ユーザー名、アバターなど)を表示してみます。

前提

macOS Sierra
PHP5.6以降
MySQL 5.7.11
node、Laravel、Composerはインストール済み

プロジェクトを準備

以下の手順で、プロジェクトを作成します。

ターミナルを起動して、プロジェクトを作成したいフォルダーに移動する
環境を更新

composer global update
npm update -g npm
npm update -g

以下を実行して、Laravelプロジェクトを作成し、プロジェクトフォルダーに移動して、サーバーを起動する

laravel new laravel-socialite-test
cd laravel-socialite-test
php artisan serve

以上で準備完了です。Webブラウザで http://localhost:8000 にアクセスして、Laravelと表示されれば成功です。

Twitterにアプリを登録

試しにTwitterのアカウントを利用してみます。それをやるにはTwitterに連携させるアプリを登録する必要があります。以下、登録手順です。

Twitterにログインする
APIを登録するには、携帯の情報が必要なので、登録していない場合は以下の手順で登録する
- プロフィールから設定を選択
- 左のメニューから[モバイル]を選択
- 携帯の番号を入力して[続ける]をクリック
- 携帯に届いた認証コードを入力する
Twitter Application Management を開く
[Create New App]を押す
以下を入力
- Name にアプリ名を入力。SocialiteTest など
- Description にアプリの内容を入力。Laravelの練習　など
- Website に、アプリのトップページのURLなどを入力
  - ローカルホストは登録できなさそうなので、HPを持っていればそのURLを。なければGitHub Pagesなどで作成してください
- Callback URL は、テスト用に http://localhost:8000/auth/twitter/callback としておく
- Developer Agreementを確認したら[Yes, I have read and agree・・・]にチェックを入れる
- [Create your Twitter Application]を押す

以上で、登録情報が表示されます。[Keys and Access Tokens]タブに必要な情報が表示されますので、選択してページをそのまま開いておいてください。

Socialiteを組み込む

Socialiteの読み込み

ターミナルで以下を実行して Socialite を読み込みます。

composer require laravel/socialite

Laravelに設定を加える

次にLaravelに設定をします。

config/app.php を開く
'providers' の定義に、以下を追加

        // Laravel Socialite
        Laravel\Socialite\SocialiteServiceProvider::class,

'aliases' の定義に、以下を追加

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

app.php を上書き保存
config/services.php を開く
returnする配列に、 facebook, twitter, linkedin, google, github, bitbucket というキーを定義して、必要な設定を定義する。Twitter を利用する場合は以下の通り

    'twitter' => [
        'client_id' => '登録情報の[Consumer Key (API Key)]の右の文字列をここに貼り付ける',
        'client_secret' => '登録情報の[Consumer Secret (API Secret)]の右の文字列をここに貼り付ける',
        'redirect' => 'http://localhost:8000/auth/twitter/callback',
    ],

コントローラーの作成

OAuthプロバイダーには2つのルートが必要です。一つ目はOAuthを提供するページにリダイレクトするルート、二つ目は認証が完了した時にコールバックで呼ばれるルートです。Socialite ファサードを利用して、認証した情報にアクセスができます。

ターミナルで以下を実行して、認証のためのコントローラーを作成する

php artisan make:controller Auth/AuthController

app/Http/Auth/Controllers/AuthController.php を開く
以下のように修正する

<?php

namespace App\Http\Controllers\Auth;

use Illuminate\Http\Request;

use Socialite;
use App\Http\Requests;
use App\Http\Controllers\Controller;

class AuthController extends Controller
{
    /**
     * ユーザーをTwitterの認証ページにリダイレクトする
     *
     * @return Response
     */
    public function redirectToProvider()
    {
        return Socialite::driver('twitter')->redirect();
    }

    /**
     * Twitterからユーザー情報を取得する
     *
     * @return Response
     */
    public function handleProviderCallback()
    {
        $user = Socialite::driver('twitter')->user();

        $response =
            "id: ".$user->id
            ."<br/>Nickname: ".$user->nickname
            ."<br/>name: ".$user->name
            ."<br/>Email: ".$user->email
            ."<br/>Avater: <img src='".$user->avatar."'>"

            . "<br/><br/>";

        // OAuth Two Providers
        $response .= print_r($user, true);

        return $response;
    }
}

上記のコントローラーをルートに追加します。

routes/web.php を開く
以下のルートを追加する

Route::get('auth/twitter', 'Auth\AuthController@redirectToProvider');
Route::get('auth/twitter/callback', 'Auth\AuthController@handleProviderCallback');

上書き保存をしたら、app.php を書き換えたので、サービスを起動し直します。

サービスを動かしていたターミナルで [control]+[C]で停止
php artisan serve でサービスを再起動

http://localhost:8000/auth/twitter にアクセスします。ここまで間違えがなければ Twitter の認証ページが開きます。[連携アプリを認証]を押すと認証が完了して、 http://localhost:8000/auth/twitter/callback にリダイレクトされます。このルートで AuthController.php の handleProviderCallback メソッドが呼ばれて、 Twitter から取り出したユーザー情報が画面に表示されます。

テストが終了したら

テストで作成したアプリが不要になったら、以下の手順で削除してください。

Twitter にログインしておく
Twitter Application Management を開く
アプリを選択
一番下の [Delete Application] を押して、 [Delete] を選択

その他のプロバイダー

facebook, twitter, linkedin, google, github, bitbucket のサービスについては、基本的には同様の方法でアクセスできると思います。

上記以外のサービスを使いたい場合は、以下から探してください。

Socialite Providers

tanaka's Programming Memo

プログラミングについてのメモ。

Laravel(5.3) SocialiteでTwitterのOAuthを試す

目次

前提