登入
當您第一次進入此頁面時,您會看到 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" } }
sign-in
,稍後我們將定義 sign-out
。登入頁面是一個非 AMP 頁面,為了簡化,我們在其中填入了登入名稱和密碼值。請注意 returnURL
隱藏輸入類型的用法,該類型由 AMPByExample 伺服器透過伺服器端範本填入。伺服器會從名為 return
的參數中讀取此值,該參數由 AMP 函式庫自動新增至登入 URL。
在以下範例中,當您按一下登入按鈕時,return
參數的值會新增至要求中。您可以使用 Chrome DevTools 主控台並導覽至「網路」分頁來探索此值。
一旦 AMPByExample 伺服器收到來自登入頁面的 POST 要求,並且登入名稱和密碼正確,它就會將要求重新導向至我們上面提到的 returnURL
,並附加 #success=true
參數。AMP 執行階段現在可以授權頁面,並最終允許您新增留言。
務必了解 AMP 執行階段的作用以及伺服器應執行的操作,因為伺服器的實作是頁面發布者的責任。
快速回顧
- AMP 執行階段會自動將 return 參數新增至登入 JSON 物件內指定的登入要求
- AMP 執行階段會關閉登入頁面並重新導向至 return URL 參數指定的頁面
- 伺服器應在使用者點擊登入按鈕後協調回應
amp-access
`。