Laravelでソーシャル認証(Twitter, Facebook, Google)を実装してみた

Laravelでソーシャルログインを実装してみました。

image

スポンサーリンク
スポンサーリンク

Socialiteをインストールする

まず、Laravelにソーシャル認証用のプラグインSocialiteをインストールします。

Socialiteをインストールする方法は、以下の記事にまとめました。

Laravelでソーシャルログイン用のSocialiteをインストールしようとするとSocialiteServiceProvider not found
LaravelでFacebookやTwitter、Google+などのアカウントを使ってログインするソーシャルログインを実装しようしました。...

Socialiteを使った実装方法については、以下の記事に実装例が書かれています。

Laravel Social Authentication

これは、GitHubを使った例ですが、TwitterでもFacebookでもGoogle+でも、ほとんど差はありません。

私は、Twitter、Facebook、Google+で実装してみました。

Twitter、Facebook、Googleで、クライアントIDと秘密鍵(シークレットキー)の取得

まず初めに、Twitter、Facebook、Googleの管理画面から、クライアントIDとシークレットキーを取得します。

アプリケーションによってクライアントIDやシークレットキーの呼び名は多少異なります。

Twitterの場合は、コンシューマーキーとコンシューマーシークレットと呼びますが、ほぼ同じ意味なので推測できるでしょう。

Twitterの場合は、 https://apps.twitter.com/ から「Create New App」を押して、アプリケーションを作成します。

アプリケーションの設定を行います。

コールバックのURLは、https://localhost/auth/login/callback/twitter のように指定します。

image

「Keys and Access Tokes」というタブから、Consumer Key (API Key)とConsumer Secret (API Secret)を取得します。

Facebookの場合は、https://developers.facebook.com/apps/ から「新しいアプリを追加」を押して、新しいアプリケーションを追加します。

アプリケーションの設定を行います。

コールバックのURLは、https://localhost/auth/login/callback/facebook のように指定します。

image

「アプリID」と「app secret」の値を取得します。

Googleの場合、https://console.developers.google.com/apis/library から、プロジェクトを作成します。

image

image

コールバックのURLは、https://localhost/auth/login/callback/google のように指定します。

「クライアントID」と「クライアントシークレット」を取得します。

また、必ず、Google+ APIを有効にしておきます。

これを有効にしておかないと「クライアントID」と「クライアントシークレット」を取得しても、正しくソーシャルログインできません。

エラーになってしまいます。

image

Laravelでソーシャル認証の実装

それでは、ソーシャルログインを実装していきましょう。

まず、.envに以下のように記述しておきます。

ちなみに、この例ではlocahostを使っていますが、Googleはlocalhostではテストできません。

Googleの場合、必ず、グローバルに解決できるURLである必要があります。

TwitterとFacebookはlocalhostでテスト出来ました。

次に、config/services.php に以下を追加しておきます。

次に、routes.php に以下を追加しておきます。

このルーティングがちゃんと機能しているかどうかは、以下のコマンドで確認しておきます。

念のために、キャッシュをクリアしておきます。

# php artisan route:cache

ルーティングの一覧を表示します。

# php artisan route:list

routes.php に追加したルーティングが表示されれば、OKです。

次に、Controllers\Auth\SocialController.php を実装します。

こんな感じでOKです。

Bootstrap用のソーシャルボタンとFont Awesome

UIとしては、ソーシャルボタンとFont Awesomeを使います。

image

https://lipis.github.io/bootstrap-social/

http://fontawesome.io/

views/auth/login.blade.php に以下を記述しておきます。

このように書いておくと、それらしいボタンが作成されます。

image

いざ、ソーシャルログイン

それでは、Twitter、Facebook、Googleを使ってログインしてみます。

初回ログイン時には、以下の記事に示したメッセージが表示されます。

Twitter, Facebook, Googleでアプリケーションの連携を解除する
Twitter, Facebook, Googleといったユーザーのアカウントを使って、他のWEBサイトにログインする、いわ...

それぞれ、ログインしてみました。

Twitterの場合、以下のように表示されます。

image

注意点として、Twitterではメールアドレスの取得は出来ません。

Twitterの中の人が以下のフォーラムで答えています。

How to get email from twitter user using OAuthTokens

The API won't return an email address to you. If you're interested in a user's email address, you'll have to ask the user for it within your own application as a completely distinct act.

Facebookの場合は以下のように表示されます。

image

Google+の場合は以下のように表示されます。

image

実際のプログラムでは以下のようにして、Id、Nickname、Name、Email、Avatarを取得します。

ログイン後のURLにFacebookでは「#_=_」、Google+では「#」がついてしまう

ログイン認証そのものは問題なくできて、ログインできるようになりました。

ただ、Twitterでは問題ないものの、Facebook認証のコールバックのURLには「#_=_」、Google+認証のコールバックのURLには「#」がついてしまいます。

こんな感じです。

Facebook認証でログイン後のURL

Google+で認証後のログイン後のURL

この件、いろいろと問題として指摘されているようです。

http://stackoverflow.com/questions/7131909/facebook-callback-appends-to-return-url

https://github.com/meanjs/mean/issues/535

バグなのか仕様なのかよくわかりませんが、JavaScriptで修正を試みることとします。

以下のコードを入れました。

なんかイマイチ納得できませんが、これでログイン後のURLに余分なものが付かなくなりました。

まとめ

ソーシャルログインが出来るとユーザーにとって、簡単にログイン出来るWEBサイトを作成することが出来ます。

「ユーザーがアカウント登録する」ことって結構な精神的な負担になるので、これらのログイン方法を用意すると多くのユーザーにログインしてもらいやすくなるでしょう。

LaravelはVersion 5になって飛躍的に普及し始めました。

日本語による解説書も出て来ましたね。

最後まで読んでいただきありがとうござました。
この記事が気に入っていただけたらシェアしてくれると嬉しいです。