Cara Membuat Tombol Log - In di AMP

Cara Membuat Tombol Log-in Di AMP

Contoh Gambar

Saat pertama kali membuka halaman, Anda dapat melihat 2 komentar dan sebuah tombol login

Jika Anda mencari tombol login dalam kode, Anda akan menemukan:

Kode AMP
-------------------------------------------------------------------
< span amp-access = "NOT loggedIn" role = "button" tabindex = "0" amp-access-hide > < h5 > Silahkan login untuk memberi komentar </ h5 > < button on = "tap: amp-access.login- masuk " class = " button-primary comment-button " > Login </ button > </ span >
-------------------------------------------------------------------

Perilaku amp-accessatribut terkait bergantung pada konfigurasi keseluruhan halaman amp-access, dalam kasus kami, yang satu ini:

Kode AMP
-------------------------------------------------------------------
< script id = "amp-access" type = "application / json" > { "otorisasi" : "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: // ampbyexamplecom / samples_templates / comment_section / logout " }, " authorizationFallbackResponse " : { "error" : true , "loggedIn" : false } } </ script >
-------------------------------------------------------------------


Titik akhir otorisasi digunakan sebagai bagian dari AMPByExample. Ini adalah tanggung jawab penerbit halaman untuk menyediakan titik akhir ini. Dalam contoh kasus ini, untuk kesederhanaan, kami menerapkan logika dasar sehingga ketika permintaan ini diterima, server membaca nilai sebuah cookie yang bernama ABE_LOGGED_IN. Jika cookie tidak ada, kami mengembalikan respons JSON yang mengandung loggedIn = false. Akibatnya, pertama kali pengguna mendarat di halaman, permintaan ini akan kembali loggedIn = falsedan tombol login akan ditampilkan.

Melihat kembali kode HTML tombol tersebut, dengan menggunakan on="tap:amp-access.login-sign-in", kami menentukan bahwa begitu pengguna mengetuk tombolnya, URL yang ditentukan di JSON di atas harus digunakan:
-------------------------------------------------------------------
{ "login" : { "masuk" : "https://ampbyexample.com/samples_templates/comment_section/login?rid=READER_ID&url=CANONICAL_URL" } }
-------------------------------------------------------------------
Halaman login adalah halaman non-AMP di mana kita mengisi nilai login dan kata sandi demi kesederhanaan. Perhatikan penggunaan returnURLtipe input tersembunyi, yang diisi oleh server AMPByExample melalui template sisi server. Server membaca nilai ini dari parameter yang disebut return, ditambahkan secara otomatis oleh perpustakaan AMP ke URL masuk.

Pada contoh di bawah ini, nilai returnparameter ditambahkan ke permintaan setelah Anda mengklik tombol login. Anda dapat menjelajahi nilai ini dengan menggunakan konsol Chrome DevTools dan menavigasi ke tab Network.

Setelah server AMPByExample menerima permintaan POST dari halaman login dan login dan kata sandi benar, ia akan mengalihkan permintaan ke returnURLyang kami sebutkan di atas, dan menambahkan #success=trueparameternya. The AMP runtime sekarang dapat mengotorisasi halaman dan akhirnya memungkinkan Anda untuk menambahkan komentar.

Penting untuk memahami apa yang dilakukan runtime AMP dan apa yang seharusnya dilakukan server, karena penerapan server merupakan tanggung jawab penerbit halaman.

Sebagai rekap cepat:

Runtime AMP secara otomatis menambahkan parameter pengembalian ke permintaan masuk yang ditentukan di dalam objek JSON masuk
The AMP runtime menutup halaman login dan mengarahkan ulang ke halaman yang ditentukan oleh parameter return URL
Server harus mengatur respon begitu pengguna mengklik tombol login

Share: