amp-recaptcha-input
簡介
amp-recaptcha-input 元件會將 reCAPTCHA v3 代碼附加到 AMP 表單提交中。amp-recaptcha-input 的運作方式是建立一個 iframe，以載入使用提供的網站金鑰的 reCAPTCHA v3 API 指令碼，並使用提供的網站金鑰和動作呼叫 grecaptcha.execute。
設定
在使用 AMP Form 的 AMP 頁面上，匯入 amp-recaptcha-input 元件
<script async custom-element="amp-recaptcha-input" src="https://cdn.ampproject.org/v0/amp-recaptcha-input-0.1.js"></script>
基本用法
POST 表單請求，會回應已解析的 recaptcha 項目。請參閱參考文件，以取得對應 grecaptcha 呼叫的逐步說明。
<form id="amp-recaptcha-input-form" method="POST" action-xhr="https://amp.dev.org.tw/documentation/examples/components/amp-recaptcha-input/api/recaptcha" target="_top">
<fieldset>
<label>
<span>Search for</span>
<input type="search" name="term" required>
</label>
<input name="submit-button" type="submit" value="Search">
<amp-recaptcha-input layout="nodisplay" name="recaptcha_token" data-sitekey="6LfcQ7IUAAAAAIv1KcgqyExGK0v8dLJtvV_Q6xD-" data-action="recaptcha_example">
</amp-recaptcha-input>
</fieldset>
<div class="loading-message">Loading...</div>
<div submit-success>
<template type="amp-mustache">
<h1>You searched for: {{term}}</h1>
<div><b>Score:</b> {{score}}</div>
<div><b>Recaptcha token:</b> {{recaptcha_token}}</div>
<div><b>Action:</b> {{action}}</div>
</template>
</div>
<div submit-error>
<template type="amp-mustache">
<h1>Error! Please check the JS Console in your dev tools.</h1>
<p>{{message}}</p>
</template>
</div>
</form>
需要進一步說明嗎？
如果本頁面的說明未涵蓋您的所有問題，請隨時與其他 AMP 使用者聯繫，討論您的確切使用案例。
前往 Stack Overflow 未說明的特色功能？AMP 專案強烈鼓勵您的參與和貢獻！我們希望您能成為我們開放原始碼社群的持續參與者，同時我們也歡迎您針對您特別關注的問題提供一次性貢獻。
在 GitHub 上編輯範例