Laravel5.5 SocialiteでTwitter認証ログイン


laraveldでSocialiteを使い、初めてtwiter認証機能を実装することができたので、自分用に残しておく。

流れ

① Socialiteインストール
② Twitter Developersよりアプリ作成
③ デフォルトのusersテーブルにtwitter用カラム追加
④ Socialiteの設定
⑤ Controllerの作成
⑥ ルーティングの設定
⑦ Viewの設定

① Socialiteインストール

$ composer require laravel/socialite

でさらっとインストールするつもりだったのが、何かしらエラーが出てきて面倒くさそうだったため、composer.json の require の部分に上手くいきそうなバージョンのSocialiteを追記し、composer updateしてインストールした。

(一応)

composer.json
"laravel/socialite:2 "^3.0", #追記
/usr/local/bin/composer update

② Twitter Developersよりアプリ作成

下記のurlからTwitter Developersにアクセスし、適当にアプリの情報を入力。
https://developer.twitter.com/en/account/get-started

③ デフォルトのusersテーブルにtwitter用カラム追加

デフォルトであるusersマイグレーションファイルに下記のようにし、追加をする。 (passwordとemailカラムをnullable()に修正)

usersマイグレーションファイル
$table->increments('id');
            $table->string('email', 191)->unique()->nullable();
            $table->string('password')->nullable();
            $table->string('twitter_name')->nullable();
            $table->string('twitter_id', 191)->nullable()->unique();

④ Socialiteの設定

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

コールバックURLとは?

コールバック URLはTwitterでの認証ボタンを押した後に飛ばすurlのこと。

⑤ Controllerの作成

「OAuthLoginController.php」というファイルを「/app/Http/Controllers/Auth」ディレクトリ内に作成し、自分のサービス→twitter認証サービス、twitter認証サービス→自分のサービス用のメソッドを作る。

追記 2019/5/3) twitterでは、メールアドレスを登録しなくてもアカウント作成できるので、認証方法を少し変更しました。

php artisan make:controller 'Auth\OAuthLoginController'
OAuthLoginController.php
class OAuthLoginController extends Controller
{
    public function socialLogin($social) {
        return Socialite::driver($social)->redirect();
    }

    public function handleProviderCallback($social) {
        try {
            $userSocial = Socialite::driver($social)->user();
            $twitter_id = $userSocial->id;

            $user = DB::table('users')->where('twitter_id', $twitter_id)->first();

            if(is_null($user)) {
                if (is_null($userSocial->getNickname())) {
                    $userSocialNickName = $userSocial->getName();
                } else {
                    $userSocialNickName = $userSocial->getNickname();
                }

                $userd = User::create([
                    'name' => $userSocialNickName,
                    'email' => $userSocial->getEmail(),
                ]);
             } else {
                 $userd = User::find($user->id);
             }

            if (is_null($userd->twitter_id)) {
                $userd->twitter_id = $userSocial->getId();
                if (is_null($userSocial->getNickname())) {
                    $userd->twitter_name = $userSocial->getName();
                } else {
                    $userd->twitter_name = $userSocial->getNickname();
                }
            }

            $twitter_config = config('twitter');
            $userd->access_token = $twitter_config["access_token"];
            $userd->access_token_secret = $twitter_config["access_token_secret"];

            $userd->save();
            auth()->login($userd, true);
            return redirect()->to('/');

        } catch (Exception $e) {
            return redirect()->route('/')->withErrors('ユーザー情報の取得に失敗しました。');
        }
    }

⑥ ルーティングの設定

web.phpに先ほど作成した関数に対応したURLを記載

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

✳︎ここで、コントローラーで作成したtwitter認証サービス→自分のサービスのメソッドの処理を走らせるため、twitter developer で作成したアプリのコールバックurlを今回の場合、/login/twitter/callback で終わらせるようにする。

⑦ Viewの設定

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

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

以上でなんとか実装できたのですが、おかしなところがあったら教えていただけるとありがたいです。