【図解あり】LaravelにTwitterでログインする機能を実装する（Laravel8.x対応 ）

【事前準備】Twitter Developer PortalでCallbackURLを設定する

事前準備としてTwitter Developer Portalで新しいアプリケーションを追加します。

事前準備① - Twitter Developer Portalでアプリケーションを作成する

Twitter Developer Portalにアクセスして画像のようにCreate Appを選んでください。

Create Appがある場所はProects&Apps>Overviewです。

ここで選択した名前はTwitterでログインする際に出てくる画面に反映されています。

この名前はユニークなものなので世界中の誰かが使っているものは利用できません。自分のオリジナルの名前を付けてください。

この画面が出たらAPI key と　API secret keyを取得できています。

ここで注意点！

同じ画面の下のほうに「Setup your App」と書いてあってその下に「App settings」というボタンがあります。それを押してください。

すると以下のような画面になると思います。以下では実際のログイン画面における見え方を示すために矢印などを入れています。

続いてTwitterでログインできるようにするための設定を行います。

同じ画面の下部にAuthentication settingsというセクションがあり、その横の「Edit」ボタンを押下してください。

すると上記のような画面が出てきます。一番上の「Enable 3-legged OAuth」のチェックボックスをオンにして「Callback URLs」にhttps://あなたのドメイン/auto/twitter/callbackを設定してください。これは後の処理に使うのでできるだけこのURLに合わせてください。

その後require(必須）となっている項目を埋めてください。処理には関係ないので自由に埋めてくださいね。そしてSaveボタンを押してください。

次にタブを「Keys and tokens」に切り替えてください。そして「Regenerate」ボタンを押して[API key & secret]を再生成します。

「Yes, regenerate」

ここで出てきたものは後程使うので保存しておいてください。

これにて事前準備が完了です！

ここからの流れとしては、Twitterによる認証終了後、指定したCallbackURLに対して認証が終わった情報が送信されます。

そのURLをroutes.phpで設定しておきControllerで認証処理を行う流れになります。

Socialiteをインストールする

Laravelで簡単にTwitterログイン機能を利用したい場合,Socialiteを利用します。

導入は簡単です。次のコマンドを打ってください。

composer require laravel/socialite

インストール出来たら次はTwitter APIから取得したAPIキーの設定をします。

TwitterApiキーの設定

認証情報はconfig/services.php設定ファイルで指定します。

認証情報は.envに記載し，それを利用するようにします。

"twitter" => [
    "client_id" => env("TWITTER_AUTH_CLIENT_ID"),
    "client_secret" => env("TWITTER_AUTH_CLIENT_SECRET"),
    "redirect" => env("CALLBACK_URL"),
],

TWITTER_AUTH_CLIENT_ID=<あなたのAPIキー(API key)>
TWITTER_AUTH_CLIENT_SECRET=<あなたのシークレット(secret)>
CALLBACK_URL=<あなたの指定したコールバックURL>

Twitterログインのためのコントローラーを作成する

<?php
 namespace App\Http\Controllers;
 use Illuminate\Http\Request;
 use Laravel\Socialite\Facades\Socialite;
use Illuminate\Support\Facades\Log;

 class TwitterLoginController extends Controller
 {
     /**
       * Twitterの認証ページヘユーザーをリダイレクト
       *
       * @return \Illuminate\Http\Response
       */      
       public function redirectToProvider(){
          return Socialite::driver('twitter')->redirect();
       }   
      /**
       * Twitterからユーザー情報を取得(Callback先)
       *
       * @return \Illuminate\Http\Response
      */    
      public function handleProviderCallback()
      {
          $user = Socialite::driver('twitter')->user();
          Log::info('Twitterから取得しました。', ['user' => $user]);
          // $user->token;
      }
 }

ルートを設定

use App\Http\Controllers\TwitterLoginController;
Route::get('auth/login/twitter', [TwitterLoginController::class, 'redirectToProvider']);
Route::get('auth/twitter/callback',[TwitterLoginController::class, 'handleProviderCallback']);

アクセスして確かめてみよう

今回はhttps://あなたのドメイン/auth/login/twitterにアクセスされるとTwitter認証画面にリダイレクトされその結果がhttps://あなたのドメイン/auth/twitter/callbackに帰ってきます。

返ってきた値をTwitterLoginControllerのhandleProviderCallbackメソッドにて受け取り，ログに出力するようにしてあるのでそこまで確認してみましょう。

ログファイルにユーザー情報が書き出されていたら成功です。

UsersテーブルにTwitter認証情報を使って登録する

取得されたTwitter認証情報でUser情報を更新してみます。

今回はUserテーブルにTwitterでログインしたことを示すフラグ(twitter)と、TwitterID(nickname)を一緒に登録したいと思います。

Usersテーブルにカラムを追加する

上述したTwitterでログインしたことを示すフラグ(twitter)と、TwitterID(nickname)を格納するカラムをUsersテーブルに追加します。これはLaravelのmigration機能を利用します。

ターミナルを開いて以下のコマンドを入力してください。

php artisan make:migration add_authonfo_to_users_table --table=users

このコマンドにより/database/migrationsフォルダにファイルが作成されます。その中身を次のように記載してください。

public function up()
{
    Schema::table('users', function (Blueprint $table) {
        $table->boolean('twitter')->default(false);
        $table->text('nickname')->nullable();
    });
}

ファイルの編集が終わったらmigrateを実行し、DBに反映させます。

php artisan migrate

TwitterLoginControllerを更新する

DBの更新が完了したら、認証成功後にユーザーテーブルを作成できるようにコントローラーを変更します。useと書いている部分が書き忘れがちなのでよく見て編集してください。

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use Laravel\Socialite\Facades\Socialite;
use Illuminate\Support\Facades\Log;
use Illuminate\Support\Str;
use App\Models\User;
use Illuminate\Support\Facades\Auth;

class TwitterLoginController extends Controller
{
    /**
      * Twitterの認証ページヘユーザーをリダイレクト
      *
      * @return \Illuminate\Http\Response
      */
     public function redirectToProvider()
     {
         return Socialite::driver('twitter')->redirect();
     }
     /**
      * Twitterからユーザー情報を取得(Callback先)
      *
      * @return \Illuminate\Http\Response
      */    
     public function handleProviderCallback()
     {
        try {
            $twitterUser = Socialite::driver('twitter')->user();
        } catch (Exception $e) {
            return redirect('auth/twitter');
        }
         if(User::where('email', $twitterUser->getEmail())->exists()){
            //ツイッターで作成されたユーザーならそのままパスする
            $user = User::where('email', $twitterUser->getEmail())->first();
            if(!$user->twitter){
                dd("すでに同じメールアドレスが登録されています。");
            }
         }else{
            $user = new User();
            //ユーザーに必要な情報
            $user->name = $twitterUser->getName();
            $user->email = $twitterUser->getEmail();
            $user->password = md5(Str::uuid());
            $user->profile_photo_path = $twitterUser->getAvatar();
            $user->twitter = true;
            $user->nickname = $twitterUser->getNickname();
            $user->save();
            
         }
         Log::info('Twitterから取得しました。', ['user' => $twitterUser]);
         Auth::login($user);
         return redirect('/dashboard');
     }
}

これで認証後にUsersテーブルを作成できるようになりました。

このソースではすでにUsersテーブルに同じメールアドレスがある場合、それが自分自身（Twitterですでに登録したもの）かどうか調べます。これが自分自身でない場合、すでにTwitterでログインしたのではなく通常通りにサインインしたユーザー情報があることになるのでこの場合は処理しないようにしています。