답변 2개
채택된 답변
+20 포인트
2년 전
이미지 내용만으로는 구체적인 답변을 드리기 어려울 것 같습니다.
최소한의 소스코드를 공유해주시면 좀더 구체적인 답변을 받으실 수 있으실거라 생각합니다.
개인적인 생각이지만 소셜로그인에서 캡챠를 사용할 이유는 없는 것으로 판단됩니다.
대략적으로 설명 드리자면 다음과 같이 시도해 볼 수 있을 것 같습니다
</p>
<p><!DOCTYPE html>
<html>
<head>
<!-- 기존 헤더 내용 -->
<!-- reCAPTCHA 스크립트 추가 -->
<script src="<a href="https://www.google.com/recaptcha/api.js"" target="_blank" rel="noopener noreferrer">https://www.google.com/recaptcha/api.js"</a> 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></p>
<p>
login.php
</p>
<p><?php
if ($_SERVER["REQUEST_METHOD"] == "POST") {
$username = $_POST["username"];
$password = $_POST["password"];</p>
<p> // reCAPTCHA 검증
$recaptcha_secret = "YOUR_RECAPTCHA_SECRET_KEY";
$recaptcha_response = $_POST["g-recaptcha-response"];</p>
<p> $url = '<a href="https://www.google.com/recaptcha/api/siteverify';" target="_blank" rel="noopener noreferrer">https://www.google.com/recaptcha/api/siteverify';</a>
$data = array(
'secret' => $recaptcha_secret,
'response' => $recaptcha_response
);</p>
<p> $options = array(
'http' => array(
'header' => "Content-type: application/x-www-form-urlencoded\r\n",
'method' => 'POST',
'content' => http_build_query($data)
)
);</p>
<p> $context = stream_context_create($options);
$verify = file_get_contents($url, false, $context);
$captcha_success = json_decode($verify);</p>
<p> if ($captcha_success->success) {
// reCAPTCHA 통과: 로그인 처리 로직 추가
// 여기에서 사용자 아이디와 비밀번호를 확인하고 로그인 처리를 진행합니다.
} else {
// reCAPTCHA 통과 실패: 오류 메시지 표시
echo "reCAPTCHA 검증 실패. 다시 시도하세요.";
}
}
?>
참고하셔서 원하시는 형식으로 구현하시면 될 것 같습니다.
로그인 후 평가할 수 있습니다
답변에 대한 댓글 2개
�
시린♡
2년 전
�
웹메이킹
2년 전
다음과 같이 해 볼 수 있을 것 같습니다.
[code]
$(document).ready(function() {
$("#login-button").click(function() {
// 아이디와 비밀번호를 검증하고, 유효하다면 캡챠 표시
if (validateCredentials()) {
showCaptcha();
}
});
});
function showCaptcha() {
// 캡챠를 표시하는 코드를 여기에 작성
}
[/code]
JavaScript를 사용하여 로그인 버튼을 클릭할 때 캡챠를 표시하도록 하면 될 것 같습니다.
아이디와 비밀번호를 입력하면 이벤트 핸들러를 통해 캡챠를 표시하는 코드를 실행하고 로그인 버튼 클릭시 로그인이 되게 하면 되지 않을까 합니다.
[code]
$(document).ready(function() {
$("#login-button").click(function() {
// 아이디와 비밀번호를 검증하고, 유효하다면 캡챠 표시
if (validateCredentials()) {
showCaptcha();
}
});
});
function showCaptcha() {
// 캡챠를 표시하는 코드를 여기에 작성
}
[/code]
JavaScript를 사용하여 로그인 버튼을 클릭할 때 캡챠를 표시하도록 하면 될 것 같습니다.
아이디와 비밀번호를 입력하면 이벤트 핸들러를 통해 캡챠를 표시하는 코드를 실행하고 로그인 버튼 클릭시 로그인이 되게 하면 되지 않을까 합니다.
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인
다만 질문 내용처럼 캡챠를 기본 숨김상태에서 로그인 버튼 다시한번 누르면 나오게 하고싶은게 목적이였고...
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
로그인관련 소스는 위 다음 링크 참고하시면될듯하네요.