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

PHP7とLaravel 5でFacebookアカウントでログインできるTODOアプリをつくる 3日目(Facebookログイン導入編)

作業の前に

Facebookログインを導入するにあたって、ここまでの作業では不足している設定がいくつかありますので、作業の前に環境を整えておきましょう。

まずは下記の2つのコマンドを実行してください。Composerコマンドを使用する際に必要になるPHPcURL拡張のインストールと、Apachemod_rewriteの有効化をしています。

$ sudo apt-get -y install php7.0-curl
$ sudo a2enmod rewrite

次に、Apacheの設定を少し変更します。これはmod_rewriteをLaravelのアプリケーションディレクトリーで使用できるようにするための設定です。

/etc/apache2/sites-enabled/000-default.confを編集し</VirtualHost>の前に設定を追加します

<VirtualHost *:80>

...省略

    <Directory /var/www/html>
        Options Indexes FollowSymLinks
        AllowOverride All
        Require all granted
    </Directory>
</VirtualHost>

最後に、Apacheを再起動したら、作業前の準備は完了です。

$ sudo service apache2 restart

Facebookログインのために必要なライブラリーの導入

Laravel 5でFacebookログインを実現するには、以下の2つのライブラリーがよく知られているようです。

github.com

github.com

今回はLaravel Socialiteを使ってFacebookログインを実現しましょう。

ライブラリーの導入には、composerコマンドを使用します。以下のコマンドを実行し、Socialiteを導入しましょう。

$ cd /var/www/todo
$ composer require "laravel/socialite:2.0.*"

ここから先は、ドキュメントにしたがって設定を進めていきます。まずはconfig/app.phpを編集し、providersLaravel\Socialite\SocialiteServiceProvider::classaliases'Socialite' => Laravel\Socialite\Facades\Socialite::classをそれぞれ追加しましょう。

この辺りは公式ドキュメントも参考にしてください。

...省略

    'providers' => [

...省略

        Laravel\Socialite\SocialiteServiceProvider::class,
    ],

...省略

    'aliases' => [

...省略

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

続いて、config/services.phpにも設定を追加します。公式ドキュメントではGitHubアカウントでの例になっていますが、今回はFacebokを使いたいので、設定のキーはFacebookのものになるように変えています。

...省略
    'facebook' => [
        'client_id' => env('FACEBOOK_CLIENT_ID'),
        'client_secret' => env('FACEBOOK_CLIENT_SECRET'),
        'redirect' => env('FACEBOOK_REDIRECT'),
    ],
];

もう少し作業が続きます。次はapp/Http/Controllers/Auth/AuthController.phpを編集しましょう。まずは、ライブラリを使用するため、以下の2行を追加します。

use Socialite;
use Auth;

次に、AuthControllerのメソッドとして、以下の2つを追加してください。

    public function redirectToProvider()
    {
        return Socialite::driver('facebook')->redirect();
    }

    public function handleProviderCallback()
    {
        $user = Socialite::driver('facebook')->user();
        dd($user);
    }

次はルーティングを変更します。app/Http/routes.phpを以下のように編集してください。

Route::group(['middleware' => ['web']], function () {
    Route::get('auth/facebook', 'Auth\AuthController@redirectToProvider');
    Route::get('auth/facebook/callback', 'Auth\AuthController@handleProviderCallback');
});

次の設定が最後の作業となります。.envファイルの末尾に、FacebookAPIを使うために必要なID、シークレットキーと、ログイン後のコールバックURLを追記します。

FACEBOOK_CLIENT_IDFACEBOOK_CLIENT_SECRETには、FacebookアプリのIDとシークレットキーを設定する必要があります。

Facebookアプリの登録方法について説明すると、ずいぶんと長くなってしまうので、この記事では割愛します。

FACEBOOK_CLIENT_ID=your-facebook-client-id
FACEBOOK_CLIENT_SECRET=your-facebook-client-secret
FACEBOOK_REDIRECT=http://192.168.33.10/auth/facebook/callback

このIDとシークレットキーの取り扱いには十分注意し、公開リポジトリなどにはこの情報を絶対にアップロードしないよう徹底してください。

動作確認

少し長い手順でしたが、これでFacebookアカウントでログインする準備ができました。最後に動作確認をしましょう。

http://192.168.33.10/auth/facebook

このURLにアクセスすると、Facebookの認証画面またはログイン画面が表示されたのちに、認証に成功すると以下の様な画面が表示されるかと思います。

f:id:ariarijp:20160116195644p:plain

この画面は、先ほど変更したAuthControllerhandleProviderCallbackメソッドFacebookから取得した情報を表示している画面となります。

この画面に表示されるトークンについても、ID、シークレットキーと同様、取り扱いに注意してください

次回以降、Facebookから取得したこれらの情報を使いながら、TODOの機能を実装していきます。

今回の内容をサーバーの設定まわりだけではありますが、Vagrantfileに反映しました。

アプリケーション一式も次回はリポジトリーに含めようかと思っています。

github.com