Vue Google Picker

Tuần trước chúng tôi đã thấy Trình tải lên tệp chung với Vue .

Bây giờ hãy xem cách chúng ta có thể chọn một tệp từ Google Drive.

Thiết lập ban đầu với Google

Đi đến https://console.developers.google.com. Tạo một dự án.

Sau khi tạo dự án của bạn, nó sẽ được liệt kê, nhấp vào dự án bạn đã tạo.

Bạn sẽ thấy hộp thoại này.

Bạn sẽ phải tạo hai thông tin xác thực:

1. Mã API
2. Id ứng dụng khách OAuth

Tạo Id ứng dụng khách OAuth:

Để tạo ID ứng dụng khách OAuth, trước tiên bạn phải đặt tên sản phẩm trên màn hình đồng ý.

Ở đây, màn hình đồng ý OAuth của bạn (như trong ảnh trên), hãy nhập chi tiết Ứng dụng, chẳng hạn như:

• Tên ứng dụng,
• Logo ứng dụng và
• Tên miền được ủy quyền.

Hãy bắt đầu tạo Id ứng dụng khách OAuth.

Khi tạo thành công Id ứng dụng khách OAuth. Bạn sẽ nhận được ID khách hàng duy nhất và khóa bí mật.

Bây giờ hãy vào màn hình Bảng điều khiển và làm theo các bước:

• Nhấp vào “ Bật API và Dịch vụ ”.
• Tìm kiếm “ Google Picker API ” và Kích hoạt API .

Cài đặt Vue và tạo một ứng dụng mới

( Chuyển sang phần tiếp theo, nếu đã thực hiện xong.. )

Cài đặt vue-cli cho Node v8.9 trở lên đã được cài đặt.

Hoặc

Tạo một dự án mới.

Tạo một thành phần GDriveSelector và đưa tập lệnh Google API vào móc vòng đời được gắn của thành phần này.

Khai báo các thuộc tính dữ liệu cần thiết của thành phần.

Xác định chức năng kết nối Google Drive

• Chức năng xử lý Google Auth và tải bộ chọn
• Hàm xử lý kết quả Google Auth
• Hàm tạo Picker
• Hàm gọi lại cho Picker

Sau khi hoàn tất, bạn đã sẵn sàng thử nghiệm tính năng Trình chọn tệp của Google.

Một ví dụ hoạt động đơn giản có thể được tìm thấy ở đây .

Repo có thể được tìm thấy ở đây .

Đây là Karthik đại diện cho Vượt thời gian .

Nếu bạn thấy bài viết blog này hữu ích, hãy chia sẻ nó với bạn bè.

Nếu bạn thấy có khó khăn gì xin vui lòng bổ sung ý kiến ​​của mình.

Tuần tới sẽ có API Trình chọn Dropbox với Vue.

Hãy theo dõi Thiết kế thực tế và theo dõi.