使用 Vue 3 實作 Google reCAPTCHA(v2)

前言

近期因為工作需求和電子商務相關，所以來做個範例。

開發功能之前不免俗要來吐槽一下，
研究顯示，網頁機器人解 CAPTCHA 能力優於人類
本來 reCaptcha 是要擋機器人的，但最後都是拿來為難人類自己。

ASP.NET Core 8 Minimal API 搭配 Vue

前言

本篇文章是基於建立一個本地端的應用程式的情境，
用 Minimal API 搭配 Vue 可以輕鬆建構類單機應用，
透過設定把靜態檔案嵌入並發佈單一檔案，
就可以讓前端工程師專注在畫面的設計，
算是個不錯的解決方案。

ASP.NET Core 6 Web API Swagger

前言

一份好的 API 文件應該要有明確充足的說明，
不過在台灣一條龍開發的文化行之有年，要完善文件說明相對不容易。

工程師討厭的事情：「討厭別人不寫文件，討厭自己要寫文件」。

所以透過好用的工具配合程式註解產出文件可以有效降低大家的痛苦。

ASP.NET Core 6 自訂路由格式

前言

本文說明如何設定 API 的網址大小寫，
雖說網址大小寫對 SEO 基本沒影響，只要格式一致均可。
不過如果有不喜歡大駝峰的命名規則有兩種做法

• 在屬性路由或路由表手動命名，
• 透過選項調整路由命名的規則。

本文將透過更改選項的方式來設定路由規則。

WebAPI

基於 ASP.NET Core 6 開發的 Web API

加入 跨來源資源共用（CORS）

讀取 appsettings.json 實作 跨來源資源共用

	// 讀取允許列表
	string[] corsOrigins = appsettings.GetSection("CORS:AllowOrigins").Get<string[]>();

	// 加入具有預設原則的 CORS 和中介軟體
	builder.Services.AddCors(options =>
	{
		options.AddDefaultPolicy(
			policy =>
			{
				if (corsOrigins.Contains("localhost"))
				{
					policy.SetIsOriginAllowed(origin => new Uri(origin).Host == "localhost");
				}
				else
				{
					policy.WithOrigins(corsOrigins);
				}
				policy.AllowAnyHeader();
				policy.AllowAnyMethod();
				policy.AllowCredentials();
			});
	});

作業系統安裝

[[install_ubuntu_22.04]]

開發環境安裝

盡量照順序做

[ 安裝 網頁伺服器 Nginx ]

sudo apt update
sudo apt install nginx

[ 安裝 .NET 6 SDK ]

sudo apt-get update
sudo apt-get install -y dotnet-sdk-6.0

透過 Kestrel 啟動專案服務

前言

使用 Swagger 讓 API 開發有文件化與測試功能
本教學為記錄建置專案過程作為未來再次建置的參考

建置 Laravel 專案

本次建置的框架版本為 Laravel 10，PHP 版本為 8.1

安裝 PHP

[[install_ubuntu_php_8]]

安裝 Composer

[[install_ubuntu_composer]]

安裝 Laravel 安裝器

composer global require laravel/installer