Google AMP 放大器访问

有时，作为一名设计师，您想取悦您的用户，为此，您决定为高级用户提供优质内容，但要让他们与众不同可能是一项艰巨的挑战。 amp-access标签是专门为这样做而设计的。它可以为登录用户、高级会员和未登录用户设置控制。通过使用此标签，您可以为您的网页添加对身份验证和授权的支持。

设置：

首先，将 amp-access 组件与 amp-analytics 一起导入。

现在使用以下代码添加登录和注销页面信息。您必须提供登录点，一个用于登录，另一个用于退出页面。

HTML

 {
     "authorization": "geeksforgeeks.org",
     "pingback": "geeksforgeeks.org",
     "login": {
       "sign-in": "geeksforgeeks.org",
       "sign-out": "geeksforgeeks.org"
     },
     "authorizationFallbackResponse": {
         "error": true,
         "loggedIn": false,
         "powerUser": false
     }
 }

您必须使用上面代码中提到的相同 ID，并且可以根据需要更改 URL。

控制可见性：用户只能看到用户应该看到的内容是非常重要的，即如果用户是高级成员，那么用户应该获得高级会员，或者如果他没有登录，那么他应该显示登录选项，等等……为此，请使用下面提到的代码：

• 显示对网站的所有访问者可见的部分。

HTML

    Welcome to GeeksForGeeks!

• 为了向登录用户显示内容，我们将使用 amp-access 属性并控制该部门的可见性。

HTML

    This section is only visible if
    you're logged in. Welcome back
    to GeeksForGeeks!

• 现在，如果用户已登录并且也是高级成员，那么他的代码如下：

HTML

    This section is only visible if you're
    logged in and classified as
    "premium user of GeeksForGeeks".

• 如果用户已注销，则应显示正确的消息，因此：

HTML

    This section is only visible
    if you're not logged in.

登录和注销按钮：登录按钮用于使用某些凭据登录到门户网站，登录后，您可以看到登录内容。对于登录按钮，请使用以下代码：

HTML

    Please Login

另一方面，注销可以将您从系统中注销。要添加注销按钮，请使用以下代码：

HTML

    Logout

例子：

HTML

 

    
    Google AMP amp-access
 
    
    
 
    
    
    
 
    
    
    
 
    
    
 
    
    {
        "authorization": "geeksforgeeks.org",
        "pingback": "geeksforgeeks.org",
        "login": {
            "sign-in": "geeksforgeeks.org",
            "sign-out": "geeksforgeeks.org"
        },
        "authorizationFallbackResponse": {
            "error": true,
            "loggedIn": false,
            "powerUser": false
        }
    }
    
     
    
     
    
     
    
        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
            }
        }
    
 
    
        
            body {
                -webkit-animation: none;
                -moz-animation: none;
                -ms-animation: none;
                animation: none
            }
        
    
 
    
        h1 {
            color: green;
            text-align: center;
        }
 
        section {
            color: crimson;
        }
    

 

    
        Geeks For Geeks
    
     
    
        Welcome to GeeksForGeeks!
    
 
    
        This section is only visible if
        you're logged in. Welcome back
        to GeeksForGeeks!
    
 
    
        This section is only visible if you're
        logged in and classified as
        "premium user of GeeksForGeeks".
    
 
    
        This section is only visible if
        you're not logged in.
    
 
    
        
    
 
    
        
            Please Login
        
    
 
    
        Logout
    

 

输出：

这是输出窗口