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

PHP
スポンサーリンク

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

 

image

 

スポンサーリンク

Socialiteをインストールする

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

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

Laravelでソーシャルログイン用のSocialiteをインストールしようとするとSocialiteServiceProvider not found
LaravelでFacebookやTwitter、Google+などのアカウントを使ってログインするソーシャルログインを実装しようしました。 Laravelには、すでに先人がSocialiteというプラグインを作ってくれているので、これを...

 

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

 

Social Buttons for Bootstrap
Social Sign-In Buttons made in pure CSS based on Bootstrap and Font Awesome!
Font Awesome
The internet's icon library + toolkit. Used by millions of designers, devs, & content creators. Open-source. Always free. Always awesome.

 

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

 

 

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

Facebook Callback appends '#_=_' to Return URL
Facebook callback has started appending #_=_ hash underscore to the Return URLDoes anyone know why? What is the solution?
google authentication callback url bug · Issue #535 · meanjs/mean
Hi, I get URL like localhost:3000/# when I use google authentication with passport. I fixed the problem using the same way which has been used to fix the Facebo...

 

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

 

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

 

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

 

まとめ

 

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

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

 

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

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

 

 

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

PHP
スポンサーリンク
スポンサーリンク
うらしたをフォローする
スポンサーリンク
urashita.com 浦下.com (ウラシタドットコム)

コメント

  1. […] […]

タイトルとURLをコピーしました