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 屬性的使用者。

只有在您登入且被歸類為「進階使用者」時，才能看到此區段。

<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" 開啟登入對話方塊。這只會開啟一個彈出式視窗，將使用者帶到頂部設定中定義的 URL。如果 amp-access 運算式評估為 TRUE，amp-access-hide 會預設將元件設為隱藏，然後再啟用

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

登出

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

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

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

需要進一步說明嗎？

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

前往 Stack Overflow

未說明的特色？

AMP 專案強烈鼓勵您的參與和貢獻！我們希望您能成為我們開放原始碼社群的長期參與者，但我們也歡迎您針對您特別感興趣的問題做出一次性的貢獻。

在 GitHub 上編輯範例

由 @andreban 撰寫

amp-access

簡介

設定

控制可見性

您好 {{email}}！

登入

登出