Webアプリ習作#4

この記事を書くにあたって主にこちらを参考にしました。
Laravel Socialiteを使ってTwitterアカウントでログイン機能 - Crieit

Laravel Socialiteをインストール

コマンドプロンプトでプロジェクトディレクトリにて以下を実行

composer require laravel/socialite
composer require socialiteproviders/twitter

インストールが終わったら念のためプロジェクトディレクトリ下のcomposer.jsonを開き、requireセクションにlaravel/socialite、socialiteproviders/twitterが追加されていることを確認

Twitter Appとの連携情報を設定

プロジェクトディレクトリ下の.envファイルにTwitter Appとの連携情報を追記

TWITTER_CLIENT_ID=[発行されたAPI Key]
TWITTER_CLIENT_SECRET=[発行されたAPI Key Secret]
TWITTER_REDIRECT=[コールバックURL]

コールバックURLは仮にhttp://localhost:8000/auth/twitter/callbackとしておく

API Keyの再生成(必要なら)

発行されたAPI Keyは再度確認することができないのでメモに取っていなかった場合再生成する
https://developer.twitter.com/en/portal/dashboard
よりPROJECT APPのところに登録したTwitterアプリがあるのでカギアイコンを選択
Consumer KeysのAPI Key and SecretのRegenerateを選択

Laravelプロジェクト側の設定

プロジェクトディレクトリ下のconfig/services.phpに下記を追記

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

config/app.phpのproviders配列に下記を追加

    \SocialiteProviders\Manager\ServiceProvider::class,

Twitter Developerでユーザー認証設定

Twitter DeveloperのDashboardからTwitterアプリのApp settings(歯車アイコン)を選択

User authentication settingsのSet upを選択

OAuth 2.0とOAuth1.0aをどちらも有効化
Type of AppのSelect OneをクリックしてWeb Appを選択
Request email from users (optional)はとりあえずOFF
App permissionsはRead and Writeを選択
Callback URI/Redirect URLに先程.envに設定したリダイレクトURLであるhttp://localhost:8000/auth/twitter/callbackを設定
Website URLはローカルホストは不可なので(Invalid website urlと警告される)、 とりあえずTwitterの自分のアカウントのプロフィール画面のURLを設定しておく
その下は全てoptionalなので空白にしてSaveをクリック

Changing permissions might affect your Appと確認されるのでYes

OAuth 2.0 Client ID and Client Secretという画面に遷移
Client IDとClient Secretが発行されるのでメモを取っておく
Doneをクリック
Save your OAuth 2.0 Client Secretと念を押されるのでYes I saved itをクリック