How to Build a Backend for NuxtJS?

บทนำ ในบทเรียนนี้ คุณจะได้เรียนรู้วิธีการสร้างแบ็คเอนด์ที่สมบูรณ์สำหรับแอปพลิเคชัน nuxtjs โดยใช้ back4app เราจะเดินผ่านการรวมฟีเจอร์ที่สำคัญของ back4app เช่น การจัดการฐานข้อมูล, ฟังก์ชัน cloud code, rest และ graphql apis, การตรวจสอบสิทธิ์ผู้ใช้, และการสอบถามแบบเรียลไทม์ (live queries) เพื่อสร้างแบ็คเอนด์ที่ปลอดภัย, ขยายขนาดได้, และแข็งแกร่งที่สื่อสารกับฟรอนต์เอนด์ nuxtjs ของคุณได้อย่างราบรื่น คุณจะเห็นว่าการตั้งค่าอย่างรวดเร็วและสภาพแวดล้อมที่ใช้งานง่ายของ back4app สามารถลดเวลาและความพยายามได้อย่างมากเมื่อเปรียบเทียบกับการกำหนดค่าเซิร์ฟเวอร์และฐานข้อมูลด้วยตนเอง ในระหว่างทาง คุณจะได้รับประสบการณ์จริงกับฟังก์ชันการทำงานที่สำคัญ รวมถึงฟีเจอร์ความปลอดภัยขั้นสูง, การกำหนดตารางงานด้วย cloud jobs, และการตั้งค่าเว็บฮุกสำหรับการรวมภายนอก เมื่อสิ้นสุดบทเรียนนี้ คุณจะพร้อมที่จะพัฒนาการตั้งค่านี้ให้เป็นแอปพลิเคชันที่พร้อมสำหรับการผลิต หรือรวมตรรกะที่กำหนดเองและ apis ของบุคคลที่สามได้อย่างง่ายดายตามที่ต้องการ ข้อกำหนดเบื้องต้น ในการทำตามบทเรียนนี้ คุณจะต้องมี บัญชี back4app และโครงการ back4app ใหม่ เริ่มต้นใช้งาน back4app https //www back4app com/docs/get started/new parse app หากคุณยังไม่มีบัญชี คุณสามารถสร้างบัญชีได้ฟรี ทำตามคำแนะนำข้างต้นเพื่อเตรียมโครงการของคุณ สภาพแวดล้อมการพัฒนา nuxtjs พื้นฐาน คุณสามารถตั้งค่านี้ได้โดยใช้ สร้างแอป nuxt https //nuxtjs org/docs/get started/installation หรือเครื่องมือที่คล้ายกัน ตรวจสอบให้แน่ใจว่าคุณได้ติดตั้ง node js บนเครื่องของคุณ ติดตั้ง node js (เวอร์ชัน 14 หรือสูงกว่า) คุณจะต้องใช้ node js สำหรับการติดตั้งแพ็คเกจ npm และการเรียกใช้เซิร์ฟเวอร์พัฒนาท้องถิ่น การติดตั้ง node js https //nodejs org/en/download/ ความคุ้นเคยกับ javascript และแนวคิดพื้นฐานของ nuxtjs เอกสารประกอบอย่างเป็นทางการของ nuxtjs https //nuxtjs org/docs หากคุณเป็นมือใหม่ใน nuxtjs ให้ตรวจสอบเอกสารอย่างเป็นทางการหรือบทเรียนสำหรับผู้เริ่มต้นก่อนเริ่ม ตรวจสอบให้แน่ใจว่าคุณมีข้อกำหนดเบื้องต้นทั้งหมดนี้ก่อนที่คุณจะเริ่ม การตั้งค่าโครงการ back4app ของคุณและสภาพแวดล้อม nuxtjs ท้องถิ่นของคุณจะช่วยให้คุณติดตามได้ง่ายขึ้น ขั้นตอนที่ 1 – การตั้งค่าโครงการ back4app สร้างโครงการใหม่ ขั้นตอนแรกในการสร้างแบ็กเอนด์ nuxtjs ของคุณบน back4app คือการสร้างโครงการใหม่ หากคุณยังไม่ได้สร้างโครงการ ให้ทำตามขั้นตอนเหล่านี้ เข้าสู่ระบบบัญชี back4app ของคุณ คลิกที่ปุ่ม “new app” ในแดชบอร์ด back4app ของคุณ ตั้งชื่อแอปของคุณ (เช่น “nuxtjs backend tutorial”) เมื่อโปรเจกต์ถูกสร้างขึ้น คุณจะเห็นมันปรากฏในแดชบอร์ด back4app ของคุณ โปรเจกต์นี้จะเป็นพื้นฐานสำหรับการตั้งค่าด้านหลังทั้งหมดที่กล่าวถึงในบทช่วยสอนนี้ เชื่อมต่อกับ parse sdk back4app ขึ้นอยู่กับ parse platform ในการจัดการข้อมูลของคุณ ให้ฟีเจอร์เรียลไทม์ จัดการการตรวจสอบสิทธิ์ของผู้ใช้ และอื่นๆ การเชื่อมต่อแอปพลิเคชัน nuxtjs ของคุณกับ back4app เกี่ยวข้องกับการติดตั้งแพ็คเกจ npm ของ parse และการเริ่มต้นด้วยข้อมูลประจำตัวจากแดชบอร์ด back4app ของคุณ ดึงคีย์ parse ของคุณ ในแดชบอร์ด back4app ของคุณ ไปที่ “app settings” หรือ “security & keys” ของแอปของคุณเพื่อค้นหา application id และ javascript key คุณจะพบ parse server url (มักอยู่ในรูปแบบ https //parseapi back4app com ) ติดตั้ง parse sdk ในโปรเจกต์ nuxtjs ของคุณ npm install parse หากคุณใช้ yarn คุณสามารถติดตั้งได้ด้วย yarn add parse เริ่มต้น parse ในแอปพลิเคชัน nuxtjs ของคุณ วิธีที่สะดวกคือการสร้าง ปลั๊กอิน nuxt เพื่อกำหนดค่า parse ในโปรเจกต์ nuxt ของคุณ สร้างไฟล์ (เช่น parse client js ) ใน ไดเรกทอรี plugins และเพิ่มสิ่งต่อไปนี้ plugins/parse client js import parse from 'parse' export default ({}, inject) => { // replace the placeholders with your back4app credentials parse initialize('your application id', 'your javascript key') parse serverurl = 'https //parseapi back4app com' // inject parse globally so you can access it as $parse anywhere in nuxt inject('parse', parse) } ถัดไป เปิดไฟล์ nuxt config js ของคุณและเพิ่มปลั๊กอินนี้เพื่อให้มันถูกโหลดในฝั่งไคลเอนต์ export default { // plugins \[ { src ' /plugins/parse client js', mode 'client' } ], // } เมื่อคุณทำขั้นตอนนี้เสร็จสิ้น คุณได้สร้างการเชื่อมต่อที่ปลอดภัยระหว่างส่วนหน้าของ nuxtjs และแบ็กเอนด์ของ back4app แล้ว ทุกคำขอและการทำธุรกรรมข้อมูลจะถูกส่งผ่าน sdk นี้อย่างปลอดภัย ลดความซับซ้อนของการเรียก rest หรือ graphql ด้วยตนเอง (แม้ว่าคุณยังสามารถใช้เมื่อจำเป็น) ขั้นตอนที่ 2 – การตั้งค่าฐานข้อมูล การบันทึกและการค้นหาข้อมูล เมื่อโปรเจกต์ back4app ของคุณถูกตั้งค่าและ sdk ของ parse ถูกบูรณาการเข้ากับแอป nuxt ของคุณแล้ว คุณสามารถเริ่มบันทึกและเรียกคืนข้อมูลได้ วิธีที่ง่ายที่สุดในการสร้างระเบียนคือการใช้ คลาส parse object ตัวอย่างเช่น คุณสามารถสร้าง composable หรือวิธีการ store เพื่อจัดการการดำเนินการข้อมูล // example create a todo item export const createtodoitem = async (title, iscompleted) => { const todo = this $parse object extend('todo') const todo = new todo() todo set('title', title) todo set('iscompleted', iscompleted) try { const savedtodo = await todo save() console log('todo saved successfully ', savedtodo) return savedtodo } catch (error) { console error('error saving todo ', error) } } // example query all todo items export const fetchtodos = async () => { const todo = this $parse object extend('todo') const query = new this $parse query(todo) try { const results = await query find() console log('fetched todo items ', results) return results } catch (error) { console error('error fetching todos ', error) } } อีกทางเลือกหนึ่ง คุณสามารถใช้จุดสิ้นสุด rest api ของ back4app curl x post \\ h "x parse application id your application id" \\ h "x parse rest api key your rest api key" \\ h "content type application/json" \\ d '{"title" "buy groceries", "iscompleted" false}' \\ https //parseapi back4app com/classes/todo back4app ยังมีอินเทอร์เฟซ graphql mutation { createtodo(input { fields { title "clean the house" iscompleted false } }) { todo { objectid title iscompleted } } } ตัวเลือกที่หลากหลายเหล่านี้ช่วยให้คุณสามารถรวมการดำเนินการข้อมูลในวิธีที่เหมาะสมที่สุดกับกระบวนการพัฒนาของคุณ ไม่ว่าจะเป็นผ่าน parse sdk, rest หรือ graphql การออกแบบสคีมาและประเภทข้อมูล โดยค่าเริ่มต้น parse อนุญาตให้ สร้างสคีมาแบบทันที , แต่คุณยังสามารถกำหนดคลาสและประเภทข้อมูลของคุณในแดชบอร์ด back4app เพื่อควบคุมได้มากขึ้น ไปที่ส่วน “ฐานข้อมูล” ในแดชบอร์ด back4app ของคุณ สร้างคลาสใหม่ (เช่น “todo”) และเพิ่มคอลัมน์ที่เกี่ยวข้อง เช่น title (string) และ iscompleted (boolean) back4app ยังรองรับประเภทข้อมูลที่หลากหลาย string , number , boolean , object , date , file , pointer , array , relation , geopoint , และ polygon คุณสามารถเลือกประเภทที่เหมาะสมสำหรับแต่ละฟิลด์ หากคุณต้องการ คุณยังสามารถให้ parse สร้างคอลัมน์เหล่านี้โดยอัตโนมัติเมื่อคุณบันทึกวัตถุจากแอป nuxt ของคุณครั้งแรก back4app มี ai agent ที่สามารถช่วยคุณออกแบบโมเดลข้อมูลของคุณ เปิด ai ตัวแทน จากแดชบอร์ดแอปของคุณหรือในเมนู อธิบายโมเดลข้อมูลของคุณ ด้วยภาษาที่เข้าใจง่าย (เช่น “กรุณาสร้างแอป todo ใหม่ที่ back4app พร้อมกับสคีมาชั้นเรียนที่สมบูรณ์ ”) ให้ ai ตัวแทนสร้างสคีมาสำหรับคุณ การใช้ ai ตัวแทนสามารถช่วยประหยัดเวลาเมื่อคุณตั้งค่าโครงสร้างข้อมูลของคุณและรับประกันความสอดคล้องในแอปพลิเคชันของคุณ ข้อมูลเชิงสัมพันธ์ หากคุณมีข้อมูลเชิงสัมพันธ์ เช่น, วัตถุหมวดหมู่ ที่ชี้ไปยังหลาย รายการ todo คุณสามารถใช้ พอยเตอร์ หรือ ความสัมพันธ์ ใน parse ได้ ตัวอย่างเช่น // linking a task to a category with a pointer export const createtaskforcategory = async (categoryobjectid, title) => { const todo = this $parse object extend('todo') const todo = new todo() // construct a pointer to the category const category = this $parse object extend('category') const categorypointer = new category() categorypointer id = categoryobjectid // set fields todo set('title', title) todo set('category', categorypointer) try { return await todo save() } catch (err) { console error('error creating task with category relationship ', err) } } เมื่อคุณทำการค้นหา คุณยังสามารถรวมข้อมูลพอยเตอร์ได้ const query = new this $parse query('todo') query include('category') const todoswithcategory = await query find() การเรียก include('category') จะดึงรายละเอียดหมวดหมู่พร้อมกับแต่ละ todo ทำให้ข้อมูลเชิงสัมพันธ์ของคุณเข้าถึงได้อย่างราบรื่น การค้นหาสด สำหรับการอัปเดตแบบเรียลไทม์ back4app มี การค้นหาสด ในแอป nuxtjs ของคุณ คุณสามารถสมัครสมาชิกการเปลี่ยนแปลงในคลาสเฉพาะ เปิดใช้งาน live queries ในแดชบอร์ด back4app ของคุณภายใต้ การตั้งค่าเซิร์ฟเวอร์ ตรวจสอบให้แน่ใจว่า “live queries” ถูกเปิดใช้งาน เริ่มต้นการสมัครสมาชิก live query ใน parse client js หรือไฟล์ที่คล้ายกัน plugins/parse client js import parse from 'parse' export default ({}, inject) => { // replace with your back4app credentials parse initialize('your application id', 'your javascript key') parse serverurl = 'https //parseapi back4app com' // live query's subdomain parse livequeryserverurl = 'wss\ //your subdomain here b4a io' inject('parse', parse) } ตอนนี้ ในโค้ดของคุณ export const subscribetotodos = async (callback) => { const query = new this $parse query('todo') const subscription = await query subscribe() subscription on('create', (newtodo) => { console log('new todo created ', newtodo) callback('create', newtodo) }) subscription on('update', (updatedtodo) => { console log('todo updated ', updatedtodo) callback('update', updatedtodo) }) subscription on('delete', (deletedtodo) => { console log('todo deleted ', deletedtodo) callback('delete', deletedtodo) }) return subscription } โดยการสมัครสมาชิก คุณจะได้รับการแจ้งเตือนแบบเรียลไทม์เมื่อมีการสร้าง อัปเดต หรือ ลบ todo ใหม่ ฟีเจอร์นี้มีค่ามากสำหรับแอปที่ทำงานร่วมกันหรือแอปที่มีการเปลี่ยนแปลงอย่างรวดเร็วซึ่งผู้ใช้หลายคนต้องการเห็นข้อมูลล่าสุดโดยไม่ต้องรีเฟรชหน้า ขั้นตอนที่ 3 – การใช้ความปลอดภัยด้วย acls และ clps กลไกความปลอดภัยของ back4app back4app ให้ความสำคัญกับความปลอดภัยโดยการจัดเตรียม access control lists (acls) และ class level permissions (clps) ฟีเจอร์เหล่านี้ช่วยให้คุณจำกัดว่าใครสามารถอ่านหรือเขียนข้อมูลได้ตามวัตถุหรือคลาส ทำให้มั่นใจได้ว่าผู้ใช้ที่ได้รับอนุญาตเท่านั้นที่สามารถแก้ไขข้อมูลของคุณ access control lists (acls) acl ถูกนำไปใช้กับวัตถุแต่ละรายการเพื่อกำหนดว่าผู้ใช้ บทบาท หรือสาธารณะสามารถดำเนินการอ่าน/เขียนได้หรือไม่ ตัวอย่างเช่น export const createprivatetodo = async (title, owneruser) => { const todo = this $parse object extend('todo') const todo = new todo() todo set('title', title) // create an acl granting read/write access only to the owner const acl = new this $parse acl(owneruser) acl setpublicreadaccess(false) acl setpublicwriteaccess(false) todo setacl(acl) try { return await todo save() } catch (err) { console error('error saving private todo ', err) } } เมื่อคุณบันทึกวัตถุ มันจะมี acl ที่ป้องกันไม่ให้ใครอ่านหรือแก้ไขนอกจากผู้ใช้ที่ระบุไว้ การอนุญาตระดับคลาส (clps) clps กำหนดการอนุญาตเริ่มต้นของคลาสทั้งหมด เช่น ว่าคลาสนั้นสามารถอ่านหรือเขียนได้สาธารณะหรือไม่ หรือเฉพาะบทบาทบางอย่างเท่านั้นที่สามารถเข้าถึงได้ ไปที่แดชบอร์ด back4app ของคุณ , เลือกแอปของคุณ และเปิด ฐานข้อมูล ส่วน เลือกคลาส (เช่น “todo”) เปิดแท็บการอนุญาตระดับคลาส กำหนดค่าเริ่มต้นของคุณ เช่น “ต้องการการตรวจสอบสิทธิ์” สำหรับการอ่านหรือเขียน หรือ “ไม่มีการเข้าถึง” สำหรับสาธารณะ สิทธิ์เหล่านี้ตั้งค่าพื้นฐาน ในขณะที่ acls ปรับแต่งสิทธิ์สำหรับวัตถุแต่ละรายการ โมเดลความปลอดภัยที่แข็งแกร่งมักจะรวม clps (ข้อจำกัดทั่วไป) และ acls (ข้อจำกัดเฉพาะต่อวัตถุ) สำหรับข้อมูลเพิ่มเติมไปที่ แนวทางความปลอดภัยของแอป ขั้นตอนที่ 4 – การเขียนและการปรับใช้ฟังก์ชันคลาวด์ cloud code เป็นฟีเจอร์ของสภาพแวดล้อม parse server ที่ช่วยให้คุณสามารถรันโค้ด javascript ที่กำหนดเองบนฝั่งเซิร์ฟเวอร์ โดยไม่ต้องจัดการเซิร์ฟเวอร์หรือโครงสร้างพื้นฐานของคุณ โดยการเขียน cloud code คุณสามารถขยายแบ็กเอนด์ back4app ของคุณด้วยตรรกะทางธุรกิจเพิ่มเติม การตรวจสอบ ทริกเกอร์ และการรวมที่ทำงานอย่างปลอดภัยและมีประสิทธิภาพบน parse server มันทำงานอย่างไร เมื่อคุณเขียน cloud code โดยปกติแล้วคุณจะวางฟังก์ชัน javascript, ทริกเกอร์ และโมดูล npm ที่จำเป็นในไฟล์ main js (หรือ app js ) ไฟล์นี้จะถูกนำไปใช้งานในโปรเจกต์ back4app ของคุณ ซึ่งจะถูกดำเนินการภายในสภาพแวดล้อมของ parse server เนื่องจากฟังก์ชันและทริกเกอร์เหล่านี้ทำงานบนเซิร์ฟเวอร์ คุณจึงสามารถไว้วางใจให้พวกเขาจัดการกับตรรกะที่เป็นความลับ ประมวลผลข้อมูลที่ละเอียดอ่อน หรือทำการเรียก api ที่เฉพาะสำหรับแบ็กเอนด์ กระบวนการที่คุณอาจไม่ต้องการเปิดเผยโดยตรงต่อไคลเอนต์ cloud code ทั้งหมดสำหรับแอป back4app ของคุณทำงานภายใน parse server ที่จัดการโดย back4app ดังนั้นคุณจึงไม่ต้องกังวลเกี่ยวกับการบำรุงรักษาเซิร์ฟเวอร์ การปรับขนาด หรือการจัดเตรียม เมื่อใดก็ตามที่คุณอัปเดตและนำไฟล์ main js ของคุณไปใช้งาน เซิร์ฟเวอร์ parse ที่กำลังทำงานจะได้รับการอัปเดตด้วยโค้ดล่าสุดของคุณ โครงสร้างไฟล์ main js ไฟล์ main js โดยทั่วไปอาจประกอบด้วย คำสั่ง require สำหรับโมดูลที่จำเป็น (แพ็คเกจ npm, โมดูล node ที่มีอยู่ หรือไฟล์ cloud code อื่น ๆ) การกำหนดฟังก์ชัน cloud โดยใช้ parse cloud define() ทริกเกอร์ เช่น parse cloud beforesave() , parse cloud aftersave() , เป็นต้น โมดูล npm ที่คุณติดตั้ง (ถ้าจำเป็น) ตัวอย่างเช่น คุณอาจติดตั้งแพ็คเกจเช่น axios เพื่อทำการเรียก http จากนั้นคุณสามารถ require (หรือ import) มันที่ด้านบนของไฟล์ของคุณ // main js // 1 import necessary modules and other cloud code files const axios = require('axios') const report = require(' /reports') // 2 define a custom cloud function parse cloud define('fetchexternaldata', async (request) => { const url = request params url if (!url) { throw new error('url parameter is required') } const response = await axios get(url) return response data }) // 3 example of a beforesave trigger parse cloud beforesave('todo', (request) => { const todo = request object if (!todo get('title')) { throw new error('todo must have a title') } }) ด้วยความสามารถในการติดตั้งและใช้โมดูล npm cloud code จึงมีความยืดหยุ่นอย่างมาก ทำให้คุณสามารถรวมเข้ากับ api ภายนอก ทำการแปลงข้อมูล หรือดำเนินการตรรกะที่ซับซ้อนด้านเซิร์ฟเวอร์ กรณีการใช้งานทั่วไป ตรรกะธุรกิจ ตัวอย่างเช่น คุณอาจคำนวณคะแนนของผู้ใช้ในเกมโดยการรวมคุณสมบัติต่างๆ ของวัตถุหลายๆ ตัว และจากนั้นบันทึกข้อมูลนั้นโดยอัตโนมัติ การตรวจสอบข้อมูล ตรวจสอบให้แน่ใจว่าฟิลด์บางอย่างมีอยู่หรือว่าผู้ใช้มีสิทธิ์ที่ถูกต้องก่อนที่จะบันทึกหรือลบระเบียน ทริกเกอร์ ดำเนินการเมื่อข้อมูลเปลี่ยนแปลง (เช่น ส่งการแจ้งเตือนเมื่อผู้ใช้ปรับปรุงโปรไฟล์ของตน) การรวมระบบ เชื่อมต่อกับ api หรือบริการของบุคคลที่สาม ตัวอย่างเช่น คุณสามารถรวมเข้ากับเกตเวย์การชำระเงิน การแจ้งเตือน slack หรือแพลตฟอร์มการตลาดทางอีเมลโดยตรงจาก cloud code การบังคับใช้ความปลอดภัย เพิ่มชั้นความปลอดภัยเพิ่มเติมโดยการตรวจสอบและทำความสะอาดพารามิเตอร์ข้อมูลนำเข้าในฟังก์ชัน cloud code ของคุณ ตัวอย่างเช่น คุณสามารถตรวจสอบให้แน่ใจว่าข้อมูลที่เข้ามาตรงตามรูปแบบที่เฉพาะเจาะจง ปฏิเสธข้อมูลที่ไม่ถูกต้องหรือเป็นอันตราย และบังคับใช้กฎการเข้าถึงตามบทบาทหรือสิทธิ์ของผู้ใช้ก่อนที่จะดำเนินการที่ละเอียดอ่อน ปรับใช้ฟังก์ชันของคุณ ด้านล่างนี้คือฟังก์ชัน cloud code ที่ง่ายซึ่งคำนวณความยาวของสตริงข้อความที่ส่งจากไคลเอนต์ main js // main js parse cloud define('calculatetextlength', async (request) => { const { text } = request params if (!text) { throw new error('no text provided') } return { length text length } }) การปรับใช้ผ่าน back4app cli 1 ติดตั้ง cli สำหรับ linux/macos curl https //raw\ githubusercontent com/back4app/parse cli/back4app/installer sh | sudo /bin/bash สำหรับ windows ดาวน์โหลด b4a exe ไฟล์จาก หน้าการเผยแพร่ https //github com/back4app/parse cli/releases 2 กำหนดค่าคีย์บัญชีของคุณ b4a configure accountkey 3 ปรับใช้โค้ดคลาวด์ของคุณ b4a deploy การปรับใช้ผ่านแดชบอร์ด ในแดชบอร์ดแอปของคุณ ไปที่ cloud code > functions คัดลอก/วางฟังก์ชันลงใน main js editor คลิก deploy เรียกใช้ฟังก์ชันของคุณ จากแอปพลิเคชัน nuxtjs ของคุณโดยใช้ parse sdk export const gettextlength = async (text) => { try { const result = await this $parse cloud run('calculatetextlength', { text }) console log('text length ', result length) } catch (err) { console error('error calling cloud function ', err) } } คุณยังสามารถเรียกใช้ผ่าน rest curl x post \\ h "x parse application id your app id" \\ h "x parse rest api key your rest api key" \\ h "content type application/json" \\ d '{"text" "hello back4app"}' \\ https //parseapi back4app com/functions/calculatetextlength หรือผ่าน graphql mutation { calculatetextlength(input { text "hello graphql" }) { result } } ความยืดหยุ่นนี้ช่วยให้คุณสามารถรวมตรรกะที่กำหนดเองของคุณเข้ากับส่วนหน้า nuxtjs ของคุณหรือไคลเอนต์อื่นใดที่รองรับ rest หรือ graphql ขั้นตอนที่ 5 – การกำหนดค่าการตรวจสอบสิทธิ์ผู้ใช้ การตรวจสอบสิทธิ์ผู้ใช้ใน back4app back4app ใช้คลาส parse user เป็นพื้นฐานสำหรับการตรวจสอบสิทธิ์ โดยค่าเริ่มต้น parse จะจัดการการแฮชรหัสผ่าน โทเค็นเซสชัน และการจัดเก็บข้อมูลอย่างปลอดภัย ซึ่งหมายความว่าคุณไม่จำเป็นต้องตั้งค่ากระบวนการรักษาความปลอดภัยที่ซับซ้อนด้วยตนเอง การตั้งค่าการตรวจสอบสิทธิ์ผู้ใช้ ในแอปพลิเคชัน nuxt คุณสามารถสร้างผู้ใช้ใหม่ได้ด้วย export const signupuser = async (username, password, email) => { const user = new this $parse user() user set('username', username) user set('password', password) user set('email', email) try { await user signup() console log('user signed up successfully!') } catch (error) { console error('error signing up user ', error) } } เข้าสู่ระบบผู้ใช้ที่มีอยู่ export const loginuser = async (username, password) => { try { const user = await this $parse user login(username, password) console log('user logged in ', user) } catch (error) { console error('error logging in user ', error) } } ผ่าน rest การเข้าสู่ระบบอาจมีลักษณะดังนี้ curl x get \\ h "x parse application id your app id" \\ h "x parse rest api key your rest api key" \\ g \\ \ data urlencode 'username=alice' \\ \ data urlencode 'password=secret123' \\ https //parseapi back4app com/login การจัดการเซสชัน หลังจากการเข้าสู่ระบบที่สำเร็จ parse จะสร้าง โทเค็นเซสชัน ที่ถูกเก็บไว้ในวัตถุผู้ใช้ ในแอป nuxt ของคุณ คุณสามารถเข้าถึงผู้ใช้ที่เข้าสู่ระบบอยู่ในขณะนี้ const currentuser = this $parse user current() if (currentuser) { console log('currently logged in user ', currentuser getusername()) } else { console log('no user is logged in') } parse จะจัดการเซสชันที่ใช้โทเค็นโดยอัตโนมัติในพื้นหลัง แต่คุณยังสามารถจัดการหรือเพิกถอนเซสชันเหล่านี้ด้วยตนเองได้ นี่มีประโยชน์เมื่อคุณต้องการออกจากระบบ await this $parse user logout() การรวมเข้าสังคม back4app และ parse สามารถรวมเข้ากับผู้ให้บริการ oauth ที่นิยม เช่น google หรือ facebook , โดยการติดตั้งแพ็คเกจเพิ่มเติมหรือใช้ตัวเชื่อมที่มีอยู่ ตัวอย่างเช่น คุณสามารถตั้งค่าการเข้าสู่ระบบ facebook โดยการกำหนดค่า facebook app id ของคุณและใช้ parse facebookutils login() คำแนะนำโดยละเอียดจะแตกต่างกันไป ดังนั้นโปรดดูที่ เอกสารการเข้าสังคม https //www back4app com/docs/platform/sign in with apple const facebooklogin = async () => { try { const user = await this $parse facebookutils login('email') console log(user existed() ? 'user logged in' 'user signed up and logged in') } catch (error) { console error('error logging in with facebook ', error) } } การตรวจสอบอีเมลและการรีเซ็ตรหัสผ่าน เพื่อเปิดใช้งานการตรวจสอบอีเมลและการรีเซ็ตรหัสผ่าน ไปที่การตั้งค่าอีเมล ในแดชบอร์ด back4app ของคุณ เปิดใช้งานการตรวจสอบอีเมล เพื่อให้แน่ใจว่าผู้ใช้ใหม่ยืนยันความเป็นเจ้าของที่อยู่อีเมลของตน กำหนดค่าที่อยู่จาก , เทมเพลตอีเมล และโดเมนที่กำหนดเองของคุณหากต้องการ ฟีเจอร์เหล่านี้ช่วยปรับปรุงความปลอดภัยของบัญชีและประสบการณ์ของผู้ใช้โดยการตรวจสอบความเป็นเจ้าของอีเมลของผู้ใช้และให้วิธีการกู้คืนรหัสผ่านที่ปลอดภัย ขั้นตอนที่ 6 – การจัดการการจัดเก็บไฟล์ การอัปโหลดและการดึงไฟล์ parse รวมถึง parse file คลาสสำหรับจัดการการอัปโหลดไฟล์ ซึ่ง back4app จะเก็บไว้อย่างปลอดภัย export const uploadimage = async (file) => { // file is typically from an \<input type="file" > in a nuxt component const name = file name const parsefile = new this $parse file(name, file) try { const savedfile = await parsefile save() console log('file saved ', savedfile url()) return savedfile url() } catch (err) { console error('error uploading file ', err) } } เพื่อแนบไฟล์กับวัตถุในฐานข้อมูล export const createphotoobject = async (file) => { const photo = this $parse object extend('photo') const photo = new photo() const parsefile = new this $parse file(file name, file) photo set('imagefile', parsefile) return await photo save() } การดึง url ของไฟล์นั้นง่ายมาก const imagefile = photo get('imagefile') const imageurl = imagefile url() // use imageurl as needed ความปลอดภัยของไฟล์ parse server มีการกำหนดค่าที่ยืดหยุ่นเพื่อจัดการความปลอดภัยในการอัปโหลดไฟล์ ตัวอย่างต่อไปนี้แสดงให้เห็นว่าคุณสามารถตั้งค่าการอนุญาตเพื่อควบคุมว่าใครสามารถอัปโหลดไฟล์ไปยังเซิร์ฟเวอร์ได้ { "fileupload" { "enableforpublic" true, "enableforanonymoususer" true, "enableforauthenticateduser" true } } enableforpublic เมื่อถูกตั้งค่าเป็น true จะอนุญาตให้ใครก็ได้ ไม่ว่าจะมีสถานะการตรวจสอบสิทธิ์หรือไม่ สามารถอัปโหลดไฟล์ได้ enableforanonymoususer ควบคุมว่า ผู้ใช้ที่ไม่ระบุ (ไม่ได้ลงทะเบียน) สามารถอัปโหลดไฟล์ได้หรือไม่ enableforauthenticateduser ระบุว่าเฉพาะผู้ใช้ที่ได้รับการตรวจสอบสิทธิ์เท่านั้นที่สามารถอัปโหลดไฟล์ได้ ซึ่งเหมาะสำหรับการรับรองว่าผู้ใช้ที่เชื่อถือได้เท่านั้นที่มีสิทธิ์เข้าถึงฟังก์ชันนี้ ขั้นตอนที่ 7 – การกำหนดตารางงานด้วย cloud jobs งานคลาวด์ งานคลาวด์ ใน back4app ช่วยให้คุณสามารถกำหนดเวลาและรันงานประจำบนแบ็กเอนด์ของคุณ เช่น การทำความสะอาดข้อมูลเก่าหรือการส่งอีเมลสรุปประจำวัน งานคลาวด์ทั่วไปอาจมีลักษณะดังนี้ // main js parse cloud job('cleanupoldtodos', async (request) => { // this runs in the background, not triggered by a direct user request const todo = parse object extend('todo') const query = new parse query(todo) // for example, remove todos older than 30 days const now = new date() const thirty days = 30 24 60 60 1000 const cutoff = new date(now thirty days) query lessthan('createdat', cutoff) try { const oldtodos = await query find({ usemasterkey true }) await parse object destroyall(oldtodos, { usemasterkey true }) return `deleted ${oldtodos length} old todos ` } catch (err) { throw new error('error during cleanup ' + err message) } }) ปรับใช้โค้ดคลาวด์ของคุณ ด้วยงานใหม่ (ผ่าน cli หรือแดชบอร์ด) ไปที่แดชบอร์ด back4app > การตั้งค่าแอป > การตั้งค่าเซิร์ฟเวอร์ > งานพื้นหลัง กำหนดเวลา ให้ทำงานทุกวันหรือในช่วงเวลาที่เหมาะสมกับความต้องการของคุณ งานคลาวด์ช่วยให้คุณสามารถทำให้การบำรุงรักษาพื้นหลังหรือกระบวนการที่เกิดขึ้นเป็นระยะๆ อัตโนมัติ โดยไม่ต้องการการแทรกแซงจากมนุษย์ ขั้นตอนที่ 8 – การรวม webhooks webhooks ช่วยให้แอป back4app ของคุณสามารถส่งคำขอ http ไปยังบริการภายนอกเมื่อเกิดเหตุการณ์บางอย่าง นี่เป็นเครื่องมือที่ทรงพลังสำหรับการรวมเข้ากับระบบของบุคคลที่สาม เช่น เกตเวย์การชำระเงิน (เช่น stripe), เครื่องมือการตลาดทางอีเมล หรือแพลตฟอร์มการวิเคราะห์ข้อมูล ไปที่การตั้งค่า webhooks ในแดชบอร์ด back4app ของคุณ > เพิ่มเติม > webhooks และจากนั้นคลิกที่ เพิ่ม webhook ตั้งค่าจุดสิ้นสุด (เช่น, https //your external service com/webhook endpoint https //your external service com/webhook endpoint ) กำหนดค่า triggers เพื่อระบุว่าเหตุการณ์ใดในคลาส back4app หรือฟังก์ชัน cloud code ของคุณจะทำให้ webhook ทำงาน ตัวอย่างเช่น หากคุณต้องการแจ้งเตือนช่อง slack ทุกครั้งที่มีการสร้าง todo ใหม่ สร้างแอป slack ที่รับเว็บฮุคเข้ามา คัดลอก url เว็บฮุคของ slack ในแดชบอร์ด back4app ของคุณ ตั้งค่าจุดสิ้นสุดไปที่ url slack สำหรับเหตุการณ์ “บันทึกใหม่ในคลาส todo ” คุณยังสามารถเพิ่ม http headers หรือ payloads ที่กำหนดเองได้หากจำเป็น คุณยังสามารถกำหนด webhooks ใน cloud code โดยการทำ http requests ที่กำหนดเองใน triggers เช่น beforesave, aftersave ขั้นตอนที่ 9 – สำรวจแผงผู้ดูแล back4app แอป back4app admin app เป็นอินเตอร์เฟซการจัดการที่ใช้เว็บซึ่งออกแบบมาสำหรับผู้ใช้ที่ไม่ใช่เทคนิคเพื่อทำการดำเนินการ crud และจัดการงานข้อมูลประจำวันโดยไม่ต้องเขียนโค้ดใดๆ มันให้ อินเตอร์เฟซที่มุ่งเน้นโมเดล , ใช้งานง่าย ที่ช่วยให้การบริหารฐานข้อมูล การจัดการข้อมูลที่กำหนดเอง และการดำเนินการในระดับองค์กรเป็นไปอย่างราบรื่น การเปิดใช้งานแอปผู้ดูแล เปิดใช้งาน โดยไปที่ app dashboard > more > admin app และคลิกที่ปุ่ม “enable admin app ” สร้างผู้ใช้ผู้ดูแลคนแรก (ชื่อผู้ใช้/รหัสผ่าน) ซึ่งจะสร้างบทบาทใหม่ (b4aadminuser) และคลาส (b4asetting, b4amenuitem, และ b4acustomfield) ในสคีมาของแอปของคุณโดยอัตโนมัติ เลือกซับโดเมน สำหรับการเข้าถึงอินเตอร์เฟซผู้ดูแลและทำการตั้งค่าให้เสร็จสมบูรณ์ เข้าสู่ระบบ โดยใช้ข้อมูลประจำตัวผู้ดูแลระบบที่คุณสร้างขึ้นเพื่อเข้าถึงแดชบอร์ดแอปผู้ดูแลระบบใหม่ของคุณ เมื่อเปิดใช้งานแล้ว แอปผู้ดูแลระบบ back4app จะทำให้การดู แก้ไข หรือ ลบระเบียนจากฐานข้อมูลของคุณเป็นเรื่องง่าย โดยไม่ต้องใช้ parse dashboard หรือโค้ดแบ็กเอนด์โดยตรง ด้วยการควบคุมการเข้าถึงที่สามารถกำหนดค่าได้ คุณสามารถแชร์อินเทอร์เฟซนี้กับสมาชิกในทีม หรือ ลูกค้าที่ต้องการวิธีการจัดการข้อมูลที่ชัดเจนและคลิกได้อย่างปลอดภัย บทสรุป โดยการติดตามบทแนะนำที่ครอบคลุมนี้ คุณได้ สร้างแบ็คเอนด์ที่ปลอดภัย สำหรับแอป nuxtjs บน back4app กำหนดค่าฐานข้อมูล ด้วยสคีมาของคลาส ประเภทข้อมูล และความสัมพันธ์ รวมการค้นหาแบบเรียลไทม์ (live queries) สำหรับการอัปเดตข้อมูลทันที ใช้มาตรการด้านความปลอดภัย โดยใช้ acls และ clps เพื่อปกป้องและจัดการการเข้าถึงข้อมูล นำฟังก์ชัน cloud code มาใช้เพื่อรันตรรกะธุรกิจที่กำหนดเองบนเซิร์ฟเวอร์ ตั้งค่าการตรวจสอบสิทธิ์ผู้ใช้ โดยสนับสนุนการตรวจสอบอีเมลและการรีเซ็ตรหัสผ่าน จัดการการอัปโหลดไฟล์ และการเรียกคืน โดยมีการควบคุมความปลอดภัยของไฟล์เป็นตัวเลือก กำหนดเวลางาน cloud สำหรับงานพื้นหลังอัตโนมัติ ใช้ webhooks เพื่อรวมกับบริการภายนอก สำรวจแผงผู้ดูแลระบบ back4app สำหรับการจัดการข้อมูล ด้วยฟรอนต์เอนด์ nuxtjs ที่แข็งแกร่งและแบ็คเอนด์ back4app ที่มีความเสถียร คุณพร้อมที่จะพัฒนาแอปพลิเคชันที่มีฟีเจอร์มากมาย ขยายขนาดได้ และปลอดภัยแล้ว ดำเนินการสำรวจฟังก์ชันการทำงานที่ซับซ้อนมากขึ้น รวมตรรกะธุรกิจของคุณ และใช้พลังของ back4app เพื่อประหยัดเวลาในการจัดการเซิร์ฟเวอร์และฐานข้อมูลอย่างมาก โค้ดดิ้งให้สนุก! ขั้นตอนถัดไป สร้างแอป nuxtjs ที่พร้อมสำหรับการผลิต โดยการขยายแบ็กเอนด์นี้เพื่อจัดการกับโมเดลข้อมูลที่ซับซ้อนมากขึ้น กลยุทธ์การแคช และการปรับแต่งประสิทธิภาพ รวมฟีเจอร์ขั้นสูง เช่น กระบวนการตรวจสอบสิทธิ์เฉพาะทาง การควบคุมการเข้าถึงตามบทบาท หรือ api ภายนอก (เช่น เกตเวย์การชำระเงิน) ตรวจสอบเอกสารทางการของ back4app สำหรับการเจาะลึกในด้านความปลอดภัยขั้นสูง การปรับแต่งประสิทธิภาพ และการวิเคราะห์บันทึก สำรวจบทเรียนอื่นๆ เกี่ยวกับแอปพลิเคชันแชทแบบเรียลไทม์ แดชบอร์ด iot หรือบริการตามตำแหน่ง คุณสามารถรวมเทคนิคที่เรียนรู้ที่นี่กับ api ของบุคคลที่สามเพื่อสร้างแอปพลิเคชันที่ซับซ้อนในโลกจริง