Tiện ích tìm kiếm cung cấp giao diện tìm kiếm có thể tuỳ chỉnh cho các ứng dụng web. Tiện ích này chỉ yêu cầu một lượng nhỏ HTML và JavaScript để triển khai và bật các tính năng tìm kiếm phổ biến như các thuộc tính và phân trang. Bạn cũng có thể tuỳ chỉnh các phần của giao diện bằng CSS và JavaScript.
Nếu bạn cần sự linh hoạt hơn so với khả năng của tiện ích, hãy cân nhắc sử dụng API Truy vấn. Để biết thông tin về cách tạo giao diện tìm kiếm bằng API Truy vấn, hãy tham khảo bài viết Tạo giao diện tìm kiếm bằng API Truy vấn.
Xây dựng giao diện tìm kiếm
Việc xây dựng giao diện tìm kiếm cần một số bước sau:
- Định cấu hình ứng dụng tìm kiếm
- Tạo mã ứng dụng khách cho ứng dụng
- Thêm mã đánh dấu HTML cho hộp tìm kiếm và kết quả
- Tải tiện ích trên trang
- Khởi chạy tiện ích
Định cấu hình ứng dụng tìm kiếm
Mỗi giao diện tìm kiếm phải có một ứng dụng tìm kiếm được xác định trong bảng điều khiển dành cho quản trị viên. Ứng dụng tìm kiếm cung cấp thêm thông tin cho cụm từ tìm kiếm, chẳng hạn như nguồn dữ liệu, thuộc tính và chế độ cài đặt chất lượng tìm kiếm.
Để tạo một ứng dụng tìm kiếm, hãy tham khảo phần Tạo trải nghiệm tìm kiếm tuỳ chỉnh.
Tạo mã ứng dụng khách cho ứng dụng
Ngoài các bước trong bài viết Định cấu hình quyền truy cập vào Google Cloud Search API, bạn cũng phải tạo mã ứng dụng khách cho ứng dụng web.
Khi bạn định cấu hình dự án:
- Chọn loại ứng dụng Web browser (Trình duyệt web)
- Cung cấp URI gốc của ứng dụng.
- Ghi chú về mã ứng dụng khách đã được tạo. Bạn sẽ cần mã ứng dụng khách để hoàn tất các bước tiếp theo. Không yêu cầu mật khẩu ứng dụng khách cho tiện ích.
Để biết thêm thông tin, hãy xem bài viết OAuth 2.0 cho Ứng dụng web phía máy khách.
Thêm mã đánh dấu HTML
Tiện ích này cần một lượng nhỏ HTML để hoạt động. Bạn phải cung cấp:
- Phần tử
input
của hộp tìm kiếm. - Một phần tử để neo cửa sổ đề xuất bật lên.
- Một phần tử để chứa kết quả tìm kiếm.
- (Không bắt buộc) Cung cấp một phần tử để chứa các chế độ điều khiển thuộc tính.
Đoạn mã HTML sau đây hiển thị HTML cho một tiện ích tìm kiếm, trong đó các phần tử cần liên kết được xác định bằng thuộc tính id
của chúng:
Tải tiện ích
Tiện ích này được tải động thông qua một tập lệnh của trình tải. Để đưa trình tải vào, hãy sử dụng thẻ <script>
như dưới đây:
Bạn phải cung cấp lệnh gọi lại onload
trong thẻ tập lệnh. Hàm này được gọi khi trình tải đã sẵn sàng. Khi trình tải đã sẵn sàng, hãy tiếp tục tải tiện ích bằng cách gọi gapi.load()
để tải ứng dụng API, mô-đun Đăng nhập bằng Google và Cloud Search.
Hàm initializeApp()
được gọi sau khi tất cả các mô-đun đã được tải.
Khởi chạy tiện ích
Trước tiên, hãy khởi chạy thư viện ứng dụng bằng cách gọi gapi.client.init()
hoặc gapi.auth2.init()
với mã ứng dụng khách đã tạo và phạm vi https://www.googleapis.com/auth/cloud_search.query
. Tiếp theo, hãy sử dụng các lớp gapi.cloudsearch.widget.resultscontainer.Builder
và gapi.cloudsearch.widget.searchbox.Builder
để định cấu hình tiện ích này và liên kết tiện ích đó với các phần tử HTML của bạn.
Ví dụ sau đây trình bày cách khởi chạy tiện ích:
Ví dụ ở trên tham chiếu hai biến cho cấu hình được xác định là:
Tuỳ chỉnh trải nghiệm đăng nhập
Theo mặc định, tiện ích này sẽ nhắc người dùng đăng nhập và cấp quyền cho ứng dụng tại thời điểm họ bắt đầu nhập truy vấn. Bạn có thể sử dụng tính năng Đăng nhập bằng Google cho trang web để mang lại trải nghiệm đăng nhập phù hợp hơn cho người dùng.
Cấp phép trực tiếp cho người dùng
Sử dụng tính năng Đăng nhập bằng Google để theo dõi trạng thái đăng nhập của người dùng và người dùng đăng nhập hoặc đăng xuất nếu cần. Ví dụ: ví dụ sau đây quan sát trạng thái isSignedIn
để theo dõi các thay đổi đối với quá trình đăng nhập và sử dụng phương thức GoogleAuth.signIn()
để bắt đầu đăng nhập từ một lượt nhấp vào nút:
Để biết thêm thông tin, hãy xem bài viết Đăng nhập bằng Google.
Tự động đăng nhập người dùng
Bạn có thể đơn giản hoá trải nghiệm đăng nhập hơn nữa bằng cách uỷ quyền trước ứng dụng thay mặt cho người dùng trong tổ chức của bạn. Kỹ thuật này cũng hữu ích nếu bạn sử dụng Proxy Cloud Identity Aware để bảo vệ ứng dụng.
Để biết thêm thông tin, hãy xem phần Sử dụng tính năng Đăng nhập bằng Google với các ứng dụng CNTT.
Tuỳ chỉnh giao diện
Bạn có thể thay đổi giao diện của giao diện tìm kiếm thông qua việc kết hợp các kỹ thuật:
- Ghi đè kiểu bằng CSS
- Trang trí các phần tử bằng bộ chuyển đổi
- Tạo phần tử tuỳ chỉnh bằng bộ chuyển đổi
Ghi đè kiểu bằng CSS
Tiện ích tìm kiếm đi kèm với CSS riêng để tạo kiểu cho phần đề xuất và kết quả, cũng như các chế độ kiểm soát phân trang. Bạn có thể định kiểu lại các thành phần này nếu cần.
Trong khi tải, tiện ích tìm kiếm sẽ tự động tải biểu định kiểu mặc định. Điều này xảy ra sau khi biểu định kiểu của ứng dụng được tải, làm tăng mức độ ưu tiên của các quy tắc. Để đảm bảo kiểu của riêng bạn được ưu tiên hơn so với kiểu mặc định, hãy sử dụng bộ chọn đối tượng cấp trên để tăng tính cụ thể của các quy tắc mặc định.
Ví dụ: quy tắc sau đây không có hiệu lực nếu được tải bằng thẻ link
hoặc style
tĩnh trong tài liệu.
.cloudsearch_suggestion_container {
font-size: 14px;
}
Thay vào đó, hãy đáp ứng điều kiện cho quy tắc này bằng mã hoặc lớp của vùng chứa đối tượng cấp trên đã khai báo trên trang.
#suggestions_anchor .cloudsearch_suggestion_container {
font-size: 14px;
}
Để biết danh sách các lớp hỗ trợ và HTML mẫu do tiện ích này tạo ra, hãy xem tài liệu tham khảo Các lớp CSS được hỗ trợ.
Trang trí các phần tử bằng bộ chuyển đổi
Để trang trí một phần tử trước khi kết xuất, hãy tạo và đăng ký lại một bộ chuyển đổi giúp triển khai một trong các phương thức trang trí như decorateSuggestionElement
hoặc decorateSearchResultElement.
Ví dụ: những bộ chuyển đổi sau đây sẽ thêm một lớp tuỳ chỉnh vào phần tử đề xuất và kết quả.
Để đăng ký bộ chuyển đổi khi khởi chạy tiện ích, hãy sử dụng phương thức setAdapter()
của lớp Builder
tương ứng:
Trang trí có thể sửa đổi các thuộc tính của phần tử vùng chứa cũng như bất kỳ phần tử con nào. Bạn có thể thêm hoặc xoá các phần tử con trong quá trình trang trí. Tuy nhiên, nếu thay đổi cấu trúc của các thành phần, hãy cân nhắc tạo trực tiếp các thành phần thay vì trang trí.
Tạo phần tử tuỳ chỉnh bằng bộ chuyển đổi
Để tạo phần tử tuỳ chỉnh cho đề xuất, vùng chứa thuộc tính hoặc kết quả tìm kiếm, hãy tạo và đăng ký một bộ chuyển đổi giúp triển khai createSuggestionElement
, createFacetResultElement
hoặc createSearchResultElement
theo cách tương ứng.
Các bộ chuyển đổi sau đây minh hoạ cách tạo các phần tử đề xuất tuỳ chỉnh và kết quả tìm kiếm bằng cách sử dụng thẻ <template>
HTML.
Để đăng ký lại bộ chuyển đổi khi khởi chạy tiện ích, hãy sử dụng phương thức setAdapter()
của lớp Builder
tương ứng:
Việc tạo các phần tử thuộc tính tuỳ chỉnh bằng createFacetResultElement
phải tuân theo một số quy định hạn chế:
- Bạn phải đính kèm lớp CSS
cloudsearch_facet_bucket_clickable
vào phần tử mà người dùng nhấp vào để bật/tắt một bộ chứa. - Bạn phải gói từng bộ chứa trong một phần tử chứa lớp CSS
cloudsearch_facet_bucket_container
. - Bạn không thể kết xuất các bộ chứa theo thứ tự khác với thứ tự xuất hiện trong phản hồi.
Ví dụ: đoạn mã sau đây hiển thị các thuộc tính bằng cách sử dụng đường liên kết thay vì hộp đánh dấu.
Tuỳ chỉnh hành vi tìm kiếm
Các chế độ cài đặt Ứng dụng tìm kiếm đại diện cho cấu hình mặc định của giao diện tìm kiếm và ở dạng tĩnh. Để triển khai các thuộc tính hoặc bộ lọc động, chẳng hạn như cho phép người dùng chuyển đổi nguồn dữ liệu, bạn có thể ghi đè chế độ cài đặt của ứng dụng tìm kiếm bằng cách chặn yêu cầu tìm kiếm bằng một bộ chuyển đổi.
Triển khai bộ chuyển đổi bằng phương thức interceptSearchRequest
để sửa đổi các yêu cầu được gửi đến API tìm kiếm trước khi thực thi.
Ví dụ: bộ chuyển đổi sau đây chặn các yêu cầu hạn chế truy vấn ở một nguồn do người dùng chọn:
Để đăng ký bộ chuyển đổi khi khởi chạy tiện ích, hãy sử dụng phương thức setAdapter()
khi tạo ResultsContainer
HTML sau đây được dùng để hiển thị một hộp chọn để lọc theo nguồn:
Đoạn mã sau đây sẽ theo dõi sự thay đổi, đặt lựa chọn và thực thi lại truy vấn nếu cần.
Bạn cũng có thể chặn phản hồi tìm kiếm bằng cách triển khai interceptSearchResponse
trong bộ chuyển đổi.
Ghim phiên bản API
Theo mặc định, tiện ích này sử dụng phiên bản ổn định mới nhất của API. Để khoá trong một phiên bản cụ thể, hãy đặt tham số cấu hình cloudsearch.config/apiVersion
thành phiên bản ưu tiên trước khi khởi chạy tiện ích.
Phiên bản API sẽ được đặt thành 1.0 theo mặc định nếu không được đặt hoặc đặt thành một giá trị không hợp lệ.
Ghim phiên bản tiện ích
Để tránh những thay đổi không mong muốn đối với giao diện tìm kiếm, hãy đặt thông số cấu hình cloudsearch.config/clientVersion
như sau:
gapi.config.update('cloudsearch.config/clientVersion', 1.1);
Phiên bản tiện ích sẽ mặc định là 1.0 nếu không được đặt hoặc được đặt thành một giá trị không hợp lệ.
Bảo mật giao diện tìm kiếm
Kết quả tìm kiếm chứa thông tin có mức độ nhạy cảm cao. Hãy làm theo các phương pháp hay nhất để bảo mật ứng dụng web, đặc biệt là chống lại các cuộc tấn công bằng clickjacking.
Để biết thêm thông tin, hãy xem Dự án hướng dẫn OWASP
Bật tính năng gỡ lỗi
Sử dụng interceptSearchRequest
để bật tính năng gỡ lỗi cho tiện ích tìm kiếm. Ví dụ:
if (!request.requestOptions) {
// Make sure requestOptions is populated
request.requestOptions = {};
}
// Enable debugging
request.requestOptions.debugOptions = {enableDebugging: true}
return request;