透過用於表單收集和驗證碼處理的開源後端服務，您可以實現具有垃圾郵件防護的聯絡表單，而無需為此開發自己的後端服務。這些後端服務也可以在開源雲端中使用，因此您也不必自己託管這些後端服務。
在這篇部落格中，我將描述如何快速取得聯絡表單，將訊息傳送到 Slack 頻道。
創建 Slack 機器人
Slack 機器人將把訊息發佈到 Slack 中的頻道。造訪 https://api.slack.com/apps/ 並建立一個具有發佈到所需 Slack 頻道權限的新應用程式。
儲存 Slack Bot 令牌，因為這將在本教學後面使用。
在開源雲端中建立表單後端服務
登入或註冊開源雲端帳戶。
導覽至聯絡表單服務並點選「服務機密」標籤。點擊“New Secret”並新增包含先前獲得的 Slack Bot 令牌的金鑰。
按「建立服務」按鈕建立聯絡表單服務。
為服務命名並在傳輸下拉清單中選擇 slack。提供持有令牌的服務金鑰並輸入應發佈訊息的頻道的 ID。
服務啟動並執行後，您可以將 URL 複製並儲存到聯絡表單服務。
React 中的聯絡表單範例
在前端應用程式中開發聯絡表單，在 React 中可能看起來像這樣。將 BACKEND-SERVICE-URL 替換為上面取得的 URL。
'use client';
import { Input, Textarea } from '@nextui-org/react';
export default function Page() {
const handleSubmit = (formData: any) => {
fetch(new URL('BACKEND-SERVICE-URL/contact'), {
method: 'POST',
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
},
body: new URLSearchParams(formData).toString()
});
};
return (
登入後複製
)
}
提交表單後，您現在應該會在 Slack 頻道中收到一則訊息。為了防止垃圾郵件機器人濫用此表單，我們需要新增驗證碼。 CAPTCHA 是一個縮寫詞，代表「完全自動化的公共圖靈測試來區分電腦和人類。」
為了提供此功能，我們將使用開源驗證碼後端服務來產生和驗證驗證碼。其工作原理是產生顯示文字的驗證碼圖像。然後，您要求使用者（人類）提供他或她看到的文本，後端將驗證這是否是圖像中顯示的文字。
在開源雲端建立驗證碼後端服務
導覽至驗證碼服務並點選「建立服務」按鈕。
為服務命名，服務啟動後將 URL 複製到該服務。將下面的 CAPTCHA-SVC-URL 替換為此 URL。
將 CAPTCHA 驗證新增至您的表單中
使用以下程式碼擴充我們上面建立的表單。
<p>'use client';<br>
import { Input, Textarea } from '@nextui-org/react'; </p>
<p>export default function Page() {<br>
const [captchaSvg, set開源雲端中的聯絡表單和驗證碼後端Svg] = useState<string null>(null);<br>
const [captchaId, set開源雲端中的聯絡表單和驗證碼後端Id] = useState('');<br>
const [captcha, set開源雲端中的聯絡表單和驗證碼後端] = useState('');<br>
const [invalid開源雲端中的聯絡表單和驗證碼後端, setInvalid開源雲端中的聯絡表單和驗證碼後端] = useState(true);</string></p>
<p>useEffect(() => {<br>
fetch(new URL('/captcha', 'CAPTCHA-SVC-URL'))<br>
.then((response) => response.json())<br>
.then((data) => {<br>
set開源雲端中的聯絡表單和驗證碼後端Svg(data.svg);<br>
set開源雲端中的聯絡表單和驗證碼後端Id(data.id);<br>
});<br>
}, []);</p>
<p>const on開源雲端中的聯絡表單和驗證碼後端Change = (value: string) => {<br>
set開源雲端中的聯絡表單和驗證碼後端(value);<br>
fetch(new URL('CAPTCHA-SVC-URL/verify/' + captchaId + '/' + value))<br>
.then((response) => {<br>
setInvalid開源雲端中的聯絡表單和驗證碼後端(!response.ok);<br>
})<br>
.catch(() => {<br>
setInvalid開源雲端中的聯絡表單和驗證碼後端(true);<br>
});<br>
};</p>
<p>const handleSubmit = (formData: any) => {<br>
fetch(new URL('BACKEND-SERVICE-URL/contact'), {<br>
method: 'POST',<br>
headers: {<br>
'Content-Type': 'application/x-www-form-urlencoded'<br>
},<br>
body: new URLSearchParams(formData).toString()<br>
});<br>
};</p>
<p>return (<br>
</p>登入後複製
)
}
結論
這是一個範例，說明如何在 Web 應用程式中新增具有 CAPTCHA 驗證的聯絡表單，並將其發佈到 Slack 頻道，而無需為其建立或託管自己的後端服務。
什麼是開源雲端？
開源雲端減少了開始使用開源的障礙，並減少了創建者將其軟體作為服務提供的障礙。在這篇文章中詳細了解我們開發它的原因。
以上是開源雲端中的聯絡表單和驗證碼後端的詳細內容。更多資訊請關注PHP中文網其他相關文章！
