Laravel5.7 sociliteを作ってソーシャルログイン(twitterやfacebookのアカウントでログイン)

Laravel5.7 sociliteを作ってソーシャルログイン(twitterやfacebookのアカウントでログイン)

Laravel5.7でソーシャルログインを実装しました。

ソーシャルログイン用のパッケージをインストール

# composer require laravel/socialite

config/app.phpを編集。

‘locale’ => ‘ja’,

config/services.phpに追記。(今回googleは使いません。)

‘facebook’ => [
‘client_id’ => env(‘FACEBOOK_CLIENT_ID’),
‘client_secret’ => env(‘FACEBOOK_CLIENT_SECRET’),
‘redirect’ => env(‘CALLBACK_URL_FACEBOOK’),
],
‘google’ => [
‘client_id’ => env(‘GOOGLE_CLIENT_ID’),
‘client_secret’ => env(‘GOOGLE_CLIENT_SECRET’),
‘redirect’ => env(‘CALLBACK_URL_GOOGLE’),
],
‘twitter’ => [
‘client_id’ => env(‘TWITTER_CLIENT_ID’),
‘client_secret’ => env(‘TWITTER_CLIENT_SECRET’),
‘redirect’ => env(‘CALLBACK_URL_TWITTER’),
],

.envにKEYを記述。

TWITTER_CLIENT_ID=????????
TWITTER_CLIENT_SECRET=????????
CALLBACK_URL_TWITTER=https://ドメイン/auth/login/callback/twitter

FACEBOOK_CLIENT_ID=????????
FACEBOOK_CLIENT_SECRET=????????
CALLBACK_URL_FACEBOOK=https://ドメイン/auth/login/callback/facebook

ログイン画面にソーシャルボタンを追加

    <link href="{{ asset('css/app.css') }}" rel="stylesheet">
    <link href="{{ asset('css/styles.css') }}" rel="stylesheet">
    <link rel="stylesheet" href="{{ secure_asset('/css/bootstrap.min.css') }}">
    <link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">

    <script src="{{ asset('js/app.js') }}"></script>
    <script src="{{ secure_asset('/js/jquery-3.1.1.min.js') }}"></script>

routes/web.phpにルーティングを記述

//Twitter
Route::get(‘auth/login/twitter’, ‘Auth\SocialController@getTwitterAuth’);
Route::get(‘auth/login/callback/twitter’, ‘Auth\SocialController@getTwitterAuthCallback’);
//Facebook
Route::get(‘auth/login/facebook’, ‘Auth\SocialController@getFacebookAuth’);
Route::get(‘auth/login/callback/facebook’, ‘Auth\SocialController@getFacebookAuthCallback’);

app/Http/Controllers/Auth/SocialController.phpを新規作成

php artisan make:controller Auth/SocialController
<?php
namespace App\Http\Controllers\Auth;

use Illuminate\Http\Request;
use App\Http\Controllers\Controller;
use Socialite;
use App\User;
use Auth;
use Illuminate\Foundation\Auth\AuthenticatesUsers;
use Illuminate\Contracts\Auth\Authenticatable;

class SocialController extends Controller
{
    // twitterにリダイレクトして、許可をもらう
    public function getTwitterAuth() {
        return Socialite::driver('twitter')->redirect();
    }

    // 許可OKなら、ここに戻ってきてuser情報を取得する
    public function getTwitterAuthCallback() {
        try {
            $user = Socialite::driver('twitter')->user();
        } catch (Exception $e) {
            return redirect('auth/login/twitter');
        }

        // ソーシャルIDでログインする
        $authUser = $this->findOrCreateTwitterUser($user);
        Auth::login($authUser, true);

        return redirect()->route('home');
    }

    // twitterユーザIDでUsersテーブルを検索、存在しなかったらInsertする
    private function findOrCreateTwitterUser($twitterUser)
    {
        // 既に登録済みなら、レコード情報を使う
        $authUser = User::where('twitter_id', $twitterUser->id)->first();
        if ($authUser){
            return $authUser;
        }

        // 未登録なら登録した後、そのレコード情報を使う
        return User::create([
            'name' => $twitterUser->nickname, // @abc、表示名は使わない
            'twitter_id' => $twitterUser->id,
            'twitter_name' => $twitterUser->nickname, // @abc
            'avatar' => $twitterUser->avatar_original
        ]);
    }

    // facebookにリダイレクトして、許可をもらう
    public function getFacebookAuth() {
        return Socialite::driver('facebook')->redirect();
    }

    // 許可OKなら、ここに戻ってきてuser情報を取得する
    public function getFacebookAuthCallback() {
        try {
            $user = Socialite::driver('facebook')->user();
        } catch (Exception $e) {
            return redirect('auth/login/facebook');
        }

        // ソーシャルIDでログインする
        $authUser = $this->findOrCreateFacebookUser($user);
        Auth::login($authUser, true);

        return redirect()->route('home');
    }

    // facebookユーザIDでUsersテーブルを検索、存在しなかったらInsertする
    private function findOrCreateFacebookUser($facebookUser)
    {
        // 既に登録済みなら、レコード情報を使う
        $authUser = User::where('facebook_id', $facebookUser->id)->first();
        if ($authUser){
            return $authUser;
        }

        // 未登録なら登録した後、そのレコード情報を使う
        return User::create([
            'name' => $facebookUser->name, // @abc、表示名は使わない
            'facebook_id' => $facebookUser->id,
            'facebook_name' => $facebookUser->name, // @abc
            'avatar' => $facebookUser->avatar_original
        ]);
    }

}

このままだとMySQLに登録されないので、登録処理を入れる

app/User.php

// MassAssignment(INSERT/UPDATEで入力できるカラムを指定。$fillable=ホワイトリスト、$guarded=ブラックリスト)
//  protected $fillable= array('name', 'email', 'password');
protected $guarded = array('id');

ソーシャルログインのために、emailやpasswordはnullableにしておく

database/migrations/xxxxx_create_users_table.php

Schema::create('users', function (Blueprint $table) {
    $table->increments('id');
    $table->string('name')->comment('表示名');
    $table->string('email')->nullable()->comment('email');
    $table->string('password')->nullable()->comment('ログインパスワード');

    $table->string('avatar')->nullable()->comment('twitterアイコンのURL');
    $table->string('twitter_id')->unique()->nullable()->comment('twitterの内部ID');
    $table->string('twitter_name')->nullable()->comment('twitterの@名前、変更出来ない方');
    $table->string('facebook_id')->unique()->nullable()->comment('facebookの内部ID');
    $table->string('facebook_name')->nullable()->comment('facebookの名前、本名?');

    $table->timestamp('email_verified_at')->nullable();
    $table->rememberToken();
    $table->timestamps();
});

画面周りを作る

<a class="btn btn-block btn-social btn-twitter"  href="auth/login/twitter">
    <span class="fa fa-twitter"></span> Sign in with Twitter
</a>
<a class="btn btn-block btn-social btn-facebook" href="auth/login/facebook">
    <span class="fa fa-facebook"></span> Sign in with Facebook
</a>

resources/views/home.phpに追加(取得した名前とアイコンを表示)

<div>
    <h4>{{ Auth::user()->name }} </h4>
    <img src="{{ Auth::user()->avatar }}" height="64" width="64" />
</div>

Laravel

Posted by paisen