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

LaravelとSNS API連携

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を使ってテストをしました。

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

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

なお、本記事ではすでに登録されているユーザーがTwitterでもログイン可能にする方法を解説しています。

もし最初の登録からtwitterで行う場合には、twitterからメール情報を取得してユーザーテーブルに登録する等の処理が必要になります。

① 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 API連携

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

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

最新のLaravel10版テキストに加え、Laravel8版・Laravel9版もご用意しています♪

【無料プレゼント】

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

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

詳細はこちらをクリック

最新のLaravel10版テキストに加え、Laravel8版・Laravel9版もご用意しています♪

Laravelの本を書きました。


ひつじが目印♪
クリックするとamazonページへ。

Laravelの使い方を分かりやすく解説した書籍を出版しました。書店やAmazon等のオンラインショップにて販売中です。
Laravel10対応。Laravel11サポートガイドもご用意しています。詳しくは下記ボタンをクリック♪

書籍の詳細を見てみる

Laravelの本を書きました。


ひつじが目印♪
クリックするとamazonページへ。

Laravel10対応

Laravelの使い方を分かりやすく解説した書籍を出版しました。書店やAmazon等のオンラインショップにて販売中です。

書籍の詳細を見てみる


Laravelの教科書限定コミュニティ【Laravelの教科書ラボ】はじめました。
セミナーで、StripeやChatGPT連携、デバックなど実践スキルを分かりやすく学べます。

ラボの案内を見てみる

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

コメント

  1. ヤマグチ より:

    こんにちは。現在、こちらでのプレゼントされている「Laraveの教科書」と、「はじめてプログラミング【LaravelエンジニアJunko】」youtubeチャンネルでLaravelを勉強中です。

    はじめてプログラミング【LaravelエンジニアJunko】で作ったmembersアプリにtwitterログイン機能を実装したいのですが、上手くできません。

    症状は、
    ログイン画面から「twitterログイン」ボタンを押すと、「アプリ名にアカウントへのアクセスを許可しますか?」という画面が表示され、「連携アプリを認証」ボタンをクリックすると、「Temporary identifier passed back by server does not match that of stored temporary credentials. Potential man-in-the-middle.」(サーバーから返信された一時的な識別子が、保存された一時的な認証情報と一致しない。中間者の可能性あり。) というエラーが出てログインされません。

    TwitterController.phpの
    public function redirectToProvider() {

    return Socialite::driver(‘twitter’)->redirect();

    }
    のreturnの箇所がエラーになっているようです。

    他のサイトも見てみて、みなさんそれぞれコードが違うのですが、概ねこの箇所に関してはみんな同じような書き方をしています。

    なぜ、自分の場合はエラーになるのでしょうか?

    TwitterController.phpのコードはこちらの記事をコピペしており、見本と自分のコードに差異はない。と思います。

    ここを確認してみたら?といった意見があればアドバイスお願いします。

    PS.
    「Laraveの教科書」と、「はじめてプログラミング【LaravelエンジニアJunko】」youtubeチャンネル。本当にわかりやすいです。 今まで教材を買って、なんとなくこういうものか。。。よくわからん。 といった状態だったのですが、これらの教材に出会って少しずつですが理解が深まってきました。 ありがとうございます!!

  2. ヤマグチ より:

    追記です。

    環境は Laravel8 Mysql nginx
    Laradock x docker を使っております。

    サイトへのアクセスは「localhost」で表示しています。
    .envファイル TWITTER_REDIRECT_URIは
    「http://127.0.0.1:8000/login/twitter/callback」 と書いています。

    Laradockは初期設定で「localhost」でサイトへアクセス。となっているようで、その場合TWITTER_REDIRECT_URIは上記でいいのか?自信がありません。

    • Junko Junko より:

      Youtube動画へのコメント、嬉しいです^^

      そして エラーの件ですが、
      うる覚えですが、確かわたしも なぜかうまくいかず、
      設定を入れなおしたり、キャッシュをクリアしました。

      良かったら記事にあるとおり
      キーを発行しなおす→キャッシュクリア
      を実行してみてください。

      また、こちらの記事も、参考にしてみてください。
      https://biz.addisteria.com/missing_temporary_oauth/

      Laradocを使っていないので、そこのあたりは
      ちょっと分かりません。

  3. ヤマグチ より:

    返信ありがとうございます。
    色々試してみます。

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