ผลิตภัณฑ์ Google Maps Platform ได้รับการปกป้องจากการใช้งานที่ไม่ได้รับอนุญาตด้วยการจำกัดการเรียก API ไว้สำหรับผู้ที่ระบุข้อมูลเข้าสู่ระบบการตรวจสอบสิทธิ์ที่เหมาะสม ข้อมูลเข้าสู่ระบบเหล่านี้อยู่ในรูปแบบของคีย์ API ซึ่งเป็นสตริงตัวอักษรและตัวเลขที่ไม่ซ้ำกันซึ่งเชื่อมโยงบัญชีสำหรับการเรียกเก็บเงินของ Google กับโปรเจ็กต์ รวมถึงกับ API หรือ SDK ที่เฉพาะเจาะจง
คู่มือนี้จะแสดงวิธีสร้าง จํากัด และใช้คีย์ API สําหรับ Google Maps Platform
ก่อนเริ่มต้น
ก่อนเริ่มใช้ Maps JavaScript API คุณต้องมีโปรเจ็กต์ที่มีบัญชีสำหรับการเรียกเก็บเงินและเปิดใช้ Maps JavaScript API ดูข้อมูลเพิ่มเติมได้ที่ตั้งค่าใน Cloud Console
สร้างคีย์ API
คีย์ API คือตัวระบุที่ไม่ซ้ำกันซึ่งตรวจสอบสิทธิ์คําขอที่เชื่อมโยงกับโปรเจ็กต์ของคุณเพื่อวัตถุประสงค์ด้านการใช้งานและการเรียกเก็บเงิน คุณต้องมีคีย์ API ที่เชื่อมโยงกับโปรเจ็กต์อย่างน้อย 1 คีย์
วิธีสร้างคีย์ API
คอนโซล
-
ไปที่หน้า Google Maps Platform > ข้อมูลเข้าสู่ระบบ
-
ในหน้าข้อมูลเข้าสู่ระบบ ให้คลิกสร้างข้อมูลเข้าสู่ระบบ > คีย์ API
กล่องโต้ตอบสร้างคีย์ API แล้วจะแสดงคีย์ API ที่สร้างขึ้นใหม่ -
คลิกปิด
คีย์ API ใหม่จะแสดงอยู่ในหน้าข้อมูลเข้าสู่ระบบในส่วนคีย์ API
(อย่าลืมจํากัดคีย์ API ก่อนนำไปใช้ในเวอร์ชันที่ใช้งานจริง)
Cloud SDK
gcloud alpha services api-keys create \ --project "PROJECT" \ --display-name "DISPLAY_NAME"
อ่านข้อมูลเพิ่มเติมเกี่ยวกับ Google Cloud SDK , การติดตั้ง Cloud SDK และคําสั่งต่อไปนี้
จำกัดคีย์ API
Google ขอแนะนําอย่างยิ่งให้คุณจํากัดคีย์ API โดยจํากัดการใช้งานไว้เฉพาะ API ที่จําเป็นสําหรับแอปพลิเคชันเท่านั้น การจํากัดคีย์ API จะเพิ่มความปลอดภัยให้กับแอปพลิเคชันโดยการปกป้องแอปพลิเคชันจากคําขอที่ไม่ชอบธรรม ดูข้อมูลเพิ่มเติมได้ที่แนวทางปฏิบัติแนะนำด้านความปลอดภัยของ API
วิธีจํากัดคีย์ API
คอนโซล
-
ไปที่หน้า Google Maps Platform > ข้อมูลเข้าสู่ระบบ
- เลือกคีย์ API ที่ต้องการตั้งค่าการจํากัด หน้าพร็อพเพอร์ตี้คีย์ API จะปรากฏขึ้น
- ในส่วนข้อจำกัดของคีย์ ให้ตั้งค่าข้อจำกัดต่อไปนี้
- ข้อจำกัดแอปพลิเคชัน:
- หากต้องการยอมรับคําขอจากรายการเว็บไซต์ที่คุณระบุ ให้เลือกผู้อ้างอิง HTTP (เว็บไซต์) จากรายการการจํากัดแอปพลิเคชัน
- ระบุเว็บไซต์อ้างอิงอย่างน้อย 1 เว็บไซต์ คุณสามารถใช้อักขระไวลด์การ์ดเพื่อให้สิทธิ์โดเมนย่อยทั้งหมดได้ (เช่น
https://*.google.com
ยอมรับเว็บไซต์ทั้งหมดที่ลงท้ายด้วย.google.com
เมื่อเข้าถึงผ่าน HTTPS) โปรดทราบว่าหากคุณระบุ www.domain.com ระบบจะทํางานเป็นไวลด์การ์ด www.domain.com/* และจะให้สิทธิ์เส้นทางย่อยในชื่อโฮสต์นั้น ระบุรูปแบบ URL ที่มาของhttps://
และhttp://
ตามที่ระบุไว้ สำหรับโปรโตคอล URL อื่นๆ คุณต้องใช้การนำเสนอพิเศษ เช่น รูปแบบfile:///path/to/
เป็น__file_url__//path/to/*
หลังจากเปิดใช้เว็บไซต์แล้ว อย่าลืมตรวจสอบการใช้งานเพื่อให้แน่ใจว่าเป็นไปตามที่คุณคาดหวัง ระบบรองรับโปรโตคอลต่อไปนี้about://
,app://
,applewebdata://
,asset://
,chrome://
,content://
,file://
,ftp://
,ionic://
,local://
,ms-appx://
,ms-appx-web://
,ms-local-stream://
,prism://
,qrc://
,res://
,saphtmlp://
- ข้อจำกัด API:
- คลิกจํากัดคีย์
- เลือก Maps JavaScript API จากเมนูแบบเลื่อนลงเลือก API หาก Maps JavaScript API ไม่แสดงในรายการ คุณจะต้องเปิดใช้
- หากโปรเจ็กต์ใช้ไลบรารี Places ให้เลือก Places API ด้วย ในทํานองเดียวกัน หากโปรเจ็กต์ของคุณใช้บริการอื่นๆ ใน JavaScript API (บริการเส้นทาง, บริการเมทริกซ์ระยะทาง, บริการระดับความสูง และ/หรือบริการการแปลงพิกัดภูมิศาสตร์) คุณจะต้องเปิดใช้และเลือก API ที่เกี่ยวข้องในรายการนี้ด้วย
- คลิกบันทึกเพื่อทําการเปลี่ยนแปลงให้เสร็จสมบูรณ์
Cloud SDK
แสดงรายการคีย์ที่มีอยู่
gcloud services api-keys list --project="PROJECT"
ล้างข้อจำกัดที่มีอยู่สำหรับคีย์ที่มีอยู่
gcloud alpha services api-keys update "projects/PROJECT/keys/KEY_ID" \ --clear-restrictions
ตั้งข้อจำกัดใหม่ให้กับคีย์ที่มีอยู่
gcloud alpha services api-keys update "projects/PROJECT/keys/KEY_ID" \ --api-target="maps-backend.googleapis.com" --allowed-referrers="referer"
อ่านข้อมูลเพิ่มเติมเกี่ยวกับ Google Cloud SDK , การติดตั้ง Cloud SDK และคําสั่งต่อไปนี้
เพิ่มคีย์ API ลงในคําขอ
คุณต้องใส่คีย์ API ไว้ในคําขอ Maps JavaScript API ทุกรายการ
ในตัวอย่างต่อไปนี้ ให้แทนที่ YOUR_API_KEY
ด้วยคี API
<script> (g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})({ key: "YOUR_API_KEY", v: "weekly", // Use the 'v' parameter to indicate the version to use (weekly, beta, alpha, etc.). // Add other bootstrap parameters as needed, using camel case. }); </script>