LaravelにTwitter、Facebook、Googleログイン用のパッケージsocialiteをインストールする（その1）

WEB制作 webシステム, web制作 No Comments

 

RailsライクなPHPフレームワークlaravel。
ここ数年でPHP業界標準になりそうな勢いがあります。
弊社ではlaravelの実行速度を考慮して「サーバー要件PHP7以降」の案件（最近の新規案件）に使用していく方針を取っております。

で、このlaravelでSNSログインを実装する方法をここに記載しておきます。

● まずLaravelのインストールをおさらいします

1. composerから laravelをインストール

composer require "laravel/installer"

2. laravelのパスを通す

.bash_profile に以下の行を追加（YOUR_LARAVEL_DIRECTORYのところは適宜書き換えてください。）

export PATH="/YOUR_LARAVEL_DIRECTORY/vendor/bin:$PATH"

3. laravelコマンドでアプリケーションを作成

次の例では test というアプリケーション作成します

laravel new test

4. データベース設定を .env ファイルに記述する

.env ファイルにデータベースの接続設定を記述します
.envファイルは権限 0600とし、 .gitignore 内に .env が記述されて、git対象外となっていることも合わせて確認しておきます。

LaravelからMysqlへ接続する場合の設定（ .envファイル ）

DB_CONNECTION=mysql
DB_HOST=【接続するデータベースホスト名】
DB_PORT=【接続するデータベースポート】
DB_DATABASE=【接続するデータベース名】
DB_USERNAME=【接続するユーザー名】
DB_PASSWORD=【接続するパスワード】

SQLiteで接続する場合は次のようにします。
まず touch database/database.sqlite　を実行して database.sqlite を作成します。
次に .env ファイルを次のように設定します。

Laravelからsqliteへ接続する場合の設定（ .envファイル ）

DB_CONNECTION=sqlite
# DB_HOST=dummy
# DB_PORT=dummy
# DB_DATABASE=dummy
# DB_USERNAME=dummy
# DB_PASSWORD=dummy

5. artisan コマンドで auth ページを生成

artisan コマンドから以下を実行すると ログインページが自動生成されます。

php artisan make:auth
php artisan migrate

エラーがでなければ
http://あなたのサーバ名/login
http://あなたのサーバ名/register
で（ログイン・登録）ページが表示されているはずです。

 

● Laravelのソーシャルログインパッケージパッケージsocialiteをインストールします

 

6. laravel/socialiteをインストールする

composer require laravel/socialite

config/app.php に 以下を追加します

'providers' => [
// ↓ この行を追加
Laravel\Socialite\SocialiteServiceProvider::class,
],

'aliases' => [
// ↓ この行を追加
'Socialite' => Laravel\Socialite\Facades\Socialite::class,
],

 

7. Twitter Developersから Twitterアプリを登録します

https://dev.twitter.com/index
から「My Apps」-「Create New App」をクリックしてTwitterアプリを登録します

Name: アプリ名
Description: アプリの説明
Website: http://あなたのサーバ名/
Callback URL: http://あなたのサーバ名/auth/twitter/callback

登録後に表示される画面の「Key and Access Tokens」タブから
Consumer Key (API Key) と Consumer Secret (API Secret) をコピーして .env に書き込みます

TWITTER_CLIENT_ID=【consumerkey】
TWITTER_CLIENT_SECRET=【consumersecret】
TWITTER_CALLBACK_URL=http://あなたのサーバ名/auth/twitter/callback

config/services.php に以下を追加

'twitter'=>[
'client_id'=>env('TWITTER_CLIENT_ID'),
'client_secret'=>env('TWITTER_CLIENT_SECRET'),
'redirect'=>env('TWITTER_CALLBACK_URL'),
]

 

8. Google OAuth を設定します

https://console.developers.google.com/project
から

  1. 「認証情報」「作成」
  2. Google+ API を有効にする

で クライアントID クライアントシークレット が表示されるのでコピーして .env に書き込みます

.envに以下を追加

GOOGLE_CLIENT_ID=【consumerkey】
GOOGLE_CLIENT_SECRET=【consumersecret】
GOOGLE_CALLBACK_URL=http://あなたのサーバ名/auth/google /callback

config/services.php に以下を追加

'google'=>[
'client_id' =>env('GOOGLE_CLIENT_ID'),
'client_secret' =>env('GOOGLE_CLIENT_SECRET'),
'redirect' =>env('GOOGLE_CALLBACK_URL'),
]

 

9. facebook for developersから Facebookアプリを登録します

https://developers.facebook.com/
からFacebookアプリを登録します

登録後に表示される画面から
Consumer Key (API Key) と Consumer Secret (API Secret) をコピーして .env に書き込みます

FACEBOOK_CLIENT_ID=【consumerkey】
FACEBOOK_CLIENT_SECRET=【consumersecret】
FACEBOOK_CALLBACK_URL=http://あなたのサーバ名/auth/facebook/callback

config/services.php に以下を追加

'facebook'=>[
'client_id'=>env('FACEBOOK_CLIENT_ID'),
'client_secret'=>env('FACEBOOK_CLIENT_SECRET'),
'redirect'=>env('FACEBOOK_CALLBACK_URL'),
]

 

10. laravelのルーティングを設定
routes/web.php に以下を追加

// Auth Twitter
Route::get('auth/twitter', 'Auth\AuthController@TwitterRedirect');
Route::get('auth/twitter/callback', 'Auth\AuthController@TwitterCallback');
Route::get('auth/twitter/logout', 'Auth\AuthController@getLogout');

// Auth Google
Route::get('auth/google', 'Auth\AuthController@GoogleRedirect');
Route::get('auth/google/callback', 'Auth\AuthController@GoogleCallback');
Route::get('auth/google/logout', 'Auth\AuthController@getLogout');

// Auth Facebook
Route::get('auth/facebook', 'Auth\AuthController@FacebookRedirect');
Route::get('auth/facebook/callback', 'Auth\AuthController@FacebookCallback');
Route::get('auth/facebook/logout', 'Auth\AuthController@getLogout');

 

11. コントローラーの設定

app/Http/Controllers/Auth/AuthController.php を以下の内容で保存する

<!--?php namespace App\Http\Controllers\Auth; use Socialite; use App\Http\Controllers\Controller; class AuthController extends Controller { public function TwitterRedirect() { return Socialite::driver('twitter')->redirect();<br ?--> }
public function TwitterCallback()
{
//ユーザー情報を取得
$user = Socialite::driver('twitter')->user();
dd($user);
}
public function GoogleRedirect()
{
return Socialite::driver('google')->redirect();
}
public function GoogleCallback()
{
//ユーザー情報を取得
$user = Socialite::driver('google')->user();
dd($user);
}
public function FacebookRedirect()
{
return Socialite::driver('facebook')->redirect();
}

public function FacebookCallback()
{
//ユーザー情報を取得
$user = Socialite::driver('facebook')->user();
dd($user);
}
}

 

12. URLを叩いてログインをテストする

これで準備が整いましたので以下それぞれのurlからログイン出来ることを確認します。

http://あなたのサーバ名/auth/facebook/
http://あなたのサーバ名/auth/twitter/
http://あなたのサーバ名/auth/google/

ログインが完了するとユーザーの情報が表示されるようになります。
（ここから先どうなるかは実装次第です）

LaravelにTwitter、Facebook、Googleログイン用のパッケージsocialiteをインストールする（その1）
Tagged on:                     

コメントを残す

メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です