~/blog/laravel-line-login-api-integration-guide.md
API 串接與系統整合 · 2025 / 09 / 15 · 9 views

LINE Login x Laravel 串接實戰:用一鍵登入取代落落長的註冊表單

Eric — 浪花科技創辦人 / AI 架構師
Eric
浪花科技創辦人 · AI 架構師
LINE Login x Laravel 串接實戰:用一鍵登入取代落落長的註冊表單
目錄 table-of-contents.md

註冊表單每多一個欄位,就有一批使用者直接關掉分頁——何必還逼人想一組大小寫加特殊符號的密碼?在台灣,幾乎人人手機裡都有 LINE,一顆綠色按鈕就能把整段註冊流程壓縮成一次點擊。這篇用 Laravel 實戰串接 LINE Login,把落落長的表單換成絲滑的一鍵登入。

在台灣,LINE 幾乎是人手必備的通訊軟體。這意味著一個巨大的機會:利用 LINE Login API,我們可以讓使用者「一鍵」完成註冊與登入。這不僅是使用者體驗的巨大飛躍,對我們開發者來說,也能省下處理密碼、驗證信等一堆鳥事的力氣。今天,我就要以一個老工程師的視角,手把手帶你走一遍「Laravel 與 LINE Login API 串接」的完整流程,從觀念釐清到程式碼實作,保證你看完就能動手做!

為什麼你的網站需要 LINE Login?不只是少填幾個欄位而已

在我們一頭栽進程式碼之前,先花點時間思考一下「為什麼」。很多時候,我們工程師會為了技術而技術,卻忘了背後的商業價值和使用者價值。導入 LINE Login 的好處,遠遠不只是方便而已:

  • 降低註冊門檻,提升轉換率:這是最直接的好處。點一下按鈕,授權,完成。整個過程不到 10 秒。相較於傳統註冊,使用者完成註冊的意願會大幅提升。
  • 取得更高品質的用戶資料:透過 LINE Login,我們可以(在使用者同意下)取得他們的顯示名稱、頭像,甚至是經過驗證的 Email。這比讓使用者自己填寫的資料來得更真實,也省去了發送驗證信的步驟。
  • 無密碼登入,提升安全性:使用者不用再為你的網站多記一組密碼,也就減少了密碼被盜用或在不同網站間共用的風險。對我們來說,也少了一份儲存與保護使用者密碼的責任。
  • 打通後續行銷渠道:一旦使用者透過 LINE 登入,你就取得了他們的 LINE User ID。這為未來整合 LINE Messaging API,打造個人化推播、客服機器人等應用鋪好了康莊大道。這才是真正的「會員生態系」思維!

所以,別再把 LINE Login 當成一個小小的登入功能了。它是一個策略性的工具,能優化你的使用者獲取流程,並為未來的行銷自動化打下堅實的基礎。

深入淺出:搞懂 LINE Login 背後的 OAuth 2.0 授權流程

好了,價值面講完了,該來點硬核的了。所有第三方登入的核心,幾乎都是基於一個名為「OAuth 2.0」的授權框架。聽起來很嚇人?別怕,我用大白話跟你解釋一下。你可以把它想像成一個安全的「授權委託」流程。

講真的,OAuth 2.0 的規格書第一次看誰都頭痛,但它的核心思想很簡單:在不洩漏使用者原始帳號密碼(例如 LINE 的密碼)的前提下,讓第三方應用(也就是你的網站)能夠安全地取得使用者在服務提供商(也就是 LINE)上的部分資料或操作權限。

