伺服器端使用者同意流程
簡介
有時基於需要在多個平台之間同步使用者同意聲明，仰賴外部伺服器來處理同意聲明是必要的。此範例示範如何使用 amp-consent 來達成此目的。在此範例中，我們將建構一個同意聲明對話方塊，該對話方塊僅會根據外部伺服器的同意聲明狀態顯示。
設定
我們需要匯入 amp-consent 擴充功能...
<script async custom-element="amp-consent" src="https://cdn.ampproject.org/v0/amp-consent-0.1.js"></script>
定義同意流程
我們定義一個基本的伺服器端同意流程，類似於此範例。僅當伺服器回應 consentRequired 為 true，且此使用者沒有 consentStateValue 或 consentString 時，才應觸發此流程。
當使用者進入 AMP 頁面時，amp-consent 將檢查 localStorage 中是否有現有的同意聲明狀態。如果存在同意聲明狀態，它將解除封鎖所有元件。否則，它將等待來自 checkConsentHref 的回應（因為 consentRequired 設定為 'remote'），以判斷是否需要同意聲明/是否存在現有的同意聲明狀態。如果存在現有的同意聲明狀態，amp-consent 將使用該值並解除封鎖。否則，它將顯示 promptUi。
對於可以管理自身同意聲明（透過外部頁面）的網站，建議的設計是回應以下回應
{ "consentRequired": true, "consentStateValue": "accepted"/"rejected"/"unknown", "consentString": "example-string" }
如果您需要更新同意聲明以進行同步，請在您的回應中使用
expireCache: true 來清除 localStorage 同意聲明決定。此外，當使用者直接在頁面上管理其同意聲明時，可以使用 onUpdateHref。<amp-consent id="myUserConsent" layout="nodisplay">
<script type="application/json">{
"consentInstanceId": "server-side-consent",
"consentRequired": "remote",
"checkConsentHref": "https://amp.dev.org.tw/documentation/examples/api/get-consent-server-side",
"promptUI": "myConsentFlow"
}</script>
<div id="myConsentFlow" class="popupOverlay">
<div class="consentPopup">
<div class="dismiss-button" role="button" tabindex="0" on="tap:myUserConsent.dismiss">X</div>
<h2>Headline</h2>
<p>If the server says you have not made a consent decision, we require you to make a choice.</p>
<button on="tap:myUserConsent.accept">Accept</button>
<button on="tap:myUserConsent.reject">Reject</button>
</div>
</div>
<div id="post-consent-ui">
<button on="tap:myUserConsent.prompt()">Update Consent</button>
</div>
</amp-consent>
需要更多說明嗎？
如果此頁面上的說明未能涵蓋您的所有問題，請隨時與其他 AMP 使用者聯繫，討論您的確切使用案例。
前往 Stack Overflow 功能未說明？AMP 專案強烈鼓勵您的參與和貢獻！我們希望您能成為我們開放原始碼社群的長期參與者，但我們也歡迎針對您特別關注的問題做出一次性貢獻。
在 GitHub 上編輯範例