はじめに
Web系自社開発企業への転職を目標にLaravel+VuejsでWebアプリケーションを作成しています！
今回は、転職用ポートフォリオにTwitterログイン機能を実装したのでTwitter認証を実装するまでの流れを解説していきます。
目次
前提
- 「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の設定ファイルの編集
'twitter' => [
'client_id' => env('TWITTER_CLIENT_ID'),
'client_secret' => env('TWITTER_CLIENT_SECRET'),
'redirect' => env('APP_URL') . '/login/twitter/callback',
],
.envの編集
TWITTER_CLIENT_ID = TwitterAPI Key
TWITTER_CLIENT_SECRET = TwitterAPI Secret Key
Twitterログイン機能を実装する
まずは、ルーティングを追加します。
routes/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を以下のように編集しました。
<?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を以下のように編集しました。
<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を以下のように編集しました。
protected $fillable = [
'name', 'email', 'password', 'twitter_id',
];
database/migrations/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ログイン機能のご参考となりましたら幸いです。