amp-access

簡介

amp-access 元件新增了對身分驗證和授權的支援，讓您能夠限制對 AMP 網頁部分內容的存取權，以及為已登入的使用者顯示自訂內容。此外，也支援實作瀏覽次數計算、付費牆和訂閱功能。如需範例 amp-access 伺服器端點，請參閱 amp-publisher-sample 專案。

設定

在頁首匯入 amp-access 元件。

<script async custom-element="amp-access" src="https://cdn.ampproject.org/v0/amp-access-0.1.js"></script>

amp-access 也需要匯入 amp-analytics。

<script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>

您可以選擇使用 amp-mustache 元件來顯示文字，並將授權回應中的值取代進文字中

<script async custom-template="amp-mustache" src="https://cdn.ampproject.org/v0/amp-mustache-0.2.js"></script>

新增 authorization 和 login 端點的設定。我們提供兩個登入端點，一個用於登入，另一個用於登出。您也可以建立備用回應，以便在授權失敗時使用 authorizationFallbackResponse 屬性。

當使用者檢視文件時，系統會呼叫回傳端點，可用於更新計量資訊。此範例中未使用此功能。

<script id="amp-access" type="application/json">
  {
      "authorization": "/documentation/examples/api/amp-access/authorization?rid=READER_ID&url=CANONICAL_URL&ref=DOCUMENT_REFERRER&_=RANDOM",
      "pingback": "/documentation/examples/api/amp-access/pingback?rid=READER_ID&url=CANONICAL_URL&ref=DOCUMENT_REFERRER&_=RANDOM",
      "login": {
        "sign-in": "/documentation/examples/api/amp-access/login?rid=READER_ID&url=CANONICAL_URL",
        "sign-out": "/documentation/examples/api/amp-access/logout"
      },
      "authorizationFallbackResponse": {
          "error": true,
          "loggedIn": false,
          "powerUser": false
      }
  }
</script>

控制可見度

所有使用者都可看見這個區段。這種情況下不需要特殊的標記。

歡迎來到網站！所有人都可看見這個區段。

<section>
  Welcome to the website! This section is visible to all.
</section>

使用 amp-access 屬性來控制每個元件的可見度。運算式必須評估為布林值。如果評估結果為 TRUE，就會顯示這個區段。

我們使用伺服器回應中的 loggedIn 屬性來判斷使用者是否已登入。

只有在您登入後才能看見這個區段。歡迎回來！

<section amp-access="loggedIn">
  This section is only visible if you're logged in. Welcome back!
</section>

伺服器的回應可用於傳達關於已登入使用者的更多資訊。在這個範例中，我們會區分已登入且設定了 powerUser 屬性的使用者。

只有在您登入且分類為「power user」後才能看見這個區段。

<section amp-access="loggedIn AND powerUser">
  This section is only visible if you're logged in <em>and</em> classified as "power user".
</section>

如果 loggedIn 屬性的預設值為 false，我們可以假設使用者尚未登入。

只有在您未登入時才能看見這個區段。

<section amp-access="NOT loggedIn">
  This section is only visible if you're not logged in.
</section>

結合 amp-access 和 amp-mustache 即可顯示從授權要求傳回的資訊。在這個範例中，我們會顯示驗證回應中傳回的電子郵件。

<section amp-access="loggedIn">
  <template amp-access-template type="amp-mustache">
    <h3>Hello {{email}}!</h3>

    {{#powerUser}}
    <p>You are a power user.</p>
    {{/powerUser}}
  </template>
</section>

當點擊元素時，使用 on="tap:amp-access.login-sign-in" 開啟登入對話方塊。這只會開啟一個彈出式視窗，將使用者帶到頂端設定中定義的網址。如果 amp-access 運算式評估為 TRUE，amp-access-hide 會預設元件為隱藏，稍後再啟用。

<button amp-access="NOT loggedIn" amp-access-hide on="tap:amp-access.login-sign-in">
  Login
</button>

登出

登出連結應僅針對已登入的訂閱者顯示。我們在這裡使用了一個技巧：登出是一種登入動作，會直接重新導向回原始網址。這樣做的好處是頁面會在不重新載入的情況下更新。

<button amp-access="loggedIn" amp-access-hide on="tap:amp-access.login-sign-out">
  Logout
</button>

請查看官方 amp-access 範例，以觀看「首次點擊免費」和瀏覽次數計算的示範。

需要進一步說明嗎？

如果這個頁面上的說明沒有涵蓋您的所有問題，請隨時與其他 AMP 使用者聯絡，討論您的確切使用案例。

前往 Stack Overflow

未說明的特色功能？

AMP 專案大力鼓勵您的參與和貢獻！我們希望您能成為我們開放原始碼社群的長期參與者，但我們也歡迎您針對您特別關注的問題提供一次性的貢獻。

在 GitHub 上編輯範例

作者： @andreban