Multi AuthとSocial Loginを作ってみた。Social Login編

前回の続き

今回も簡潔に書いていきます。

今回実装したのはTwitterとGoogleです。

使い方

## 使い方

### 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

## 使い方

### 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による認証をサポートしています。

composer require laravel/socialite

1	composer require laravel/socialite

config/services.phpを下記追加

.envのアカウント情報にアクセスするようにします。

'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'),
],

'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追加

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

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ファイルの作成

php artisan make:model LinkedSocialAccount -m

1	php artisan make:model LinkedSocialAccount -m

App\LinkedSocialAccounts.php編集

プロバイダー名とプロバイダー固有のIDをfillableする。

Userモデルとリレーション

<?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);
    }
}

<?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編集

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();
});

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

php artisan migrate

1	php artisan migrate

app/User.php

LinkedSocialAccount.phpとリレーション

public function linkedSocialAccount()
{
    return $this->hasMany(LinkedSocialAccount::class);
}

public function linkedSocialAccount()

{

return $this->hasMany(LinkedSocialAccount::class);

}

Controller

SocialAccountController.php作成

php artisan make:controller Auth/SocialAccountController

1	php artisan make:controller Auth/SocialAccountController

app/Http/Controllers/Auth/SocialAccountController.php編集

redirectToProviderはOAuthプロバイダへユーザーをリダイレクトするルート

handleProviderCallbackは認証後にプロバイダーからのコールバックを受けるルート

<?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');
    }
}

<?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

app/Services/SocialAccountService.php作成

findOrCreate

LinkedSocialAccount_Tableからプロバイダー名＋IDを確認

ない場合

User_Table内にMailアドレスがあるか確認

ない場合

User_Tableにユーザ登録

LinkedSocialAccount_Tableにリレーション

<?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;

        }
    }
}

<?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編集

//追加
Route::get('login/{provider}', 'Auth\SocialAccountController@redirectToProvider');
Route::get('login/{provider}/callback', 'Auth\SocialAccountController@handleProviderCallback');

//追加

Route::get('login/{provider}', 'Auth\SocialAccountController@redirectToProvider');

Route::get('login/{provider}/callback', 'Auth\SocialAccountController@handleProviderCallback');

view

Social Loginボタンを挿入します。

bower install bootstrap-social

1	bower install bootstrap-social

resources/assets/sass/app.scssに追加

// 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;
}

// 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をコンパイル

今回使ってないモジュールもインストールされるが、気にせずデフォルトのままインストールとコンパイル

npm install

npm run dev

npm install

npm run dev

resources/views/auth/login.blade.php・register.blade.php

<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>

<div class="text-center login">Login</div>

</a>

</a>

</div>

</div>

このような形でSocial Buttonを作成

これでLaravel側の設定ができた。

あとはTwitterとGoogleのApiの取得と設定になる。

Twitter Api

Twitterアカウントを作成後

https://apps.twitter.comに移動

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の完了です。

お疲れ様でした。

エラーが出たりした際は一旦

php artisan migrate:fresh

1	php artisan migrate:fresh

で改善するかもしれません。

あとがき

個人的に初期の段階からLaravelのAuth関連が苦手意識が強く、なかなか踏み出せなかったので、今回ガッツリやってみました。

すごく勉強になったなぁと思います。特にオーバーライドって初めてｗ

まだまだだなぁって思いながらも、ちょこっとだけWebエンジニアになれた気がしてすごく満足しました。

おしまい。