整個流程就像這樣:

  • 1. 使用者請求:使用者在你的 Laravel 網站上點擊「使用 LINE 登入」。
  • 2. 應用程式導向授權:你的網站會把使用者「導向」到 LINE 的登入授權頁面,並附上一些資訊,告訴 LINE:「嘿,我是某某網站,這位使用者想登入,請你幫我確認一下,我需要他的基本資料。」
  • 3. 使用者授權:使用者在 LINE 的頁面上輸入帳號密碼(這個過程完全在 LINE 的網域下,你的網站碰不到密碼),並同意將他的個人資料授權給你的網站。
  • 4. LINE 回傳授權碼:授權成功後,LINE 會把使用者「導回」到你先前設定好的回呼 URL (Callback URL),並附上一組短暫有效的「授權碼 (Authorization Code)」。
  • 5. 後端交換權杖:你的 Laravel 後端收到這組授權碼後,會在背後偷偷地跟 LINE 的伺服器進行第二次溝通,用這組授權碼,再加上你的應用程式金鑰 (Channel Secret),去換取一組真正有用的「存取權杖 (Access Token)」。這個步驟在後端進行,所以非常安全。
  • 6. 取得使用者資料:有了這組 Access Token,你的後端就像拿到了一把臨時鑰匙,可以用它去敲 LINE 的 API 大門,說:「我是某某網站,這是我的鑰匙,請把剛剛那位使用者的個人資料給我。」
  • 7. 完成登入/註冊:拿到使用者資料後,你就可以在自己的資料庫裡建立新帳號或比對現有帳號,完成登入流程,然後把使用者導向會員中心。大功告成!

實戰開始:從零到一串接 Laravel 與 LINE Login

理論講完了,我們來動手吧!假設你已經有一個基本的 Laravel 專案。如果沒有,請先透過 Composer 建立一個。

Step 1:一切的起點 - 註冊 LINE Developers 帳號與建立 Provider/Channel

這是所有串接的第一步,也是最容易被忽略的一步。你必須先到 LINE Developers Console 註冊一個開發者帳號。

  • 登入後,先建立一個「Provider」,你可以把它想像成是你公司或團隊的名稱。
  • 在 Provider 內,選擇「Create a new channel」,然後選擇「LINE Login」。
  • 填寫你的應用程式名稱、描述等資訊。最重要的部分是「App types」,請務必勾選「Web app」。
  • 建立 Channel 後,進到「LINE Login settings」分頁,最關鍵的設定來了:Callback URL。這裡要填上我們 Laravel 應用程式接收 LINE 回呼的完整網址。例如:https://yourdomain.com/auth/line/callback。先記下這個路徑,我們等下會在 Laravel 裡建立它。
  • 最後,在「Basic settings」分頁,你會找到最重要的兩組金鑰:Channel IDChannel secret。這就像是你應用程式的帳號密碼,絕對不能外洩!把它們複製下來,我們馬上會用到。

Step 2:安裝與設定 Laravel 的社群登入神器

Laravel 生態系最棒的地方就是有強大的社群支援。雖然 Laravel 官方的社群登入套件 `Laravel Socialite` 沒有內建支援 LINE,但 `Socialite Providers` 這個專案完美地補足了這一點。我們來安裝它。

打開你的終端機,在專案根目錄下執行:

composer require socialiteproviders/line

安裝完成後,需要告訴 Laravel 如何使用這個新的 Provider。打開 app/Providers/EventServiceProvider.php,在 $listen 陣列中加入事件監聽器:

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

接下來,設定我們的 Channel ID 和 Channel Secret。打開 config/services.php,在陣列中加入 line 的設定:

'line' => [
    'client_id' => env('LINE_CLIENT_ID'),
    'client_secret' => env('LINE_CLIENT_SECRET'),
    'redirect' => env('LINE_REDIRECT_URI'),
],

最後,也是最重要的一步,就是把你的金鑰加到 .env 環境變數檔案中。我囉嗦一下,千萬、絕對、不要把金鑰直接寫在程式碼或 commit 到 Git 裡面!這是資訊安全的 ABC。

LINE_CLIENT_ID=你的Channel_ID
LINE_CLIENT_SECRET=你的Channel_secret
LINE_REDIRECT_URI=https://yourdomain.com/auth/line/callback

Step 3:建立路由 - 導向授權與接收回呼

我們需要兩條路由。一條是使用者點擊登入按鈕後,將他們導向 LINE 的路由;另一條則是我們在 LINE Developer Console 設定的 Callback URL,用來接收 LINE 的回呼。

