Multi AuthとSocial Loginを作ってみた。Social Login編
前回の続き
今回も簡潔に書いていきます。
今回実装したのはTwitterとGoogleです。
使い方
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
## 使い方 ### Download git clone https://github.com/Lara-Bell/Multi-Auth_Social-Login.git multi_auth cd multi_auth ### Install composer install cp .env.example .env php artisan key:generate php artisan migrate ### NPM Install npm install bower install bootstrap-social npm run dev ## Social Login ### .env Edit TWITTER_CLIENT_ID= TWITTER_CLIENT_SECRET= TWITTER_URL_CALLBACK=http://YOUR_DOMAIN/login/twitter/callback GOOGLE_CLIENT_ID= GOOGLE_CLIENT_SECRET= GOOGLE_URL_CALLBACK=http://YOUR_DOMAIN/login/google/callback |
Laravel Socialite インストール
ドキュメントどおりに使っていきます。
Laravel SocialiteはFacebook、Twitter、LinkedIn、Google、GitHub、Bitbucketによる認証をサポートしています。
1 |
composer require laravel/socialite |
config/services.phpを下記追加
.envのアカウント情報にアクセスするようにします。
1 2 3 4 5 6 7 8 9 10 11 |
'twitter' => [ 'client_id' => env('TWITTER_CLIENT_ID'), 'client_secret' => env('TWITTER_CLIENT_SECRET'), 'redirect' => env('TWITTER_URL_CALLBACK'), ], 'google' => [ 'client_id' => env('GOOGLE_CLIENT_ID'), 'client_secret' => env('GOOGLE_CLIENT_SECRET'), 'redirect' => env('GOOGLE_URL_CALLBACK'), ], |
.env追加
1 2 3 4 5 6 7 |
TWITTER_CLIENT_ID= TWITTER_CLIENT_SECRET= TWITTER_URL_CALLBACK=http://YOUR_DOMAIN/login/twitter/callback GOOGLE_CLIENT_ID= GOOGLE_CLIENT_SECRET= GOOGLE_URL_CALLBACK=http://YOUR_DOMAIN/login/google/callback |
Model
LinkedSocialAccounts.phpとMigrationファイルの作成
1 |
php artisan make:model LinkedSocialAccount -m |
App\LinkedSocialAccounts.php編集
プロバイダー名とプロバイダー固有のIDをfillableする。
Userモデルとリレーション
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<?php namespace App; use Illuminate\Database\Eloquent\Model; class LinkedSocialAccount extends Model { protected $fillable = [ 'provider_name', 'provider_id' ]; public function user() { return $this->belongsTo(User::class); } } |
database/migrations/create_linked_social_accounts_table.php編集
1 2 3 4 5 6 7 8 |
Schema::create('linked_social_accounts', function (Blueprint $table) { $table->increments('id'); $table->integer('user_id'); $table->string('provider_name')->nullable(); $table->string('provider_id')->unique()->nullable(); $table->timestamps(); $table->softDeletes(); }); |
Migrate
1 |
php artisan migrate |
app/User.php
LinkedSocialAccount.phpとリレーション
1 2 3 4 |
public function linkedSocialAccount() { return $this->hasMany(LinkedSocialAccount::class); } |
Controller
SocialAccountController.php作成
1 |
php artisan make:controller Auth/SocialAccountController |
app/Http/Controllers/Auth/SocialAccountController.php編集
redirectToProviderはOAuthプロバイダへユーザーをリダイレクトするルート
handleProviderCallbackは認証後にプロバイダーからのコールバックを受けるルート
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 |
<?php namespace App\Http\Controllers\Auth; use Illuminate\Http\Request; use App\Http\Controllers\Controller; use App\Services\SocialAccountService; //追加 use Laravel\Socialite\Facades\Socialite; //追加 class SocialAccountController extends Controller { //追加 /** * Redirect the user to the GitHub authentication page. * * @return Response */ public function redirectToProvider($provider) { return Socialite::driver($provider)->redirect(); } /** * Obtain the user information * * @return Response */ public function handleProviderCallback(SocialAccountService $socialAccountService, $provider) { try{ $user = Socialite::driver($provider)->user(); } // ERROR catch (\Exception $e){ return redirect('/login'); } $authUser = $socialAccountService->findOrCreate( $user, $provider ); auth()->login($authUser, true); return redirect('/home'); } } |
Services
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 |
<?php namespace App\Services; use App\User; use Laravel\Socialite\Contracts\User as ProviderUser; use App\LinkedSocialAccount; class SocialAccountService { public function findOrCreate(ProviderUser $providerUser, $provider) { $account = LinkedSocialAccount::where('provider_name', $provider) ->where('provider_id', $providerUser->getId()) ->first(); if ($account) { return $account->user; } else { $user = User::where('email', $providerUser->getEmail())->first(); if (! $user) { $user = User::create([ 'email' => $providerUser->getEmail(), 'name' => $providerUser->getName(), ]); } $user->linkedSocialAccount()->create([ 'provider_id' => $providerUser->getId(), 'provider_name' => $provider, ]); return $user; } } } |
route
route/web.php編集
1 2 3 |
//追加 Route::get('login/{provider}', 'Auth\SocialAccountController@redirectToProvider'); Route::get('login/{provider}/callback', 'Auth\SocialAccountController@handleProviderCallback'); |
view
Social Loginボタンを挿入します。
1 |
bower install bootstrap-social |
resources/assets/sass/app.scssに追加
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
// FontAwesome @import "./bower_components/font-awesome/scss/font-awesome.scss"; // Bootstrap-Social @import "./bower_components/bootstrap-social/bootstrap-social.scss"; .register,.login{ color: #666; font-size: 34px; font-weight: bold; padding: 15px; text-align: center; text-transform: uppercase; } .divider{ background: #ddd; height: 2px; display: block; position: relative; width: 80%; margin: 30px auto; } .divider span{ width: 30px; height: 20px; background: #fff; position: absolute; left: 50%; margin-left: -10px; top: -12px; text-align: center; color: #999; } .m-5{ margin: 5px; } |
Sassをコンパイル
今回使ってないモジュールもインストールされるが、気にせずデフォルトのままインストールとコンパイル
1 2 3 |
npm install npm run dev |
resources/views/auth/login.blade.php・register.blade.php
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<div class="text-center login">Login</div> <form class="form-horizontal" method="POST" action="{{ route('login') }}"> <div class="form-group"> <div class="text-center"> <a href="/login/twitter" class="btn btn-social btn-twitter m-5"> <span class="fa fa-twitter"></span> Login with Twitter </a> <a href="/login/google" class="btn btn-social btn-google m-5"> <span class="fa fa-google"></span> Login with Google </a> </div> </div> <div class="divider"> <span>or</span> </div> |
このような形でSocial Buttonを作成
これでLaravel側の設定ができた。
あとはTwitterとGoogleのApiの取得と設定になる。
Twitter Api
Twitterアカウントを作成後
Create New AppでApiを取得
必須項目を当てはめてAPI_KEYとAPI_SECRETを取得
Callback URLをhttp://YOUR_DOMAIN/login/twitter/callbackに設定をし、.envに設定をする。
Google+ Api
Gmailアカウントを作成後
https://console.developers.google.comに移動
左上のプロジェクト選択で選択か新規作成をする。
サイドバー、ライブラリからGoogle+ API選択後『有効にする』
承認済みのリダイレクト URIの欄を
http://YOUR_DOMAIN/login/google/callbackに設定をし、.envにAPI_KEY作成
これでSocial Loginの完了です。
お疲れ様でした。
エラーが出たりした際は一旦
1 |
php artisan migrate:fresh |
で改善するかもしれません。
あとがき
個人的に初期の段階からLaravelのAuth関連が苦手意識が強く、なかなか踏み出せなかったので、今回ガッツリやってみました。
すごく勉強になったなぁと思います。特にオーバーライドって初めてw
まだまだだなぁって思いながらも、ちょこっとだけWebエンジニアになれた気がしてすごく満足しました。
おしまい。
コメントを残す