ใช้คีย์ 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. ระบุเว็บไซต์อ้างอิงอย่างน้อยหนึ่งเว็บไซต์ คุณใช้อักขระไวลด์การ์ดเพื่อให้สิทธิ์โดเมนย่อยทั้งหมดได้ (เช่น https://*.google.com จะยอมรับทุกเว็บไซต์ที่ลงท้ายด้วย .google.com เมื่อเข้าถึงผ่าน HTTPS) ระบุรูปแบบผู้อ้างอิง 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 (Directions Service, Distance Matrix Service, Elevation Service และ/หรือบริการเข้ารหัสพิกัดภูมิศาสตร์) คุณต้องเปิดใช้และเปิดใช้ 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_HERE",
    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>