[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"academy-blogs-th-1-1-all-api-key-env-keep-secrets-safe-all--*":3,"academy-blog-translations-9jpxmbrfqtpf52t":97,"academy-blog-faqs-9jpxmbrfqtpf52t-th":98},{"data":4,"page":96,"perPage":96,"totalItems":96,"totalPages":96},[5],{"alt":6,"collectionId":7,"collectionName":8,"content":9,"cover_image":10,"cover_image_l_url":11,"cover_image_m_url":12,"cover_image_path":13,"cover_image_s_url":14,"created":15,"created_by":16,"expand":17,"id":89,"keywords":90,"locale":60,"published_at":91,"scheduled_at":76,"school_blog":85,"short_description":92,"status":83,"title":93,"updated":94,"updated_by":95,"slug":86,"views":88},"ปกบทความ API Key คืออะไร ภาพมุมบนของโต๊ะทำงานที่มีกุญแจบ้านบนพวงกุญแจวางข้างโน้ตบุ๊กที่ปิดอยู่และกระดาษโน้ต พร้อมเช็กลิสต์ 3 ข้อ: เก็บ Key ไว้ในไฟล์ .env, ใส่ .env ไว้ใน .gitignore และ Key หลุดให้ Revoke ก่อน","sclblg987654321","school_blog_translations","\u003Cp>เวลามีน้องๆ ที่เพิ่งเริ่มเล่นกับ ChatGPT API, Gemini API หรือ Claude API ถามทีมเราว่า \"ได้ API Key มาแล้ว เป็นตัวอักษรยาวๆ หนึ่งชุด ต้องเอาไปแปะไว้ตรงไหนในโค้ด\" คำตอบที่เราตอบบ่อยที่สุดคือ \"ที่ไหนก็ได้ ยกเว้นในโค้ด\" ฟังดูเหมือนมุก แต่เป็นคำตอบที่จริงจังที่สุดเท่าที่เราให้ได้\u003C\u002Fp>\u003Cp>ที่ต้องจริงจังกว่าเดิมเพราะช่วงหลังมีทางรั่วใหม่เพิ่มเข้ามา คือ AI ที่ช่วยเราเขียนโค้ดเอง ทั้งการ Copy โค้ดทั้งไฟล์ไปถาม ChatGPT และการเปิด AI Coding Agent ให้อ่านโปรเจกต์ทั้งโฟลเดอร์ ถ้า Key ยังนอนอยู่ในโค้ด มันก็เดินทางไปกับโค้ดทุกที่\u003C\u002Fp>\u003Cp>วันนี้ Superdev Academy จะพาไปดูว่า API Key คืออะไร ทำไมมันหลุดง่ายกว่าที่คิด นิสัย 3 ข้อที่ควรทำตั้งแต่โปรเจกต์แรก และถ้าวันหนึ่งมันหลุดไปแล้ว ต้องทำอะไรก่อนหลัง\u003C\u002Fp>\u003Ch2>API Key คืออะไร พูดง่ายๆ คือรหัสผ่านที่ผูกกับบัญชีจ่ายเงินของคุณ\u003C\u002Fh2>\u003Cp>ถ้ายังไม่แน่ใจว่า API คืออะไร แนะนำให้อ่าน \u003Ca target=\"_blank\" rel=\"noopener noreferrer\" href=\"https:\u002F\u002Fwww.superdevacademy.com\u002Fblogs\u002Fwhat-is-api-beginners-guide\">API คืออะไร\u003C\u002Fa> ก่อน แล้วค่อยกลับมาอ่านต่อ ส่วนบทความนี้จะโฟกัสแค่ \"กุญแจ\" ที่ใช้เปิดประตู API\u003C\u002Fp>\u003Cp>API Key คือรหัสชุดหนึ่งที่ผู้ให้บริการออกให้ เพื่อให้โปรแกรมของคุณยืนยันตัวตนได้ทุกครั้งที่ส่ง Request (คำขอ) ไปหาเซิร์ฟเวอร์ของเขา เซิร์ฟเวอร์ไม่รู้หรอกว่าใครนั่งพิมพ์อยู่หน้าจอ มันรู้แค่ว่า Request นี้ถือ Key ของบัญชีไหนมา แล้วก็คิดค่าใช้งานเข้าบัญชีนั้น ถ้าส่ง Key ผิดหรือ Key ถูกยกเลิกไปแล้ว เซิร์ฟเวอร์จะตอบกลับเป็น Error 401 ซึ่งอ่านความหมายของรหัสแบบนี้ได้ใน \u003Ca target=\"_blank\" rel=\"noopener noreferrer\" href=\"https:\u002F\u002Fwww.superdevacademy.com\u002Fblogs\u002Fhttp-status-codes-explained\">HTTP Status Code คืออะไร\u003C\u002Fa>\u003C\u002Fp>\u003Cp>Anthropic อธิบายไว้ตรงที่สุดในหน้า \u003Ca target=\"_blank\" rel=\"noopener noreferrer\" href=\"https:\u002F\u002Fsupport.claude.com\u002Fen\u002Farticles\u002F9767949-api-key-best-practices-keeping-your-keys-safe-and-secure\">API Key Best Practices\u003C\u002Fa> ว่า API Key เหมือนหมายเลขบัตรเครดิต ถ้ามีคนได้ Key ของคุณไปแล้วเอาไปใช้ ค่าใช้จ่ายจะถูกเรียกเก็บจากคุณ\u003C\u002Fp>\u003Cblockquote>\u003Cp>API Key ไม่ใช่แค่รหัสเข้าระบบ มันคือรหัสที่ใช้เงินในบัญชีคุณได้\u003C\u002Fp>\u003C\u002Fblockquote>\u003Cp>Key ของแต่ละเจ้าได้มาจากคนละที่ ของ OpenAI มาจาก OpenAI Platform ของ Gemini มาจาก Google AI Studio ของ Claude มาจาก Claude Console แต่กติกาการเก็บรักษาเหมือนกันทุกเจ้า\u003C\u002Fp>\u003Ch2>ทำไม API Key ถึงหลุดง่ายกว่าที่คิด\u003C\u002Fh2>\u003Cp>GitHub เปิดเผยในบล็อกเมื่อวันที่ 1 เมษายน 2025 ว่า \u003Ca target=\"_blank\" rel=\"noopener noreferrer\" href=\"https:\u002F\u002Fgithub.blog\u002Fsecurity\u002Fapplication-security\u002Fnext-evolution-github-advanced-security\u002F\">ตลอดปี 2024 มีข้อมูลลับ (Secret) หลุดบน GitHub มากกว่า 39 ล้านรายการ\u003C\u002Fa> ตัวเลขนี้รวมทุกประเภท ทั้ง API Key, รหัสผ่าน และ Token ไม่ได้นับเฉพาะ Key ของบริการ AI แต่ก็พอบอกได้ว่าเรื่องนี้ไม่ใช่ความผิดพลาดของคนส่วนน้อย\u003C\u002Fp>\u003Cp>ไม่ต้องรู้สึกผิดถ้าคุณเคยเกือบพลาด เพราะทางรั่วส่วนใหญ่ไม่ได้มาจากความประมาทแบบโจ่งแจ้ง มันมาจากความสะดวกเล็กๆ ที่เราทำกันทุกวัน\u003C\u002Fp>\u003Cul>\u003Cli>\u003Cp>\u003Cstrong>Hardcode ไว้ในโค้ด:\u003C\u002Fstrong> เขียน Key ลงไปในไฟล์ .py หรือ .js ตรงๆ เพื่อให้รันได้เร็ว แล้วลืมเอาออกก่อน Push ขึ้น GitHub\u003C\u002Fp>\u003C\u002Fli>\u003Cli>\u003Cp>\u003Cstrong>ใส่ไว้ในโค้ดฝั่ง Frontend:\u003C\u002Fstrong> โค้ดที่รันในเบราว์เซอร์ ใครเปิดเว็บก็ดูได้ทุกบรรทัด\u003C\u002Fp>\u003C\u002Fli>\u003Cli>\u003Cp>\u003Cstrong>Copy ไปถามในแชต:\u003C\u002Fstrong> วางโค้ดทั้งไฟล์ให้ ChatGPT หรือ Claude ช่วยแก้ Bug โดยไม่ได้สังเกตว่ามี Key ติดไปด้วย\u003C\u002Fp>\u003C\u002Fli>\u003Cli>\u003Cp>\u003Cstrong>AI Coding Agent อ่านทั้งโฟลเดอร์:\u003C\u002Fstrong> เครื่องมืออย่าง Claude Code ทำงานโดยอ่านไฟล์ในโปรเจกต์ ถ้าไม่ได้กันไว้ ไฟล์ที่เก็บ Key ก็อยู่ในสายตาของมันด้วย\u003C\u002Fp>\u003C\u002Fli>\u003C\u002Ful>\u003Cp>สองข้อหลังเป็นทางรั่วแบบใหม่ของยุค AI หลักการเดียวกับที่ Anthropic เตือนไว้ในหน้าเดียวกันเรื่องเครื่องมือของบุคคลที่สาม (เช่น IDE บนเว็บหรือระบบ CI\u002FCD) ว่า การเอา Key ไปใส่ในเครื่องมือของคนอื่น เท่ากับให้ผู้พัฒนาเครื่องมือนั้นเข้าถึงบัญชีของคุณได้\u003C\u002Fp>\u003Ch2>นิสัยที่ 1: เก็บ Key ไว้ในไฟล์ .env\u003C\u002Fh2>\u003Cp>ไฟล์ .env คือไฟล์ข้อความธรรมดาที่วางไว้ในโฟลเดอร์โปรเจกต์ เก็บค่าลับเป็นบรรทัดแบบ \u003Ccode>ชื่อ=ค่า\u003C\u002Fcode> ตอนรันโปรแกรม ค่าพวกนี้จะถูกโหลดเข้าไปเป็น Environment Variable (ตัวแปรสภาพแวดล้อม) โค้ดของเราแค่เรียกชื่อตัวแปร ไม่ต้องรู้ค่าจริงเลย\u003C\u002Fp>\u003Cp>หน้าตาไฟล์ .env ประมาณนี้ ค่าในตัวอย่างเป็นค่าสมมติทั้งหมด\u003C\u002Fp>\u003Cpre>\u003Ccode># .env  (ห้ามขึ้น GitHub)\nOPENAI_API_KEY=sk-xxxxxxxxxxxxxxxxxxxx\nGEMINI_API_KEY=your-gemini-key-here\nANTHROPIC_API_KEY=your-claude-key-here\u003C\u002Fcode>\u003C\u002Fpre>\u003Cp>ฝั่ง Python ใช้แพ็กเกจ python-dotenv ตามตัวอย่างที่ Anthropic ให้ไว้\u003C\u002Fp>\u003Cpre>\u003Ccode>from dotenv import load_dotenv\nimport os\n\nload_dotenv()\napi_key = os.getenv(\"ANTHROPIC_API_KEY\")\u003C\u002Fcode>\u003C\u002Fpre>\u003Cp>ฝั่ง Node.js ใช้แพ็กเกจ dotenv แล้วอ่านผ่าน \u003Ccode>process.env\u003C\u002Fcode>\u003C\u002Fp>\u003Cpre>\u003Ccode>require(\"dotenv\").config();\nconst apiKey = process.env.OPENAI_API_KEY;\u003C\u002Fcode>\u003C\u002Fpre>\u003Cp>เรื่องชื่อตัวแปรมีรายละเอียดเล็กๆ ที่ช่วยได้เยอะ เอกสารของ Google ระบุว่า SDK ของ Gemini จะอ่าน \u003Ccode>GEMINI_API_KEY\u003C\u002Fcode> หรือ \u003Ccode>GOOGLE_API_KEY\u003C\u002Fcode> ให้อัตโนมัติ ตั้งชื่อให้ตรงตั้งแต่แรกก็ไม่ต้องส่ง Key ผ่านโค้ดเลยสักบรรทัด ถ้าอยากเห็นการจัดการ Config ที่ละเอียดขึ้น ทั้งฝั่ง Go และ Node.js ต่อได้ที่ \u003Ca target=\"_blank\" rel=\"noopener noreferrer\" href=\"https:\u002F\u002Fwww.superdevacademy.com\u002Fblogs\u002Fep-26-environment-variables-configurations-go-nodejs\">JS2GO EP.26 การใช้ Environment Variables และ Configurations\u003C\u002Fa>\u003C\u002Fp>\u003Ch2>นิสัยที่ 2: ใส่ .env ไว้ใน .gitignore ก่อน commit แรก\u003C\u002Fh2>\u003Cp>ไฟล์ .env ช่วยแยก Key ออกจากโค้ดก็จริง แต่ถ้าไฟล์ .env ถูก commit ขึ้นไปด้วย ก็เท่ากับไม่ได้แยกอะไรเลย ขั้นนี้จึงต้องมาคู่กันเสมอ\u003C\u002Fp>\u003Cp>ไฟล์ .gitignore คือรายชื่อไฟล์ที่บอก Git ว่า \"ไม่ต้องสนใจไฟล์พวกนี้\" เพิ่มบรรทัดนี้ลงไป\u003C\u002Fp>\u003Cpre>\u003Ccode># .gitignore\n.env\n.env.*\n!.env.example\u003C\u002Fcode>\u003C\u002Fpre>\u003Cp>บรรทัดสุดท้ายคือทริกที่ทีมส่วนใหญ่ใช้กัน สร้างไฟล์ .env.example ที่มีแต่ชื่อตัวแปร ไม่มีค่าจริง แล้ว commit ไฟล์นี้ขึ้นไปแทน คนที่ Clone โปรเจกต์ไปจะรู้ว่าต้องเตรียม Key อะไรบ้าง โดยที่ไม่มีใครเห็น Key ของคุณ\u003C\u002Fp>\u003Cp>จุดที่มือใหม่พลาดบ่อยที่สุดคือลำดับ เอกสารของ Git ระบุชัดว่า .gitignore ไม่มีผลกับไฟล์ที่ Git ติดตาม (Track) อยู่แล้ว ถ้าเผลอ commit .env ไปก่อนแล้วค่อยมาเพิ่มใน .gitignore ทีหลัง Git จะยังติดตามไฟล์นั้นต่อ ต้องรัน \u003Ccode>git rm --cached .env\u003C\u002Fcode> เพื่อเลิกติดตามก่อน ถ้ายังไม่คล่องเรื่อง commit กับ push ลองอ่าน \u003Ca target=\"_blank\" rel=\"noopener noreferrer\" href=\"https:\u002F\u002Fwww.superdevacademy.com\u002Fblogs\u002Fwhat-is-github-explained\">GitHub คืออะไร\u003C\u002Fa> ประกอบ\u003C\u002Fp>\u003Ch2>นิสัยที่ 3: อย่าวาง Key ในที่ที่คนอื่นมองเห็นได้\u003C\u002Fh2>\u003Cp>สองข้อแรกกันไม่ให้ Key ขึ้น GitHub ข้อนี้กันทางรั่วที่เหลือ ซึ่งมีสามที่หลักๆ\u003C\u002Fp>\u003Cp>\u003Cstrong>โค้ด Frontend:\u003C\u002Fstrong> อะไรก็ตามที่ส่งไปรันในเบราว์เซอร์ ผู้ใช้เปิดดูได้หมด เอกสารของ Vite เตือนตรงๆ ว่าตัวแปรที่ขึ้นต้นด้วย \u003Ccode>VITE_\u003C\u002Fcode> จะถูกฝังลงในโค้ดตอน Build และไม่ควรใส่ข้อมูลลับอย่าง API Key ส่วนเอกสาร \u003Ca target=\"_blank\" rel=\"noopener noreferrer\" href=\"https:\u002F\u002Fai.google.dev\u002Fgemini-api\u002Fdocs\u002Fapi-key\">Gemini API\u003C\u002Fa> ก็บอกว่าอย่า Hardcode Key ลงในเว็บหรือแอปมือถือ ให้มี Backend เป็นตัวกลางถือ Key แล้วให้ Frontend เรียกผ่าน Backend อีกที\u003C\u002Fp>\u003Cp>\u003Cstrong>แชตกับ AI:\u003C\u002Fstrong> ก่อนวางโค้ดให้ ChatGPT หรือ Claude ช่วยดู ให้กวาดตาหาบรรทัดที่มี Key ก่อนทุกครั้ง ถ้าโค้ดอ่าน Key จาก .env อยู่แล้ว ปัญหานี้จะหายไปเองเกือบทั้งหมด เพราะในโค้ดมีแค่ชื่อตัวแปร\u003C\u002Fp>\u003Cp>\u003Cstrong>AI Coding Agent:\u003C\u002Fstrong> เครื่องมือพวกนี้ตั้งค่ากันไม่ให้อ่านไฟล์บางไฟล์ได้ ตัวอย่างในเอกสารการตั้งค่าของ Claude Code คือการใส่ \u003Ccode>Read(.\u002F.env)\u003C\u002Fcode> ไว้ในรายการ deny ของ Permission เพื่อไม่ให้มันเปิดไฟล์ .env เลย ถ้าคุณเริ่มใช้ Agent ช่วยเขียนโค้ดแล้ว ลองอ่าน \u003Ca target=\"_blank\" rel=\"noopener noreferrer\" href=\"https:\u002F\u002Fwww.superdevacademy.com\u002Fblogs\u002Fai-coding-agent-junior-developer-workflow\">ทำงานกับ AI Coding Agent ยังไง\u003C\u002Fa> ประกอบด้วย\u003C\u002Fp>\u003Ch2>Repository เป็น Private อยู่แล้ว ไม่ต้องทำก็ได้ไม่ใช่เหรอ\u003C\u002Fh2>\u003Cp>จริงๆ ก็มีเหตุผลนะ ถ้า Repo เป็น Private ทำคนเดียว คนนอกก็มองไม่เห็นไฟล์ในนั้นอยู่แล้ว ความเสี่ยงวันนี้ต่ำกว่า Public Repo มาก\u003C\u002Fp>\u003Cp>แต่ Private ไม่ได้แปลว่าจะ Private ตลอดไป วันหนึ่งคุณอาจเปิด Repo เป็น Public เพื่อใส่ใน Portfolio อาจชวนเพื่อนเข้ามาช่วยทำ หรืออาจเชื่อม Repo กับเครื่องมือภายนอกอีกหลายตัว และทุกครั้งที่ทำแบบนั้น Key ที่เคย commit ไว้ใน History ก็ถูกเปิดไปด้วย เพราะ Git จำทุก commit ที่เคยเกิดขึ้น ไม่ใช่แค่สภาพไฟล์ล่าสุด\u003C\u002Fp>\u003Cp>อีกเหตุผลคือนิสัย คนที่ทำ .env กับ .gitignore จนเป็นมือแล้ว จะไม่พลาดในวันที่โปรเจกต์สำคัญจริง\u003C\u002Fp>\u003Ch2>ถ้า API Key หลุดไปแล้ว ทำตามลำดับนี้\u003C\u002Fh2>\u003Cp>สัญชาตญาณแรกของหลายคนคือรีบลบไฟล์แล้ว commit ใหม่ ซึ่งเป็นลำดับที่ผิด เพราะ Key ยังอยู่ใน History และยังใช้งานได้ ลำดับที่ถูกเป็นแบบนี้\u003C\u002Fp>\u003Col>\u003Cli>\u003Cp>\u003Cstrong>Revoke หรือ Rotate Key ทันที:\u003C\u002Fstrong> เข้าไปลบ Key เก่าในหน้าจัดการ Key ของผู้ให้บริการ แล้วสร้าง Key ใหม่ \u003Ca target=\"_blank\" rel=\"noopener noreferrer\" href=\"https:\u002F\u002Fdocs.github.com\u002Fen\u002Fauthentication\u002Fkeeping-your-account-and-data-secure\u002Fremoving-sensitive-data-from-a-repository\">เอกสารของ GitHub\u003C\u002Fa> ระบุว่าถ้าข้อมูลที่หลุดเป็น Secret ขั้นแรกคือ Revoke หรือ Rotate ก่อน เพราะเมื่อ Key ใช้ไม่ได้แล้ว คนที่ Clone ไปก็เอาไปทำอะไรต่อไม่ได้\u003C\u002Fp>\u003C\u002Fli>\u003Cli>\u003Cp>\u003Cstrong>ใส่ Key ใหม่ลงในไฟล์ .env:\u003C\u002Fstrong> แล้วเช็กว่า .env อยู่ใน .gitignore จริง\u003C\u002Fp>\u003C\u002Fli>\u003Cli>\u003Cp>\u003Cstrong>ดูหน้า Usage ของบัญชี:\u003C\u002Fstrong> เช็กว่ามีการเรียกใช้ที่คุณไม่ได้ทำหรือเปล่า ถ้ามี ให้ติดต่อผู้ให้บริการ\u003C\u002Fp>\u003C\u002Fli>\u003Cli>\u003Cp>\u003Cstrong>ค่อยล้าง History:\u003C\u002Fstrong> GitHub แนะนำเครื่องมือ git-filter-repo สำหรับลบข้อมูลลับออกจาก History ขั้นนี้ทำทีหลังได้ เพราะ Key เก่าตายไปแล้วตั้งแต่ข้อ 1\u003C\u002Fp>\u003C\u002Fli>\u003C\u002Fol>\u003Cblockquote>\u003Cp>Fun Fact: Anthropic เข้าร่วมโครงการ Secret Scanning Partner ของ GitHub ถ้า Key ของ Claude โผล่ใน Public Repo บน GitHub ทาง Anthropic จะปิด Key นั้นให้อัตโนมัติและส่งอีเมลแจ้ง แต่นั่นคือตาข่ายกันตก ไม่ใช่เหตุผลให้ประมาท และไม่ได้ช่วยในกรณีที่ Key หลุดทางแชตหรือทาง Frontend\u003C\u002Fp>\u003C\u002Fblockquote>\u003Cp>ถ้าอยากเห็นภาพกว้างของการเขียนโค้ดให้ปลอดภัย นอกจากเรื่อง API Key อ่านต่อได้ที่ \u003Ca target=\"_blank\" rel=\"noopener noreferrer\" href=\"https:\u002F\u002Fwww.superdevacademy.com\u002Fblogs\u002Fsecure-coding-for-beginners\">เทคนิค Secure Coding ที่มือใหม่ต้องรู้\u003C\u002Fa>\u003C\u002Fp>\u003Cdiv data-type=\"horizontalRule\">\u003Chr>\u003C\u002Fdiv>\u003Ch2>สรุป: API Key คืออะไร และเก็บยังไงไม่ให้หลุด\u003C\u002Fh2>\u003Cp>API Key คือรหัสที่ผู้ให้บริการใช้ยืนยันว่า Request มาจากบัญชีไหน และคิดเงินเข้าบัญชีนั้น ใครถือ Key ก็ใช้เงินของคุณได้ ตอบแบบตรงๆ ไม่อ้อม นิสัยที่ควรทำตั้งแต่โปรเจกต์แรกมีแค่ 3 ข้อ\u003C\u002Fp>\u003Cul>\u003Cli>\u003Cp>เก็บ Key ไว้ในไฟล์ .env\u003C\u002Fp>\u003C\u002Fli>\u003Cli>\u003Cp>ใส่ .env ไว้ใน .gitignore\u003C\u002Fp>\u003C\u002Fli>\u003Cli>\u003Cp>Key หลุดให้ Revoke ก่อน\u003C\u002Fp>\u003C\u002Fli>\u003C\u002Ful>\u003Cp>และจำไว้ว่าโค้ด Frontend แชตกับ AI และ AI Coding Agent ก็คือที่ที่คนอื่นมองเห็นได้เหมือนกัน\u003C\u002Fp>\u003Cp>ถ้าวันนี้ในโปรเจกต์ของคุณยังมี Key อยู่ในโค้ด ไม่ต้องตกใจ ใช้เวลาสิบนาทีย้ายมันไปไว้ใน .env เพิ่มบรรทัดใน .gitignore แล้วสร้าง Key ใหม่แทนตัวเก่าไปเลย แค่นี้โปรเจกต์ถัดไปของคุณก็เริ่มจากนิสัยที่ถูกแล้ว\u003C\u002Fp>\u003Cp>ติดตามบทความและเทคนิคสำหรับคนเริ่มต้นสายโปรแกรมเมอร์ได้ที่ช่องทางของเรา\u003C\u002Fp>\u003Cp>Facebook: \u003Cstrong>Superdev School (Superdev)\u003C\u002Fstrong> — \u003Ca target=\"_blank\" rel=\"noopener noreferrer\" href=\"https:\u002F\u002Fwww.facebook.com\u002Fsuperdev.school.th\">https:\u002F\u002Fwww.facebook.com\u002Fsuperdev.school.th\u003C\u002Fa>\u003C\u002Fp>\u003Cp>Instagram: \u003Cstrong>superdevschool\u003C\u002Fstrong> — \u003Ca target=\"_blank\" rel=\"noopener noreferrer\" href=\"https:\u002F\u002Fwww.instagram.com\u002Fsuperdevschool\u002F\">https:\u002F\u002Fwww.instagram.com\u002Fsuperdevschool\u002F\u003C\u002Fa>\u003C\u002Fp>\u003Cp>TikTok: \u003Cstrong>superdevschool\u003C\u002Fstrong> — \u003Ca target=\"_blank\" rel=\"noopener noreferrer\" href=\"https:\u002F\u002Fwww.tiktok.com\u002F@superdevschool\">https:\u002F\u002Fwww.tiktok.com\u002F@superdevschool\u003C\u002Fa>\u003C\u002Fp>\u003Cp>Website: \u003Cstrong>www.superdevacademy.com\u003C\u002Fstrong> — \u003Ca target=\"_blank\" rel=\"noopener noreferrer\" href=\"https:\u002F\u002Fwww.superdevacademy.com\u002F\">https:\u002F\u002Fwww.superdevacademy.com\u002F\u003C\u002Fa>\u003C\u002Fp>","cover_cover_qt3t9x5dtz.webp","https:\u002F\u002Ftwsme-r2.tumwebsme.com\u002Fsclblg987654321\u002F6yfnd7a8s5n7h8r\u002Fl\u002Fcover_cover_qt3t9x5dtz.webp","https:\u002F\u002Ftwsme-r2.tumwebsme.com\u002Fsclblg987654321\u002F6yfnd7a8s5n7h8r\u002Fm\u002Fcover_cover_qt3t9x5dtz.webp","https:\u002F\u002Ftwsme-r2.tumwebsme.com\u002Fsclblg987654321\u002F6yfnd7a8s5n7h8r\u002Fcover_cover_qt3t9x5dtz.webp","https:\u002F\u002Ftwsme-r2.tumwebsme.com\u002Fsclblg987654321\u002F6yfnd7a8s5n7h8r\u002Fs\u002Fcover_cover_qt3t9x5dtz.webp","2026-09-28 06:48:14.235Z","wfztm6bp9384v3u",{"keywords":18,"locale":54,"school_blog":64},[19,25,29,33,37,41,45,51],{"collectionId":20,"collectionName":21,"created":22,"created_by":16,"id":23,"name":24,"updated":22,"updated_by":16},"sclkey987654321","school_keywords","2026-09-28 06:48:14.225Z","cc44t3r5bga2pwe","API Key คืออะไร",{"collectionId":20,"collectionName":21,"created":26,"created_by":16,"id":27,"name":28,"updated":26,"updated_by":16},"2026-09-28 06:48:14.226Z","tqmmphizdiam7no","ไฟล์ .env",{"collectionId":20,"collectionName":21,"created":30,"created_by":16,"id":31,"name":32,"updated":30,"updated_by":16},"2026-09-28 06:48:14.227Z","4l5u0zbr4p6i96m",".gitignore",{"collectionId":20,"collectionName":21,"created":34,"created_by":16,"id":35,"name":36,"updated":34,"updated_by":16},"2026-09-28 06:48:14.228Z","r9vrpv1z78m3dia","API Key ChatGPT",{"collectionId":20,"collectionName":21,"created":38,"created_by":16,"id":39,"name":40,"updated":38,"updated_by":16},"2026-09-28 06:48:14.230Z","uzgq9h9vhgxse9d","API Key Gemini",{"collectionId":20,"collectionName":21,"created":42,"created_by":16,"id":43,"name":44,"updated":42,"updated_by":16},"2026-09-28 06:48:14.231Z","ne4nbtha0xv8n2i","API Key Claude",{"collectionId":20,"collectionName":21,"created":46,"created_by":47,"id":48,"name":49,"updated":50,"updated_by":47},"2026-03-04 08:46:09.895Z","76qprkevbgfdps8","1zitau06ohn79bf","Environment Variables","2026-06-07 06:47:02.645Z",{"collectionId":20,"collectionName":21,"created":42,"created_by":16,"id":52,"name":53,"updated":42,"updated_by":16},"whcfzcn57p3ubf8","Secure Coding",{"code":55,"collectionId":56,"collectionName":57,"created":58,"flag":59,"id":60,"is_default":61,"label":62,"updated":63},"th","pbc_1989393366","locales","2026-01-22 10:59:55.832Z","twemoji:flag-thailand","s8wri3bt4vgg2ji",true,"Thai","2026-04-10 15:42:46.614Z",{"category":65,"collectionId":66,"collectionName":67,"created":68,"expand":69,"id":85,"slug":86,"updated":87,"views":88},"qn0d7xwatkleou1","pbc_2105096300","school_blogs","2026-09-28 06:48:14.232Z",{"category":70},{"blogIds":71,"collectionId":72,"collectionName":73,"created":74,"created_by":47,"id":65,"image":75,"image_alt":76,"image_path":77,"image_s_url":78,"label":79,"name":80,"priority":81,"publish_at":82,"scheduled_at":76,"status":83,"updated":84,"updated_by":47},[],"sclcatblg987654321","school_category_blogs","2026-03-04 08:31:21.896Z","4jn5ccty4x9_2894s1fj97_azjr5xx2br.webp","","https:\u002F\u002Ftwsme-r2.tumwebsme.com\u002Fsclcatblg987654321\u002Fqn0d7xwatkleou1\u002F4jn5ccty4x9_2894s1fj97_azjr5xx2br.webp","https:\u002F\u002Ftwsme-r2.tumwebsme.com\u002Fsclcatblg987654321\u002Fqn0d7xwatkleou1\u002Fs\u002F4jn5ccty4x9_2894s1fj97_azjr5xx2br.webp",{"en":80,"th":80},"How to",0,"2025-02-04 08:40:59.666Z","published","2026-08-18 14:49:10.697Z","9jpxmbrfqtpf52t","api-key-env-keep-secrets-safe","2026-09-30 00:11:43.542Z",117,"6yfnd7a8s5n7h8r",[23,27,31,35,39,43,48,52],"2026-09-29 08:22:22.718Z","API Key คือรหัสที่ผูกกับบัญชีจ่ายเงินของคุณ มาดูนิสัย 3 ข้อ เก็บ Key ใน .env ใส่ .gitignore ไม่วางไว้ใน Frontend หรือแชต AI และต้องทำอะไรก่อนเมื่อ Key หลุด","API Key คืออะไร เก็บในไฟล์ .env ยังไงไม่ให้หลุดขึ้น GitHub","2026-09-29 08:22:22.720Z","ebkf8ra4nd55ual",1,{"th":86,"en":86},[99,103,107,111,115,119],{"answer":100,"id":101,"question":102},"API Key ของ OpenAI คือรหัสยาวๆ ที่สร้างได้ใน OpenAI Platform ใช้ยืนยันตัวตนเวลาโปรแกรมของคุณเรียก OpenAI API แทนการล็อกอินด้วยรหัสผ่าน ทุก Request ที่แนบ Key ไปจะถูกคิดค่าใช้งานเข้าบัญชีเจ้าของ Key ใครได้ Key ไปก็ใช้เงินในบัญชีคุณได้ทันที จึงต้องเก็บเหมือนรหัสผ่าน และไม่ควรเขียนไว้ในโค้ดตรงๆ","fb6ajtrggmcqerj","API Key ของ OpenAI หรือ ChatGPT คืออะไร ใช้ทำอะไร",{"answer":104,"id":105,"question":106},"ตั้งชื่อว่า GEMINI_API_KEY หรือ GOOGLE_API_KEY เพราะเอกสารของ Google ระบุว่า SDK ของ Gemini อ่านสองชื่อนี้จาก Environment Variable ให้อัตโนมัติ และถ้าตั้งไว้ทั้งคู่ GOOGLE_API_KEY จะถูกใช้ก่อน ตัว Key สร้างได้ที่หน้า API Keys ใน Google AI Studio แล้วเก็บไว้ในไฟล์ .env แทนการเขียนลงในโค้ด","qv93v4exy7i8ksc","ใช้ API Key ของ Gemini ในโค้ด ควรตั้งชื่อตัวแปรว่าอะไร",{"answer":108,"id":109,"question":110},"ไฟล์ .env คือไฟล์ข้อความธรรมดาในโฟลเดอร์โปรเจกต์ ที่เก็บค่าลับเป็นบรรทัดแบบ ชื่อ=ค่า เช่น OPENAI_API_KEY=ค่าของคุณ ตอนรันโปรแกรม แพ็กเกจอย่าง python-dotenv หรือ dotenv ใน Node.js จะโหลดค่าเหล่านี้เป็น Environment Variable ทำให้โค้ดเรียกแค่ชื่อตัวแปร ส่วนตัวไฟล์ .env ต้องใส่ไว้ใน .gitignore เสมอ","p4gs3b2d10cqghj","ไฟล์ .env คืออะไร",{"answer":112,"id":113,"question":114},"เพราะ .gitignore มีผลกับไฟล์ที่ Git ยังไม่เคยติดตามเท่านั้น ถ้าเคย commit ไฟล์ .env ไปแล้วสักครั้ง Git จะติดตามไฟล์นั้นต่อ วิธีแก้คือรัน git rm --cached .env เพื่อเลิกติดตามโดยไม่ลบไฟล์ในเครื่อง แล้ว commit ใหม่ แต่ Key ที่เคยขึ้นไปแล้วยังอยู่ใน History จึงต้องสร้าง Key ใหม่แทนด้วย","542105tglayikhf","ใส่ .env ใน .gitignore แล้ว ทำไมไฟล์ยังขึ้น GitHub",{"answer":116,"id":117,"question":118},"ให้ Revoke หรือ Rotate Key นั้นทันที คือลบ Key เก่าในหน้าจัดการ Key ของผู้ให้บริการ เช่น OpenAI Platform, Google AI Studio หรือ Claude Console แล้วสร้างใหม่ เอกสารของ GitHub ระบุว่านี่คือขั้นแรก เพราะการลบไฟล์หรือล้าง History ด้วย git-filter-repo ไม่ได้ทำให้ Key เก่าใช้ไม่ได้ และคนที่ Clone ไปแล้วยังมีสำเนาอยู่","ip2si557oj0o6fl","API Key หลุดขึ้น GitHub ต้องทำอะไรเป็นอย่างแรก",{"answer":120,"id":121,"question":122},"ไม่ควร เพราะโค้ดฝั่ง Frontend ถูกส่งไปรันในเบราว์เซอร์ของทุกคนที่เปิดเว็บ เอกสารของ Vite ระบุว่าตัวแปรที่ขึ้นต้นด้วย VITE_ จะถูกฝังลงในโค้ดตอน Build และไม่ควรใส่ข้อมูลลับอย่าง API Key วิธีที่ถูกคือให้ Backend หรือ Serverless Function ถือ Key ไว้ แล้วให้ Frontend เรียกผ่าน Backend อีกที","zlj0mq622sjuqte","ใส่ API Key ไว้ในโค้ด React หรือ Vite ได้ไหม"]