amp-recaptcha-input
簡介
<amp-recaptcha-input> 元件會將 reCAPTCHA v3 權杖附加到 AMP 表單提交中。amp-recaptcha-input 的運作方式是建立一個 iframe，以載入 reCAPTCHA v3 API 指令碼，並使用提供的網站金鑰呼叫 grecaptcha.execute，同時傳入提供的網站金鑰和動作。
設定
在使用 AMP 表單的 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 上編輯範例