現在LaravelにてWebサイト作成しているのですが、twitterログインが必要となったので調べてみました。今回はLaravelでソーシャルログイン(twiiter・Facebook等SNSアカウント)を利用する方法を記載します。
（今回はtwiiterログインの実装を行います。）

前提
・サーバにLaravelのプロジェクトがアップ済み(※1)
・利用規約、プライバシーポリシーページが作成済み
・Twitter Developer account 申請済み(※2)

※1：まだサーバにLaravelプロジェクトアップしていない方はこちらをご参照にアップしてみてください（さくらレンタルサーバ利用してます）
※2：申請がまだの方は、こちらの記事を参考にアカウント作成をお願いします。

それでは始めます。

Twitter Developersよりアプリ作成する

まずはtwitterログイン利用のための認証コードを取得します。

Twiiter Developersにログインします。

ログインすると下記のような画面になるので

ユーザ名をクリックし、「Apps」をクリックします。

「Create an app」をクリックします。

すると、下記のようなapp作成フォームが表示されます。

下記フィールドが必要になりますので、それぞれ入力します。
（ちなみに当然ですが、全て英語での入力になります。）

App name (required)：アプリ名を記載します。
Application description：アプリの説明を記載します。
Website URL (required)：LaravelプロジェクトをアップしたURLを記載します。
Enable Sign in with Twitter：チェックを入れます。
Callback URLs：LaravelプロジェクトのコールバックURLを記載します。
Terms of Service URL：利用規約のURLを記載します。
Privacy policy URL：プライバシーポリシーのURLを記載します。
Tell us how this app will be used：このアプリの使い方を記載します。

全て記載したら「Create」ボタンをクリックします。

以上でアプリの作成が完了です。次にAPI Keysとアクセストークン情報を取得します。

API Keysとアクセストークン情報を取得

App details が表示されるので、「keys and tokens」をクリックしAccess token & access token secret の「Create」をクリックします。

これで、Access token & access token secretが作成されるので、こちらの情報をメモしておきます。

Permissionの設定

次にPermissionの設定を行います。

※こちらの設定を行わないと、twitterログインじにメールアドレスの取得ができなくなります。

Permissionタブをクリックし、「Edit」をクリックします。

「Additional permissions」にて、「Request email address from users」にチェックを入れ「Save」します。

※「Settings」タブのプライバシーポリシーと利用規約のURL欄が入力されていない場合、こちらのチェックボックスがオンにできないのでご注意ください。

以上でTwiiter Developersでの作業は終了です。次にSocialiteの設定作業を行います。

Socialiteの設定

今回Twitterログインをするにあたり、Socialiteというライブラリを利用します。

Laravelプロジェクトのディレクトリへ移動し、下記コマンド実行でインストールできます。

composer require laravel/socialite

次に 「config/app.php」 にprovidersとaliasの設定を行います。

config/app.phpを開き、下記のようにファイルに追記します。

'providers' => [ 
・
・
・
   Laravel\Socialite\SocialiteServiceProvider::class,
],
・
・
・

'aliases' => [
・
・
・
    'Socialite' => Laravel\Socialite\Facades\Socialite::class,
]

次に、config/services.php にTwitterのトークンの設定します。下記追記します。

    "twitter" => [
       "client_id" => env("TWITTER_CLIENT_ID"),
       "client_secret" => env("TWITTER_CLIENT_SECRET"),
       "redirect" => env("CALLBACK_URL"),        
   ],

次に、.envファイルにTwiiter Developersで取得したAPI keyとコールバックURLを記載します。

TWITTER_CLIENT_ID = TwitterのApi Key
TWITTER_CLIENT_SECRET = TwitterのAPI Secret Key
CALLBACK_URL = コールバックURL

以上で完了です。次にLaravelの設定をおこないます。

テーブル定義の修正

次にテーブル定義の修正を行います。LaravelはデフォルトでUsersテーブルのpasswordフィールドが必須になっていますが、こちらをnull許可するように変更します。
（twitterログインの場合、passwordが必須ではないためです。）

そのため、「database/migrations/日付_create_users_table.php」を下記のように修正します。

           $table->increments('id');
           $table->string('name');
           $table->string('email')->unique();
           $table->timestamp('email_verified_at')->nullable();
           $table->string('password')->nullable();
           $table->string('avatar')->nullable()->unique();
           $table->string('twitter_id')->nullable()->unique();
           $table->rememberToken();
           $table->timestamps();

※今回はついでにtwitterのidや画像を格納するフィールド「twitter_id」「avatar」を追加します。必要でない場合こちらの対応は不要です。

こちらでマイグレーション実行します。

php artisan migrate

Controllerの作成

それではLaravelでの設定を行なっていきます。

まずはControllerを作成します。今回は「OAuthLoginController.php」というファイルを「/app/Http/Controllers/Auth」ディレクトリ内に作成します。下記実行します。今回は下記のように記載します。

<?php
namespace App\Http\Controllers\Auth;
use App\Http\Controllers\Controller;
use Illuminate\Foundation\Auth\AuthenticatesUsers;
use Socialite;
use App\User;
use Auth;
use Illuminate\Support\Facades\Storage;
class OAuthLoginController extends Controller
{
   //ログインボタンからリンク
   public function socialLogin($social)
   {
       return Socialite::driver($social)->redirect();
   }
   //Callback処理
   public function handleProviderCallback($social)
   {
       // ユーザ属性を取得
       try {
           $userSocial = Socialite::driver($social)->user();
       } catch (Exception $e) {
           // OAuthによるユーザー情報取得失敗
           return redirect()->route('/')->withErrors('ユーザー情報の取得に失敗しました。');
       }
       //メールアドレスで登録状況を調べる
       $user = User::where(['email' => $userSocial->getEmail()])->first();
      
       //メールアドレス登録の有無で条件分岐
       if($user){
           //email登録がある場合の処理
           //twitter id　が変更されている場合、DBアップデード
           if($user->twitter_id  !== $userSocial->getNickname()){
               $user->twitter_id = $userSocial->getNickname();
               $user->save();
           }
           
           //ログインしてトップページにリダイレクト
           Auth::login($user);
           return redirect('/');
       }else{
           //メールアドレスがなければユーザ登録
           $newuser = new User;
           $newuser->name = $userSocial->getName();
           $newuser->email = $userSocial->getEmail();
           $newuser->twitter_id = $userSocial->getNickname();
           
           // 画像の取得
           $img = file_get_contents($userSocial->avatar_original);
           if ($img !== false) {
               $file_name = $userSocial->id . '_' . uniqid() . '.jpg';
               Storage::put('public/profile_images/' . $file_name, $img);
               $newuser->avatar = $file_name;
           }
           //ユーザ作成     
           $newuser->save();
           //ログインしてトップページにリダイレクト
           Auth::login($newuser);
           return redirect('/');
       }
       
   }
}

処理としては、ログインボタンからのリンク処理とCallback処理を行なっています。

ルーティングの設定

次にルーティングの設定を行います。

web.phpに先ほど作成したメソッドに対応したURLを定義します。下記追記します。

Route::get('/login/{social}', 'Auth\OAuthLoginController@socialLogin')->where('social', 'twitter');
Route::get('/login/{social}/callback', 'Auth\OAuthLoginController@handleProviderCallback')->where('social', 'twitter');

Viewの設定

次にviewの設定を行います。viewには、先ほど作成したログインリンクを貼るだけです。

twitterログインボタンを配置したいviewに、下記追記します。

<a href="{{ url('login/twitter')}}">twitterログイン</a>

これで↑のリンクをクリックすると下記の様な画面が表示され、

「連携アプリを認証」をクリックすることでログインできるようになります。

--- 🐤---

以上で対応完了です。お疲れ様でした。

※何か間違いや修正がある場合はコメントかtwtterのDMにてご連絡いただけますと嬉しいです！

課題

twitter等でメールアドレスを変えた場合、現在の仕様だと別のユーザとしてユーザが作成されてしまうので、こちらを解決する必要がある。

→　後ほど対応します！

参考にしたサイト

以下のサイトを参考にしました。ありがとうございました！

・twitter developerへの登録

・twitterログインの実装

・twitterのメールアドレスが取得できずに困っていた時に助けてもらった

・OAuthとは何か？ということがめちゃくちゃわかりやすかった