LaravelでSocialiteを使ってTwitterログインする方法：エラー対策も紹介

LaravelのSocialiteというライブラリを使えば、Twitterのログインも手軽にできます。設定とコードをすべてお見せします。

設定がうまく反映されないとエラーになることもあり、その時の対策も最後に紹介しています。

Laravelを使ってはじめてTwitter連携をするときに役立ててください。

実際にログイン機能を搭載したサンプルサイトは、こちらです。実際にTwitterでログインして、どんなふうになるのか試せます。

LaravelにTwitterアカウントでログインできるようにする：Twitter側の設定

まずはTwitterのdeveloper用のアカウントを作っておいてください。

こちらは数日かかることもあります。詳しい手順は別の記事をご覧ください。

本記事では、アカウントを開設した後の処理を説明します。

まずはTwitter側の設定です。

① Twitterのdeveloperアカウントにログインします。

②  Overviewのページで、【+Create App】をクリックします。

ページの下のほうにボタンがあります。

名前をつける画面があるので、アプリの名前をつけます。

その後、右下のNextボタンをクリック。これで新しいアプリができました。

次に設定を進めていきます。

③ 作成したアプリをひらき、Settingsの Authentication settingのEditボタンをクリック。

④ Enable 3-legged OAuth のバーを右側にし、入力できる状態にします。

その後、設定をいれていきます。

特に大事なのは、Callback URLsです。Twitterでは現在、ローカルホストはCallback URL として使えないとなっております。

Don’t use localhost as a callback URL
Instead of using localhost, please use a custom host locally or http(s)://127.0.0.1.

Twitterマニュアル：https://developer.twitter.com/ja/docs/basics/apps/guides/callback-urls

http(s)://127.0.0.1が使えるとのこと。そこで、開発環境ではCallback URLは次のように設定しておきます。

http://127.0.0.1:8000/login/twitter/callback

127.0.0.1

ほか、設定画面は次のようになります。

【設定画面例】

ユーザーからのメールアドレスも取得したい場合には、【Request email address from users】にチェックを入れ、Terms of service(利用規約)・Privacy policy(プライバシーポリシー)に関するページも登録しておく必要があります。

そうでない場合は、利用規約・プライバシーポリシーは不要です。

⑥ 保存後、keys and tokens タブをクリックします。

一番上の【Consumer Keys】の【Regenerate】 をクリック。

表示される２つのキーをコピーして、saveボタンを押します。

なおコピーしたキーは、このあとLaravelの.envファイルに貼り付けます。

以上でTwitter側の設定は終わりです。

LaravelにTwitterアカウントでログインできるようにする：Laravel側の設定

次にLaravel側の設定です。今回はLaravel8を使ってテストをしました。

新規プロジェクトを作成し、認証機能をつけた後からの手順を解説していきます。

インストールから認証機能搭載までの手順はこちらで解説しています。

なお、本記事ではすでに登録されているユーザーがTwitterでもログイン可能にする方法を解説しています。

もし最初の登録からtwitterで行う場合には、twitterからメール情報を取得してユーザーテーブルに登録する等の処理が必要になります。

① Socialiteをインストールする

まずは Socialite というライブラリをインストールします。

composer require laravel/socialite

config/app.phpにSocialiteに関する項目を追加します。

【app.php】

