ใช้คีย์ 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"

อ่านเพิ่มเติมเกี่ยวกับ SDK ของ Google Cloud การติดตั้ง 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/* และ ให้สิทธิ์เส้นทางย่อยในชื่อโฮสต์นั้น ระบุรูปแบบผู้อ้างอิง 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 Library ให้เลือก 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"

อ่านเพิ่มเติมเกี่ยวกับ SDK ของ Google Cloud การติดตั้ง 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>