Cara membuat amp access

12/14/2017 02:08:00 AM


amp-access


Cara membuat akses amp dan menambahkan dukungan untuk paywalls dan langganan AMP, yang memungkinkan penerbit untuk mengontrol konten apa saja yang dapat diakses oleh pembaca dan dengan batasan apa saja.

Untuk titik akhir server akses-amp, lihat disini amp-publisher-sample.

Tambahkan

Masukan componen akses-amp setelah <head>

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

amp-access membutuhkan komponen amp-analytics

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

Opsional, gunakan komponen amp-mustache untuk menampilkan teks dengan nilai pengganti dari respons otorisasi seperti dibawah ini

<script async custom-template="amp-mustache" src="https://cdn.ampproject.org/v0/amp-mustache-0.1.js"></script>

Tambahkan pengaturan authorization, pingback dan titik akhir masuk. Kami menyediakan dua titik masuk login, satu untuk masuk dan satu untuk keluar. Hal ini juga memungkinkan untuk membuat respons mundur untuk digunakan jika otorisasi gagal dengan atribut authorizationFallbackResponse.

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

Bagian ini dapat dilihat oleh semua pengguna. Dalam hal ini tidak ada tanda khusus yang diperlukan.

Contohnya







  

Disini Artikelnya

Ini adalah pratinjau artikel.
  






<section>
  <h3>Disini Artikelnya</h3>
  <p>
    Ini adalah pratinjau artikel.
  </p>
</section>

Gunakan atribut amp-access untuk mengontrol visibilitas masing-masing komponen. Ekspresi harus mengevaluasi nilai Boolean. Jika dievaluasi sebagai TRUE, bagian akan ditampilkan.

Contohnya







  Bagian ini dapat dilihat oleh pengguna jika tanggapan otorisasi containt:
    "access": true. Ini biasanya artikel content utamanya.






<section amp-access="access">
  <p>Bagian ini dapat dilihat oleh pengguna jika tanggapan otorisasi containt:
    <code>"access": true</code>. Ini biasanya artikel content utamanya.</p>
</section>

Bagian ini hanya ditampilkan jika nilai atribut access dalam respon untuk permintaan otorisasi dievaluasi sebagai FALSE

Contohnya







  Bagian ini hanya dapat dilihat oleh pengguna jika tanggapan otorisasi tidak mengandung konten
    access or contains
    "access": false.






<section amp-access="NOT access">
  <p>Bagian ini hanya dapat dilihat oleh pengguna jika tanggapan otorisasi tidak mengandung konten    <code>access</code> or contains
    <code>"access": false</code>.</p>
</section>

Hal ini dimungkinkan untuk menggabungkan dua nilai dalam ekspresi evaluasi. Periksa dokumen untuk informasi lebih lanjut tentang Grammar of Expression

Contohnya





This section is only visible to users with
    "access": true and
    "subscriber": false
  



<div amp-access="access AND NOT subscriber">
  <p>This section is only visible to users with
    <code>"access": true</code> and
    <code>"subscriber": false</code>
  </p>
</div>

Kombinasikan penguat   amplifier-access & amp; Kumis menunjukkan informasi yang dikembalikan dari permintaan otorisasi. Dalam hal ini username yang dikembalikan ke authentication response akan ditampilkan.

Contohnya







  




<section amp-access="subscriber">
  <template amp-access-template
    type="amp-mustache">
    Hello {{name}}!
  </template>
</section>

Gunakan on="tap:amp-access.login-sign-in" untuk membuka dialog login saat item diklik.

amp-access-hide predefine komponen yang akan disembunyikan dan aktifkan nanti jika ekspresi amp-access ampere dievaluasi sebagai TRUE

Contohnya





  Login




<section class="p1"
  amp-access="NOT subscriber"
  amp-access-hide
  role="button"
  tabindex="0">
  <a class="ampstart-btn caps"
    on="tap:amp-access.login-sign-in">Login</a>
</section>

Link logoff hanya akan ditampilkan untuk pelanggan terdaftar. Kami menggunakan trik di sini: logout adalah tindakan masuk yang mengarahkan langsung ke URL asli. Ini memiliki keuntungan bahwa halaman diperbarui tanpa diisi ulang.

Contohnya






  Logout




<section class="p1"
  amp-access="subscriber"
  amp-access-hide
  role="button"
  tabindex="0">
  <a class="ampstart-btn caps"
    on="tap:amp-access.login-sign-out">Logout</a>
</section>

Coba periksa contoh resmi dari amp-access untuk hitungan klik pertama dan jumlah tampilan.




Tags:



You Might Also Like

Comments: