LaravelでTwitter認証(ログイン)機能をサクッと作る

SHARE

僕が作ったTwitter連動型のサービス（大喜利屋）を作成したのですがその際にTwitter認証を作成したのでこの場で紹介させていただきます！

テストプロジェクトを作成し必要なパッケージをインストール！

今回はTwitter_Authという名前のプロジェクトでTwitter認証を作成していきたいと思います。

まずはcomposerでサクッとプロジェクトを作成

composer create-project --prefer-dist laravel/laravel Twitter_Auth

認証機能に必要なパッケージ(Socialite)をインストール

プロジェクトが作成できたらプロジェクトのディレクトリに移動してまたまたcomposerでTwitter認証に必要なパッケージ(Socialite)をインストールしていきます

cd Twitter_Auth //(プロジェクト名)
composer require laravel/socialite

Laravel自体の認証機能を作成

SocialiteがインストールできたらLaravel自体の認証機能をartisanコマンドで作成します。

php artisan make:auth

認証機能を作成できたらプロジェクトディレクトリの中のconfig/app.phpを編集してSocialiteを登録していきましょう！

app.phpを編集していく

config/app.phpの中のprovidersとaliasesの中身に下記のコードを加筆します

<?php

return [
    //省略...
    'providers'       => [
        //省略...

        Laravel\Socialite\SocialiteServiceProvider::class,

        //省略...
    ],
    //省略...
    'aliases'         => [
        //省略...

        'Socialite'    => Laravel\Socialite\Facades\Socialite::class,

        //省略...
    ],

];

その次にsocialiteの設定

config/services.phpを編集してTwitterの設定を加筆していきます。

<?php

return [
    //省略...
 
    'twitter'   => [
        'client_id'     => env('TWITTER_CLIENT_ID'),
        'client_secret' => env('TWITTER_CLIENT_SECRET'),
        'redirect'      => env('TWITTER_REDIRECT'),
    ],
];

次は.envファイルを編集していきます。

.envファイルにTwitterのトークンとリダイレクトURLをセット

//省略...
TWITTER_CLIENT_ID=(twitter-client-id)
TWITTER_CLIENT_SECRET=(twitter-client-secret)
TWITTER_REDIRECT=(twitter-redirect-url)

TWITTER_CLIENT_IDとTWITTER_CLIENT_SECRETにはTwitter Developer Platformのappページの下記画像の赤枠で囲まれた部分の値を記述する。

TWITTER_REDIRECTには下記画像の赤枠の部分に登録したURLを記入する

ここまできたら次にテーブルを作成していきましょう!

テーブルの作成

php artisan make:authで作成されたusersのマイグレーションファイル

database/migrations/2014_10_12_000000_create_users_table.php

を編集していきます。

public function up()
    {
            Schema::create('users', function (Blueprint $table) {
            //デフォルトで定義されているもの
            $table->increments('id');
            $table->string('name');
            $table->string('email')->unique()->nullable(); //変更
            $table->timestamp('email_verified_at')->nullable();
            $table->string('password')->nullable(); //変更
            $table->rememberToken();
            $table->timestamps();

            //Twitter用に追加
            $table->string('twitter_id')->unique()->nullable();
            $table->string('avatar')->nullable();
            $table->string('nickname')->nullable();

        });
    }

Twitter認証ではパスワードは使用しないですし、メールアドレスも取得できないので nullableを指定しておきます。

テーブルの設計ができたらDBに反映させます。

php artisan migrate

User.php(モデル)の編集

ユーザーモデルの$fillableを下記のように編集してデータを保存できるように設定します！

protected $fillable = [
        'name', 'email', 'password', 'nickname', 'twitter_id', 'avatar'
];

ここまできたらコントローラーで実際にログイン処理を書いていきましょう！

コントローラーにログイン処理を書く

まずはTwitterでのログイン機能を書くコントローラーを作成していきます。

今回はTwitterControllerという名前でControllerディレクトリの中のAuthディレクトリの中に作成します。

php artisan make:controller Auth/TwitterController

上記のコマンドを実行すると下記のディレクトリにTwitterController.phpが作成されます。

app/Http/Controllers/Auth/TwitterController.php

コントローラーが作成されたら実際に処理を書いていきましょう！(コピぺでもOK！)

