มุมมอง Google Picker

สัปดาห์ที่ แล้วเราเห็นFile Uploader ทั่วไปที่มี Vue

ตอนนี้เรามาดูกันว่าเราจะเลือกไฟล์จาก Google Drive ได้อย่างไร

การตั้งค่าเริ่มต้นกับ Google

ไปที่ https://console.developers.google.com. สร้างโครงการ

หลังจากสร้างโปรเจ็กต์ของคุณแล้ว มันจะแสดงรายการ ให้คลิกที่โปรเจ็กต์ที่คุณสร้าง

คุณจะเห็นกล่องโต้ตอบ นี้

คุณจะต้องสร้างข้อมูลรับรองสองรายการ:

1. คีย์ API
2. รหัสไคลเอ็นต์ OAuth

การสร้างรหัสไคลเอ็นต์ OAuth:

หากต้องการสร้างรหัสไคลเอ็นต์ OAuth คุณต้องตั้งชื่อผลิตภัณฑ์บนหน้าจอคำยินยอม ก่อน

ในหน้าจอยินยอม OAuth ของคุณ (ดังที่เห็นในรูปด้านบน) ให้ป้อนรายละเอียดแอปพลิเคชันเช่น:

• ชื่อแอปพลิเคชัน
• โลโก้แอปพลิเคชัน และ
• โดเมนที่ได้รับอนุญาต

มุ่งหน้าสู่การสร้างรหัสไคลเอ็นต์ OAuth

เมื่อสร้างรหัสไคลเอ็นต์ OAuth สำเร็จ คุณจะได้รับรหัสลูกค้าที่ไม่ซ้ำกันและรหัสลับ

ตอนนี้ไปที่หน้าจอแดชบอร์ดแล้วทำตามขั้นตอน:

• คลิก " เปิดใช้งาน API และบริการ "
• ค้นหา“ Google Picker API ” และเปิดใช้งาน API

การติดตั้ง Vue และสร้างแอปพลิเคชันใหม่

( ข้ามไปหัวข้อถัดไปหากทำเสร็จแล้ว.. )

ติดตั้ง vue-cli โดยให้ Node v8.9 ขึ้นไป

หรือ

การสร้างโครงการใหม่

สร้างส่วนประกอบ GDriveSelector และรวมสคริปต์ Google API ไว้ใน hook วงจรการใช้งานที่เมาท์ของส่วนประกอบนี้

ประกาศคุณสมบัติข้อมูลที่จำเป็นของส่วนประกอบ

การกำหนดฟังก์ชันสำหรับการเชื่อมต่อ Google Drive

• ฟังก์ชันที่จัดการ Google Auth และโหลดตัวเลือก
• ฟังก์ชั่นที่จัดการผลลัพธ์การตรวจสอบสิทธิ์ของ Google
• ฟังก์ชั่นที่สร้าง Picker
• ฟังก์ชันการโทรกลับสำหรับ Picker

เมื่อตั้งค่าทุกอย่างเรียบร้อยแล้ว คุณก็พร้อมที่จะทดสอบฟีเจอร์ Google File Picker ของคุณแล้ว

สามารถดูตัวอย่างการทำงานง่ายๆ ได้ที่นี่

สามารถพบได้ที่นี่

นี่คือKarthik ที่เป็นตัวแทนของกาลเวลา

หากคุณพบว่าโพสต์บนบล็อกนี้มีประโยชน์ โปรดแชร์กับเพื่อน

หากคุณพบปัญหาใด ๆ โปรดอย่าลังเลที่จะเพิ่มความคิดเห็นของคุณ

สัปดาห์หน้าจะมี Dropbox Selecter API พร้อม Vue

ติดตามPractical Designและคอยติดตาม