--- tags: PHP, Laravel, Backend --- # Laravel實作第三方登入 ## Laravel Breeze Laravel Breeze 是 Laravel 身份驗證功能的最小、簡單實現,包括登錄、註冊、密碼重置、電子郵件驗證和密碼確認。Laravel Breeze 的默認視圖層由使用Tailwind CSS樣式的簡單Blade 模板組成,利用此套件生成基本登入登出很方便。 ### 安裝 首先,創建一個新的 Laravel 應用程序,配置您的數據庫,並運行您的數據庫遷移: ```shell= laravel new example cd example php artisan migrate ``` 創建新的 Laravel 應用程序後,您可以使用 Composer 安裝 Laravel Breeze: `composer require laravel/breeze --dev` 安裝完成後,可以運行breeze:installArtisan 指令。此指令將身份驗證視圖、路由、控制器和其他資源發佈到我們的應用程序。 ```shell= php artisan breeze:install npm install npm run dev php artisan migrate ``` 之後執行`php artisan serve`到login和register路由就可以看到基本的登入註冊畫面 ![](https://i.imgur.com/BIc9Q6R.jpg) ![](https://i.imgur.com/srxKxru.jpg) ## Laravel Socialite ## 介紹 這個套件是最常拿來做laravel第三方登入的套件,向 OAuth 提供者進行身份驗證。Socialite 目前支持通過 Facebook、Twitter、LinkedIn、Google、GitHub、GitLab 和 Bitbucket 進行身份驗證。 如果還想要串其他的第三方登入,可以到[Socialite Providers](https://socialiteproviders.com/)查看,只需要載入套件,添加provider事件監聽器,剩餘做法與以下範例相同。 ### 安裝 使用composer安裝包 `composer require laravel/socialite` ### 配置 配置檔案會生成在`config/services.php`,並應使用鍵facebook,twitter,linkedin,google,github,gitlab,或者bitbucket,根據您的應用需要提供: ```php= 'facebook' => [ 'client_id' => env('FACEBOOK_CLIENT_ID'), 'client_secret' => env('FACEBOOK_CLIENT_SECRET'), 'redirect' => env('FACEBOOK_REDIRECT_URI'), ], ``` 到.env設定 ``` FACEBOOK_CLIENT_ID="" FACEBOOK_CLIENT_SECRET="" FACEBOOK_REDIRECT_URI="http://localhost:8000/auth/callback" ``` ### 路由 要使用 OAuth 提供程序對用戶進行身份驗證,您將需要兩條路由:一條用於將用戶重定向到 OAuth 提供程序,另一條用於在身份驗證後接收來自提供程序的回調。下面的示例控制器演示了兩個路由的實現: ```php= use Laravel\Socialite\Facades\Socialite; Route::get('/auth/redirect', function () { return Socialite::driver('facebook')->redirect(); }); Route::get('/auth/callback', function () { $user = Socialite::driver('facebook')->user(); // $user->token }); ``` Facade`redirect`提供的方法`Socialite`負責將用戶重定向到 OAuth 提供者,而該user方法將讀取傳入的請求並在用戶通過身份驗證後從提供者處檢索用戶的信息。 ### 檢索用戶詳細信息 在用戶重定向回您的身份驗證回調路由後,您可以使用 Socialite 的 user 方法檢索用戶的詳細信息。該 user 方法返回的用戶對象提供了多種屬性和方法,您可以使用這些屬性和方法將有關用戶的信息存儲在您自己的數據庫中。 ```php use Laravel\Socialite\Facades\Socialite; Route::get('/auth/callback', function () { $user = Socialite::driver('github')->user(); // OAuth 2.0 providers... $token = $user->token; $refreshToken = $user->refreshToken; $expiresIn = $user->expiresIn; // OAuth 1.0 providers... $token = $user->token; $tokenSecret = $user->tokenSecret; // All providers... $user->getId(); $user->getNickname(); $user->getName(); $user->getEmail(); $user->getAvatar(); }); ``` ## 申請Facebook登入 到[Facebook for Developers](https://developers.facebook.com/apps/)進行申請 創建一個應用程式 ![](https://i.imgur.com/emGi0Yj.jpg) 輸入應用程式名稱 ![](https://i.imgur.com/GxBJAmS.jpg) 選擇facebook登入 ![](https://i.imgur.com/rv8Dir3.jpg) ![](https://i.imgur.com/xrEkdtP.jpg) 到應用程式設定為本地 ![](https://i.imgur.com/HthvV7V.jpg) 在紅色框框輸入你的網域,因我在本地測試所以為`localhost` 藍色框框的資料填入.env檔案中 ![](https://i.imgur.com/Eif7O7m.jpg) 如果不是在本機端開發,記得在設定填入callback的Url ![](https://i.imgur.com/fs8iAUQ.jpg) ## let go 測試 首先在`login.blade.php`加上一個a tag ``` <a class="btn btn-primary" href="{{ route('socialite.redirect') }}"> Facebook 登入 </a> ``` 設定好路由,就可以開始拉, ps. 我懶得新建資料表所以直接去資料庫把user的password欄位改成允許null 這裡的 stateless()意味著沒有存儲 sessions,官方稱為 Stateless Authentication(無狀態認證) 無狀態身份驗證不適用於 Twitter 驅動程序,它使用 OAuth 1.0 進行身份驗證。 ```php= use Illuminate\Support\Facades\Auth; use Laravel\Socialite\Facades\Socialite; use App\Providers\RouteServiceProvider; use App\Models\User; Route::get('/auth/redirect', function () { return Socialite::driver('facebook')->stateless()->redirect(); })->name('socialite.redirect'); Route::get('/auth/callback', function () { $User = Socialite::driver('facebook')->stateless()->user(); $users = User::where(['email' => $User->email])->first(); if($users){ Auth::login($users); return redirect()->intended(RouteServiceProvider::HOME); }else{ $user = User::create([ 'name' => $User->name, 'email' => $User->email, ]); Auth::login($user); return redirect()->intended(RouteServiceProvider::HOME); } // $user->token }); ``` 前往`http://localhost:8000/login`點選facebook登入 ![](https://i.imgur.com/Rugr9Mo.jpg) 點選同意 ![](https://i.imgur.com/qUTADnf.jpg) 就成功登入拉 ![](https://i.imgur.com/qjLja9K.jpg) 也可以看到User資料表新增一筆資料囉。