LaravelとReactでsocialiteを使ってGitHubソーシャルログイン機能を簡単に！

今回使用しているバージョン

"laravel/framework": "^10.0"
"laravel/socialite": "^5.6"
"react": "^18.2.0"

まずは準備（GitHub）

1. Githubにログインしたら設定を開く。
2. 左側のメニューから Developer settings を選ぶ。
3. OAuth Apps　→ New　OAuth Apps　で情報を入力。
   （
   ・ローカルで使用するときは、HomepageURLは　http://127.0.0.1:8000　にする。
   ・Authorization callback URLは　この記事では　http://127.0.0.1:8000/login/github/callback　として進めます。urlはなんでもいいけどgithubの文字列を含ませる。
   ）
   4.　クライアント ID 、クライアントシークレットを発行し控える。

準備２（Laravel）

1. .envファイルに以下を追加

GITHUB_CLIENT_ID=あなたのクライアントID
GITHUB_CLIENT_SECRET=あなたのクライアントシークレット

2. config/services.phpに以下を追加

config/services.php

'github' => [
        'client_id' => env('GITHUB_CLIENT_ID'),
        'client_secret' => env('GITHUB_CLIENT_SECRET'),
	//自分で設定したURLを書く
        'redirect' => 'http://127.0.0.1:8000/login/github/callback',
   ],

Laravelにルートを記述

routes/web.phpに以下の記述を追加。githubという文字が含まれていない時はSPAとしてルーティングはReactに任せますよーっていう記述。

理由
web.phpとapi.phpは行っている処理が違うみたい。ソーシャルログイン機能などで外部に処理を飛ばしていると、api.phpでは動かなかった。そのためweb.phpに書く必要がある。

routes/wep.php

Route::get('/{any?}', fn () => view('app'))->where('any', '(?!.+github).+');

Route::get('login/github', 'App\Http\Controllers\OAuth\LoginController@redirectToProvider');
Route::get('login/github/callback', 'App\Http\Controllers\OAuth\LoginController@handleProviderCallback');

コントローラーを作成

web.phpに書いたコントローラー名と合わせる。ここではOAuth配下にLoginController絵推して作成。

php artisan make:controller OAuth/LoginController

コントローラーに処理を記述

公式ドキュメントを参考に…
https://laravel.com/docs/5.6/socialite

OAuth/LoginController.phpに以下を記述

OAuth/LoginController.php

<?php

namespace App\Http\Controllers\OAuth;

use Laravel\Socialite\Facades\Socialite;

class LoginController extends Controller
{
    /**
     * Redirect the user to the GitHub authentication page.
     *
     * @return \Illuminate\Http\Response
     */
    public function redirectToProvider()
    {
        return Socialite::driver('github')->redirect();
    }
 
    /**
     * Obtain the user information from GitHub.
     *
     * @return \Illuminate\Http\Response
     */
    public function handleProviderCallback()
    {
        $user = Socialite::driver('github')->user();
	//ddでどんな情報を取ってこれたか確認できます。
	//dd($user); 
        // $user->token;
    }
}

これで、githubでログインすると、http://127.0.0.1:8000/login/github/callback　に飛ぶかと思います。LoginController の　handleProviderCallback関数の変数$userにgithubに紐付いている情報が全部入っているかと思います。この情報でDBに入れたり色々しましょう！

ご参考になると幸いです、