PHP7とLaravel 5でFacebookアカウントでログインできるTODOアプリをつくる 3日目(Facebookログイン導入編)
作業の前に
Facebookログインを導入するにあたって、ここまでの作業では不足している設定がいくつかありますので、作業の前に環境を整えておきましょう。
まずは下記の2つのコマンドを実行してください。Composerコマンドを使用する際に必要になるPHPのcURL拡張のインストールと、Apacheのmod_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つのライブラリーがよく知られているようです。
今回はLaravel Socialiteを使ってFacebookログインを実現しましょう。
ライブラリーの導入には、composer
コマンドを使用します。以下のコマンドを実行し、Socialiteを導入しましょう。
$ cd /var/www/todo $ composer require "laravel/socialite:2.0.*"
ここから先は、ドキュメントにしたがって設定を進めていきます。まずはconfig/app.php
を編集し、providers
にLaravel\Socialite\SocialiteServiceProvider::class
、aliases
に'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
ファイルの末尾に、FacebookのAPIを使うために必要なID、シークレットキーと、ログイン後のコールバックURLを追記します。
FACEBOOK_CLIENT_ID
とFACEBOOK_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の認証画面またはログイン画面が表示されたのちに、認証に成功すると以下の様な画面が表示されるかと思います。
この画面は、先ほど変更したAuthController
のhandleProviderCallback
メソッドでFacebookから取得した情報を表示している画面となります。
この画面に表示されるトークンについても、ID、シークレットキーと同様、取り扱いに注意してください
次回以降、Facebookから取得したこれらの情報を使いながら、TODOの機能を実装していきます。
今回の内容をサーバーの設定まわりだけではありますが、Vagrantfileに反映しました。
アプリケーション一式も次回はリポジトリーに含めようかと思っています。