วิดเจ็ตการค้นหามีอินเทอร์เฟซการค้นหาที่ปรับแต่งได้สำหรับเว็บแอปพลิเคชัน วิดเจ็ตต้องการ HTML และ JavaScript เพียงเล็กน้อยเพื่อ ติดตั้งใช้งานและเปิดใช้ฟีเจอร์การค้นหาทั่วไป เช่น ข้อมูลประกอบและการใส่เลขหน้า คุณ นอกจากนี้ยังสามารถปรับแต่งส่วนต่างๆ ของอินเทอร์เฟซด้วย CSS และ JavaScript
หากคุณต้องการความยืดหยุ่นมากกว่าที่วิดเจ็ตมีให้ ให้ลองใช้ API การค้นหา สำหรับข้อมูลเกี่ยวกับการสร้างอินเทอร์เฟซการค้นหาด้วย Query API ดูการสร้างอินเทอร์เฟซการค้นหาด้วย API การค้นหา
สร้างอินเทอร์เฟซการค้นหา
การสร้างอินเทอร์เฟซการค้นหามีหลายขั้นตอนดังนี้
- กำหนดค่าแอปพลิเคชันการค้นหา
- สร้างรหัสไคลเอ็นต์สำหรับแอปพลิเคชัน
- เพิ่มมาร์กอัป HTML สำหรับช่องค้นหาและผลลัพธ์
- โหลดวิดเจ็ตบนหน้าเว็บ
- เริ่มต้นวิดเจ็ต
กำหนดค่าแอปพลิเคชันการค้นหา
อินเทอร์เฟซการค้นหาแต่ละรายการต้องมีแอปพลิเคชันการค้นหาที่กำหนดไว้ในคำสั่ง คอนโซลผู้ดูแลระบบ แอปพลิเคชันการค้นหาจะให้ข้อมูลเพิ่มเติมเกี่ยวกับ สำหรับการค้นหาข้อมูล เช่น แหล่งข้อมูล ข้อมูลประกอบ และการตั้งค่าคุณภาพการค้นหา
หากต้องการสร้างแอปพลิเคชันการค้นหา โปรดดู สร้างประสบการณ์การค้นหาที่กําหนดเอง
สร้างรหัสไคลเอ็นต์สำหรับแอปพลิเคชัน
นอกเหนือจากขั้นตอนใน กำหนดค่าการเข้าถึง Google Cloud Search API คุณต้องสร้างรหัสไคลเอ็นต์สำหรับเว็บแอปพลิเคชันด้วย
สิ่งที่จะเกิดขึ้นเมื่อกำหนดค่าโปรเจ็กต์มีดังนี้
- เลือกประเภทไคลเอ็นต์เว็บเบราว์เซอร์
- ระบุ URL ต้นทาง ของแอปของคุณ
- บันทึกรหัสไคลเอ็นต์ที่สร้างขึ้น คุณจะต้องใช้รหัสไคลเอ็นต์เพื่อ ทำตามขั้นตอนถัดไป ไม่จำเป็นต้องมีรหัสลับไคลเอ็นต์สำหรับ วิดเจ็ต
สำหรับข้อมูลเพิ่มเติม โปรดดู OAuth 2.0 สำหรับเว็บแอปพลิเคชันฝั่งไคลเอ็นต์
เพิ่มมาร์กอัป HTML
วิดเจ็ตนี้กำหนดให้ใช้ HTML เพียงเล็กน้อยจึงจะทำงานได้ คุณ ต้องระบุข้อมูลต่อไปนี้
- องค์ประกอบ
input
สำหรับช่องค้นหา - องค์ประกอบที่จะตรึงป๊อปอัปคำแนะนำไว้
- องค์ประกอบที่จะรวมผลการค้นหา
- (ไม่บังคับ) ระบุองค์ประกอบเพื่อใส่ตัวควบคุมประกอบ
ข้อมูลโค้ด HTML ต่อไปนี้แสดง HTML สำหรับวิดเจ็ต Search โดยที่
องค์ประกอบที่จะเชื่อมโยงจะระบุโดยแอตทริบิวต์ id
โหลดวิดเจ็ต
วิดเจ็ตจะโหลดแบบไดนามิกผ่านสคริปต์ตัวโหลด หากต้องการระบุ
ตัวโหลด ให้ใช้แท็ก <script>
ตามที่แสดง
คุณต้องระบุ Callback 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 เพื่อตรวจสอบสถานะการลงชื่อเข้าใช้ของ
ผู้ใช้และลงชื่อเข้าใช้หรือออกจากระบบได้ตามต้องการ ตัวอย่างเช่น URL ต่อไปนี้
ตัวอย่างที่สังเกตการณ์ isSignedIn
เพื่อตรวจสอบการเปลี่ยนแปลงการลงชื่อเข้าใช้
ใช้ GoogleAuth.signIn()
วิธีเริ่มต้นการลงชื่อเข้าใช้จากปุ่ม
คลิก:
โปรดดูรายละเอียดเพิ่มเติมที่หัวข้อลงชื่อเข้าใช้ด้วย Google
ลงชื่อเข้าใช้ให้ผู้ใช้โดยอัตโนมัติ
คุณสามารถปรับปรุงประสบการณ์การลงชื่อเข้าใช้ให้ดีขึ้นได้โดยให้สิทธิ์ แอปพลิเคชันในนามของผู้ใช้ในองค์กร เทคนิคนี้ กรณีที่ใช้พร็อกซี Cloud Identity Aware ก็มีประโยชน์เช่นกัน เพื่อปกป้องแอปพลิเคชัน
โปรดดูข้อมูลเพิ่มเติมที่หัวข้อใช้ Google Sign-In กับแอปไอที
ปรับแต่งอินเทอร์เฟซ
คุณสามารถเปลี่ยนรูปลักษณ์ของอินเทอร์เฟซการค้นหาโดยใช้ชุดค่าผสม ต่อไปนี้
- ลบล้างรูปแบบด้วย 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
ที่เกี่ยวข้อง:
อุปกรณ์ตกแต่งสามารถปรับเปลี่ยนแอตทริบิวต์ขององค์ประกอบคอนเทนเนอร์ องค์ประกอบย่อย คุณอาจเพิ่มหรือนำองค์ประกอบย่อยออกระหว่างการตกแต่งได้ อย่างไรก็ตาม หากมีการเปลี่ยนแปลงเชิงโครงสร้างองค์ประกอบ ให้พิจารณาสร้างองค์ประกอบ องค์ประกอบโดยตรง แทนการตกแต่ง
สร้างองค์ประกอบที่กำหนดเองด้วยอะแดปเตอร์
ในการสร้างองค์ประกอบที่กำหนดเองสำหรับคำแนะนำ คอนเทนเนอร์ข้อมูลประกอบ หรือผลการค้นหา
สร้างและลงทะเบียนอะแดปเตอร์ที่จะ
createSuggestionElement
,
createFacetResultElement
,
หรือ createSearchResultElement
ไตร่ตรอง
อะแดปเตอร์ต่อไปนี้แสดงการสร้างคำแนะนำที่กำหนดเองและผลการค้นหา
องค์ประกอบโดยใช้แท็ก HTML <template>
หากต้องการลงทะเบียนอะแดปเตอร์เมื่อเริ่มต้นวิดเจ็ต ให้ใช้ setAdapter()
ของคลาส Builder
ที่เกี่ยวข้อง:
การสร้างองค์ประกอบข้อมูลประกอบที่กำหนดเองด้วย createFacetResultElement
อยู่ภายใต้ข้อจำกัดหลายประการ ดังนี้
- คุณต้องแนบคลาส CSS
cloudsearch_facet_bucket_clickable
ไปยังไฟล์ องค์ประกอบที่ผู้ใช้คลิกเพื่อสลับที่เก็บข้อมูล - คุณต้องรวมที่เก็บข้อมูลแต่ละชุดไว้ในองค์ประกอบที่มี CSS
คลาส
cloudsearch_facet_bucket_container
- คุณแสดงผลที่เก็บข้อมูลในลำดับที่ต่างจากที่ปรากฏใน คำตอบ
เช่น ข้อมูลโค้ดต่อไปนี้แสดงข้อมูลประกอบโดยใช้ลิงก์แทน ทั้งหมด
ปรับแต่งพฤติกรรมการค้นหา
การตั้งค่าแอปพลิเคชันการค้นหาแสดงค่าเริ่มต้น สำหรับอินเทอร์เฟซการค้นหาและแบบคงที่ เพื่อนำไปปรับใช้แบบไดนามิก หรือข้อมูลประกอบ เช่น การอนุญาตให้ผู้ใช้เปิด/ปิดแหล่งข้อมูล ลบล้างการตั้งค่าแอปพลิเคชันการค้นหาด้วยการสกัดกั้นคำขอค้นหา ด้วยอะแดปเตอร์
ติดตั้งอะแดปเตอร์ด้วย
interceptSearchRequest
ในการแก้ไขคำขอที่ส่งไปยัง
API การค้นหา
ก่อนการดำเนินการ
เช่น อะแดปเตอร์ต่อไปนี้จะแทรกแซงคำขอจำกัดการค้นหา ไปยังแหล่งที่มาที่ผู้ใช้เลือก:
หากต้องการลงทะเบียนอะแดปเตอร์เมื่อเริ่มต้นวิดเจ็ต ให้ใช้
setAdapter()
เมื่อสร้าง ResultsContainer
HTML ต่อไปนี้ใช้เพื่อแสดงช่องสำหรับเลือกกรองตาม แหล่งที่มา:
โค้ดต่อไปนี้จะรับข้อมูลการเปลี่ยนแปลง ตั้งค่าการเลือก และ ดำเนินการค้นหาอีกครั้งหากจำเป็น
นอกจากนี้ คุณสามารถสกัดกั้นการค้นหา
คำตอบได้โดยการปรับใช้
interceptSearchResponse
ในอะแดปเตอร์
ปักหมุดเวอร์ชัน API
โดยค่าเริ่มต้น วิดเจ็ตจะใช้ API เวอร์ชันเสถียรล่าสุด การล็อกอิน
ระบุเวอร์ชันที่เจาะจง ให้ตั้งพารามิเตอร์การกำหนดค่า cloudsearch.config/apiVersion
เป็นเวอร์ชันที่ต้องการก่อนที่จะเริ่มต้น Widget
เวอร์ชัน 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;