<?php

namespace App\Http\Controllers\Auth;

use Illuminate\Http\Request;
use App\Http\Controllers\Controller;
use Auth;
use Socialite;
use App\User;

class TwitterController extends Controller
{
  protected $redirectPath = '/home';

  public function redirectToProvider(){
      return Socialite::driver('twitter')->redirect();
  }

  public function handleProviderCallback(){
      try {
          $user = Socialite::driver('twitter')->user();
      } catch (Exception $e) {
          return redirect('auth/twitter');
      }
      $authUser = $this->findOrCreateUser($user);
      Auth::login($authUser, true);
      return redirect()->route('home');
  }

  private function findOrCreateUser($twitterUser){
      $authUser = User::where('twitter_id', $twitterUser->id)->first();
      if ($authUser){
          return $authUser;
      }
      return User::create([
          'name' => $twitterUser->name,
          'nickname' => $twitterUser->nickname,
          'twitter_id' => $twitterUser->id,
          'avatar' => $twitterUser->avatar_original

      ]);
  }
}

これでログイン処理の機能が作成できました。

ルーティングを設定する

先ほど作成したコントローラーの処理にルートを通していきます。

//省略...
Route::get('/login/twitter', 'Auth\[email protected]')->name("twitter.login");
Route::get('/login/twitter/callback', 'Auth\[email protected]'); 

ログインビューをTwitterに対応させる

php artisan make:auth

で作成されたresources/views/auth/login.blade.phpの@section(‘content’)の中身をに下記のようにコードを編集します。

<div class="container">
  <div class="row justify-content-center">
    <div class="col-md-8">
      <div class="card">
        <div class="card-header">{{ __('Login') }}</div>
        
        <div class="card-body">
          <form method="POST" action="{{ route('login') }}">
            @csrf
            
            <div class="form-group row">
              <label for="email" class="col-md-4 col-form-label text-md-right">{{ __('E-Mail Address') }}</label>
              
              <div class="col-md-6">
                <input id="email" type="email" class="form-control{{ $errors->has('email') ? ' is-invalid' : '' }}" name="email" value="{{ old('email') }}" required autofocus>
                
                @if ($errors->has('email'))
                <span class="invalid-feedback" role="alert">
                  <strong>{{ $errors->first('email') }}</strong>
                </span>
                @endif
              </div>
            </div>
            
            <div class="form-group row">
              <label for="password" class="col-md-4 col-form-label text-md-right">{{ __('Password') }}</label>
              
              <div class="col-md-6">
                <input id="password" type="password" class="form-control{{ $errors->has('password') ? ' is-invalid' : '' }}" name="password" required>
                
                @if ($errors->has('password'))
                <span class="invalid-feedback" role="alert">
                  <strong>{{ $errors->first('password') }}</strong>
                </span>
                @endif
              </div>
            </div>
            
            <div class="form-group row">
              <div class="col-md-6 offset-md-4">
                <div class="form-check">
                  <input class="form-check-input" type="checkbox" name="remember" id="remember" {{ old('remember') ? 'checked' : '' }}>
                  
                  <label class="form-check-label" for="remember">
                    {{ __('Remember Me') }}
                  </label>
                </div>
              </div>
            </div>
            
            <div class="form-group row mb-0">
              <div class="col-md-8 offset-md-4">
                <button type="submit" class="btn btn-primary">
                  {{ __('Login') }}
                </button>
                <a href="{{ route("twitter.login") }}" class="btn btn-primary">Twitterでログイン</a>//追加
                @if (Route::has('password.request'))
                <a class="btn btn-link" href="{{ route('password.request') }}">
                  {{ __('Forgot Your Password?') }}
                </a>
                @endif
              </div>
            </div>
          </form>
        </div>
      </div>
    </div>
  </div>
</div>

あとがき

Socialiteを使用すれば簡単に外部サービスを使用した認証機能が作成できます！

この他にもFaceBookやGoogeといった主要サービスでもログイン機能を作成することができるので後日解説させていただきたいと思います！

目次へ戻る

コメントを残す

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

前の記事

インフラ基礎知識 ③ OS の基礎知識

次の記事

VirtualBoxとVagrantでローカル開発環境を最速で…