Membuat borang log masuk dan pendaftaran tersuai dengan meteor

Takeaways Key

• Membuat borang log masuk dan pendaftaran tersuai dengan meteor melibatkan memasang pakej kata laluan akaun, yang secara automatik mencipta koleksi meteor.users untuk menyimpan data pengguna, menghapuskan keperluan untuk menulis logik tersuai untuk fungsi yang berkaitan dengan pengguna.
Antara muka pengguna untuk sistem log masuk dan pendaftaran boleh dibangunkan menggunakan borang HTML yang mudah. Templat untuk borang ini mengandungi medan untuk e -mel dan kata laluan, dan butang hantar.
Pengendali acara boleh ditubuhkan untuk bertindak balas terhadap interaksi pengguna dengan borang. Sebagai contoh, acara 'hantar borang' boleh dibuat untuk mengelakkan tingkah laku lalai borang dan mengeluarkan mesej pengesahan apabila borang diserahkan.
kaedah terbina dalam meteor seperti akaun. Kaedah ini secara automatik menyulitkan kata laluan dan log masuk pengguna selepas mendaftar, mengurangkan jumlah kod yang perlu ditulis.
Di luar kotak, salah satu perkara paling mudah yang boleh anda lakukan dengan rangka kerja Meteor JavaScript adalah untuk membuat sistem akaun pengguna. Cukup pasang sepasang pakej-kata kunci akaun dan akaun-UI-dan anda akan berakhir dengan antara muka yang berfungsi sepenuhnya:

Tetapi sementara kesederhanaan ini mudah, bergantung pada antara muka boilerplate ini tidak betul -betul membenarkan banyak fleksibiliti. Jadi bagaimana jika kita mahu membuat antara muka tersuai untuk pengguna kami mendaftar dan log masuk ke laman web kami? Nasib baik, ia tidak terlalu sukar sama sekali. Dalam artikel ini saya akan menunjukkan kepada anda bagaimana untuk membuat log masuk dan borang pendaftaran tersuai dengan Meteor. Walau bagaimanapun, artikel ini mengandaikan bahawa anda tahu bagaimana untuk menubuhkan projek menggunakan rangka kerja ini sendiri. Untuk bermain dengan kod yang dibangunkan dalam artikel ini, lihatlah repositori GitHub yang saya buat. Persediaan Asas

Di dalam projek meteor baru, tambahkan pakej kata laluan akaun dengan melaksanakan arahan:

Dengan menambahkan pakej ini kepada projek koleksi meteor.users akan dibuat untuk menyimpan data pengguna kami dan kami tidak perlu menulis logik tersuai untuk fungsi yang berkaitan dengan pengguna. Oleh itu, walaupun mewujudkan antara muka tersuai bermakna kita akan kehilangan kemudahan pakej akaun-UI, itu tidak bermakna kita harus kehilangan kemudahan "sihir" back-end yang dapat disediakan oleh Meteor.

meteor <span>add accounts-password</span>

Membangunkan antara muka

Untuk sistem log masuk dan pendaftaran yang lengkap, terdapat banyak ciri yang perlu kita buat antara muka, termasuk:

Pendaftaran
Login
terlupa kata laluan
"Sahkan e -mel anda" halaman
"e -mel disahkan" halaman

Tetapi buat masa ini, kami akan bercakap mengenai dua mata pertama yang disenaraikan (pendaftaran dan log masuk). Sebabnya ialah tidak sukar bagi anda untuk mengetahui cara membuat antara muka yang lain sebaik sahaja anda mendapat pegangan pada asas -asas. Coretan berikut menunjukkan kod borang pendaftaran:

meteor <span>add accounts-password</span>

Coretan seterusnya menunjukkan kod borang log masuk sebaliknya:

<span><span><span><template</span> name<span>="register"</span>></span>
</span>    <span><span><span><form</span>></span>
</span>        <span><span><span><input</span> type<span>="email"</span> name<span>="registerEmail"</span>></span>
</span>        <span><span><span><input</span> type<span>="password"</span> name<span>="registerPassword"</span>></span>
</span>        <span><span><span><input</span> type<span>="submit"</span> value<span>="Register"</span>></span>
</span>    <span><span><span></form</span>></span>
</span><span><span><span></template</span>></span></span>

Seperti yang anda lihat, templat sangat serupa. Mereka mengandungi borang, medan untuk e -mel dan kata laluan, dan butang Hantar. Satu -satunya perbezaan ialah nilai atribut nama untuk medan input dan templat. (Kami akan merujuk nilai -nilai tersebut tidak lama lagi, jadi pastikan mereka unik.) Kami hanya mahu templat ini ditunjukkan untuk pengguna yang belum diketahui. Oleh itu kita boleh merujuk kepada objek semasa yang di antara badan pembukaan dan penutupan Tag:

