PL
reCAPTCHA v3 - przykład użycia w JavaScript z Framework-iem Spring
12 points
W tym artykule chcielibysmy pokazać w jaki sposób używać Google reCAPTCHA v3 w połączeniu JavaScript po stronie przeglądarki oraz Spring Frameworku po stronie backendu.
Artykuł składa się z 3 częsci:
- opisu przykładowej konfiguracji w panelu Google reCAPTCHA v3,
- przykładowy kod działający po stronie przeglądarki (front-end),
- przykładowy kod działający po stronie serwera (back-end).
Oficjalna dokumentacja dla reCAPTCHA v3 znajduje się tutaj.
- konfiguracja Google reCAPTCHA:
- wejdź do panelu Google reCAPTCHA
https://www.google.com/recaptcha/admin#list - utwórz nową konfugurację,
- wprowadź wymagane dane (znajdują się one niżej na zrzucie ekranu):
- Label (wprowadź swoją nazwę konfiguracji),
- reCAPTCHA type ustaw jako v3,
- Domains zawiera
my-domain.com, które należy zastąpić nazwą swojej domeny oraz dodatkowolocalhost, aby móc testować aplikację w trakcie dewelopmentu,
- zaakceptuj regulamin i kliknij Submit,
- wejdź do panelu Google reCAPTCHA
- integracja przykładowych kodów z twoją stroną,
- skopiuj kody źródłowe znajdujące w dalszej częsci artykułu,
- skopiuj site key do pliku
index.html(należy zamienić kluczsite_key_xxyyzzw dwuch miejscach - parametr w url oraz zmienną w kodzie):xxxxxxxxxx1<script src="https://www.google.com/recaptcha/api.js?render=site_key_xxyyzz"></script>xxxxxxxxxx1var PUBLIC_KEY = 'site_key_xxyyzz'; - skopiuj secret key do pliku
ReCAPTCHAv3Utils.java:xxxxxxxxxx1private static final String SECRET_KEY = "secret_key_xxyyzz";
- otwórz w przeglądarce swoją stronę i sprawdź czy wszystk odziała poprawnie.
Porady:
- nie udostępniaj swojego secret key!
- ustaw
double SCORES_LEVEL = 0.7zgodnie ze swoimi wymaganiami (opis znajdziesz poniżej w kodzie),- czasami dobrze jest wykonać pewną akcję jeśli dojedzie do wykrycia zachowania, które wsjkazuję na użycie bota (przykładowo odczekaj 60 sekund lub poproś użytkownika o potwierdzenie swojej tożsamości np. swoim mailem lub nr. telefonu).
W tej sekcji zamieszczono przykłądową konfigurację użytą podczas tworzenia reCAPTCHA v3. Poniższy zrzut ekranu jest w języku angielskim ze względu na to, że sam panel nie ma tłumaczenia na język polski.
Wskazówka: nie zapomnij dodać domeny
localhostjeśli chcesz dewelopować apliację lokalnie z użyciem reCAPTCHA.
W tej sekcji przedstawiono przykłąd użycia reCAPTCHA v3 dla scenariusza logowania użytkownika - kod JavaScript. Tekst reprezetujący akcję login możemy zamienić na cokolwiek (znajduje się on w linijce zawierającej: ReCAPTCHAv3Utils.request('login', onSuccess, onError)).
index.html file:
xxxxxxxxxx1
2
<html>3
<head>4
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>5
<!-- klucz reCaptcha v3 można uzyskąć na stronie https://www.google.com/recaptcha/admin#list -->6
<script src='https://www.google.com/recaptcha/api.js?render=site_key_xxyyzz&hl=pl'></script>7
</head>8
<body>9
<script>10
11
/*12
panel reCaptcha v3:13
https://www.google.com/recaptcha/admin#list14
15
dokumentacja reCaptcha v3:16
https://developers.google.com/recaptcha/docs/v317
*/18
var ReCAPTCHAv3Utils = new function() {19
20
// klucz reCaptcha v3 można uzyskąć na stronie https://www.google.com/recaptcha/admin#list21
var PUBLIC_KEY = 'site_key_xxyyzz';22
23
// Odpytuje Google reCAPTCHAv3 API w celu uzyskania tokenu.24
//25
// argumenty:26
// action - możymy wstawić tutaj dowolny tekst nazywający naszą akcję27
// Rzuć okiem na "Use case" stronie https://developers.google.com/recaptcha/docs/v328
// przykładowno można uzyć. homepage, login, social, e-commerce29
// onSuccess i onError - to funkcje callback, które wykonywane są ajko rezultat zapytania30
//31
this.request = function(action, onSuccess, onError) {32
if (window.grecaptcha) {33
window.grecaptcha.ready(function() {34
var config = {35
action : action36
};37
try {38
var query = window.grecaptcha.execute(PUBLIC_KEY, config);39
if (onSuccess) {40
query.then(onSuccess);41
}42
} catch (e) {43
var message = e && e.message || 'Bład zapytania reCAPTCHA.';44
if (onError) {45
onError(message);46
}47
}48
});49
} else {50
if (onError) {51
onError('reCAPTCHA v3 nie została załadowana poprawnie.');52
}53
}54
};55
};56
57
58
// Przykład użycia:59
60
function loginUser(data) {61
var onSuccess = function(token) {62
data.token = token; // <------- przyznany token przez Google reCAPTCHA v363
$.ajax({64
type: 'POST',65
url: '/backend/login-user',66
data: JSON.stringify(data),67
contentType : 'application/json; charset=utf-8',68
dataType : 'json',69
success: function(data) {70
alert('Odpowiedź: ' + data.message);71
},72
error: function(error) {73
alert('Błąd zapytania!');74
}75
});76
};77
var onError = function(message) {78
alert('Błąd: ' + message);79
};80
ReCAPTCHAv3Utils.request('login', onSuccess, onError);81
}82
83
loginUser({84
username: 'John',85
password: 'my-password-here'86
});87
88
</script>89
</body>90
</html>
W tej sekcji zaprezentowano przykładowy kod w jezyku Java za pomocą, którego jesteśmy w stanie razem z frameworkiem Spring wykonać zapytanie do Google-owego API reCAPTCHA v3 w celu zweryfikowania zachowania użytkownika - czy jest to bot lub człowiek.
Poniżej przedstawiono kilka plików, które należy umieścić w swoim projekcie.
Plik pom.xml (wymagana do dodania zależność dla maven-a):
xxxxxxxxxx1
<!-- Jackson JSON Mapper -->2
<dependency>3
<groupId>org.codehaus.jackson</groupId>4
<artifactId>jackson-mapper-asl</artifactId>5
<version>1.9.10</version>6
</dependency>Plik UserController.java:
xxxxxxxxxx1
package logic.controller_captcha;2
3
import logic.util.LoggerUtil;4
import org.apache.log4j.Logger;5
import javax.servlet.http.HttpServletRequest;6
import org.springframework.stereotype.Controller;7
import org.springframework.web.bind.annotation.RequestMapping;8
import org.springframework.web.bind.annotation.RequestMethod;9
import org.springframework.web.bind.annotation.ResponseBody;10
11
import logic.controller_captcha.recaptchav3.ReCAPTCHAv3Exception;12
import logic.controller_captcha.recaptchav3.ReCAPTCHAv3Utils;13
import logic.controller_captcha.recaptchav3.ReCAPTCHAv3Response;14
15
16
public class UserController {17
18
private final Logger logger = Logger.getLogger(getClass());19
20
// w zakresie od 0.0 do 1.021
// 1.0 wskazuję na bardzo dobrą inteakcję rzczeczywistego użytkownika22
// 0.0 wskazuje na 100%, że jest to zachwoanie typu bot23
private final static double SCORES_LEVEL = 0.7;24
25
(value = "/backend/login-user", method = RequestMethod.POST)26
27
public String loginUser(28
HttpServletRequest request, 29
LoginUserRequest loginUserRequest30
) {31
String token = loginUserRequest.getToken();32
String address = request.getRemoteAddr();33
34
try {35
ReCAPTCHAv3Response response = ReCAPTCHAv3Utils.request(token, address);36
if (response.getSuccess()) {37
if (response.getScore() > SCORES_LEVEL) {38
// some login operation here ...39
return "{\"message\": \"Logowanie zakończone sukcesem.\"}";40
} else {41
return "{\"message\": \"Wykryto dziwne zachowanie.\"}";42
}43
}44
return "{\"message\": \"Adres lub token jest niepoprawny.\"}";45
} catch (ReCAPTCHAv3Exception e) {46
return "{\"message\": \"Błąd reCAPTCHA.\"}";47
}48
}49
}Plik LoginUserRequest.java:
xxxxxxxxxx1
package logic.controller_captcha;2
3
public class LoginUserRequest4
{5
private String token;6
7
8
// wstaw tutaj pozostałe pola ...9
10
11
public String getToken() {12
return this.token;13
}14
15
public void setToken(String token) {16
this.token = token;17
}18
}Plik ReCAPTCHAv3Utils.java:
xxxxxxxxxx1
package logic.controller_captcha.recaptchav3;2
3
import org.codehaus.jackson.map.ObjectMapper;4
5
import java.io.BufferedReader;6
import java.io.IOException;7
import java.io.InputStream;8
import java.io.InputStreamReader;9
import java.net.HttpURLConnection;10
import java.net.URL;11
12
/*13
panel reCaptcha v3:14
https://www.google.com/recaptcha/admin#list15
16
dokumentacja reCaptcha v3:17
https://developers.google.com/recaptcha/docs/v318
*/19
public final class ReCAPTCHAv3Utils {20
21
private static ObjectMapper mapper = new ObjectMapper();22
23
// klucz do reCaptcha v3 można uzyskać na stronie https://www.google.com/recaptcha/admin#list24
private static final String SECRET_KEY = "secret_key_xxyyzz";25
26
private ReCAPTCHAv3Utils() {27
// pusty konstruktor ...28
}29
30
private static String readStream(InputStream stream) throws IOException {31
StringBuilder builder = new StringBuilder();32
try (BufferedReader reader = new BufferedReader(new InputStreamReader(stream))) {33
while (true) {34
String line = reader.readLine();35
if (line == null) {36
break;37
}38
builder.append(line);39
}40
}41
return builder.toString();42
}43
44
private static ReCAPTCHAv3Response readObject(InputStream stream) throws IOException {45
String response = readStream(stream);46
return mapper.readValue(response, ReCAPTCHAv3Response.class);47
}48
49
public static ReCAPTCHAv3Response request(String token, String ip) throws ReCAPTCHAv3Exception {50
try {51
URL url = new URL("https://www.google.com/recaptcha/api/siteverify?secret=" 52
+ SECRET_KEY + "&response=" + token + "&remoteip=" + ip);53
HttpURLConnection connection = (HttpURLConnection) url.openConnection();54
try {55
connection.setRequestMethod("GET");56
connection.setConnectTimeout(10000);57
connection.setReadTimeout(10000);58
return readObject(connection.getInputStream());59
} finally {60
connection.disconnect();61
}62
} catch (Exception e) {63
throw new ReCAPTCHAv3Exception("Błąd dla zapytania reCAPTCHA.", e);64
}65
}66
}67
Plik ReCAPTCHAv3Exception.java:
xxxxxxxxxx1
package logic.controller_captcha.recaptchav3;2
3
public class ReCAPTCHAv3Exception extends Throwable {4
5
public ReCAPTCHAv3Exception(String message) {6
super( message );7
}8
9
public ReCAPTCHAv3Exception(String message, Throwable cause) {10
super( message, cause );11
}12
}13
Plik ReCAPTCHAv3Response.java:
xxxxxxxxxx1
package logic.controller_captcha.recaptchav3;2
3
import org.codehaus.jackson.annotate.JsonProperty;4
5
public class ReCAPTCHAv3Response {6
7
( "success" )8
private boolean success;9
10
( "score" )11
private double score;12
13
( "action" )14
private String action;15
16
( "challenge_ts" )17
private Object timestamp;18
19
( "hostname" )20
private String hostname;21
22
( "error-codes" )23
private Object errors;24
25
public boolean getSuccess() {26
return this.success;27
}28
29
public void setSuccess(boolean success) {30
this.success = success;31
}32
33
public double getScore() {34
return this.score;35
}36
37
public void setScore(double score) {38
this.score = score;39
}40
41
public String getAction() {42
return this.action;43
}44
45
public void setAction(String action) {46
this.action = action;47
}48
49
public String getHostname() {50
return this.hostname;51
}52
53
public void setHostname(String hostname) {54
this.hostname = hostname;55
}56
}