ใช้คีย์ API

ผลิตภัณฑ์ 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

คอนโซล

  1. ไปที่หน้า Google Maps Platform > ข้อมูลเข้าสู่ระบบ

    ไปที่หน้าข้อมูลเข้าสู่ระบบ

  2. ในหน้าข้อมูลเข้าสู่ระบบ ให้คลิกสร้างข้อมูลเข้าสู่ระบบ > คีย์ API
    กล่องโต้ตอบสร้างคีย์ API แล้วจะแสดงคีย์ API ที่สร้างขึ้นใหม่
  3. คลิกปิด
    คีย์ 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

คอนโซล

  1. ไปที่หน้า Google Maps Platform > ข้อมูลเข้าสู่ระบบ

    ไปที่หน้าข้อมูลเข้าสู่ระบบ

  2. เลือกคีย์ API ที่ต้องการตั้งค่าการจํากัด หน้าพร็อพเพอร์ตี้คีย์ API จะปรากฏขึ้น
  3. ในส่วนข้อจำกัดของคีย์ ให้ตั้งค่าข้อจำกัดต่อไปนี้
    • ข้อจำกัดแอปพลิเคชัน:
      1. หากต้องการยอมรับคําขอจากรายการเว็บไซต์ที่คุณระบุ ให้เลือกผู้อ้างอิง HTTP (เว็บไซต์) จากรายการการจํากัดแอปพลิเคชัน
      2. ระบุเว็บไซต์อ้างอิงอย่างน้อย 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:
      1. คลิกจํากัดคีย์
      2. เลือก Maps JavaScript API จากเมนูแบบเลื่อนลงเลือก API หาก Maps JavaScript API ไม่แสดงในรายการ คุณจะต้องเปิดใช้
      3. หากโปรเจ็กต์ใช้ไลบรารี Places ให้เลือก Places API ด้วย ในทํานองเดียวกัน หากโปรเจ็กต์ของคุณใช้บริการอื่นๆ ใน JavaScript API (บริการเส้นทาง, บริการเมทริกซ์ระยะทาง, บริการระดับความสูง และ/หรือบริการการแปลงพิกัดภูมิศาสตร์) คุณจะต้องเปิดใช้และเลือก API ที่เกี่ยวข้องในรายการนี้ด้วย
  4. คลิกบันทึกเพื่อทําการเปลี่ยนแปลงให้เสร็จสมบูรณ์

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>