LaravelでSocialiteを使ってTwitterログインする方法:エラー対策も紹介

LaravelとSNS

LaravelのSocialiteというライブラリを使えば、Twitterのログインも手軽にできます。設定とコードをすべてお見せします。

設定がうまく反映されないとエラーになることもあり、その時の対策も最後に紹介しています。

Laravelを使ってはじめてTwitter連携をするときに役立ててください。

実際にログイン機能を搭載したサンプルサイトは、こちらです。実際にTwitterでログインして、どんなふうになるのか試せます。

Junko
Junko

ご興味あれば、試してみてくださいね。

LaravelにTwitterアカウントでログインできるようにする:Twitter側の設定

まずはTwitterのdeveloper用のアカウントを作っておいてください。

こちらは数日かかることもあります。詳しい手順は別の記事をご覧ください。

本記事では、アカウントを開設した後の処理を説明します。

まずはTwitter側の設定です。

① Twitterのdeveloperアカウントにログインします。

②  Overviewのページで、【+Create App】をクリックします。

ページの下のほうにボタンがあります。

名前をつける画面があるので、アプリの名前をつけます。

その後、右下のNextボタンをクリック。これで新しいアプリができました。

次に設定を進めていきます。

③ 作成したアプリをひらき、Settingsの Authentication settingのEditボタンをクリック。

④ Enable 3-legged OAuth のバーを右側にし、入力できる状態にします。

その後、設定をいれていきます。

特に大事なのは、Callback URLsです。Twitterでは現在、ローカルホストはCallback URL として使えないとなっております。

Don’t use localhost as a callback URL
Instead of using localhost, please use a custom host locally or http(s)://127.0.0.1.

Twitterマニュアル:https://developer.twitter.com/ja/docs/basics/apps/guides/callback-urls

http(s)://127.0.0.1が使えるとのこと。そこで、開発環境ではCallback URLは次のように設定しておきます。

ほか、設定画面は次のようになります。

【設定画面例】

ユーザーからのメールアドレスも取得したい場合には、【Request email address from users】にチェックを入れ、Terms of service(利用規約)・Privacy policy(プライバシーポリシー)に関するページも登録しておく必要があります。

そうでない場合は、利用規約・プライバシーポリシーは不要です。

Junko
Junko

ユーザーのメールアドレスをきちんと保管するか、といった点が大事なのかと思います。

テスト環境では適当でも大丈夫ですが、本番では、ちゃんと作っておきましょう♪

⑥ 保存後、keys and tokens タブをクリックします。

一番上の【Consumer Keys】の【Regenerate】 をクリック。

表示される2つのキーをコピーして、saveボタンを押します。

なおコピーしたキーは、このあとLaravelの.envファイルに貼り付けます。

以上でTwitter側の設定は終わりです。

LaravelにTwitterアカウントでログインできるようにする:Laravel側の設定

次にLaravel側の設定です。今回はLaravel8を使ってテストをしました。

新規プロジェクトを作成し、認証機能をつけた後からの手順を解説していきます。

なおインストールからBootstrapの認証機能搭載までの手順はこちらで解説しています。

① Socialiteをインストールする

まずは Socialite というライブラリをインストールします。

config/app.phpにSocialiteに関する項目を追加します。

【app.php】

