読者です 読者をやめる 読者になる 読者になる

tanaka's Programming Memo

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

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

Laravel PHP

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

情報源:GitHub - laravel/socialite

前提

  • 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 から取り出したユーザー情報が画面に表示されます。

テストが終了したら

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

その他のプロバイダー

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

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