小食譜06-3：第三方登入

什麼是第三方登入？

第三方登入是一種讓使用者不用重新註冊帳號，而是可以用其他平台的帳號（像是 Google、Facebook、Line 等等）來登入你系統的方式。

平常在逛網拍的時候，除了註冊會員，通常也會支援第三方登入，我覺得主要是「方便、快速」，提升使用者體驗。

因為有些人平常其實不喜歡打很多字，不喜歡花時間去註冊會員，而第三方登入就是一個很不錯的選項。

所以首先，確認你的專案需求是否需要支持多種第三方登入。

前後端分離下，第三方登入的工作流程範例：

當前後端分離的時候，後端在第三方登入的工作其實很簡單，主要是處理和第三方平台的溝通，確保登入流程能順利進行。

1. 產生登入連結：

後端收到前端的請求後，會生成一個第三方登入的連結（像 Google、Facebook 登入頁面），然後把這個連結發給前端。

2. 拿授權碼：

使用者在第三方平台上登入成功後，平台會把一個授權碼發回給後端，後端會用這個授權碼去跟平台要一個 access_token。

3. 拿使用者資料：

後端用這個 access_token 再去平台請求使用者的基本資料，像是姓名、email 等，這時候可以將使用者資料存入資料庫。

4. 登入或註冊使用者：

如果這個使用者已經有帳號，後端就會讓他登入；如果沒有，後端會自動幫他建立一個新的帳號。

5. 發 JWT 給前端：

最後，後端生成一個 JWT 給前端，前端接下來就用這個 token 來進行後續的 API 請求。

6. 處理錯誤：

如果過程中出現問題，像是授權失敗或拿不到資料，後端也會處理這些錯誤，並把訊息傳給前端。

更多相關資訊可以參考：

• OAuth 2.0 授權流程
• Line 官方文件

目前需求

昨天有做一個簡單的會員系統，此專案不需要很詳細的個人資訊，但除了讓使用者可以自行註冊會員帳號，我希望可以增加一個第三方登入選項，提供給不想花時間註冊會員的使用者，能快速登入系統瀏覽產品。

• 使用者預設：

  • 台灣地區
  • 手機上網

根據以上預設，我覺得第三方登入串接 Line 是一個好的選項，畢竟台灣人使用 Line 的頻率很高。

Line 第三方登入串接前置作業

註冊與登入 Line Developers 平台

• 前往 Line Developers 平台，使用你的 Line 帳號註冊並登入。

建立 Line Login Channel

• 在 Line Developers 平台中，點選 "Console"。
• 點擊 "Create a new provider"，為你的應用程式選擇一個名稱（例如 "Online Menu System"）。
• 在 Provider 內，建立一個 "Line Login" Channel：
  • App type: 選擇 Web。
  • Channel name: 為 Channel 命名（例如 "Product System Login"）。
  • Redirect URLs: 在這裡指定一個回調 URL（之後會在 Laravel 設定中用到）。

取得 Channel ID 和 Secret

• 建立完成後會在 Channel 詳情頁面看到 Channel ID 和 Channel Secret。
• 這些會在 Laravel Socialite 使用。

詳細步驟畫面可以參考此篇文章：LINE Login API 申請

這篇文章很清楚，菜雞仔如我，都能飛速完成申請！
接著明天就正式進入到 Line 第三方登入串接囉！