接續昨天的篇章，來繼續建置 Line 第三方登入功能！
程式碼很多概念已經在前兩天分享，這裡就不贅述，歡迎參考前面兩篇～

程式碼 (前後端不分離)

前後端不分離的情況，整體流程會像這篇所寫：

1. 使用者點選「LINE 登入」 網站轉址到 LINE 驗證
2. 使用者通過驗證，網站收到使用者資訊
3. 網站讓使用者登入、儲存必要session
4. 使用者點選「登出」，網站讓會員登出， refresh token

官方文件們

第三方登入功能，使用 Laravel Sociality 套件 和 第三方服務，官方文件分別散落如下，建議要比對參考：

Laravel 官方文件：程式碼寫法、用法

Socialite Providers：提供所有可用的第三方服務之安裝、基本用法與回傳

Line Documentation：與 LINE 連接相關、所提供可用的 API

app/Providers/EventServiceProvider

protected $listen = [
    \SocialiteProviders\Manager\SocialiteWasCalled::class => [
        // ... other providers
        \SocialiteProviders\Line\LineExtendSocialite::class.'@handle',
    ],
];

Route

Route::prefix('/auth')->group(function () {
	// 登入
   Route::get('/login', [ThirdPartyAuthController::class, 'redirectToProvider']);
	// 第三方回傳
   Route::get('/callback', [ThirdPartyAuthController::class, 'callback']);
	// 登出
   Route::get('/logout', [ThirdPartyAuthController::class, 'logout']);
});

Controller

用 ThirdPartyAuthController 撰寫相關邏輯，這裡面最困難的，是收到 第三方服務 回饋的這行 Socialite::driver('line')->user();，很多錯誤會在這邊發生，但你不太容易知道詳細的錯誤情況，比較容易讓人沮喪。

我自己是一步一步來，先 dd(Socialite::driver('line')) 看有沒有收到東西、判斷到底是與第三方服務連接有問題、還是網站自身的問題，有錯誤訊息就google 錯誤訊息。

namespace App\Http\Controllers;

use App\Models\User;
use Auth;
use Illuminate\Http\Request;
use Laravel\Socialite\Facades\Socialite;

class ThirdPartyAuthController extends Controller
{
	// 轉址到第三方服務
    public function redirectToProvider()
    {
        return Socialite::driver('line')->redirect();
    }
	
	// 接收 Line 傳回的資料，存入 users table
    public function callback()
    {
        $lineUser = Socialite::driver('line')->user();
        $user = User::updateOrCreate([
            'email' => $lineUser->email,
        ],[
            'line_id' => $lineUser->id,
            'name' => $lineUser->name,
            'image_path' => $lineUser->avatar,
        ]);

        Auth::login($user);
				// 將使用者姓名 及 大頭照存入 session，方便畫面使用
        session([
           'name' => $user->name,
           'email' => $user->email,
           'image_path' => $user->image_path,
        ]);
       return redirect('/group');
    }

	// 登出
    public function logout(Request $request)
    {
        Auth::logout();
        $request->session()->invalidate();
        $request->session()->regenerate();

        return redirect('/group');
    }
}

前端畫面

<div class="collapse navbar-collapse" id="navbarSupportedContent">
	<ul class="navbar-nav mr-auto">
			<li class="nav-item">
                <a class="nav-link" href="/group/create">開團囉</a>
			</li>
			<li class="nav-item">
{{--            <a class="nav-link" href="/">跟團囉</a>--}}
			</li>
			<li class="nav-item">
{{--            <a class="nav-link" href="#">我的訂單</a>--}}
			</li>
        @if(Auth::check())
			<li class="nav-item">
				<img src="{{ session('image_path') }}" alt="User Avatar" class="rounded-circle" width="32" height="32">
			</li>
			<li class="nav-item">
				<a class="nav-link" href="/auth/logout">登出</a>
            </li>
		@else
			<li class="nav-item">
				<a class="nav-link" href="/auth/login">LINE 登入</a>
			</li>
		@endif
	</ul>
</div>

404 Bad Request

最討厭這種錯誤訊息，因為你根本不知道哪裡有錯！！

如果一開始就出現這個畫面，代表 LINE 對於網站所發出的請求不正確。

1. 首先，因為我們使用套件連線，基本上套件不會有太大問題，否則網路上就會有很多神人提出、修正。

2. 然後看看程式碼，這個畫面是一轉址到 LINE 就跳出，根本還沒開始驗證，情況如下

   • route 有成功進到 controller 裡面
   • controller 有成功轉址
   • 那剩下就是 提供的 ID、secret、callback 網址是否有誤

3. 檢查 .env 檔案中的參數，與 LINE 開發者平台資訊 是否正確

   （我自己不只一次把 CLIENT_ID 當作是 Your user ID ）

   # Line 第三方登入
   LINE_CLIENT_ID=       // 這個是 Channel ID ，不是 Your user ID 
   LINE_CLIENT_SECRET=
   LINE_REDIRECT_URI=http://localhost:8000/auth/callback
   

4. 本地端測試下， callback 網址及送出第三方登入請求的網址，建議都使用 http://localhost 而不是 http://127.0.0.1 ，兩者對於 第三方服務 來說是不同網站。

事實上，第三方服務很多在你轉址到第三方的這個步驟時，就會先驗證 callback url 與你在第三方後台填寫的相不相同，所以這個地方一定要仔細檢查！