added captcha

This commit is contained in:
Lorenz Hohermuth 2025-06-06 10:26:34 +02:00
parent 0ea0b8b3c6
commit 0b9cfbcd2d
3 changed files with 48 additions and 3 deletions

View File

@ -0,0 +1,4 @@
package ch.bbw.pr.tresorbackend.controller;
public class RecaptchaController {
}

View File

@ -103,3 +103,27 @@ export const loginUser = async (loginValue) => {
throw new Error('Failed to log in. ' || error.message); throw new Error('Failed to log in. ' || error.message);
} }
} }
export const captchaCheck = async (captchaToken) => {
const protocol = process.env.REACT_APP_API_PROTOCOL; // "http"
const host = process.env.REACT_APP_API_HOST; // "localhost"
const port = process.env.REACT_APP_API_PORT; // "8080"
const path = process.env.REACT_APP_API_PATH; // "/api"
const portPart = port ? `:${port}` : ''; // port is optional
const API_URL = `${protocol}://${host}${portPart}${path}`;
try {
const res = await fetch(`${API_URL}/verify-recaptcha`, {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ captchaToken }),
});
return await res.json();
} catch (error) {
console.error('Failed to log in:', error.message);
throw new Error('Failed to log in. ' || error.message);
}
}

View File

@ -1,5 +1,7 @@
import React, { useState } from 'react';
import { useNavigate } from 'react-router-dom'; import { useNavigate } from 'react-router-dom';
import { loginUser } from '../../comunication/FetchUser'; import { loginUser, captchaCheck } from '../../comunication/FetchUser';
import ReCAPTCHA from 'react-google-recaptcha';
/** /**
* LoginUser * LoginUser
@ -7,15 +9,26 @@ import { loginUser } from '../../comunication/FetchUser';
*/ */
function LoginUser({ loginValues, setLoginValues }) { function LoginUser({ loginValues, setLoginValues }) {
const navigate = useNavigate(); const navigate = useNavigate();
const [recaptchaToken, setRecaptchaToken] = useState(null);
const handleCaptcha = (token) => {
setRecaptchaToken(token);
};
const handleSubmit = async (e) => { const handleSubmit = async (e) => {
e.preventDefault(); e.preventDefault();
if (!recaptchaToken) {
alert("Please verify reCAPTCHA");
return;
}
try { try {
const captchaData = await captchaCheck(recaptchaToken);
let isLoginValid = false let isLoginValid = false
isLoginValid = await loginUser(loginValues); isLoginValid = await loginUser(loginValues);
console.log(loginValues); if (isLoginValid || captchaData.success) {
if (isLoginValid) {
setLoginValues({ userName: loginValues.email, password: loginValues.password }); setLoginValues({ userName: loginValues.email, password: loginValues.password });
navigate('/'); navigate('/');
} }
@ -54,6 +67,10 @@ function LoginUser({ loginValues, setLoginValues }) {
</div> </div>
</aside> </aside>
</section> </section>
<ReCAPTCHA
sitekey="6LdJj1crAAAAABcEz65x0DUAsuJUBCKwdSi1Mewj"
onChange={handleCaptcha}
/>
<button type="submit">Login</button> <button type="submit">Login</button>
</form> </form>
</div> </div>