Tài liệu này giải thích cách tích hợp Google Picker vào các ứng dụng web bằng Google Picker API.
Google Picker API là một API JavaScript mà bạn có thể triển khai để cho phép người dùng chọn hoặc tải tệp trên Google Drive lên bằng Google Picker. Người dùng có thể cấp quyền cho ứng dụng của bạn truy cập vào dữ liệu trên Drive của họ, cung cấp một cách thức an toàn và được uỷ quyền để tương tác với tệp của họ.
Tính năng
Google Picker có một số tính năng:
- Giao diện người dùng Google Drive có giao diện và cảm quan tương tự.
- Một số chế độ xem cho thấy bản xem trước và hình thu nhỏ của các tệp trên Drive.
- Các chế độ xem được lọc trước chỉ cho thấy các loại tệp cụ thể (như tệp PDF hoặc hình ảnh) hoặc một số thư mục.
- Một cửa sổ mô-đun nội tuyến, vì vậy người dùng không bao giờ rời khỏi ứng dụng chính.
Xin lưu ý rằng mặc dù bạn có thể chọn và tải tệp lên bằng Google Picker, nhưng công cụ này không cho phép người dùng sắp xếp, di chuyển hoặc sao chép tệp từ thư mục này sang thư mục khác. Để quản lý tệp, bạn phải sử dụng API Google Drive hoặc giao diện người dùng Drive.
Điều kiện tiên quyết
Các ứng dụng sử dụng Google Picker phải tuân thủ tất cả Điều khoản dịch vụ hiện hành. Quan trọng nhất là bạn phải xác định chính xác bản thân trong các yêu cầu của mình.
Bạn cũng phải có một dự án trên Google Cloud.
Thiết lập môi trường
Để bắt đầu sử dụng Google Picker API, bạn phải thiết lập môi trường của mình.
Bật API
Trước khi sử dụng API của Google, bạn cần bật các API đó trong một dự án trên Google Cloud. Bạn có thể bật một hoặc nhiều API trong một dự án trên Google Cloud.Trong bảng điều khiển Cloud, hãy bật Google Picker API.
Tạo một khoá API
Khoá API là một chuỗi dài chứa các chữ cái viết hoa và viết thường, số, dấu gạch dưới và
dấu gạch nối, chẳng hạn như AIzaSyDaGmWKa4JsXZ-HjGw7ISLn_3namBGewQe. Phương thức xác thực này
được dùng để truy cập ẩn danh vào dữ liệu có sẵn công khai, chẳng hạn như các tệp trên Google Workspace được chia sẻ bằng
chế độ chia sẻ "Bất kỳ ai trên Internet có đường liên kết này". Để biết thêm chi tiết, hãy xem
bài viết Quản lý khoá API.
Cách tạo khoá API:
- Trong bảng điều khiển Cloud, hãy chuyển đến Trình đơn > API và Dịch vụ > Thông tin xác thực.
- Nhấp vào Tạo thông tin xác thực > Khoá API.
- Khoá API mới của bạn sẽ xuất hiện.
- Nhấp vào biểu tượng Sao chép để sao chép khoá API nhằm sử dụng trong mã của ứng dụng. Bạn cũng có thể tìm thấy khoá API trong phần "Khoá API" của thông tin xác thực dự án.
- Để ngăn chặn việc sử dụng trái phép, bạn nên hạn chế nơi và API mà khoá API có thể được sử dụng. Để biết thêm chi tiết, hãy xem Thêm các hạn chế về API.
Uỷ quyền thông tin xác thực cho một ứng dụng web
Để xác thực người dùng cuối và truy cập vào dữ liệu người dùng trong ứng dụng của mình, bạn cần tạo một hoặc nhiều Mã ứng dụng khách OAuth 2.0. Mã ứng dụng khách được dùng để xác định một ứng dụng duy nhất cho các máy chủ OAuth của Google. Nếu ứng dụng của bạn chạy trên nhiều nền tảng, bạn phải tạo một mã ứng dụng khách riêng cho mỗi nền tảng.- Trong Bảng điều khiển API của Google, hãy chuyển đến Trình đơn > Nền tảng xác thực của Google > Ứng dụng.
- Nhấp vào Tạo ứng dụng.
- Nhấp vào Loại ứng dụng > Ứng dụng web.
- Trong trường Name (Tên), hãy nhập tên cho thông tin đăng nhập. Tên này chỉ xuất hiện trong Bảng điều khiển API của Google.
- Thêm URI được uỷ quyền liên quan đến ứng dụng của bạn:
- Ứng dụng phía máy khách (JavaScript)–Trong phần Nguồn gốc JavaScript được uỷ quyền, hãy nhấp vào Thêm URI. Sau đó, hãy nhập một URI để sử dụng cho các yêu cầu của trình duyệt. Thao tác này xác định các miền mà ứng dụng của bạn có thể gửi yêu cầu API đến máy chủ OAuth 2.0.
- Ứng dụng phía máy chủ (Java, Python và các ứng dụng khác)–Trong phần URI chuyển hướng được uỷ quyền, hãy nhấp vào Thêm URI. Sau đó, hãy nhập một URI điểm cuối mà máy chủ OAuth 2.0 có thể gửi phản hồi đến.
- Nhấp vào Tạo.
Thông tin xác thực mới tạo sẽ xuất hiện trong phần Mã ứng dụng khách OAuth 2.0.
Hãy lưu ý Mã ứng dụng khách. Khoá bí mật của ứng dụng khách không được dùng cho các ứng dụng web.
Quan trọng: Ứng dụng của bạn phải gửi mã truy cập OAuth 2.0 kèm theo các chế độ xem truy cập vào dữ liệu người dùng riêng tư khi tạo đối tượng Picker. Để yêu cầu mã truy cập,
hãy xem bài viết Sử dụng OAuth 2.0 để truy cập vào các API của Google.
Quản lý Google Picker
Phần còn lại của tài liệu này trình bày cách tải và hiển thị Google Picker từ một ứng dụng web, cũng như cách triển khai lệnh gọi lại. Để xem mẫu mã đầy đủ, hãy xem bài viết Sử dụng các tính năng của Google Picker API trong ứng dụng web.
Tải thư viện Google Picker
Để tải thư viện Google Picker, hãy gọi
gapi.load
bằng tên thư viện và hàm callback để gọi sau khi tải thành công:
<script>
let tokenClient;
let accessToken = null;
let pickerInited = false;
let gisInited = false;
// Use the API Loader script to load google.picker.
function onApiLoad() {
gapi.load('picker', onPickerApiLoad);
}
function onPickerApiLoad() {
pickerInited = true;
}
function gisLoaded() {
// Replace with your client ID and required scopes.
tokenClient = google.accounts.oauth2.initTokenClient({
client_id: 'CLIENT_ID',
scope: 'SCOPES',
callback: '', // defined later
});
gisInited = true;
}
</script>
<!-- Load the Google API Loader script. -->
<script async defer src="https://apis.google.com/js/api.js" onload="onApiLoad()"></script>
<script async defer src="https://accounts.google.com/gsi/client" onload="gisLoaded()"></script>
Thay thế nội dung sau:
CLIENT_ID: Mã ứng dụng khách của ứng dụng web.SCOPES: Một hoặc nhiều phạm vi OAuth 2.0 mà bạn cần yêu cầu để truy cập vào các API của Google, tuỳ thuộc vào cấp độ truy cập mà bạn cần. Để biết thêm thông tin, hãy xem bài viết Phạm vi OAuth 2.0 cho các API của Google.
Thư viện JavaScript google.accounts.oauth2 giúp bạn nhắc người dùng đồng ý và lấy mã truy cập để làm việc với dữ liệu người dùng. Phương thức initTokenClient khởi chạy một ứng dụng mã thông báo mới bằng mã ứng dụng khách của ứng dụng web. Để biết thêm
thông tin, hãy xem bài viết Sử dụng mô hình mã thông báo.
Hàm onApiLoad tải các thư viện Google Picker. Hàm callback onPickerApiLoad được gọi sau khi thư viện Google Picker tải thành công.
Lưu ý: Nếu đang sử dụng TypeScript, bạn có thể cài đặt
@types/google.picker để
sử dụng window.google.picker. Để báo cáo vấn đề về các loại này, hãy mở một phiếu yêu cầu hỗ trợ.
Hiển thị Google Picker
Hàm createPicker đảm bảo Google Picker API hoàn tất quá trình tải và mã thông báo OAuth 2.0 được tạo. Sử dụng phương thức PickerBuilder.setAppId để đặt Mã ứng dụng Drive bằng số dự án trên đám mây nhằm cho phép ứng dụng truy cập vào tệp của người dùng. Sau đó, hàm này sẽ tạo một thực thể của Google Picker và hiển thị thực thể đó:
// Create and render a Google Picker object for selecting from Drive.
function createPicker() {
const showPicker = () => {
// Replace with your API key and App ID.
const picker = new google.picker.PickerBuilder()
.addView(google.picker.ViewId.DOCS)
.setOAuthToken(accessToken)
.setDeveloperKey('API_KEY')
.setCallback(pickerCallback)
.setAppId('APP_ID')
.build();
picker.setVisible(true);
}
// Request an access token.
tokenClient.callback = async (response) => {
if (response.error !== undefined) {
throw (response);
}
accessToken = response.access_token;
showPicker();
};
if (accessToken === null) {
// Prompt the user to select a Google Account and ask for consent to share their data
// when establishing a new session.
tokenClient.requestAccessToken({prompt: 'consent'});
} else {
// Skip display of account chooser and consent dialog for an existing session.
tokenClient.requestAccessToken({prompt: ''});
}
}
Thay thế nội dung sau:
API_KEY: Khoá API của bạn.APP_ID: Số dự án trên đám mây của bạn.
Để tạo một thực thể Google Picker, bạn phải tạo đối tượng Picker bằng PickerBuilder. PickerBuilder lấy View, mã thông báo OAuth 2.0, khoá dành cho nhà phát triển và a hàm callback để gọi khi thành công (pickerCallback).
Đối tượng Picker hiển thị một View tại một thời điểm. Chỉ định ít nhất một chế độ xem,
bằng cách sử dụng ViewId
(google.picker.ViewId.*) hoặc bằng cách tạo một thực thể của DocsView để kiểm soát thêm cách hiển thị chế độ xem
được hiển thị.
Nếu có nhiều chế độ xem được thêm vào Google Picker, người dùng có thể chuyển từ chế độ xem này sang chế độ xem khác bằng cách nhấp vào một thẻ ở bên trái. Bạn có thể nhóm các thẻ một cách logic
bằng các đối tượng ViewGroup.
Để biết danh sách các chế độ xem hợp lệ, hãy xem ViewId trong
tài liệu tham khảo về Google Picker. Để lấy mã thông báo cho bất kỳ chế độ xem nào trong số này, hãy sử dụng phạm vi https://www.googleapis.com/auth/drive.file.
Triển khai lệnh gọi lại Google Picker
Bạn có thể sử dụng lệnh gọi lại Google Picker để phản ứng với các tương tác của người dùng trong Google Picker, chẳng hạn như chọn một tệp hoặc nhấn vào nút Huỷ. Giao diện
ResponseObject truyền đạt
thông tin về lựa chọn của người dùng.
// A callback implementation.
function pickerCallback(data) {
let url = 'nothing';
if (data[google.picker.Response.ACTION] == google.picker.Action.PICKED) {
const doc = data[google.picker.Response.DOCUMENTS][0];
url = doc[google.picker.Document.URL];
}
const message = `You picked: ${url}`;
document.getElementById('result').textContent = message;
}
Lệnh gọi lại nhận được một đối tượng dữ liệu được mã hoá bằng JSON. Đối tượng này chứa một
Action mà người dùng thực hiện với
Google Picker (google.picker.Response.ACTION). Nếu người dùng chọn một
mục, thì mảng google.picker.Response.DOCUMENTS cũng được điền sẵn. Trong ví dụ này, google.picker.Document.URL xuất hiện trên trang chính. Để biết thông tin chi tiết về các trường dữ liệu, hãy xem giao diện ResponseObject.
Lọc các loại tệp cụ thể
Sử dụng ViewGroup để lọc
các mục cụ thể. Mã mẫu sau đây cho thấy cách chế độ xem phụ "Drive" chỉ hiển thị tài liệu và bản trình bày.
const picker = new google.picker.PickerBuilder()
.addViewGroup(
new google.picker.ViewGroup(google.picker.ViewId.DOCS)
.addView(google.picker.ViewId.DOCUMENTS)
.addView(google.picker.ViewId.PRESENTATIONS))
.setOAuthToken(oauthToken)
.setDeveloperKey(developerKey)
.setAppId(cloudProjectNumber)
.setCallback(pickerCallback)
.build();
Để biết danh sách các loại chế độ xem hợp lệ, hãy xem
ViewId.
Điều chỉnh giao diện của Google Picker
Bạn có thể sử dụng đối tượng Feature để bật
hoặc tắt các tính năng cho nhiều chế độ xem. Để tinh chỉnh giao diện của cửa sổ Google Picker, hãy sử dụng phương thức PickerBuilder.enableFeature hoặc
PickerBuilder.disableFeature. Ví dụ: nếu chỉ có một chế độ xem, bạn có thể muốn ẩn
ngăn điều hướng (Feature.NAV_HIDDEN) để
người dùng có thêm không gian xem các mục.
Mã mẫu sau đây cho thấy ví dụ về bộ chọn tìm kiếm của bảng tính bằng tính năng này:
const picker = new google.picker.PickerBuilder()
.addView(google.picker.ViewId.SPREADSHEETS)
.enableFeature(google.picker.Feature.NAV_HIDDEN)
.setDeveloperKey(developerKey)
.setCallback(pickerCallback)
.build();
Chủ đề có liên quan
- Mã mẫu: Sử dụng các tính năng của Google Picker API trong ứng dụng web
- Chọn phạm vi API Google Drive