はじめに

Web系自社開発企業への転職を目標にLaravel+VuejsでWebアプリケーションを作成しています！
今回は、転職用ポートフォリオにTwitterログイン機能を実装したのでTwitter認証を実装するまでの流れを解説していきます。

目次

前提
Laravel Socialiteのインストールと設定ファイルの編集
Twitterログイン機能を実装する
DB設定
まとめ
参考文献

前提

「Twitter Developer」登録済み
「Callback URI/Redirect URL」の設定
以下を取得済み
- 「API Key」
- 「API secret key」
- 「Access token」
- 「Access token secret」

Twitterログイン機能を実装するためには「Twitter API」を利用する必要があるので、まだ「Twitter API」を取得していない方は、上記サイトで「Twitter Developer」の登録を行ってください。

また、「Twitter Developer」の登録をする際に**「Twitter APIを何に使うのか」を英語で200文字以上入力**してアプリケーションの利用申請を行う場面があります。ここが個人的につまずいたポイントでした。

こちらが実際の申請文です。参考になれば幸いです。
　
Twitter API申請文

The purpose of using APIs is to deliver comfortable web services to users.
Specifically, I want to provide more users with useful learning by making the process of users logging in to my web services more comfortable.
The scope of using the Twitter API is only when a user logs in to the web service.

快適なWebサービスをユーザーに届けることがAPIを利用する目的です。
具体的には、私が運営するWebサービスにユーザーがログインするまでのプロセスを快適にすることで、より多くのユーザーに有益な学びを提供したい。
Twitter APIを利用する範囲としては、ユーザーがWebサービスにログインするときのみとする。

「Twitter API」の利用申請をする時に参考にしたサイトを下記に記載します。

Socialiteをインストールと設定

Laravelの公式パッケージであるLaravel Socialiteをインストールします。
Laravel Socialite - Laravel公式

以下コマンドを実行

composer require laravel/socialite

Laravelの設定ファイルの編集

config/services.php


'twitter' => [
        'client_id' => env('TWITTER_CLIENT_ID'),
        'client_secret' => env('TWITTER_CLIENT_SECRET'),
        'redirect' => env('APP_URL') . '/login/twitter/callback',
],

.envの編集

.env

TWITTER_CLIENT_ID = TwitterAPI Key
TWITTER_CLIENT_SECRET = TwitterAPI Secret Key

Twitterログイン機能を実装する

まずは、ルーティングを追加します。

routes/web.phpで下記ルーティングを追加します。

web.php

Route::prefix('login')->name('login.')->group(function () {
    Route::get('/{provider}', 'Auth\LoginController@redirectToProvider')->name('{provider}');
});

GoogleやFacebookなどの他サービスのアカウントを使ったログイン機能を実装したいという場面を想定して、今後の拡張性を持たせるために、{provider}の部分に、他サービスの名前を入力可能としました。

次に、コントローラーを作成します。
app/Http/Controllers/Auth/LoginController.phpを以下のように編集しました。

LoginController.php

<?php

namespace App\Http\Controllers\Auth;

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

class LoginController extends Controller
{
    use AuthenticatesUsers;

    protected $redirectTo = RouteServiceProvider::HOME;

    public function __construct()
    {
        $this->middleware('guest')->except('logout');
    }

    //SNS認証ページへユーザーをリダイレクト
    public function redirectToProvider(string $provider)
    {
        return Socialite::driver($provider)->redirect();
    }

    //ログイン
    public function handleProviderCallback(Request $request, string $provider)
    {
        //認証結果の受け取り
        $providerUser = Socialite::driver($provider)->user();

        //Google
        if($provider === 'google') {
            //Googleから取得したユーザー情報からメールアドレスを取得
            $user = User::where('email', $providerUser->getEmail())->first();

        //Twitter 
        } elseif($provider === 'twitter') {
            //Twitterから取得したユーザー情報からユーザーIDを取得
            $user = User::where('twitter_id', $providerUser->getId())->first();
        }

        //ログイン処理
        if ($user) {
            $this->guard()->login($user, true);
            return $this->sendLoginResponse($request);
        }

        //Google
        if($provider === 'google') {
            return redirect()->route('register.{provider}', [
                'provider' => $provider,
                'email' => $providerUser->getEmail(),
                'token' => $providerUser->token,
            ]);

        //Twitter
        } elseif($provider === 'twitter') {
            //DBにユーザー情報がなければ作成する
            return redirect()->route('register.{provider}', [
                'provider' => $provider,
                'twitter_id' => $providerUser->getId(),
                'token' => $providerUser->token,
                'tokenSecret' => $providerUser->tokenSecret,
            ]);
        }

    }
}

今回は、GoogleとTwitterの2つのサービスを使ってログイン機能を実装しました。
また、

Googleアカウントを使ったログインではGoogleのユーザー情報からメールアドレス
Twitterアカウントを使ったログインではTwitterのユーザー情報からユーザーID

をそれぞれ取得して、usersテーブルに存在するかを調べています。

最初は、Googleと同じようにTwitterのユーザー情報からメールアドレスを取得して、Twitterアカウントを使ったログインを実装しようと考えましたが、

Twitterアカウントにメールアドレスを設定していない場合、メールアドレスが取得できない
GoogleとTwitterで同じメールアドレスを使っているとは限らない
Twitterは、デフォルトではメールアドレスを取得できない（Twitter Developerで設定する必要がある）
Twitterアカウントでのメールアドレスは非公開情報なので安易に取得するべきではない

これらの理由から、メールアドレスではなくユーザーIDを取得してログイン機能を実装しました。

最後に、ログインボタンを実装します。
resources/views/auth/login.blade.phpを以下のように編集しました。

login.blade.php

<a href="{{ route('login.{provider}', ['provider' => 'google']) }}" class="btn btn-block btn-danger mb-4 col-lg-8 col-md-9 col-sm-10 col-xs-12 mx-auto">
    <i class="fab fa-google mr-1"></i>Googleでログイン
</a>
<a href="{{ route('login.{provider}', ['provider' => 'twitter']) }}" class="btn btn-block btn-info mb-4 col-lg-8 col-md-9 col-sm-10 col-xs-12 mx-auto">
    <i class="fab fa-twitter mr-1"></i>Twitterでログイン
</a>

DB設定

Laravelアプリケーションを作成した際に作られるデフォルトのusersテーブルに、カラムを新たに追加する必要があります。

app/User.phpを以下のように編集しました。

User.php

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

database/migrations/2014_10_12_000000_create_users_table.phpを以下のように編集しました。

2014_10_12_000000_create_users_table.php

    public function up()
    {
        Schema::create('users', function (Blueprint $table) {
            $table->bigIncrements('id');
            $table->string('name')->unique();
            $table->string('email')->unique();
            $table->timestamp('email_verified_at')->nullable();
            $table->string('twitter_id')->nullable();
            $table->string('password')->nullable();
            $table->rememberToken();
            $table->timestamps();
        });
    }

まとめ

今回は、Laravel SocialiteでTwitterログイン機能を実装するまでの流れを解説しました。
本記事が、LaravelアプリケーションのTwitterログイン機能のご参考となりましたら幸いです。

参考文献