AMP

登入

當您第一次進入頁面時,您可以看到 2 則留言和一個登入按鈕。

如果您在程式碼中尋找登入按鈕,您會找到

<span amp-access="NOT loggedIn" role="button" tabindex="0" amp-access-hide>
  <h5>Please login to comment</h5>
  <button on="tap:amp-access.login-sign-in" class="button-primary comment-button">Login</button>
</span>

amp-access 相關屬性的行為取決於 amp-access 的頁面範圍設定,在我們的案例中,是這個設定

<script id="amp-access" type="application/json">
  {
    "authorization": "https://ampbyexample.com/samples_templates/comment_section/authorization?rid=READER_ID&url=CANONICAL_URL&ref=DOCUMENT_REFERRER&_=RANDOM",
    "noPingback": "true",
    "login": {
      "sign-in": "https://ampbyexample.com/samples_templates/comment_section/login?rid=READER_ID&url=CANONICAL_URL",
      "sign-out": "https://ampbyexample.com/samples_templates/comment_section/logout"
    },
    "authorizationFallbackResponse": {
      "error": true,
      "loggedIn": false
    }
  }
</script>

授權端點部署為 AMPByExample 的一部分。頁面發布者的責任是提供此端點。在此範例中,為了簡化起見,我們實作了基本邏輯,以便在收到此請求時,伺服器會讀取名為 ABE_LOGGED_IN 的 Cookie 值。如果 Cookie 不存在,我們會傳回包含 loggedIn = false 的 JSON 回應。因此,當使用者第一次進入頁面時,此請求將傳回 loggedIn = false,並且會顯示登入按鈕。

再次查看按鈕的 HTML 程式碼,透過使用 on="tap:amp-access.login-sign-in",我們指定一旦使用者點擊按鈕,應該使用上方 JSON 中指定的 URL

{
    "login": {
    "sign-in": "https://ampbyexample.com/samples_templates/comment_section/login?rid=READER_ID&url=CANONICAL_URL"
  }
}

注意 – 請注意,可以在登入節點內定義不同的 URL,在此案例中,我們定義了 sign-in,我們稍後會定義 sign-out

登入頁面是非 AMP 頁面,我們在其中填入登入和密碼值,為了簡化起見。請注意 returnURL 隱藏輸入類型的使用,此類型由 AMPByExample 伺服器透過伺服器端範本填入。伺服器從名為 return 的參數讀取此值,此參數由 AMP 函式庫自動新增至登入 URL。

在以下範例中,當您點擊登入按鈕時,return 參數的值會新增至請求。您可以使用 Chrome 開發人員工具主控台並導覽至「網路」分頁來探索此值。

一旦 AMPByExample 伺服器收到來自登入頁面的 POST 請求,且登入和密碼正確時,它會將請求重新導向至我們在上面提到的 returnURL,並附加 #success=true 參數。AMP 執行階段現在可以授權頁面,並最終允許您新增留言。

重要的是要了解 AMP 執行階段的作用,以及伺服器應該做什麼,因為伺服器的實作是頁面發布者的責任。

快速回顧

  • AMP 執行階段會自動將 return 參數新增至登入 JSON 物件內指定的登入請求
  • AMP 執行階段會關閉登入頁面並重新導向至 return URL 參數指定的頁面
  • 伺服器應協調回應,一旦使用者點擊登入按鈕

提示 – 關於此流程的更詳細說明,也可以在 amp-access 中找到。