Twitterでログインしよう。Laravel Socialiteによる認証。

こんにちは油そばです。
今回は掲示板アプリにTwitterによるログイン機能を実装してみようと思います。

まず、TwitterにAPIの申請をしなければなりません。。ここが割と大変だったり。。いろんな人がブログ等で紹介しているのでここでは省こうと思います。

実装の説明からいきます！

https://readouble.com/laravel/6.x/ja/socialite.html

こちらがドキュメント。

https://socialiteproviders.netlify.app/

こちらはSocialiteプロバイダのwebサイト。様々なプラットフォームについて書いてあります。

これらを参考にTwitterログインを実装していきましょう。
と言うより、読んで貼り付けを繰り返すと大枠は完成します！
ドキュメントはGithubで作成しているのでそこをTwitterに変えながら進めます。

まずはcomposerでLaravel Socialiteをインストール。

composer require laravel/socialite

web.php

Route::get('login/twitter', 'Auth\LoginController@redirectToProvider')->name('login.twitter');
Route::get('login/twitter/callback', 'Auth\LoginController@handleProviderCallback');

次にLoginController.phpです！

<?php

namespace App\Http\Controllers\Auth;

use Socialite;
use App\User;
use App\Http\Controllers\Controller;
use App\Providers\RouteServiceProvider;
use Illuminate\Foundation\Auth\AuthenticatesUsers;

class LoginController extends Controller
{
    /**
     * Twitterの認証ページヘユーザーをリダイレクト
     *
     * @return \Illuminate\Http\Response
     */
    public function redirectToProvider()
    {
        return Socialite::driver('twitter')->redirect();
    }

    /**
     * Twitterからユーザー情報を取得
     *
     * @return \Illuminate\Http\Response
     */
    public function handleProviderCallback()
    {
        $user = Socialite::driver('twitter')->user();
    }
}

app.phpに以下を記載しましょう。

'providers' => [

Laravel\Socialite\SocialiteServiceProvider::class,


'aliases' => [

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

services.phpに以下

'twitter' => [
        'client_id' => env('TWITTER_KEY'),
        'client_secret' => env('TWITTER_SECRET'),
        'redirect' => env('TWITTER_REDIRECT_URI'),
    ],

次にenvです！ここは皆さんの環境によって異なるので注意しましょう。

https://developer.twitter.com/ja

このためだけに作成したので、中身は適当ですw

注意としては以下の2点。

Sign in with Twitter

• Enabled

Callback URL

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

http://127.0.0.1:8000 に関しては皆さんの環境で変えてくださいね。

php artisan serve

Laravel development server started: http://127.0.0.1:8000

そうしたら Keys and tokensタブであなたのAPIkeyを取得しましょう。
取得したものをenvに書き込みます！

TWITTER_KEY=hogehoge
TWITTER_SECRET=aburasobahoge
TWITTER_REDIRECT_URI=http://127.0.0.1:8000/login/twitter/callback

キャッシュを削除しておきましょう。

php artisan config:cache

ここで、twitterログインでユーザーの情報をUserテーブルに保存するのですが、「token」カラムが必須で必要になります。
「token」でそのユーザーがすでに新規登録をしているのかどうかを判断します。

「token」もそうですがせっかくなのでtwitterのavatarも取得したいですね。
それではUserテーブルを変更していきましょう。

php artisan make:migration change_email_and_password_add_token_and_avatar_to_users_table

作成したマイグレーション ファイルをいじっていきます。

class ChangeEmailAndPasswordAddTokenAndAvatarToUsersTable extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::table('users', function (Blueprint $table) {
            $table->string('email')->nullable()->change();
            $table->string('password')->nullable()->change();
            $table->string('token')->nullable()->after('name');
            $table->text('avatar')->nullable()->after('token');
        });
    }

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

emailとpasswordはtwitterログイン時には取得できないのでエラーが出ないように、nullableに変更しておきましょう。

そうしたらmigrateしてみましょう。

php artisan migrate

エラーがでます（読んでみましょう）。

Changing columns for table "users" requires Doctrine DBAL; install "doctrine/dbal".

どうやら、doctrine/dbalをインストールしないといけないようですね。そうしたら言われた通りにインストールしましょう。

composer require doctrine/dbal

そうしたらリトライです。

php artisan migrate

こちらでOKです。既存のUsersテーブルに変更を加えることができました。

次に忘れずにモデルにホワイトリストの設定をしましょう。

User.php

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

では実際にLoginControllerにログインの処理を記入していきましょう！

public function handleProviderCallback()
    {
        try {
            $user = Socialite::driver('twitter')->user();
            $socialUser = User::firstOrCreate([
                'token'    => $user->token,
            ], [
                'token'    => $user->token,
                'name'     => $user->name,
                'email'    => $user->email,
                'avatar'   => $user->avatar_original,
            ]);
            Auth::login($socialUser, true);
        } catch (Exception $e) {
            return redirect()->route('login');
        }
        
        return redirect()->route('posts.index');


    }

try catchを使用しました。twitter関連でエラーが出た場合にログイン画面に戻すように処理を書いています。

処理としては、firstOrCreateを使用して「token」がすでにあるのかどうかで新規ユーザーか既存ユーザーかを判断しています。

そして作成した$socialUserでログインを行い、indexに飛ばしています！

Auth::login($socialUser, true);

https://readouble.com/laravel/6.x/ja/authentication.html

ログイン画面を整えましょう。

<div class="row">
                    <div class="col-md-12 text-center">
                        <a href="{{ route('login.twitter') }}"><i class="fab fa-twitter">Twitterでログイン</i></a>
                    </div>
                </div>

上記のコードをlogin.bladeとregister.bladeに貼り付けると上記のようにできます！

いかがだったでしょうか。
こちらでtwitterログインが実装完了です。

お疲れ様でした。