打開 routes/web.php,加入以下路由:

use App\Http\Controllers\Auth\LineLoginController;

Route::get('auth/line', [LineLoginController::class, 'redirectToLine'])->name('auth.line');
Route::get('auth/line/callback', [LineLoginController::class, 'handleLineCallback']);

Step 4:打造 Controller - 處理登入邏輯的核心

這是整個流程的大腦。我們來建立一個新的 Controller 來處理所有邏輯。

php artisan make:controller Auth/LineLoginController

然後打開剛剛建立的 app/Http/Controllers/Auth/LineLoginController.php,填入以下程式碼:

<?php

namespace App\Http\Controllers\Auth;

use App\Http\Controllers\Controller;
use App\Models\User;
use Illuminate\Support\Facades\Auth;
use Illuminate\Support\Facades\Hash;
use Laravel\Socialite\Facades\Socialite;
use Exception;

class LineLoginController extends Controller
{
    /**
     * 將使用者導向 LINE 的授權頁面
     *
     * @return \Illuminate\Http\Response
     */
    public function redirectToLine()
    {
        return Socialite::driver('line')->redirect();
    }

    /**
     * 從 LINE 取得使用者資訊
     *
     * @return \Illuminate\Http\Response
     */
    public function handleLineCallback()
    {
        try {
            $lineUser = Socialite::driver('line')->user();

            // 尋找或建立使用者
            $user = User::updateOrCreate([
                'line_id' => $lineUser->getId(),
            ], [
                'name' => $lineUser->getName(),
                'email' => $lineUser->getEmail(),
                'line_avatar' => $lineUser->getAvatar(),
                // 如果你的 User model 需要密碼,可以給一個隨機的或固定的預設值
                // 因為他們是透過 LINE 登入,不會用到這個密碼
                'password' => Hash::make(uniqid()),
            ]);

            // 登入使用者
            Auth::login($user);

            // 導向到你希望使用者登入後前往的頁面
            return redirect('/home');

        } catch (Exception $e) {
            // 發生錯誤,可以導向回登入頁面並顯示錯誤訊息
            // 建議要記錄 log,方便追蹤問題
            report($e);
            return redirect('/login')->with('error', 'LINE 登入失敗,請稍後再試。');
        }
    }
}

這段程式碼做了幾件事:

  1. redirectToLine():非常單純,就是呼叫 Socialite 的 redirect() 方法,它會自動產生正確的 LINE 授權網址並將使用者導向過去。
  2. handleLineCallback():這是核心。
    • 它首先用 Socialite::driver('line')->user() 來處理回呼,這一步 Socialite 會自動幫我們完成前面提到的「交換權杖」並「取得使用者資料」的流程。
    • 接著,我們使用 Laravel Eloquent 的 updateOrCreate 這個超方便的方法。它會先試著用 line_id 去資料庫的 users 表裡找,如果找到了,就更新該筆資料;如果找不到,就建立一筆新的。這完美地處理了「註冊」和「登入」兩種情境。(別忘了先在 users table migration 裡加上 line_idline_avatar 這些欄位喔!)
    • 找到或建立使用者後,呼叫 Auth::login($user) 來讓使用者登入我們的系統。
    • 最後,將使用者導向會員後台。整個過程絲滑流暢!

進階考量與安全性 - 工程師的囉嗦時間

程式能跑不代表就沒事了。身為一個資深(愛囉嗦)的工程師,有幾點我必須提醒你:

State 參數的重要性:防止 CSRF 攻擊的護身符

你可能會在 OAuth 2.0 的文件中看到一個叫 `state` 的參數。它的作用是防止「跨站請求偽造 (CSRF)」攻擊。簡單來說,就是確保從 LINE 回來的使用者,真的是從我們網站出去的那一位。好消息是,Laravel Socialite 已經自動幫我們處理了這件事,它會在導向時產生一個獨一無二的 `state` 值存放在 session,並在回呼時進行比對。你唯一要做的事就是:不要手動關掉它!

