ใส่ Google reCAPTCHA ให้เว็บไซต์

สวัสดีครับ บทความนี้ผมจะมาใส่ google reCAPTCHA ให้กับเว็บไซต์กันครับ ซึ่งผมจะใส่ให้กับ Comment ในเว็บไซต์ เพื่อคนที่ต้องการจะคอมเม้นไม่ต้องสมัครสมาชิก แต่ก็ต้องกันบอทที่ยิงเว็บไซต์เรา ผมจึงเอา google reCAPTCHA มาใส่เพื่อยืนยันตัวตนว่าเป็นคนหรือเปล่า

ก่อนอื่นเลย เราต้องไปลงทะเบียนกับเว็บไซต์ของ google ก่อน ซึ่งเข้าไปลงทะเบียนได้ที่ https://www.google.com/recaptcha/intro/v3.html ในที่นี้ผมจะลงทะเบียนเป็นแบบ version 2 ที่ให้กดติ๊กว่าเป็นคนหรือเปล่า ตามตัวอย่างรูปด้านล่าง แล้วใส่เว็บไซต์เราเข้าไปด้วย

จากนั้นก็กด Register เมื่อได้แล้ว จะได้ดังตัวอย่างด้านล่าง

จากโค้ด เราจะได้ site key secret key แล้วก็ มีบอกว่า แต่ละ step เราต้องทำอะไรบ้าง

จากโค้ดที่ให้มาเราก็นำไปวางที่เว็บไซต์เราได้เลย คือ ให้เราแอด script 
<script src='https://www.google.com/recaptcha/api.js'></script> เข้าไปที่ head ในเว็บเราเลย

ส่วนโค้ดส่วน 
<div class="g-recaptcha" data-sitekey="6LdyBIIUAAAAAGDfbdyc5V_xxxxxxxxxxxxxxxxxxx"></div> เราก็ก็อปไปวางในส่วนที่ต้องการจะให้แสดงได้เลย

เมื่อได้แล้วเราก็จะได้ผลลัพธ์ดังตัวอย่างด้านล่าง

ต่อจากนั้นในฝั่ง server ถ้าเราติ๊กที่ช่อง I’m not a robot เราจะได้ค่า req.body[‘g-recaptcha-response’] ซึ่งเป็นค่าที่ยาว ๆ ดังนั้นเราก็เช็คเบื้องต้นก่อนว่า user ได้ทำการกด I’m not a robot เข้ามาหรือเปล่า

if(req.body['g-recaptcha-response'] === undefined || req.body['g-recaptcha-response'] === '' || req.body['g-recaptcha-response'] === null) {
  return res.json({"responseCode" : 1,"responseDesc" : "Please select captcha"});
}

จากโค้ดด้านบน เราแค่เช็คเบื้อต้นว่ามีการกด I’m not robot เข้ามาหรือเปล่า หรือมีค่า req.body[‘g-recaptcha-response’] หรือเปล่า แต่แค่นี้ยังไม่พอ เพราะคนที่ต้องการปั่นเว็บเรา สามารถส่งค่าเรื่อยเปลื่อยมาก็ได้ดังนั้น  เราต้องทำการเช็ค authen ต่อว่าค่าที่ส่งมานั้นถูกต้องหรือเปล่า

var verificationUrl = "https://www.google.com/recaptcha/api/siteverify?secret=" + secretKey + "&amp;response=" + req.body['g-recaptcha-response'] + "&amp;remoteip=" + req.connection.remoteAddress;
request(verificationUrl,function(error, response, body) {
	body = JSON.parse(body);
	// Success will be true or false depending upon captcha validation.
	if(body.success !== undefined &amp;&amp; !body.success) {
		return res.json({"responseCode" : 1,"responseDesc" : "Failed captcha verification"});
	}
	res.json({"responseCode" : 0,"responseDesc" : "Sucess"});
});

จากโค้ด เราจะต้องส่งค่าที่ส่งมา ไปหา google recaptcha เพื่อทำการเช็คว่าค่านั้นถูกต้องหรือเปล่า ถ้าถูกต้องแสดงว่าเป็นการกดมาจาก I’m not robot

เมื่อลองเทสดูจะพบว่า เมื่อกด Submit ไปมันจะทำการส่ง request ไปเลย เรามาใช้ javascript เช็คหน่อยละกันว่าให้กด I’m not robot ด้วย โดยการเช็คก็ให้ใส่ onsubmit=’return checkComment()’ จากนั้นก็สร้างฟังก์ชัน checkComment ดังตัวอย่างด้านล่าง

function checkComment(){
	var response = grecaptcha.getResponse();
	if(response.length == 0){
		alert("Please select captcha")
	}
	return response.length != 0;
}

จากโค้ดเราสามารถใช้ javascript เช็คได้จาก grecaptcha.getResponse();

Add a Comment

Your email address will not be published. Required fields are marked *