要展現 Hydra 的威力，最好的方法就是拿一個「既有」的登入系統來改造，同時也能在這個實驗過程中，了解到 Hydra 是如何順利的加進既有登入系統的。

現今大多框架都有提供快速搭建登入系統的懶人包，當然也包括筆者擅長的 Laravel。後續將會使用 PHP + Laravel 來實做這個範例。

若想了解更多與 Laravel 相關的內容，可以參考 Recca Chao 的 Laravel 9 漫遊，享受魔法般的極速網頁開發體驗 系列鐵人賽。

環境準備與建置專案

Laravel 使用 PHP 開發，因此要先安裝好 PHP。另外要準備依賴套件管理工具 Composer。

筆者是使用 Mac + Homebrew 安裝，執行指令如下：

# 安裝 PHP 與 Composer
❯ brew install php composer

# 確認 PHP 的版本為 8.1+
❯ php -v
PHP 8.1.10 (cli) (built: Sep  3 2022 12:09:27) (NTS)
Copyright (c) The PHP Group
Zend Engine v4.1.10, Copyright (c) Zend Technologies
    with Zend OPcache v8.1.10, Copyright (c), by Zend Technologies

# 確認 Composer 的版本 2.4+
❯ composer --version
Composer version 2.4.2 2022-09-14 16:11:15

接著建置 Laravel 專案，參考官方文件採用 Composer 安裝，執行下面的指令：

Laravel Sail 很方便，但筆者選擇使用 Composer 安裝

# 初始化 Laravel 專案，版本使用 v9.3.7
❯ composer create-project laravel/laravel ironman-2022-legacy-login
Creating a "laravel/laravel" project at "./ironman-2022-legacy-login"
Installing laravel/laravel (v9.3.7)

# 進入專案目錄裡，啟動服務
❯ cd ironman-2022-legacy-login
❯ php artisan serve

   INFO  Server running on [http://127.0.0.1:8000].

  Press Ctrl+C to stop the server

完成後，就能在 http://127.0.0.1:8000 看到 Laravel 預設的歡迎頁。到這邊為止，Laravel 原始碼與框架就初始化完成了。

因為登入系統會需要有地方保存使用者的帳號密碼，因此需要準備資料庫。這裡使用 Docker 建置，docker-compose.yml 的內容如下：

version: '3'

services:
  mysqld:
    image: mariadb:10
    ports:
      - 3306:3306
    volumes:
      - ./database/schema:/docker-entrypoint-initdb.d
    environment:
      MYSQL_ROOT_PASSWORD: secret

資料庫會開一個 port 為 3306，而本機的 database/schema 目錄會綁定到 container 的 /docker-entrypoint-initdb.d 目錄下，用途是在 container 啟動後，會自動把這裡面的 *.sql 拿出來執行，適合用在初始化資料表的情境。

本例是建一個名叫 laravel 的資料庫，準備放接下來的建置環境要用的資料表：

-- laravel.sql
CREATE DATABASE IF NOT EXISTS `laravel` DEFAULT CHARACTER SET utf8mb4 DEFAULT COLLATE utf8mb4_unicode_ci;

檔案一切就緒後，執行 Docker Compose 的指令即可啟動資料庫服務（加 -d 參數是背景執行）：

# 啟動服務
❯ docker-compose up

# 在背景啟動服務
❯ docker-compose up -d

# 關閉服務
❯ docker-compose down

# 關閉服務，並將資料清空
❯ docker-compose down -v

docker-compose.yml 有設定 MySQL 的 root 密碼，需要進框架的設定 .env 檔修改存取資料庫的密碼：

DB_PASSWORD=secret

完成之後，可以用下面的指令確認 DB 連線是正常：

# 第一次執行的時候，會詢問是否要安裝必要的套件
❯ php artisan db:show

  Inspecting database information requires the Doctrine DBAL (doctrine/dbal) package. Would you like to install it? (yes/no) [no]
❯ yes


# 第二次執行就能正常執行
❯ php artisan db:show

   ..............................................................
  Database .............................................. laravel
  Host ................................................ 127.0.0.1
  Port ..................................................... 3306
  Username ................................................. root
  URL ...........................................................
  Open Connections ............................................ 1
  Tables ...................................................... 5
  Total Size ............................................ 0.16MiB

  Table .............................................. Size (MiB)
  personal_access_tokens ................................... 0.05
  failed_jobs .............................................. 0.03
  password_resets .......................................... 0.03
  migrations ............................................... 0.02
  users .................................................... 0.03


# 失敗會有對應的錯誤訊息可以參考
❯ php artisan db:show

   PDOException

  SQLSTATE[HY000] [1045] Access denied for user 'root'@'172.16.100.1' (using password: NO)

到這邊為止，PHP、Laravel、MySQL 基本環境都建置完成了，接著就是要建置 Laravel 登入系統

安裝 Laravel Breeze

安裝很簡單，下幾個指令就能建立好初始模板：

# 安裝 Breeze 開發工具
❯ composer require laravel/breeze --dev

# 建立 Breeze 所提供的模版
❯ php artisan breeze:install

# 因為跟前端的關係，因此安裝前端相關的程式
❯ npm install && npm run build

# 執行資料庫 migration
❯ php artisan migrate

   INFO  Preparing database.

  Creating migration table ....................................... 8ms DONE

   INFO  Running migrations.

  2014_10_12_000000_create_users_table ........................... 8ms DONE
  2014_10_12_100000_create_password_resets_table ................. 8ms DONE
  2019_08_19_000000_create_failed_jobs_table ..................... 8ms DONE
  2019_12_14_000001_create_personal_access_tokens_table ......... 13ms DONE

測試登入登出

完成 Breeze 安裝後，php artisan serve 要先關掉再重啟，然後 Laravel 預設的歡迎頁「右上角」會多出登入和註冊的按鈕。先註冊帳號後才能登入，所以到 /register 註冊頁：

Breeze 預設的設計是註冊完就自動登入，登入完的畫面是 /dashboard：

接著先登出 /logout，再重新進 /login 登入頁執行登入 ：

以上是 Laravel Breeze 預設的內容展示，接下來會它做為「既有登入系統」，並串接 Hydra 所提供的 OpenID Connect 系統。

今天實作程式碼的部分可以參考 GitHub。