로그인창에 캡챠 출력
본문
다음 포털보면 로그인 화면에는 캡챠가 숨어있고 여기서
아이디랑 비번 넣고 로그인 누르면
그제서야 로그인 버튼 위에 캡챠가 출력되는데 이걸 그누보드 로그인에
조합하고싶은데 어떻게 하면 위처럼 나올수있을까요?
그냥 매번 로그인창에 캡챠화면이 계속 나오는거보다 로그인 버튼 누르면 그제서야
스무스하게 나타나고서 로그인버튼 누르면 로그인되는 방식인데 뭐라고 쳐야지 나오는지 모르겠네요.
답변 2
이미지 내용만으로는 구체적인 답변을 드리기 어려울 것 같습니다.
최소한의 소스코드를 공유해주시면 좀더 구체적인 답변을 받으실 수 있으실거라 생각합니다.
개인적인 생각이지만 소셜로그인에서 캡챠를 사용할 이유는 없는 것으로 판단됩니다.
대략적으로 설명 드리자면 다음과 같이 시도해 볼 수 있을 것 같습니다
<!DOCTYPE html>
<html>
<head>
<!-- 기존 헤더 내용 -->
<!-- reCAPTCHA 스크립트 추가 -->
<script src="https://www.google.com/recaptcha/api.js" async defer></script>
</head>
<body>
<!-- 기존 로그인 폼 -->
<form method="post" action="login_process.php">
<input type="text" name="username" placeholder="사용자 아이디" required>
<input type="password" name="password" placeholder="비밀번호" required>
<!-- reCAPTCHA 위젯 추가 -->
<div class="g-recaptcha" data-sitekey="YOUR_RECAPTCHA_SITE_KEY"></div>
<button type="submit">로그인</button>
</form>
</body>
</html>
login.php
<?php
if ($_SERVER["REQUEST_METHOD"] == "POST") {
$username = $_POST["username"];
$password = $_POST["password"];
// reCAPTCHA 검증
$recaptcha_secret = "YOUR_RECAPTCHA_SECRET_KEY";
$recaptcha_response = $_POST["g-recaptcha-response"];
$url = 'https://www.google.com/recaptcha/api/siteverify';
$data = array(
'secret' => $recaptcha_secret,
'response' => $recaptcha_response
);
$options = array(
'http' => array(
'header' => "Content-type: application/x-www-form-urlencoded\r\n",
'method' => 'POST',
'content' => http_build_query($data)
)
);
$context = stream_context_create($options);
$verify = file_get_contents($url, false, $context);
$captcha_success = json_decode($verify);
if ($captcha_success->success) {
// reCAPTCHA 통과: 로그인 처리 로직 추가
// 여기에서 사용자 아이디와 비밀번호를 확인하고 로그인 처리를 진행합니다.
} else {
// reCAPTCHA 통과 실패: 오류 메시지 표시
echo "reCAPTCHA 검증 실패. 다시 시도하세요.";
}
}
?>
참고하셔서 원하시는 형식으로 구현하시면 될 것 같습니다.
이미 일반 로그인형태에서 로그인시 캡챠는 사용중이며 소셜로그인에서는 안되는걸 알기에 사용않합니다.
다만 질문 내용처럼 캡챠를 기본 숨김상태에서 로그인 버튼 다시한번 누르면 나오게 하고싶은게 목적이였고...
https://accounts.kakao.com/login/?continue=https%3A%2F%2Flogins.daum.net%2Faccounts%2Fksso.do%3Frescue%3Dtrue%26url%3Dhttps%253A%252F%252Fwww.daum.net#login
로그인관련 소스는 위 다음 링크 참고하시면될듯하네요.
다음과 같이 해 볼 수 있을 것 같습니다.
$(document).ready(function() {
$("#login-button").click(function() {
// 아이디와 비밀번호를 검증하고, 유효하다면 캡챠 표시
if (validateCredentials()) {
showCaptcha();
}
});
});
function showCaptcha() {
// 캡챠를 표시하는 코드를 여기에 작성
}
JavaScript를 사용하여 로그인 버튼을 클릭할 때 캡챠를 표시하도록 하면 될 것 같습니다.
아이디와 비밀번호를 입력하면 이벤트 핸들러를 통해 캡챠를 표시하는 코드를 실행하고 로그인 버튼 클릭시 로그인이 되게 하면 되지 않을까 합니다.
로그인 실패시 세션에 해당 정보를 담고
세션에 값이 있으면 캡챠를 출력해주면 될것 같습니다.
그리고 로그인시에 캡챠 검증 추가해주면 될것 같구요