<span><span><span><template</span> name<span>="login"</span>></span>
</span>    <span><span><span><form</span>></span>
</span>        <span><span><span><input</span> type<span>="email"</span> name<span>="loginEmail"</span>></span>
</span>        <span><span><span><input</span> type<span>="password"</span> name<span>="loginPassword"</span>></span>
</span>        <span><span><span><input</span> type<span>="submit"</span> value<span>="Login"</span>></span>
</span>    <span><span><span></form</span>></span>
</span><span><span><span></template</span>></span></span>

Kod ini menunjukkan mesej "anda log masuk" jika pengguna semasa log masuk, dan templat "daftar" dan "log masuk" sebaliknya.

Membuat peristiwa

Pada masa ini, borang kami adalah statik. Untuk membuat mereka melakukan sesuatu, kami memerlukan mereka untuk bertindak balas terhadap acara penyerahan. Mari kita tunjukkan ini dengan memberi tumpuan kepada templat "daftar". Di dalam fail JavaScript projek, tulis yang berikut:

<span><span><span><head</span>></span>
</span>    <span><span><span><title</span>></span>Custom Registration Tutorial<span><span></title</span>></span>
</span><span><span><span></head</span>></span>
</span><span><span><span><body</span>></span>
</span>    {{#if currentUser}}
        <span><span><span><p</span>></span>You're logged in.<span><span></p</span>></span>
</span>    {{else}}
        {{> register}}
        {{> login}}
    {{/if}}
<span><span><span></body</span>></span></span>

Di sini, kami telah menulis kod supaya borang di dalam templat "daftar":

1. bertindak balas terhadap acara penyerahan
2. tidak mempunyai tingkah laku lalai
3. mengeluarkan mesej pengesahan pada konsol

Kami juga meletakkan kod ini di dalam Isclient Conditional kerana kami tidak mahu kod ini berjalan pada pelayan (kerana ia hanya dimaksudkan untuk antara muka). Di dalam acara ini, kami ingin merebut nilai medan e -mel dan kata laluan, dan menyimpannya dalam sepasang pembolehubah. Oleh itu mari kita ubah kod sebelumnya:

<span>if (Meteor.isClient) {
</span>    <span>Template.register.events({
</span>        <span>'submit form': function(event) {
</span>            event<span>.preventDefault();
</span>            <span>console.log("Form submitted.");
</span>        <span>}
</span>    <span>});
</span><span>}</span>

Untuk templat "log masuk", kod tersebut hampir sama:

<span>Template.register.events({
</span>    <span>'submit form': function(event){
</span>        event<span>.preventDefault();
</span>        <span>var emailVar = event.target.registerEmail.value;
</span>        <span>var passwordVar = event.target.registerPassword.value;
</span>        <span>console.log("Form submitted.");
</span>    <span>}
</span><span>});</span>

Hooking Things Together

Selepas menambah pakej kata laluan akaun ke projek, beberapa kaedah menjadi tersedia kepada kami:

• accounts.createuser ()
• accounts.ChangePassword ()
• accounts.forgotPassword ()
• accounts.resetpassword ()
• accounts.setPassword ()
• accounts.verifyeMail ()

Kami akan memberi tumpuan kepada kaedah CreateUser tetapi, berdasarkan nama kaedah, tidak sukar untuk mengetahui tujuan yang lain. Di bahagian bawah acara hantar untuk templat "daftar", tulis:

meteor <span>add accounts-password</span>

Ini adalah kod yang boleh kita gunakan untuk membuat pengguna baru dan, secara lalai, ia memerlukan dua pilihan: e -mel dan kata laluan. Untuk melewati mereka, tulis:

<span><span><span><template</span> name<span>="register"</span>></span>
</span>    <span><span><span><form</span>></span>
</span>        <span><span><span><input</span> type<span>="email"</span> name<span>="registerEmail"</span>></span>
</span>        <span><span><span><input</span> type<span>="password"</span> name<span>="registerPassword"</span>></span>
</span>        <span><span><span><input</span> type<span>="submit"</span> value<span>="Register"</span>></span>
</span>    <span><span><span></form</span>></span>
</span><span><span><span></template</span>></span></span>

Kod akhir untuk acara itu harus menyerupai:

<span><span><span><template</span> name<span>="login"</span>></span>
</span>    <span><span><span><form</span>></span>
</span>        <span><span><span><input</span> type<span>="email"</span> name<span>="loginEmail"</span>></span>
</span>        <span><span><span><input</span> type<span>="password"</span> name<span>="loginPassword"</span>></span>
</span>        <span><span><span><input</span> type<span>="submit"</span> value<span>="Login"</span>></span>
</span>    <span><span><span></form</span>></span>
</span><span><span><span></template</span>></span></span>

Dengan menggunakan kod ini dan bukannya sisipan generik Fungsi Kami mempunyai kelebihan bahawa kata laluan disulitkan secara automatik. Selain itu, pengguna dilog masuk selepas mendaftar dan kami tidak perlu menulis banyak kod. Terdapat juga kaedah LoginWithPassword () yang boleh kita gunakan dalam acara "Login":

<span><span><span><head</span>></span>
</span>    <span><span><span><title</span>></span>Custom Registration Tutorial<span><span></title</span>></span>
</span><span><span><span></head</span>></span>
</span><span><span><span><body</span>></span>
</span>    {{#if currentUser}}
        <span><span><span><p</span>></span>You're logged in.<span><span></p</span>></span>
</span>    {{else}}
        {{> register}}
        {{> login}}
    {{/if}}
<span><span><span></body</span>></span></span>

Ia juga menerima nilai e -mel dan kata laluan:

<span>if (Meteor.isClient) {
</span>    <span>Template.register.events({
</span>        <span>'submit form': function(event) {
</span>            event<span>.preventDefault();
</span>            <span>console.log("Form submitted.");
</span>        <span>}
</span>    <span>});
</span><span>}</span>

Dan dalam konteks, inilah yang kelihatan seperti kod:

<span>Template.register.events({
</span>    <span>'submit form': function(event){
</span>        event<span>.preventDefault();
</span>        <span>var emailVar = event.target.registerEmail.value;
</span>        <span>var passwordVar = event.target.registerPassword.value;
</span>        <span>console.log("Form submitted.");
</span>    <span>}
</span><span>});</span>

Logging Out

Pengguna kini boleh mendaftar dan log masuk tetapi, untuk membolehkan mereka keluar, mari kita buat pertama kali membuat template "pemuka" baru yang akan ditunjukkan ketika log masuk:

<span>Template.login.events({
</span>    <span>'submit form': function(event) {
</span>        event<span>.preventDefault();
</span>        <span>var emailVar = event.target.loginEmail.value;
</span>        <span>var passwordVar = event.target.loginPassword.value;
</span>        <span>console.log("Form submitted.");
</span>    <span>}
</span><span>});</span>

Kemudian masukkan kod berikut dalam pernyataan IF yang kami tulis sebelum ini dalam artikel ini:

<span>Accounts.createUser({
</span>    <span>// options go here
</span><span>});</span>

Sekarang kita boleh membuat acara yang dilampirkan pada pautan "Logout" dalam templat "Dashboard":

<span>Accounts.createUser({
</span>    <span>email: emailVar,
</span>    <span>password: passwordVar
</span><span>});</span>

Untuk melaksanakan proses pembalakan, kita hanya perlu menggunakan kaedah logout seperti itu:

<span>Template.register.events({
</span>    <span>'submit form': function(event) {
</span>        event<span>.preventDefault();
</span>        <span>var emailVar = event.target.registerEmail.value;
</span>        <span>var passwordVar = event.target.registerPassword.value;
</span>        <span>Accounts.createUser({
</span>            <span>email: emailVar,
</span>            <span>password: passwordVar
</span>        <span>});
</span>    <span>}
</span><span>});</span>

Mendaftarkan, log masuk, dan pembalakan kini harus berfungsi seperti yang diharapkan.

KESIMPULAN Kami telah membuat kemajuan yang baik dengan jumlah kod yang kecil, tetapi jika kami ingin membuat antara muka lengkap untuk sistem akaun, masih banyak lagi yang perlu dilakukan. Inilah yang saya cadangkan:

Dayakan pengesahan e -mel pengguna baru.
Mengesahkan penciptaan (dan pembalakan) pengguna.
Tambahkan pengesahan visual ke borang "Daftar" dan "Log masuk".
Lakukan sesuatu apabila percubaan masuk gagal.
Benarkan pengguna menukar kata laluan mereka.
Ia mungkin mengambil petang untuk mengetahui spesifik tentang cara melaksanakan ciri -ciri ini tetapi, berdasarkan apa yang telah kami tutupi dalam tutorial ini, tidak ada yang tidak dapat dicapai. Meteor melakukan kerja keras untuk kita. Sekiranya anda ingin bermain dengan kod yang dibangunkan dalam artikel ini, lihatlah repositori GitHub yang saya buat.

Soalan Lazim (Soalan Lazim) Mengenai Membuat Borang Login/Pendaftaran Custom Dengan Meteor

Bagaimana saya boleh menambah medan tambahan ke borang pendaftaran dalam meteor?

Menambah medan tambahan ke borang pendaftaran di Meteor agak mudah. Anda boleh melanjutkan profil pengguna dengan menambahkan lebih banyak medan dalam Kaedah Akaun.CreateUser. Contohnya, jika anda ingin menambah medan untuk nama penuh pengguna, anda boleh melakukannya seperti ini:

accounts.createuser ({
nama pengguna: 'testuser',
kata laluan: 'kata laluan ',
profil: { fullname:' uji pengguna '
}
});
Dalam contoh ini, 'FullName' adalah medan tambahan yang ditambahkan ke profil pengguna. Anda boleh mengakses medan ini kemudian menggunakan meteor.user (). Profile.fullname.

Bagaimana saya boleh menyesuaikan penampilan borang log masuk/pendaftaran dalam meteor? cara terbina dalam untuk menyesuaikan penampilan borang log masuk/pendaftaran. Walau bagaimanapun, anda boleh menggunakan CSS untuk gaya bentuk mengikut keperluan anda. Anda boleh menetapkan kelas ke elemen bentuk dan kemudian gunakan kelas ini dalam fail CSS anda untuk memohon gaya. Sebagai alternatif, anda boleh menggunakan perpustakaan UI seperti bootstrap atau bahan-UI untuk gaya borang anda.

Bagaimana saya boleh melaksanakan pengesahan e-mel dalam meteor? Anda boleh menggunakan Kaedah Accounts.SendVerificationEmail untuk menghantar e -mel pengesahan kepada pengguna. Kaedah ini mengambil ID pengguna sebagai parameter dan menghantar e -mel dengan pautan pengguna boleh mengklik untuk mengesahkan alamat e -mel mereka. Anda boleh menghubungi kaedah ini selepas membuat pengguna baru seperti ini:

accounts.createuser ({ e -mel: 'test@example.com',

kata laluan: 'kata laluan'

}, fungsi (err, userId) {
if (err) { // mengendalikan ralat
} else {
Accounts.sendVerificationEmail (userId); }
}); Anda boleh memberikan fungsi panggil balik yang akan dipanggil dengan objek ralat jika ralat berlaku. Objek ralat ini mengandungi maklumat mengenai apa yang berlaku. Anda boleh menggunakan maklumat ini untuk memaparkan mesej ralat yang sesuai kepada pengguna. Berikut adalah contoh:

accounts.CreateUser ({
username: 'testuser',
kata laluan: 'kata laluan'
}, fungsi (err) { if (err) {err) {err) {
console.log ('Ralat semasa pendaftaran:', err); Meteor menyediakan sokongan terbina dalam untuk fungsi semula kata laluan. Anda boleh menggunakan akaun.forgotPassword dan akaun. Kaedah Akauns.ForgotPassword menghantar e -mel kepada pengguna dengan pautan yang mereka boleh klik untuk menetapkan semula kata laluan mereka. Kaedah Akauns.ResetPassword digunakan untuk mengubah kata laluan pengguna. Ia mengambil token dari pautan semula dan kata laluan baru sebagai parameter.

Bagaimana saya boleh menambah log masuk sosial ke aplikasi meteor saya? dan Twitter melalui pakej akaunnya. Untuk menambah log masuk sosial ke aplikasi anda, anda perlu menambah pakej yang sesuai (contohnya, Akaun-Facebook untuk log masuk Facebook) dan konfigurasikannya dengan kelayakan aplikasi anda dari penyedia sosial.

bagaimana saya boleh menyekat akses ke laluan tertentu berdasarkan pengesahan pengguna di meteor? pada pengesahan pengguna. Anda boleh menyemak sama ada pengguna log masuk menggunakan meteor.userid () atau meteor.user () dan kemudian mengalihkannya ke halaman log masuk jika mereka tidak. ? Anda boleh menambah medan tambahan ke dokumen ini semasa membuat pengguna baru dengan akaun. Kawalan dalam meteor?

Meteor tidak menyediakan sokongan terbina dalam untuk kawalan akses berasaskan peranan, tetapi anda boleh menggunakan pakej seperti Alanning: peranan untuk menambah fungsi ini ke aplikasi anda. Pakej ini membolehkan anda memberikan peranan kepada pengguna dan kemudian periksa peranan ini apabila memutuskan sama ada pengguna dibenarkan melakukan tindakan tertentu. boleh log keluar pengguna dalam meteor menggunakan kaedah meteor.logout. Kaedah ini log pengguna semasa pada klien dan membatalkan token login pada pelayan. Ia juga mengambil fungsi panggil balik yang akan dipanggil tanpa hujah apabila proses logout selesai.

Atas ialah kandungan terperinci Membuat borang log masuk dan pendaftaran tersuai dengan meteor. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!