まず ‘providers’ => [ の項目に、下記を加えます。

Laravel\Socialite\SocialiteServiceProvider::class,

次に’aliases’=> [ の項目に、下記を加えます。

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

② 設定ファイルを準備

次に.envファイルにTwitterに関する設定を追加します。

TWITTER_CLIENT_IDとTWITTER_CLIENT_SECRET には、先ほどTwitterから取得したAPI key, API key secret情報をそれぞれいれておきます。

【.env】

さらに config/services.phpに、下記を加えます。これによって、.envの設定を読み込んでくれます。

【services.php】

<?php

return [
    
    'twitter' => [
        'client_id' => env('TWITTER_CLIENT_ID'),
        'client_secret' => env('TWITTER_CLIENT_SECRET'),
        'redirect' => env('TWITTER_CALLBACKURL'),
    ],

];

③ データベースの修正

今回はUserテーブルにtwitterカラムを追加し、そこにtwitterのidを登録するようにします。

またTwitterアカウントでのログインではパスワードが不要になるため、パスワードカラムをnullableに変更しておきます。

テーブルに変更を加えるため、まずはマイグレーションファイルを作成します。

php artisan make:migration add_twitter_column_to_users --table=users

次のようにいれておきます。

【マイグレーションファイル】

    public function up()
    {
        Schema::table('users', function (Blueprint $table) {
            $table->string('twitter')->after('id')->nullable();
            $table->string('password')->nullable()->change();
        });
    }

    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::table('users', function (Blueprint $table) {
            $table->dropColumn('twitter');
            $table->string('password')->nullable(false)->change();
        });
    }

ファイルを保存した後、php artisan migrate コマンドを実行します。

php artisan migrate

④ ルート設定の追加

ルート設定を追加します。

TwitterControllerはこのあと作成していきます。

【web.php】

use App\Http\Controllers\TwitterController;

// Twitterログイン
Route::get('/login/twitter', 'TwitterController@redirectToProvider')->name('twitter.login');
Route::get('/login/twitter/callback', 'TwitterController@handleProviderCallback');

⑤ コントローラーの追加

次にTwitterControllerを作成します。

php artisan make:controller TwitterController

作成したコントローラーを開きます。

次のようにいれておきます。

【TwitterController.php】

<?php

namespace App\Http\Controllers;

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

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

    public function handleProviderCallback() {
        try {
            $twitterUser=Socialite::with('twitter')->user();
        }catch (Exception $e) {
            return redirect('login/twitter');
        }

        $user=User::where('twitter', $twitterUser->id)->first();

        if($user) {
            $user->name = $twitterUser->name;
            $user->email = $twitterUser->email;
            $user->update();
        }else {
            $user=New User();
            $user->twitter = $twitterUser->id;
            $user->name = $twitterUser->name;
            $user->email = $twitterUser->email;
            $user->save();
        }

        Auth::login($user);
        return redirect()->to('/home');
    }
}

上記ではメールアドレスも登録する処理にしましたが、お好みで変更してください。

⑥ ビューファイルの作成

次にログイン画面にTwitterアカウントでのログインボタンを追加しておきます。

views/auth/login.blade.phpファイルを開き、お好きな場所に下記を追加します。

【login.blade.php】

<p class="mt-2">
 <a href="{{route('twitter.login')}}" class="btn btn-outline-primary">Twitterログイン</a>
</p>

以上で設定完了です。

⑦ 実験してみる

php artisan serve を使ってサーバーを立ち上げます。ブラウザにログイン画面を表示させてください。

ボタンを押すと、次のような認証画面になります。

【Authorize app】を押すとログインができます。

いや、うまくできなかった！！という場合には

Twitter連携、手軽にできるものの、連携部分を少し間違えるとエラーになったりします。

上記ではうまくいかなかった！と言う場合には、次を試してみてください。

Twitterの設定を変えたら、もう一度キーを発行しなおして。

Twitter側で設定を変えたら、keys and tokensを再発行しなおしてみてください。これをしないと、設定が反映されなかったりするようです。

なお再発行したときは、忘れずに.envの設定も変えておきましょう。

キャッシュクリア系コマンドを試してみて

.envの内容が反映されていない可能性もあります。Laravelでキャッシュクリア系コマンドを試してください。

php artisan config:clear

ほか、下記のページも参考にキャッシュをキレイにしてくださいね。

おわりに

実際のTwitterログイン機能は、会員制フォーラムサイトに搭載しているので、ご興味あればお試しください。サンプルサイトなので、ご登録後がきたりといったことは一切ありません。

なお、今回はSocialiteのおかげで手軽に、Twitterログイン機能を搭載できました。

とはいっても、Laravelのルート設定やコントローラーなどの使い方がある程度わかっていないと、難しい内容だったかと思います。

もし

「今回の記事で解説した内容が難しすぎる」

と思った方は、Laravelの使い方をいちから学べる学習サイト【Laravelの教科書】をご用意しているので、見てみてください。

ルート設定の方法、コントローラーへのコード書き方、データベースの作り方をひとつひとつ学んでいけます。学習しながら、今回サンプルで使った会員制フォーラムサイトを実際に作っていきます。

Laravelの教科書について詳しく知る