วิดเจ็ตการค้นหามีอินเทอร์เฟซการค้นหาที่ปรับแต่งได้สําหรับเว็บแอปพลิเคชัน วิดเจ็ตนี้ต้องการ HTML และ JavaScript จำนวนไม่มากในการใช้งานและเปิดใช้ฟีเจอร์การค้นหาทั่วไป เช่น ข้อมูลประกอบและการแบ่งหน้า คุณยังปรับแต่งส่วนต่างๆ ของอินเทอร์เฟซด้วย CSS และ JavaScript ได้อีกด้วย
หากต้องการความยืดหยุ่นมากกว่าที่วิดเจ็ตมีให้ ให้ลองใช้ Query API สำหรับข้อมูลเกี่ยวกับการสร้างอินเทอร์เฟซการค้นหาด้วย API การค้นหา โปรดดูที่การสร้างอินเทอร์เฟซการค้นหาด้วย API การค้นหา
สร้างอินเทอร์เฟซการค้นหา
การสร้างอินเทอร์เฟซการค้นหามีหลายขั้นตอน ดังนี้
- กำหนดค่าแอปพลิเคชันการค้นหา
- สร้างรหัสไคลเอ็นต์สำหรับแอปพลิเคชัน
- เพิ่มมาร์กอัป HTML สำหรับช่องค้นหาและผลลัพธ์
- โหลดวิดเจ็ตในหน้าเว็บ
- เริ่มต้นวิดเจ็ต
กำหนดค่าแอปพลิเคชันการค้นหา
อินเทอร์เฟซการค้นหาแต่ละรายการต้องมีการกำหนดแอปพลิเคชันการค้นหาในคอนโซลผู้ดูแลระบบ แอปพลิเคชันการค้นหาให้ข้อมูลเพิ่มเติมสำหรับคำค้นหา เช่น แหล่งข้อมูล ข้อมูลประกอบ และการตั้งค่าคุณภาพการค้นหา
หากต้องการสร้างแอปพลิเคชันการค้นหา โปรดดูสร้างประสบการณ์การค้นหาที่กำหนดเอง
สร้างรหัสไคลเอ็นต์สำหรับแอปพลิเคชัน
นอกจากขั้นตอนในกำหนดค่าการเข้าถึง Google Cloud Search API คุณต้องสร้างรหัสไคลเอ็นต์สำหรับเว็บแอปพลิเคชันด้วย
สิ่งที่จะเกิดขึ้นเมื่อกำหนดค่าโปรเจ็กต์มีดังนี้
- เลือกประเภทไคลเอ็นต์เว็บเบราว์เซอร์
- ระบุ URI ต้นทาง ของแอป
- บันทึกรหัสไคลเอ็นต์ที่สร้างขึ้น คุณจะต้องใช้รหัสไคลเอ็นต์เพื่อ ทำขั้นตอนถัดไปให้เสร็จสมบูรณ์ ไม่จำเป็นต้องมีรหัสลับไคลเอ็นต์สำหรับวิดเจ็ต
ดูข้อมูลเพิ่มเติมได้ที่ OAuth 2.0 สำหรับเว็บแอปพลิเคชันฝั่งไคลเอ็นต์
เพิ่มมาร์กอัป HTML
วิดเจ็ตนี้ต้องใช้ HTML จำนวนเล็กน้อยในการทำงาน คุณต้องระบุข้อมูลต่อไปนี้
- องค์ประกอบ
input
สำหรับช่องค้นหา - องค์ประกอบที่จะตรึงป๊อปอัปคำแนะนำ
- องค์ประกอบที่จะมีผลการค้นหา
- (ไม่บังคับ) ระบุองค์ประกอบที่จะมีตัวควบคุม Facet
ข้อมูลโค้ด HTML ต่อไปนี้แสดง HTML สำหรับวิดเจ็ต Search โดยองค์ประกอบที่ผูกไว้จะถูกระบุโดยแอตทริบิวต์ id
โหลดวิดเจ็ต
วิดเจ็ตจะโหลดแบบไดนามิกผ่านสคริปต์ตัวโหลด หากต้องการรวมตัวโหลด ให้ใช้แท็ก <script>
ตามที่แสดง ดังนี้
คุณต้องระบุโค้ดเรียกกลับ onload
ในแท็กสคริปต์ ระบบจะเรียกใช้ฟังก์ชันเมื่อตัวโหลดพร้อมใช้งาน เมื่อตัวโหลดพร้อมแล้ว ให้โหลดวิดเจ็ตต่อโดยการเรียกใช้ gapi.load()
เพื่อโหลดไคลเอ็นต์ API, Google Sign-In และ Cloud Search
ระบบจะเรียกใช้ฟังก์ชัน initializeApp()
หลังจากโหลดโมดูลทั้งหมดแล้ว
เริ่มต้นวิดเจ็ต
ก่อนอื่น ให้เริ่มต้นไลบรารีของไคลเอ็นต์โดยการเรียกใช้ gapi.client.init()
หรือ gapi.auth2.init()
ด้วยรหัสไคลเอ็นต์ที่สร้างขึ้นและขอบเขต https://www.googleapis.com/auth/cloud_search.query
จากนั้นใช้คลาส gapi.cloudsearch.widget.resultscontainer.Builder
และ gapi.cloudsearch.widget.searchbox.Builder
เพื่อกำหนดค่าวิดเจ็ตและเชื่อมโยงกับองค์ประกอบ HTML
ตัวอย่างต่อไปนี้แสดงวิธีเริ่มต้นวิดเจ็ต
ตัวอย่างด้านบนอ้างอิงตัวแปร 2 รายการสำหรับการกำหนดค่าซึ่งกำหนดไว้ดังนี้
การปรับแต่งประสบการณ์การลงชื่อเข้าใช้
โดยค่าเริ่มต้น วิดเจ็ตจะแจ้งให้ผู้ใช้ลงชื่อเข้าใช้และให้สิทธิ์แอปเมื่อเริ่มพิมพ์คำค้นหา คุณสามารถใช้ Google Sign-In สำหรับเว็บไซต์เพื่อมอบประสบการณ์การลงชื่อเข้าใช้ที่ปรับให้เหมาะกับผู้ใช้มากขึ้น
ให้สิทธิ์ผู้ใช้โดยตรง
ใช้ลงชื่อเข้าใช้ด้วย Google เพื่อตรวจสอบสถานะการลงชื่อเข้าใช้ของผู้ใช้และผู้ใช้ที่ลงชื่อเข้าใช้หรือออกจากระบบตามความจำเป็น เช่น ตัวอย่างต่อไปนี้จะสังเกตสถานะ isSignedIn
เพื่อตรวจสอบการเปลี่ยนแปลงการลงชื่อเข้าใช้และใช้วิธีการ GoogleAuth.signIn()
เพื่อเริ่มการลงชื่อเข้าใช้จากการคลิกปุ่ม
โปรดดูรายละเอียดเพิ่มเติมที่หัวข้อลงชื่อเข้าใช้ด้วย Google
ผู้ใช้ที่ลงชื่อเข้าใช้โดยอัตโนมัติ
คุณสามารถปรับปรุงการลงชื่อเข้าใช้ให้ดียิ่งขึ้นได้ด้วยการให้สิทธิ์แอปพลิเคชันล่วงหน้าในนามของผู้ใช้ในองค์กร เทคนิคนี้ยังมีประโยชน์หากใช้ Cloud Identity Aware Proxy เพื่อปกป้องแอปพลิเคชัน
โปรดดูข้อมูลเพิ่มเติมที่ใช้ Google Sign-In กับแอป IT
ปรับแต่งอินเทอร์เฟซ
คุณสามารถเปลี่ยนลักษณะของอินเทอร์เฟซการค้นหาโดยใช้เทคนิคต่างๆ ต่อไปนี้ร่วมกัน
- ลบล้างรูปแบบด้วย CSS
- ตกแต่งองค์ประกอบด้วยอะแดปเตอร์
- สร้างองค์ประกอบที่กำหนดเองด้วยอะแดปเตอร์
ลบล้างรูปแบบด้วย CSS
วิดเจ็ต Search มาพร้อมกับ CSS ของตัวเองเพื่อจัดรูปแบบคำแนะนำและองค์ประกอบผลการค้นหา รวมถึงการควบคุมการใส่เลขหน้า คุณสามารถจัดรูปแบบองค์ประกอบเหล่านี้ใหม่ได้ตามต้องการ
ในระหว่างการโหลด วิดเจ็ต Search จะโหลดสไตล์ชีตเริ่มต้นแบบไดนามิก ซึ่งจะเกิดขึ้นหลังจากที่โหลดสไตล์ชีตของแอปพลิเคชันแล้ว ซึ่งเป็นการเพิ่มลำดับความสำคัญของกฎ ใช้ตัวเลือกระดับบนเพื่อเพิ่มความเฉพาะเจาะจงของกฎเริ่มต้น เพื่อให้สไตล์ของคุณเองมีความสำคัญเหนือสไตล์เริ่มต้น
เช่น กฎต่อไปนี้จะไม่มีผลหากโหลดในแท็ก link
แบบคงที่หรือ style
ในเอกสาร
.cloudsearch_suggestion_container {
font-size: 14px;
}
แต่ให้ตรวจสอบคุณสมบัติกฎด้วยรหัสหรือคลาสของคอนเทนเนอร์ระดับบนที่ประกาศไว้ในหน้าเว็บ
#suggestions_anchor .cloudsearch_suggestion_container {
font-size: 14px;
}
ดูรายการคลาสการสนับสนุนและตัวอย่าง HTML ที่วิดเจ็ตสร้างขึ้นได้ในข้อมูลอ้างอิงคลาส CSS ที่รองรับ
ตกแต่งองค์ประกอบด้วยอะแดปเตอร์
หากต้องการตกแต่งองค์ประกอบก่อนแสดงผล ให้สร้างและดัดแปลงอะแดปเตอร์ที่ใช้วิธีการตกแต่งอย่างใดอย่างหนึ่ง เช่น decorateSuggestionElement
หรือ decorateSearchResultElement.
ตัวอย่างเช่น อะแดปเตอร์ต่อไปนี้เพิ่มคลาสที่กำหนดเองในองค์ประกอบคำแนะนำและผลลัพธ์
หากต้องการลงทะเบียนอะแดปเตอร์เมื่อเริ่มต้นวิดเจ็ต ให้ใช้เมธอด setAdapter()
ของคลาส Builder
ที่เกี่ยวข้อง ดังนี้
เครื่องตกแต่งอาจแก้ไขแอตทริบิวต์ขององค์ประกอบคอนเทนเนอร์รวมถึงองค์ประกอบย่อยใดๆ ก็ได้ ระบบอาจเพิ่มหรือนำองค์ประกอบย่อยออกระหว่างการตกแต่ง อย่างไรก็ตาม หากเปลี่ยนแปลงโครงสร้างองค์ประกอบ ให้พิจารณาสร้างองค์ประกอบโดยตรงแทนการตกแต่ง
สร้างองค์ประกอบที่กำหนดเองด้วยอะแดปเตอร์
หากต้องการสร้างองค์ประกอบที่กำหนดเองสำหรับคำแนะนำ คอนเทนเนอร์ Facet หรือผลการค้นหา
ให้สร้างและลงทะเบียนอะแดปเตอร์ที่ใช้งาน
createSuggestionElement
,
createFacetResultElement
หรือ createSearchResultElement
แบบทำซ้ำ
อะแดปเตอร์ต่อไปนี้แสดงให้เห็นการสร้างองค์ประกอบของคำแนะนำที่กำหนดเองและผลการค้นหาโดยใช้แท็ก HTML <template>
หากต้องการลงทะเบียนอะแดปเตอร์เมื่อเริ่มต้นวิดเจ็ต ให้ใช้เมธอด setAdapter()
ของคลาส Builder
ที่เกี่ยวข้อง ดังนี้
การสร้างองค์ประกอบข้อมูลประกอบที่กำหนดเองด้วย createFacetResultElement
มีข้อจำกัดหลายประการดังนี้
- คุณต้องแนบคลาส CSS
cloudsearch_facet_bucket_clickable
ลงในองค์ประกอบที่ผู้ใช้คลิกเพื่อสลับที่เก็บข้อมูล - คุณต้องรวมที่เก็บข้อมูลแต่ละรายการในองค์ประกอบที่มีที่มีคลาส CSS
cloudsearch_facet_bucket_container
- คุณแสดงผลที่เก็บข้อมูลตามลำดับที่ต่างจากที่ปรากฏในการตอบกลับไม่ได้
เช่น ตัวอย่างข้อมูลต่อไปนี้แสดงผลข้อมูลประกอบโดยใช้ลิงก์แทนช่องทำเครื่องหมาย
ปรับแต่งพฤติกรรมการค้นหา
การตั้งค่าแอปพลิเคชันการค้นหาแสดงถึงการกำหนดค่าเริ่มต้นสำหรับอินเทอร์เฟซการค้นหาและเป็นแบบคงที่ หากต้องการใช้ตัวกรองหรือข้อมูลประกอบแบบไดนามิก เช่น อนุญาตให้ผู้ใช้สลับแหล่งข้อมูล คุณจะลบล้างการตั้งค่าแอปพลิเคชันการค้นหาได้โดยสกัดกั้นคำขอการค้นหาด้วยอะแดปเตอร์
ใช้อะแดปเตอร์ด้วยเมธอด interceptSearchRequest
เพื่อแก้ไขคำขอที่ส่งไปยัง search API ก่อนดำเนินการ
เช่น อะแดปเตอร์ต่อไปนี้จะสกัดกั้นคำขอเพื่อจำกัดการค้นหาไว้ในแหล่งที่มาที่ผู้ใช้เลือก
หากต้องการลงทะเบียนอะแดปเตอร์เมื่อเริ่มต้นวิดเจ็ต ให้ใช้เมธอด setAdapter()
เมื่อสร้าง ResultsContainer
HTML ต่อไปนี้จะใช้เพื่อแสดงช่องสำหรับเลือกสำหรับการกรองตามแหล่งที่มา
โค้ดต่อไปนี้จะคอยตรวจจับการเปลี่ยนแปลง ตั้งค่าการเลือก และดำเนินการค้นหาอีกครั้งหากจำเป็น
นอกจากนี้ คุณยังสกัดกั้นการตอบสนองการค้นหาได้โดยใช้ interceptSearchResponse
ในอะแดปเตอร์
ปักหมุดเวอร์ชัน API
โดยค่าเริ่มต้น วิดเจ็ตจะใช้ API เวอร์ชันเสถียรล่าสุด หากต้องการล็อกเวอร์ชันที่เจาะจง ให้ตั้งค่าพารามิเตอร์การกำหนดค่า cloudsearch.config/apiVersion
เป็นเวอร์ชันที่ต้องการก่อนเริ่มต้นวิดเจ็ต
เวอร์ชัน API จะมีค่าเริ่มต้นเป็น 1.0 หากไม่ได้ตั้งค่าไว้ หรือตั้งเป็นค่าที่ไม่ถูกต้อง
ปักหมุดเวอร์ชันวิดเจ็ต
เพื่อหลีกเลี่ยงการเปลี่ยนแปลงที่ไม่คาดคิดกับอินเทอร์เฟซการค้นหา ให้ตั้งค่าพารามิเตอร์การกำหนดค่า cloudsearch.config/clientVersion
ตามที่แสดงไว้
gapi.config.update('cloudsearch.config/clientVersion', 1.1);
เวอร์ชันวิดเจ็ตจะมีค่าเริ่มต้นเป็น 1.0 หากไม่ได้ตั้งค่าไว้ หรือตั้งเป็นค่าที่ไม่ถูกต้อง
ทำให้อินเทอร์เฟซการค้นหาปลอดภัย
ผลการค้นหามีข้อมูลที่ละเอียดอ่อนสูง ทำตามแนวทางปฏิบัติแนะนำสำหรับการรักษาความปลอดภัยเว็บแอปพลิเคชัน โดยเฉพาะอย่างยิ่งต่อการโจมตีด้วยการหลอกให้คลิก
ดูข้อมูลเพิ่มเติมได้ที่โปรเจ็กต์คำแนะนำ OWASP
เปิดใช้การแก้ไขข้อบกพร่อง
ใช้ interceptSearchRequest
เพื่อเปิดการแก้ไขข้อบกพร่องสำหรับวิดเจ็ต Search เช่น
if (!request.requestOptions) {
// Make sure requestOptions is populated
request.requestOptions = {};
}
// Enable debugging
request.requestOptions.debugOptions = {enableDebugging: true}
return request;