Google AMP amp-access用法及代碼示例

有時，作為設計師，您想取悅用戶，為此，您決定向高級用戶提供高級內容，但要使其與眾不同可能是一項艱巨的挑戰。 amp-access標簽是專門為這樣做而設計的。它可以為logged-in用戶，高級會員和未登錄用戶設置控件。通過使用此標記，可以將對身份驗證和授權的支持添加到web-pages。

設置：

首先，將amp-access組件與amp-analytics一起導入。

HTML

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

現在，要添加登錄頁麵和注銷頁麵信息，請使用以下代碼。您必須提供登錄點，一個用於登錄，另一個用於唱歌。

HTML

<script id="amp-access" type="application/json">
 {
     "authorization":"geeksforgeeks.org",
     "pingback":"geeksforgeeks.org",
     "login":{
       "sign-in":"geeksforgeeks.org",
       "sign-out":"geeksforgeeks.org"
     },
     "authorizationFallbackResponse":{
         "error":true,
         "loggedIn":false,
         "powerUser":false
     }
 }
</script>

您必須使用上麵代碼中提到的相同ID，並且可以根據需要更改URL。

控製可見性：用戶隻能看到該用戶應具有的作用，這一點非常重要，即，如果該用戶是高級會員，則該用戶應獲得高級特權；如果未登錄，則應向其顯示log-in選項，等等。因此，請使用以下代碼：

顯示對網站的所有訪問者可見的部分。

HTML

<section>
    Welcome to GeeksForGeeks!
</section>

要顯示logged-in用戶的內容，我們將使用amp-access屬性並控製部門的可見性。

HTML

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

現在，如果用戶既是高級會員又登錄，那麽他的代碼如下：

HTML

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

如果用戶已注銷，那麽應該顯示一條正確的消息，因此：

HTML

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

Log-in和Log-out按鈕：登錄按鈕用於使用某些憑據將log-in傳送到門戶，登錄後，您可以看到logged-in的內容。對於登錄按鈕，請使用以下代碼：

HTML

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

另一方麵，注銷可以使您退出係統。要添加注銷按鈕，請使用以下代碼：

HTML

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

例：

HTML

<!doctype html>
<html amp>
 
<head>
    <meta charset="utf-8">
    <title>Google AMP amp-access</title>
 
    <script async src=
        "https://cdn.ampproject.org/v0.js">
    </script>
 
    <!-- Import the `amp-access` component 
        in the header. -->
    <script async custom-element="amp-access"
src="https://cdn.ampproject.org/v0/amp-access-0.1.js">
    </script>
 
    <!-- `amp-access` requires `amp-analytics` 
        to be imported as well. -->
    <script async custom-element="amp-analytics"
src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js">
    </script>
 
    <script async custom-template="amp-mustache"
src="https://cdn.ampproject.org/v0/amp-mustache-0.2.js">
    </script>
 
    <script id="amp-access" type="application/json">
    {
        "authorization":"geeksforgeeks.org",
        "pingback":"geeksforgeeks.org",
        "login":{
            "sign-in":"geeksforgeeks.org",
            "sign-out":"geeksforgeeks.org"
        },
        "authorizationFallbackResponse":{
            "error":true,
            "loggedIn":false,
            "powerUser":false
        }
    }
    </script>
     
    <link rel="canonical" href=
"https://amp.dev/documentation/examples/components/amp-access/index.html">
     
    <meta name="viewport" content=
"width=device-width,minimum-scale=1,initial-scale=1">
     
    <style amp-boilerplate>
        body {
            -webkit-animation:-amp-start 8s 
                steps(1, end) 0s 1 normal both;
 
            -moz-animation:-amp-start 8s 
                steps(1, end) 0s 1 normal both;
 
            -ms-animation:-amp-start 8s 
                steps(1, end) 0s 1 normal both;
 
            animation:-amp-start 8s 
                steps(1, end) 0s 1 normal both;
        }
 
        @-webkit-keyframes -amp-start {
            from {
                visibility:hidden
            }
 
            to {
                visibility:visible
            }
        }
 
        @-moz-keyframes -amp-start {
            from {
                visibility:hidden
            }
 
            to {
                visibility:visible
            }
        }
 
        @-ms-keyframes -amp-start {
            from {
                visibility:hidden
            }
 
            to {
                visibility:visible
            }
        }
 
        @-o-keyframes -amp-start {
            from {
                visibility:hidden
            }
 
            to {
                visibility:visible
            }
        }
 
        @keyframes -amp-start {
            from {
                visibility:hidden
            }
 
            to {
                visibility:visible
            }
        }
    </style>
 
    <noscript>
        <style amp-boilerplate>
            body {
                -webkit-animation:none;
                -moz-animation:none;
                -ms-animation:none;
                animation:none
            }
        </style>
    </noscript>
 
    <style amp-custom>
        h1 {
            color:green;
            text-align:center;
        }
 
        section {
            color:crimson;
        }
    </style>
</head>
 
<body>
    <h1>
        Geeks For Geeks
    </h1>
     
    <section>
        Welcome to GeeksForGeeks!
    </section>
 
    <section amp-access="loggedIn">
        This section is only visible if 
        you're logged in. Welcome back 
        to GeeksForGeeks!
    </section>
 
    <section amp-access="loggedIn AND powerUser">
        This section is only visible if you're 
        logged in <b>and</b> classified as 
        "premium user of GeeksForGeeks".
    </section>
 
    <section amp-access="NOT loggedIn">
        This section is only visible if 
        you're not logged in.
    </section>
 
    <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>
 
    <center>
        <button amp-access="NOT loggedIn"
            amp-access-hide on="tap:amp-access.login-sign-in">
            Please Login
        </button>
    </center>
 
    <button amp-access="loggedIn" amp-access-hide 
        on="tap:amp-access.login-sign-out">
        Logout
    </button>
</body>
 
</html>

輸出：

這是輸出窗口

相關用法

注：本文由純淨天空篩選整理自aditya_taparia大神的英文原創作品 Google AMP amp-access。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。