まず ‘providers’ => [ の項目に、下記を加えます。

次に’aliases’=> [ の項目に、下記を加えます。

② 設定ファイルを準備

次に.envファイルにTwitterに関する設定を追加します。

TWITTER_CLIENT_IDとTWITTER_CLIENT_SECRET には、先ほどTwitterから取得したAPI key, API key secret情報をそれぞれいれておきます。

【.env】

さらに config/services.phpに、下記を加えます。これによって、.envの設定を読み込んでくれます。

【services.php】

③ データベースの修正

今回はUserテーブルにtwitterカラムを追加し、そこにtwitterのidを登録するようにします。

またTwitterアカウントでのログインではパスワードが不要になるため、パスワードカラムをnullableに変更しておきます。

テーブルに変更を加えるため、まずはマイグレーションファイルを作成します。

次のようにいれておきます。

【マイグレーションファイル】

ファイルを保存した後、php artisan migrate コマンドを実行します。

④ ルート設定の追加

ルート設定を追加します。

TwitterControllerはこのあと作成していきます。

【web.php】

⑤ コントローラーの追加

次にTwitterControllerを作成します。

作成したコントローラーを開きます。

次のようにいれておきます。

【TwitterController.php】

コードの意味

最初に redirectToProvider() メソッドが実行されます。twitterの認証画面が表示されます。ユーザーが承認すると、Callback URLから、handleProviderCallback() メソッドの処理が実行されます。

まずTwitterのユーザー情報を$twitterUserに代入します。

その後、既存のUserテーブルに、このユーザー情報があるかを確認。もし既に情報があれば更新し、なければ、新規ユーザーを作成して保存します。

処理後は /home にリダイレクトします。

上記ではメールアドレスも登録する処理にしましたが、お好みで変更してください。

Junko
Junko

ユーザーはTwitter上でメールアドレスを変更する可能性があり、メールアドレスを使ったユーザーの照合はできません。そのため、TwitterのIDを使ってユーザーの照合を行うようにしました。

⑥ ビューファイルの作成

次にログイン画面にTwitterアカウントでのログインボタンを追加しておきます。

views/auth/login.blade.phpファイルを開き、お好きな場所に下記を追加します。

【login.blade.php】

以上で設定完了です。

⑦ 実験してみる

php artisan serve を使ってサーバーを立ち上げます。ブラウザにログイン画面を表示させてください。

ボタンを押すと、次のような認証画面になります。

【Authorize app】を押すとログインができます。

いや、うまくできなかった!!という場合には

Twitter連携、手軽にできるものの、連携部分を少し間違えるとエラーになったりします。

上記ではうまくいかなかった!と言う場合には、次を試してみてください。

Junko
Junko

実はわたしも一発ではうまくいかず。

その時に試行錯誤した経験を元に、こちら、書いておきますね。

Twitterの設定を変えたら、もう一度キーを発行しなおして。

Twitter側で設定を変えたら、keys and tokensを再発行しなおしてみてください。これをしないと、設定が反映されなかったりするようです。

なお再発行したときは、忘れずに.envの設定も変えておきましょう。

キャッシュクリア系コマンドを試してみて

.envの内容が反映されていない可能性もあります。Laravelでキャッシュクリア系コマンドを試してください。

ほか、下記のページも参考にキャッシュをキレイにしてくださいね。

おわりに

実際のTwitterログイン機能は、会員制フォーラムサイトに搭載しているので、ご興味あればお試しください。サンプルサイトなので、ご登録後がきたりといったことは一切ありません。

なお、今回はSocialiteのおかげで手軽に、Twitterログイン機能を搭載できました。

とはいっても、Laravelのルート設定やコントローラーなどの使い方がある程度わかっていないと、難しい内容だったかと思います。

もし

「今回の記事で解説した内容が難しすぎる」

と思った方は、Laravelの使い方をいちから学べる学習サイト【Laravelの教科書】をご用意しているので、見てみてください。

ルート設定の方法、コントローラーへのコード書き方、データベースの作り方をひとつひとつ学んでいけます。学習しながら、今回サンプルで使った会員制フォーラムサイトを実際に作っていきます。

Junko
Junko

基礎編は無料でプレゼント中です♪

詳細は、こちらのご案内ページをご覧ください。

Laravelの教科書について詳しく知る

LaravelとSNS

【Laravelの教科書・無料プレゼント】

Junko
Laravelの使い方を覚えたい!と思ったら、ぜひ、役立ててほしいです。
ひつじプログラマ
会員制サイトをいちから作っていくよ。ボタンをクリックして詳細を見てね。
Laravelの教科書の詳細を見る

【無料プレゼント】

「LaravelでWebアプリをいちから作れるようになりたい!」

そんなLaravel初心者のあなたへ【Laravelの教科書】基礎編プレゼント中! 会員制フォーラムサイトを学習しながら作れます。

詳細はこちらをクリック
【LaravelでWebアプリ開発します】

「会員制サイトを作ってほしい」「開発の時間がないから頼みたい!」

こんなご要望承り中。オンラインミーティングでも、ご相談承ります。

サンプルやお見積もり目安を見てみる

Twitter始めました。
40代からプログラミング!

コメント

タイトルとURLをコピーしました