處理使用者拒絕授權的優雅之道

天有不測風雲,使用者也可能在 LINE 的授權頁面按下「取消」。這時候,LINE 會將使用者導回你的 Callback URL,但會附上錯誤訊息的參數,例如 error=access_denied。預設情況下,Socialite 偵測到錯誤會拋出一個 Exception。我們上面的 `try-catch` 區塊就能捕捉到這個例外,並優雅地將使用者導回登入頁,而不是讓他們看到一個醜陋的錯誤畫面。

到這裡,你已經掌握了 Laravel 串接 LINE Login 的所有核心技術。從使用者體驗到後端邏輯,再到安全性考量,我們都走了一遍。這不僅僅是完成一個功能,更是為你的網站打造了一個更友善、更現代化的入口。快動手把這個強大的功能加到你的專案裡吧!


延伸閱讀

需要更深入的客製化 API 串接服務嗎?

看完了這篇文章,你是否對 API 串接充滿了想像,但又覺得實作細節繁瑣、坑洞太多?無論是串接金流、物流、CRM 系統,或是打造複雜的自動化流程,都需要深厚的技術底蘊和實戰經驗。

在浪花科技,我們專注於提供企業級的 WordPress 與 Laravel 解決方案,API 串接正是我們的核心強項。我們不只幫你「接起來」,更會從架構、安全性、效能等多個角度,為你打造穩定可靠的數位橋樑。

如果你正在尋找一個專業、可靠的技術夥伴,歡迎點擊這裡,填寫表單與我們聯繫。讓我們一起聊聊,如何透過技術為你的事業創造更多可能!

// FAQ

常見問題

Laravel 要怎麼串接 LINE Login?
Laravel 官方的 Socialite 沒有內建 LINE,但可透過 socialiteproviders/line 套件補上。安裝後在 EventServiceProvider 註冊 SocialiteProviders\Line\LineExtendSocialite 監聽器,於 config/services.php 加入 line 設定,再建立導向授權與接收回呼兩條路由即可。
LINE Login 的 Channel ID 和 Channel Secret 要去哪裡取得?
需先到 LINE Developers Console 註冊開發者帳號,建立一個 Provider,再於其中建立 LINE Login 類型的 Channel 並勾選 Web app。建立後在該 Channel 的 Basic settings 分頁即可找到 Channel ID 與 Channel secret 兩組金鑰。
LINE Login 背後的 OAuth 2.0 授權流程是怎麼運作的?
使用者點擊登入後會被導向 LINE 的授權頁面輸入帳密並同意授權,整個輸入密碼的過程都在 LINE 網域下進行,你的網站碰不到密碼。授權成功後 LINE 把使用者導回你設定的 Callback URL 並附上授權碼,後端再用授權碼加上 Channel Secret 向 LINE 換取 Access Token,最後用 Token 取得使用者資料完成登入或註冊。
LINE Login 的 Channel Secret 金鑰應該放在哪裡才安全?
金鑰應放在 .env 環境變數檔案中,例如 LINE_CLIENT_ID、LINE_CLIENT_SECRET、LINE_REDIRECT_URI,再透過 config/services.php 的 env() 讀取。絕對不要把金鑰直接寫在程式碼裡或 commit 到 Git,這是基本的資訊安全原則。
用 LINE Login 取代傳統註冊有什麼好處?
可大幅降低註冊門檻,使用者點一下授權即可在數秒內完成註冊,提升轉換率。同時能在使用者同意下取得已驗證的顯示名稱、頭像與 Email,省去發驗證信的步驟,並因為無密碼登入而減少密碼外洩風險,還能取得 LINE User ID 作為後續整合 Messaging API 的基礎。
~/roamer-tech/newsletter // FREE
// newsletter

訂閱免費電子報

把 AI 自動化、企業系統設計與 WordPress / Laravel 開發的真實案例和可直接照做的技巧,整理成電子報寄給你。只寄精選內容、不灌垃圾信,一鍵就能退訂。

$
// final.exec()

準備好讓你的網站開始為你工作了嗎?