Dexter  Goodwin

Dexter Goodwin

1661891160

React-google-recaptcha: Component Wrapper for Google ReCAPTCHA

react-google-recaptcha

React component for Google reCAPTCHA v2.

Installation

npm install --save react-google-recaptcha

Usage

All you need to do is sign up for an API key pair. You will need the client key then you can use <ReCAPTCHA />.

The default usage imports a wrapped component that loads the google recaptcha script asynchronously then instantiates a reCAPTCHA the user can then interact with.

Code Example:

import ReCAPTCHA from "react-google-recaptcha";

function onChange(value) {
  console.log("Captcha value:", value);
}

ReactDOM.render(
  <ReCAPTCHA
    sitekey="Your client site key"
    onChange={onChange}
  />,
  document.body
);

Component Props

Properties used to customise the rendering:

NameTypeDescription
asyncScriptOnLoadfuncoptional callback when the google recaptcha script has been loaded
badgeenumoptional bottomright, bottomleft or inline. Positions reCAPTCHA badge. Only for invisible reCAPTCHA
hlstringoptional set the hl parameter, which allows the captcha to be used from different languages, see [reCAPTCHA hl]
isolatedbooloptional For plugin owners to not interfere with existing reCAPTCHA installations on a page. If true, this reCAPTCHA instance will be part of a separate ID space. (default: false)
onChangefuncThe function to be called when the user successfully completes the captcha
onErroredfuncoptional callback when the challenge errored, most likely due to network issues.
onExpiredfuncoptional callback when the challenge is expired and has to be redone by user. By default it will call the onChange with null to signify expired callback.
sitekeystringThe API client key
sizeenumoptional compact, normal or invisible. This allows you to change the size or do an invisible captcha
stokenstringoptional set the stoken parameter, which allows the captcha to be used from different domains, see [reCAPTCHA secure-token]
tabindexnumberoptional The tabindex on the element (default: 0)
typeenumoptional image or audio The type of initial captcha (defaults: image)
themeenumoptional light or dark The theme of the widget (defaults: light). See [example][docs_theme]

Component Instance API

The component instance also has some utility functions that can be called. These can be accessed via ref.

  • getValue() returns the value of the captcha field
  • getWidgetId() returns the recaptcha widget Id
  • reset() forces reset. See the JavaScript API doc
  • execute() programmatically invoke the challenge
  • executeAsync() programmatically invoke the challenge and return a promise that resolves to the token or errors(if encountered).
    • alternative approach to execute() in combination with the onChange() prop - example below

Example:

const recaptchaRef = React.createRef();
...
onSubmit = () => {
  const recaptchaValue = recaptchaRef.current.getValue();
  this.props.onSubmit(recaptchaValue);
}
render() {
  return (
    <form onSubmit={this.onSubmit} >
      <ReCAPTCHA
        ref={recaptchaRef}
        sitekey="Your client site key"
        onChange={onChange}
      />
    </form>
  )
}

Invisible reCAPTCHA

▶ Codesandbox invisible example

See the reCAPTCHA documentation to see how to configure it.

With the invisible option, you need to handle things a bit differently. You will need to call the execute method yourself.

import ReCAPTCHA from "react-google-recaptcha";

const recaptchaRef = React.createRef();

ReactDOM.render(
  <form onSubmit={() => { recaptchaRef.current.execute(); }}>
    <ReCAPTCHA
      ref={recaptchaRef}
      size="invisible"
      sitekey="Your client site key"
      onChange={onChange}
    />
  </form>,
  document.body
);

Additionally, you can use the executeAsync method to use a promise based approach.

import ReCAPTCHA from "react-google-recaptcha";


const ReCAPTCHAForm = (props) => {
  const recaptchaRef = React.useRef();

  const onSubmitWithReCAPTCHA = async () => {
    const token = await recaptchaRef.current.executeAsync();

    // apply to form data
  }

  return (
    <form onSubmit={onSubmitWithReCAPTCHA}>
      <ReCAPTCHA
        ref={recaptchaRef}
        size="invisible"
        sitekey="Your client site key"
      />
    </form>
  )

}

ReactDOM.render(
  <ReCAPTCHAForm />,
  document.body
);

Advanced usage

Global properties used by reCaptcha

useRecaptchaNet: If google.com is blocked, you can set useRecaptchaNet to true so that the component uses recaptcha.net instead.

Example global properties:

window.recaptchaOptions = {
  useRecaptchaNet: true,
};

CSP Nonce support

window.recaptchaOptions = {
  nonce: document.querySelector('meta[name=\'csp-nonce\']').getAttribute('content'),
};

ReCaptcha loading google recaptcha script manually

You can also use the barebone components doing the following. Using that component will oblige you to manage the grecaptcha dep and load the script by yourself.

import { ReCAPTCHA } from "react-google-recaptcha";

const grecaptchaObject = window.grecaptcha // You must provide access to the google grecaptcha object.

render(
  <ReCAPTCHA
    ref={(r) => this.recaptcha = r}
    sitekey="Your client site key"
    grecaptcha={grecaptchaObject}
  />,
  document.body
);

Hiding the Recaptcha

According to the google docs you are allowed to hide the badge as long as you include the reCAPTCHA branding visibly in the user flow. Please include the following text:

This site is protected by reCAPTCHA and the Google
    <a href="https://policies.google.com/privacy">Privacy Policy</a> and
    <a href="https://policies.google.com/terms">Terms of Service</a> apply.

If you wish to hide the badge you must add:

.grecaptcha-badge { visibility: hidden; }

to your css.

Migrate to 2.0

  • options.removeOnUnmount: REMOVED This was only useful for the lang changes. Lang is now changed through the hl prop.
  • options.lang: REMOVED Instead pass it as the hl prop on the component.

Notes on Requirements

At least React@16.4.1 is required due to forwardRef usage in the dependency react-async-script.

Notes

Pre 1.0.0 and React < 16.4.1 support details in 0.14.0.

Download Details:

Author: Dozoisch
Source Code: https://github.com/dozoisch/react-google-recaptcha 
License: MIT license

#javascript #react #google #recaptcha 

React-google-recaptcha: Component Wrapper for Google ReCAPTCHA
Lawson  Wehner

Lawson Wehner

1661022960

Flutter_recaptcha_v2: A Flutter Plugin for Google Recaptcha V2

flutter_recaptcha_v2

A Flutter plugin for Google ReCaptcha V2.

Getting Started

This plugin requires Webview to use Google ReCaptcha. This plugin only supports Google ReCAPTCHA V2 (not V3)

Obtain your own key & secret here: https://www.google.com/recaptcha

!!! Remember to add this domain into the reCaptcha setting or add your own domain: recaptcha-flutter-plugin.firebaseapp.com

Then test your API KEY at: https://recaptcha-flutter-plugin.firebaseapp.com/?api_key=API_KEY

Put RecaptchaV2 widget into your widget tree (Usually inside Stack widget), make sure it's placed on top of the tree and block all the behind interactions:

  • You can change the plugin url for the captcha domain insde the RecaptchaV2 or leave it by default non adding the line:
pluginURL: "https://mypersonalurl.com"

if you have setted your own domain, specify the domain used

  • To show the Cancel Button with the captcha controller set the boolean to true:

visibleCancelBottom: true

otherwise it won't appear

  • Set the Text for the Cancel buttom or leave it by default:
textCancelButtom: "CANCEL CAPTCHA"

Example

RecaptchaV2Controller recaptchaV2Controller = RecaptchaV2Controller();
...
RecaptchaV2(
    apiKey: "YOUR_API_KEY", // for enabling the reCaptcha
    apiSecret: "YOUR_API_SECRET", // for verifying the responded token
    pluginURL: "https://mypersonalurl.com",
	visibleCancelBottom: true,
	textCancelButtom: "CUSTOM CANCEL CAPTCHA BUTTOM TEXT",
	controller: recaptchaV2Controller,
    onVerifiedError: (err){
        print(err);
    },
    onVerifiedSuccessfully: (success) {
        setState(() {
            if (success) {
                // You've been verified successfully.
            } else {
                // "Failed to verify.
            }
        });
    },
),

The RecaptchaV2 widget is hidden by default, you need to attach the RecaptchaV2Controller and call show() method when needed. Like this:

recaptchaV2Controller.show();

Manually hide it:

recaptchaV2Controller.hide();

That's it!

Use this package as a library

Depend on it

Run this command:

With Flutter:

 $ flutter pub add flutter_recaptcha_v3

This will add a line like this to your package's pubspec.yaml (and run an implicit flutter pub get):

dependencies:
  flutter_recaptcha_v3: ^0.1.3

Alternatively, your editor might support flutter pub get. Check the docs for your editor to learn more.

Import it

Now in your Dart code, you can use:

import 'package:flutter_recaptcha_v3/flutter_recaptcha_v2.dart';

example/lib/main.dart

import 'package:flutter/material.dart';
import 'package:flutter_recaptcha_v2/flutter_recaptcha_v2.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Google ReCaptcha Demo'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  String verifyResult = "";

  RecaptchaV2Controller recaptchaV2Controller = RecaptchaV2Controller();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Stack(
        children: <Widget>[
          Center(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                RaisedButton(
                  child: Text("SHOW ReCAPTCHA"),
                  onPressed: () {
                    recaptchaV2Controller.show();
                  },
                ),
                Text(verifyResult),
              ],
            ),
          ),
          RecaptchaV2(
            apiKey: "6LeCwZYUAAAAAJo8IVvGX9dH65Rw89vxaxErCeou",
            apiSecret: "6LeCwZYUAAAAAKGahIjwfOARevvRETgvwhPMKCs_",
            controller: recaptchaV2Controller,
            onVerifiedError: (err){
              print(err);
            },
            onVerifiedSuccessfully: (success) {
              setState(() {
                if (success) {
                  verifyResult = "You've been verified successfully.";
                } else {
                  verifyResult = "Failed to verify.";
                }
              });
            },
          ),
        ],
      ),
    );
  }
}

Download Details:

Author: Senzil
Source Code: https://github.com/senzil/flutter_recaptcha_v2/ 
License: View license

#flutter #recaptcha #dart #recaptcha 

Flutter_recaptcha_v2: A Flutter Plugin for Google Recaptcha V2

Google reCAPTCHA v3 plugin for Flutter Web

g_recaptcha_v3

Create Google reCAPTCHA v3 token for Flutter web. Google reCAPTCHA v3 plugin for Flutter. A Google reCAPTCHA is a free service that protects your website from spam and abuse.

Web Demo


Preparation

Step 1

Step 2

  • Add the script inside web/index.html - <head> tag
  • Place it before the main.dart.js script (or) flutter.js script
<head>
  .
  .
  <!-- Step 2 -->
  <script src="https://www.google.com/recaptcha/api.js?render=<your Recaptcha v3 site key>"></script>
  <!-- Step 2 End -->
  .
  .
  <script src="flutter.js" defer></script>
</head>

Step 3

  • Add g_recaptcha_v3 to pubspec.yaml
  flutter pub add g_recaptcha_v3

Development

1. GRecaptchaV3.ready()

The ready() method should be called before execute()

import 'package:g_recaptcha_v3/g_recaptcha_v3.dart'; //--1

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  if(kIsWeb){
    bool ready = await GRecaptchaV3.ready("<your Recaptcha site key>"); //--2
    print("Is Recaptcha ready? $ready");
  }
  runApp(const MyApp());
}

2. GRecaptchaV3.execute()

The ready() method should be called before execute()

import 'package:g_recaptcha_v3/g_recaptcha_v3.dart';

void generateToken() async {
  String? token = await GRecaptchaV3.execute('<your_action>'); //--3
  print(token);
  // send token to server and verify
}
  • String action - used to verify the string in backend. ( action docs )
  • token will be null if the,
    • web setup has any errors.
    • method called from other than web platform.

3. Show / Hide reCaptcha badge

change the reCaptcha badge visibility

    GRecaptchaV3.showBadge();
    GRecaptchaV3.hideBadge();

Warning!!!

You are allowed to hide the badge as long as you include the reCAPTCHA branding visibly in the user flow.`

Sample Image

alternate way

Read more about hiding in reCaptcha docs

Web Port 80 setup

(for localhost only)

If in case recaptcha script gives you error for port other than port :80, you can use the following code to setup the port.

  flutter run -d chrome --web-port 80

FAQ

Q: How to hide reCaptcha until / before Flutter render its UI?

A: https://github.com/bharathraj-e/g_recaptcha_v3/issues/3

Use this package as a library

Depend on it

Run this command:

With Flutter:

 $ flutter pub add g_recaptcha_v3

This will add a line like this to your package's pubspec.yaml (and run an implicit flutter pub get):

dependencies:
  g_recaptcha_v3: ^0.0.5

Alternatively, your editor might support flutter pub get. Check the docs for your editor to learn more.

Import it

Now in your Dart code, you can use:

import 'package:g_recaptcha_v3/g_recaptcha_v3.dart'; 

example/lib/main.dart

import 'dart:async';

import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:g_recaptcha_v3/g_recaptcha_v3.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  if (kIsWeb) {
    bool ready = await GRecaptchaV3.ready(
        "6Lfl7coUAAAAAKUjryaKQDhrrklXE9yrvWNXqKTj",
        showBadge: true); //--2
    // ignore: avoid_print
    print("Is Recaptcha ready? $ready");
  }

  runApp(const MyApp());
}

class MyApp extends StatefulWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  String _token = 'Click the below button to generate token';
  bool badgeVisible = true;
  // Platform messages are asynchronous, so we initialize in an async method.
  Future<void> getToken() async {
    String token = await GRecaptchaV3.execute('submit') ?? 'null returned';
    setState(() {
      _token = token;
    });
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Recaptcha V3 Web example app'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
              SelectableText('Token: $_token\n'),
              ElevatedButton(
                onPressed: getToken,
                child: const Text('Get new token'),
              ),
              OutlinedButton.icon(
                onPressed: () {
                  if (badgeVisible) {
                    GRecaptchaV3.hideBadge();
                  } else {
                    GRecaptchaV3.showBadge();
                  }
                  badgeVisible = !badgeVisible;
                },
                icon: const Icon(Icons.legend_toggle),
                label: const Text("Toggle Badge Visibilty"),
              ),
              TextButton.icon(
                  label: const Icon(Icons.copy),
                  onPressed: () {
                    Clipboard.setData(const ClipboardData(
                        text: "https://pub.dev/packages/g_recaptcha_v3"));
                  },
                  icon: const SelectableText(
                      "https://pub.dev/packages/g_recaptcha_v3")),
            ],
          ),
        ),
      ),
    );
  }
} 

Download Details:

Author: bharathraj

Source Code: https://github.com/bharathraj-e/g_recaptcha_v3

#recaptcha #flutter #android 

Google reCAPTCHA v3 plugin for Flutter Web

A Flutter Plugin for ReCAPTCHA V2 - Android

Flutter g_captcha

A flutter plugin for reCAPTCHA v2 - android. The FREE anti-abuse service.

What is reCAPTCHA?

reCAPTCHA is a free service that protects your site from spam and abuse. It uses advanced risk analysis engine to tell humans and bots apart. With the new API, a significant number of your valid human users will pass the reCAPTCHA challenge without having to solve a CAPTCHA (See blog for more details). reCAPTCHA comes in the form of a widget that you can easily add to your blog, forum, registration form, etc.

Please check docs for further details.

Sign up for an API key pair

To use reCAPTCHA, you need to sign up for an API key pair for your site. The key pair consists of a site key and secret. The site key is used to display the widget on your site. The secret authorizes communication between your application backend and the reCAPTCHA server to verify the user's response. The secret needs to be kept safe for security purposes.

Config 'android package name' to reCaptcha's admin console

You need to add 'android package name' to reCaptcha's admin console, or you will always get error: RECAPTCHA_INVALID_PACKAGE_NAME

Usage

1. Add dependency to pubspec.yaml

dependencies:
....g_captcha: ^1.0.0

Don't forget this

flutter pub get

2. Import in dart file

import 'package:g_captcha/g_captcha.dart';

3. Config CAPTCHA_SITE_KEY and Call out

const String CAPTCHA_SITE_KEY = "CAPTCHA_SITE_KEY_HERE";
...
String tokenResult = await GCaptcha.reCaptcha(CAPTCHA_SITE_KEY);
print('tokenResult: $tokenResult');

avatar

Verify token (java with okhttp demo)

https://developers.google.com/recaptcha/docs/verify

package com.yuanchongyu.recapcha;

import okhttp3.FormBody;
import okhttp3.RequestBody;
import okhttp3.Response;
import org.json.JSONObject;

public class Main {

    // TODO
    private static final String RECAPTCHA_SECRET_KEY = "RECAPTCHA_SECRET_KEY_HERE";

    private static final String RECAPTCHA_VERIFY_URL = "https://www.google.com/recaptcha/api/siteverify";

    public static void main(String[] args) throws Exception {
        // TODO
        boolean success = verify("03AGdBq25vYY080h0Wvk-XpCkhvEoBxS2YK-EbGqWq5Ru_hWxCt2XfGr7S8LMB9z3aU411MGXRoTSIQ_OvBeFSIqLNsxLyOUDCFOXzh1DYGMbaMvnc0FfqnfFc1yWu3fK6fYNSb09QVbUKeuifpYo6GBX6GiqOEu-AjIbZMz8TxkBUbBw9VpQG2PmfREPNwV6dWVpEQe4-oy-SP3IL94DFdTrkRoYQoCfZsSpTuGXh1gepxuqn-VJOBbxeFy_Qsha1BFYRvp2reifIX9Fd18jcToYI1OVLhQmRgM1shYNoszAnRjVSGFNfE6M");
        System.out.println("verify result: " + success);
    }

    private static boolean verify(String token) throws Exception {
        RequestBody formBody = new FormBody.Builder().add("secret", RECAPTCHA_SECRET_KEY).add("response", token)
            .build();
        Response response = post(RECAPTCHA_VERIFY_URL, formBody);
        String resp = response.body().string();
        return new JSONObject(resp).getBoolean("success");
    }

    private Response post(String url, RequestBody body) throws IOException {
        Request request = new Request.Builder().url(url).post(body).build();
        Response response = httpClient.newCall(request).execute();
        if (!response.isSuccessful()) {
            throw new IOException("request error: " + response);
        }
        return response;
    }
}


Use this package as a library

Depend on it

Run this command:

With Flutter:

 $ flutter pub add g_captcha_updated

This will add a line like this to your package's pubspec.yaml (and run an implicit flutter pub get):

dependencies:
  g_captcha_updated: ^1.0.1

Alternatively, your editor might support flutter pub get. Check the docs for your editor to learn more.

Import it

Now in your Dart code, you can use:

import 'package:g_captcha_updated/g_captcha.dart'; 

example/lib/main.dart

import 'package:flutter/material.dart';
import 'package:g_captcha/g_captcha.dart';
import 'package:fluttertoast/fluttertoast.dart';

// TODO
const String CAPTCHA_SITE_KEY = "6LcKqfQUAAAAAC1I5Bjg0WI9RMc6wK9gjwG29Nr3";

void main() {
  runApp(MyApp());
}

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
          appBar: AppBar(
            title: const Text('Plugin example app'),
          ),
          body: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: <Widget>[
              RaisedButton(onPressed: _openReCaptcha, child: Text('reCaptcha')),
            ],
          )),
    );
  }

  _openReCaptcha() async {
    String tokenResult = await GCaptcha.reCaptcha(CAPTCHA_SITE_KEY);
    print('tokenResult: $tokenResult');
    Fluttertoast.showToast(msg: tokenResult, timeInSecForIosWeb: 4);

    // setState
  }
} 

Download Details:

Author: nnnggel

Source Code: https://github.com/nnnggel/gCaptcha

#flutter #recaptcha 

A Flutter Plugin for ReCAPTCHA V2 - Android

Flutter Firebase Recaptcha Widget

Flutter Firebase Recaptcha Widget

flutter_firebase_recaptcha provides a set of building blocks for creating a reCAPTCHA verifier and using that with your Firebase Phone authentication workflow.

Firebase phone authentication is not possible out of the box using the Firebase JS SDK. This because an Application Verifier object (reCAPTCHA) is needed as an additional security measure to verify that the user is real and not a bot.

Installation

Add the package to your pubspec.yaml file

flutter pub add flutter_firebase_recaptcha

Basic usage

To get started, read the official Firebase phone-auth guide and ignore all steps that cover the reCAPTCHA configuration.

Instead of using the standard firebase.auth.RecaptchaVerifier class, we will be using our own verifier which creates a reCAPTCHA widget inside a web-browser.

Add the FirebaseRecaptchaVerifierModal widget to your App and pass in the Firebase web configuration using the firebaseConfig prop.

🚨 Optionally you can turn on experimental invisible reCAPTCHA using attemptInvisibleVerification prop. This feature is experimental and attempts to complete the verification process without showing any UI to the user. When invisible verification fails, the full reCATPCHA challenge UI is shown.

const firebaseConfig = {
    'apiKey': 'XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX',
    'authDomain': 'XXXXXXXXXXXXXXXXXXXXXXXXXXX',
    'projectId': 'XXXXXXXXXXXXXXXXXXXXXXXXXXXX',
    'storageBucket': 'XXXXXXXXXXXXXXXXXXXXXXXX',
    'messagingSenderId': 'XXXXXXXXXXXXXXXXXXXX',
    'appId': 'XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX',
};

FirebaseRecaptchaVerifierModal(
      firebaseConfig: firebaseConfig,
      onVerify: (token) => print('token: ' + token),
      onLoad: () => print('onLoad'),
      onError: () => print('onError'),
      onFullChallenge: () => print('onFullChallenge'),
      attemptInvisibleVerification: true,
    );

API

import 'package:flutter_firebase_recaptcha/flutter_firebase_recaptcha.dart';

FirebaseRecaptchaVerifierModal

Modal screen that is automatically shown and displays a reCAPTCHA widget.

Props

  • firebaseConfig (IFirebaseOptions) -- Firebase web configuration.
  • firebaseVersion (string) -- Optional version of the Firebase JavaScript SDK to load in the web-view. You can use this to load a custom or newer version. For example version="7.9.0".
  • attemptInvisibleVerification (boolean) -- Attempts to verify without showing the reCAPTCHA workflow. The default is false. (Google terms apply - use FirebaseRecaptchaBanner to show te Google terms & policy).
  • appVerificationDisabledForTesting (boolean) -- When set, disables app verification for the purpose of testing phone authentication. When this prop is true, a mock reCAPTCHA is rendered. This is useful for manual testing during development or for automated integration tests. See Firebase Phone Auth for more info.
  • languageCode (string) -- Language to display the reCAPTCHA challenge in. For a list of possible languages, see reCAPTCHA Language Codes.

FirebaseRecaptcha

The reCAPTCHA v3 widget displayed inside a web-view.

Props

  • firebaseConfig (Map<String, String>) -- Firebase web configuration.
  • firebaseVersion (string) -- Optional version of the Firebase JavaScript SDK to load in the web-view. You can use this to load a custom or newer version. For example firebaseVersion: '7.9.0',.
  • appVerificationDisabledForTesting (boolean) -- When set, disables app verification for the purpose of testing phone authentication. When this prop is true, a mock reCAPTCHA is rendered. This is useful for manual testing during development or for automated integration tests. See Firebase Phone Auth for more info.
  • languageCode (string) -- Language to display the reCAPTCHA challenge in. For a list of possible languages, see reCAPTCHA Language Codes.
  • onLoad (function) -- A callback that is invoked when the widget has been loaded.
  • onError (function) -- A callback that is invoked when the widget failed to load.
  • onVerify (function) -- A callback that is invoked when reCAPTCHA has verified that the user is not a bot. The callback is provided with the reCAPTCHA token string. Example onVerify: (token) => setState(() { _token = token; }),.
  • onFullChallenge (function) -- A callback that is invoked when reCAPTCHA shows the full challenge experience.
  • invisible (boolean) -- When true renders an invisible reCAPTCHA widget. The widget can then be triggered to verify invisibly by setting the verify prop to true.

Use this package as a library

Depend on it

Run this command:

With Flutter:

 $ flutter pub add flutter_firebase_recaptcha

This will add a line like this to your package's pubspec.yaml (and run an implicit flutter pub get):

dependencies:
  flutter_firebase_recaptcha: ^1.0.2

Alternatively, your editor might support flutter pub get. Check the docs for your editor to learn more.

Import it

Now in your Dart code, you can use:

import 'package:flutter_firebase_recaptcha/flutter_firebase_recaptcha.dart'; 

Download Details:

Author: psokolnikov

Source Code: https://github.com/psokolnikov/flutter_firebase_recaptcha

#flutter #recaptcha #firebase 

Flutter Firebase Recaptcha Widget
Thierry  Perret

Thierry Perret

1658950200

Empêchez Le Spam Et Détectez Les Bots Avec ReCAPTCHA

Récemment, il y a eu différentes implémentations pour empêcher le spam de différents services Web. L'une de ces implémentations utilise une fonctionnalité reCAPTCHA. Un reCAPTCHA est un test automatisé pour déterminer si l'utilisateur d'une application Web est un humain ou un bot. De cette façon, les privilèges ou l'accès ne sont accordés qu'aux utilisateurs humains, réduisant ainsi l'utilisation indésirable.

Dans ce didacticiel, les lecteurs apprendront ce que sont les reCAPTCHA et comment les implémenter dans une application Web.

Qu'est-ce que reCAPTCHA ?

Un reCAPTCHA est un CAPTCHA(Completely Automated Public Turing Test to Tell Computers and Humans Apart) système gratuit, facile à ajouter et une fonctionnalité de sécurité de site avancée appartenant à Google. Il a été développé pour gérer l'utilisation indésirable du site par les bots et empêcher le spam en mettant en œuvre diverses techniques pour identifier si un utilisateur de page Web est un humain ou un bot. Ces techniques consistent à présenter à l'utilisateur un test facile à résoudre pour les humains mais difficile à vérifier pour les bots ou les logiciels malveillants. La mise en œuvre de cette fonctionnalité de sécurité dans une page Web empêche les abus du site tout en permettant aux utilisateurs humains d'utiliser le site comme ils le devraient, c'est-à-dire que les utilisateurs légitimes peuvent poursuivre leurs activités normales d'accès et d'utilisation du site Web après avoir réussi le test reCAPTCHA. Le GIF ci-dessous contient des exemples de types reCAPTCHA que vous avez pu rencontrer sur une page Web :

1

La mise en œuvre de la fonctionnalité de sécurité reCAPTCHA dans un site Web offre les avantages suivants :

  • Empêche les logiciels automatisés d'abuser de certaines activités. Des exemples de tels sont les sondages, les commentaires de nouvelles, ou une enquête. La technologie reCAPTCHA empêchera les actions répétées des bots car un nouveau test reCAPTCHA sera nécessaire pour une nouvelle session utilisateur.
  • Les reCAPTCHA servent de mesure de restriction du spam.
  • Avoir une fonctionnalité reCAPTCHA aide à distinguer le trafic faux et réel généré sur une page Web.
  • Les reCAPTCHA empêchent les utilisateurs d'exécuter des opérations de force brute sur un site Web car le logiciel ne pourrait pas réussir le test de sécurité à chaque fois qu'il s'exécute.

Dans l'ensemble, les reCAPTCHA sont sécurisés, car ils n'ont pas de modèles prévisibles dans le test sélectionné présenté à l'utilisateur.

Différents types et modes de fonctionnement de reCAPTCHA

Au fil du temps, il y a eu des évolutions dans les versions de reCAPTCHA, chaque nouvelle version ajoutant une nouvelle technique de test utilisateur. Jusqu'à présent, Google a publié trois versions de reCAPTCHA ; v1, v2 et v3.

  • La v1 de reCAPTCHA a été conçue pour afficher une image et un champ de texte. Les utilisateurs devaient entrer ce qu'ils pouvaient voir dans l'image. Cette image contient généralement un ensemble de caractères, ces caractères étant déformés, étirés ou légèrement moins visibles. La manipulation de l'aspect visuel du texte a pour but d'empêcher le logiciel d'identifier le texte écrit dans l'image. Si le texte saisi dans le champ de texte correspond aux caractères de l'image, le test est réussi. Sinon, l'utilisateur devra passer un nouveau test.2
  • La deuxième version de reCAPTCHA v2 est encore utilisée aujourd'hui. V2 avait deux types différents : un test où un utilisateur doit cocher une case pour confirmer un texte disant "Je ne suis pas un robot", et le second type étant un défi de sécurité où l'utilisateur se voit présenter différents ensembles d'images et est nécessaire pour sélectionner des images qui correspondent à des objets spécifiques. Ces objets peuvent être des bateaux, des bouches d'incendie, des lampadaires, des avions, etc. L'utilisateur est vérifié lors de la sélection de toutes les images correspondantes, et le test est considéré comme réussi.

3b

3

Pour cette version, reCAPTCHA surveille le comportement du site de l'utilisateur. Si l'utilisateur utilise le site de manière suspecte, l'image reCAPTCHA lui est présentée ; sinon, ils sont présentés avec la variante de case à cocher.

  • v3 est une forme invisible de reCAPTCHA. Cette version de reCAPTCHA surveillera le trafic d'un site pour déterminer si les actions d'un utilisateur sont suspectes. Si les actions de l'utilisateur sont jugées non suspectes, aucun défi n'est affiché et vice-versa.

Intégration de reCAPTCHA avec Next.js

Pour démontrer la fonctionnalité reCAPTCHA, nous aurons un formulaire qui utilise un CAPTCHA pour permettre uniquement aux utilisateurs légitimes de soumettre des données. Pour suivre ce didacticiel, clonez le code du formulaire de démarrage à partir du référentiel GitHub et exécutez npm install-le dans le répertoire du projet pour installer toutes les dépendances nécessaires.

Nous aurons besoin de deux choses : la première, une clé API pour accéder à reCAPTCHA, et la seconde, la react-google-recaptchadépendance. Pour obtenir votre clé d'accès, naviguez dans votre navigateur jusqu'ici :

4

Sur cette page, nous devons entrer le titre de notre clé dans le Labelchamp. Pour le type reCAPTCHA, nous utiliserons la variante v2 "Je ne suis pas un robot". Dans le champ Domain, nous entrerons « localhost » et enfin cliquerons sur le bouton « Submit » pour générer la clé. Copiez les clés générées car nous les utiliserons dans notre application. Ensuite, installez la react-google-recaptchadépendance avec la commande suivante dans la CLI :

npm install --save react-google-recaptcha

Une fois l'installation terminée, nous pouvons importer et utiliser ce package dans Index.js:

import ReCAPTCHA from "react-google-recaptcha";

Ensuite, ajoutez le ReCAPTCHAcomposant dans le formulaire juste en dessous du bouton de connexion :

//.... 
<input
    type="text"
    placeholder="Doe"
    value={value}
    onChange={(e) => {
      setValue(e.target.value);
    }}
  />
</span>
<button className="submit">Log in</button>
<ReCAPTCHA sitekey="your app site key"/>

Le ReCAPTCHAcomposant nécessite une sitekeypropriété pour pouvoir l'utiliser. Maintenant, si nous exécutons l'application avec la npm run devcommande, nous obtiendrons un résultat similaire à l'image :

5

Le ReCAPTCHAcomposant nous permet de personnaliser le comportement et l'apparence du ReCAPTCHA en utilisant différentes propriétés. Certaines de ces propriétés comprennent :

  • Thème : Cela prend une valeur lightou dark. Par défaut, le reCAPTCHA est affiché en utilisant un thème clair, mais l'ajout d'une themepropriété avec une valeur de darkrendra un reCAPTCHA sombre à la place.
  • onChange : cela exécute une fonction de rappel lorsque l'utilisateur complète le reCAPTCHA.
  • Taille : cette propriété prend l'une des valeurs suivantes : compact, normalou invisible. Il spécifie la taille du reCAPTCHA ou détermine si le reCAPTCHA serait invincible.
  • Type : Ceci spécifie si le reCAPTCHA utilisera une image ou un son.

Relecture de session open source

OpenReplay est une suite de relecture de session open source qui vous permet de voir ce que font les utilisateurs sur votre application Web, vous aidant à résoudre les problèmes plus rapidement. OpenReplay est auto-hébergé pour un contrôle total sur vos données.

replayer.png

Commencez à profiter de votre expérience de débogage - commencez à utiliser OpenReplay gratuitement .

Traitement de l'envoi du formulaire

Pour le formulaire, nous voulons que l'utilisateur puisse soumettre uniquement lorsqu'il a rempli le reCAPTCHA. Chaque fois qu'un utilisateur complète un reCAPTCHA, un jeton est généré. Ce jeton est valable deux minutes et ne peut être utilisé qu'une seule fois. Nous accéderions à ce jeton dans notre application pour permettre à l'utilisateur de soumettre le formulaire après avoir rempli le reCAPTCHA. Pour capturer ce jeton, nous allons utiliser le hook useRef de React :

//first we add an import for useRef
import { React, useState, useRef } from "react";

Après cela, nous allons créer une variable où nous stockerons la valeur du jeton, en utilisant useRef:

const getCaptchaRef = useRef(null);

Ajoutez ensuite cette variable à la refpropriété du reCAPTCHAcomposant :

<ReCAPTCHA
  sitekey= "your site key here"
  ref={getCaptchaRef}
/>

La refpropriété renvoie différentes fonctions d'assistance. Certaines de ces fonctions et leurs objectifs correspondants incluent :

  • excecuteAsync(): Cette fonction envoie une requête qui renvoie le jeton ou une erreur (le cas échéant). Cependant, cette fonction ne s'applique qu'aux reCAPTCHA invisibles. Pour reCAPTCHA visible, la getValue()fonction est utilisée pour renvoyer le jeton.
  • getValue(): Comme son nom l'indique, cette fonction renvoie la valeur du champ reCAPTCHA.
  • reset(): Ceci est utilisé pour réinitialiser le reCAPTCHA et est applicable en cas de reCAPTCHAvérifications ultérieures.

Nous pouvons utiliser le refpour obtenir notre jeton comme indiqué ci-dessous :

<ReCAPTCHA
  sitekey= "your site key"
  theme="dark"
  ref={getCaptchaRef}
  onChange={() => {
    reCaptchaValue();
  }}
/>

Ici, nous avons ajouté une fonction dans la onChangepropriété de notre composant. Nous allons utiliser cette fonction pour définir la valeur de notre jeton :

const reCaptchaValue = async () => {
  const token = getCaptchaRef.current.getValue();
};

Ensuite, nous devons vérifier le jeton généré avant d'activer la fonctionnalité de soumission. Pour ce faire, nous devons faire une POSTdemande d' https://www.google.com/recaptcha/api/siteverifyutilisation de Node.js sur le backend. Créez un nouveau fichier, Server.js, dans le répertoire racine de votre application. Pour le serveur, nous aurons besoin de deux dépendances ; Axiospour traiter notre POSTdemande et Expressgérer les routes du serveur. Nous pouvons installer ces dépendances avec les commandes CLI suivantes :

npm i express axios cors

Ensuite, créez un fichier Server.jsdans le répertoire racine du dossier du projet. Dans Server.js, saisissez le code suivant :

const express = require("express");
const axios = require("axios");
const cors = require("cors");

const router = express.Router();
const app = express();
const port = 5000;

app.use(cors());
app.use(express.json());
app.use(express.urlencoded({ extended: true }));
app.use("/", router);

router.post("/status", async (req, res) => {
  const { token } = req.body; // get token from the request we will create in index.js
  const secret = "SITE SECRET";
  await axios.post(
    `https://www.google.com/recaptcha/api/siteverify`, // URL
    {
        secret: secret,
        response: token,
    }, // URL parameters
  );
  //return response based on the status of the post request
  if (res.status(200)) {
    res.send(true);
  } else {
    res.send(false);
  }
});
app.listen(port, () => {
  console.log(`server is listening on ${port}`);
});

Dans le code ci-dessus, nous avons créé un serveur qui s'exécute sur le port 5000 et écoute route /status. À l'aide de ce serveur, nous ferons une demande de publication pour déterminer si le jeton est valide, puis renverrons une réponse. Si le jeton est valide, le serveur renverra une réponse appropriée. Sinon, il renverrait une réponse false. Ouvrez le terminal et démarrez le serveur avec node Server.js.

Avec cela en place, nous lancerons notre demande index.jsdans notre reCaptchaValuefonction, comme indiqué ci-dessous :

const [valid, setValid] = useState(false)
const reCaptchaValue = async () => {
  const token = getCaptchaRef.current.getValue();
  console.log(token);
  await axios
    .post("http://localhost:5000/status", {
      response: token,
    })
    .then((res) => {
      console.log(res);
      setValid(res.data)
    })
    .catch((err) => {
      console.log(err);
    });
};

Dans le code, nous avons fait une demande de publication à l'URL de notre serveur avec le jeton renvoyé par le reCAPTCHA. Ensuite, nous définissons la valeur d'un état validégale à celle res.datarenvoyée par le serveur, soit "true" ou "false".

6

Enfin, nous ajouterons un onClickhandler à notre bouton pour effectuer différentes opérations en fonction de la valeur de valid:

<button className="submit" onClick={()=>{handleSubmit()}}>Log in</button>

Et dans la handleSubmit()fonction :

const handleSubmit = ()=>{
 if(valid){
 alert("welcome user " + value + " " + value2)
 }
 else{
   alert("please verify you are not a robot")
 }
}

Si nous exécutons notre application maintenant, nous obtenons le résultat suivant :

sept

Si l'utilisateur échoue au reCAPTCHA, il demande simplement à l'utilisateur de réessayer jusqu'à ce que le test réussisse.

8

Conclusion

Ce didacticiel nous a enseigné reCAPTCHA et comment nous pouvons intégrer cette fonctionnalité de sécurité dans une application Next.

Source : https://blog.openreplay.com/prevent-spam-and-detect-bots-with-recaptcha

#recaptcha 

Empêchez Le Spam Et Détectez Les Bots Avec ReCAPTCHA
Mélanie  Faria

Mélanie Faria

1658948400

Evite Spam E Detecte Bots Com O ReCAPTCHA

Recentemente, houve diferentes implementações para evitar spam de diferentes serviços da web. Uma dessas implementações está usando um recurso reCAPTCHA. Um reCAPTCHA é um teste automatizado para determinar se o usuário de um aplicativo da Web é um humano ou um bot. Dessa forma, privilégios ou acessos são concedidos apenas a usuários humanos, reduzindo assim o uso indesejado.

Neste tutorial, os leitores aprenderão o que são reCAPTCHAs e como implementá-los em uma aplicação web.

O que é o reCAPTCHA?

Um reCAPTCHA é um CAPTCHA(Teste de Turing Público Completamente Automatizado para Separar Computadores e Humanos) que é gratuito, fácil de adicionar e um recurso avançado de segurança do site de propriedade do Google. Ele foi desenvolvido para gerenciar o uso indesejado de sites por bots e evitar spam, implementando várias técnicas para identificar se um usuário de página da Web é um humano ou um bot. Essas técnicas envolvem apresentar ao usuário um teste que é fácil para humanos resolverem, mas difícil para bots ou software malicioso verificar. A implementação desse recurso de segurança em uma página da Web evita o abuso do site enquanto ainda permite que usuários humanos usem o site como deveriam, ou seja, usuários legítimos podem realizar suas atividades normais de acesso e utilização do site após passar no teste reCAPTCHA. O GIF abaixo contém exemplos de tipos de reCAPTCHA que você pode ter encontrado em uma página da web:

primeiro

A implementação do recurso de segurança reCAPTCHA em um site fornecerá os seguintes benefícios:

  • Impede que softwares automatizados abusem de certas atividades. Exemplos disso são enquetes, comentários de notícias ou uma pesquisa. A tecnologia reCAPTCHA impedirá ações repetidas de bots, pois um novo teste reCAPTCHA será necessário para uma nova sessão de usuário.
  • Os reCAPTCHAs servem como uma medida restritiva de spam.
  • Ter um recurso reCAPTCHA ajuda a distinguir tráfego falso e real gerado em uma página da web.
  • Os reCAPTCHAs impedem que os usuários executem operações de força bruta em um site, pois o software não conseguiria passar no teste de segurança toda vez que fosse executado.

No geral, os reCAPTCHAs são seguros, pois não possuem padrões previsíveis no teste selecionado apresentado ao usuário.

Diferentes tipos e modos de operação do reCAPTCHA

Ao longo do tempo, houve desenvolvimentos nas versões do reCAPTCHA, com cada nova versão adicionando uma nova técnica de teste do usuário. Até agora, o Google lançou três versões do reCAPTCHA; v1, v2 e v3.

  • v1 do reCAPTCHA foi projetado para exibir uma imagem e um campo de texto. Esperava-se que os usuários digitassem o que podiam ver na imagem. Essa imagem geralmente contém um conjunto de caracteres, com esses caracteres distorcidos, esticados ou ligeiramente menos visíveis. A razão para manipular o aspecto visual do texto é tornar impossível para o software identificar o texto escrito na imagem. Se o texto inserido no campo de texto corresponder aos caracteres da imagem, o teste será bem-sucedido. Caso contrário, o usuário será obrigado a fazer um novo teste.2
  • A segunda versão do reCAPTCHA v2 ainda é usada hoje. A V2 tinha dois tipos diferentes: um teste em que um usuário tinha que marcar uma caixa de seleção para confirmar um texto dizendo “Eu não sou um robô”, e o segundo tipo sendo um desafio de segurança onde o usuário é apresentado a diferentes conjuntos de imagens e é necessário para selecionar imagens que correspondem a objetos específicos. Esses objetos podem ser barcos, hidrantes, postes de luz, aviões, etc. O usuário é verificado ao selecionar todas as imagens correspondentes, e o teste é considerado bem sucedido.

3b

3

Para esta versão, o reCAPTCHA monitora o comportamento do site do usuário. Caso o usuário utilize o site de forma suspeita, é apresentada a imagem reCAPTCHA; caso contrário, eles são apresentados com a variante checkbox.

  • v3 é uma forma invisível de reCAPTCHA. Esta versão do reCAPTCHA monitorará o tráfego de um site para determinar se as ações de um usuário são suspeitas. Se as ações do usuário forem consideradas não suspeitas, nenhum desafio será exibido e vice-versa.

Integrando o reCAPTCHA com Next.js

Para demonstrar o recurso reCAPTCHA, teremos um formulário que utiliza um CAPTCHA para permitir que apenas usuários legítimos enviem dados. Para seguir este tutorial, clone o código do formulário inicial do repositório GitHub e execute npm installno diretório do projeto para instalar todas as dependências necessárias.

Precisaremos de duas coisas: a primeira, uma chave de API para acessar o reCAPTCHA e a segunda, a react-google-recaptchadependência. Para obter sua chave de acesso, navegue em seu navegador até aqui :

4

Nesta página, somos obrigados a inserir o título de nossa chave no Labelcampo. Para o tipo reCAPTCHA, usaremos a variante v2 “Não sou um robô”. No campo Domínio, digitaremos “localhost” e, por fim, clicaremos no botão “Enviar” para gerar a chave. Copie as chaves geradas, pois as usaremos em nossa aplicação. Em seguida, instale a react-google-recaptchadependência com o seguinte comando na CLI:

npm install --save react-google-recaptcha

Após a conclusão da instalação, podemos importar e usar este pacote em Index.js:

import ReCAPTCHA from "react-google-recaptcha";

Em seguida, adicione o ReCAPTCHAcomponente no formulário logo abaixo do botão de login:

//.... 
<input
    type="text"
    placeholder="Doe"
    value={value}
    onChange={(e) => {
      setValue(e.target.value);
    }}
  />
</span>
<button className="submit">Log in</button>
<ReCAPTCHA sitekey="your app site key"/>

O ReCAPTCHAcomponente requer uma sitekeypropriedade para poder fazer uso dele. Agora, se executarmos a aplicação com o npm run devcomando, obteremos um resultado semelhante ao da imagem:

5

O ReCAPTCHAcomponente nos permite personalizar o comportamento e a aparência do ReCAPTCHA usando diferentes propriedades. Algumas dessas propriedades incluem:

  • Tema: Isso leva um valor lightou dark. Por padrão, o reCAPTCHA é exibido usando um tema claro, mas adicionar uma themepropriedade com um valor de darkrenderizará um reCAPTCHA de aparência escura.
  • onChange: executa uma função de retorno de chamada quando o usuário conclui o reCAPTCHA.
  • Tamanho: esta propriedade aceita qualquer um dos seguintes valores: compact, normalou invisible. Ele especifica o tamanho do reCAPTCHA ou determina se o reCAPTCHA seria invencível.
  • Tipo: especifica se o reCAPTCHA usaria uma imagem ou áudio.

Reprodução de sessão de código aberto

O OpenReplay é um conjunto de reprodução de sessão de código aberto que permite ver o que os usuários fazem em seu aplicativo da Web, ajudando você a solucionar problemas mais rapidamente. O OpenReplay é auto-hospedado para controle total sobre seus dados.

replayer.png

Comece a aproveitar sua experiência de depuração - comece a usar o OpenReplay gratuitamente .

Tratamento de envio de formulário

Para o formulário, queremos que o usuário possa enviar apenas quando tiver concluído o reCAPTCHA. Sempre que um usuário conclui um reCAPTCHA, um token é gerado. Este token é válido por dois minutos e só pode ser usado uma vez. Acessamos esse token em nosso aplicativo para permitir que o usuário envie o formulário após concluir o reCAPTCHA. Para capturar este token, usaremos o hook useRef do React:

//first we add an import for useRef
import { React, useState, useRef } from "react";

Após isso, criaremos uma variável onde armazenaremos o valor do token, usando useRef:

const getCaptchaRef = useRef(null);

Em seguida, adicione esta variável à refpropriedade do reCAPTCHAcomponente:

<ReCAPTCHA
  sitekey= "your site key here"
  ref={getCaptchaRef}
/>

A refpropriedade retorna diferentes funções auxiliares. Algumas dessas funções e seus propósitos correspondentes incluem:

  • excecuteAsync(): Esta função envia uma solicitação que retorna o token ou um erro (se ocorrer). No entanto, essa função é aplicável apenas a reCAPTCHAs invisíveis. Para reCAPTCHA visível, a getValue()função é usada para retornar o token.
  • getValue(): como o nome indica, esta função retorna o valor do campo reCAPTCHA.
  • reset(): Isso é usado para redefinir o reCAPTCHA e é aplicável no caso de verificações subsequentes reCAPTCHA.

Podemos usar o refpara obter nosso token, conforme mostrado abaixo:

<ReCAPTCHA
  sitekey= "your site key"
  theme="dark"
  ref={getCaptchaRef}
  onChange={() => {
    reCaptchaValue();
  }}
/>

Aqui, adicionamos uma função na propriedade do nosso componente onChange. Usaremos esta função para definir o valor do nosso token:

const reCaptchaValue = async () => {
  const token = getCaptchaRef.current.getValue();
};

Em seguida, devemos verificar o token gerado antes de habilitar o recurso de envio. Para fazer isso, precisamos fazer uma POSTsolicitação para https://www.google.com/recaptcha/api/siteverifyusar o Node.js no back-end. Crie um novo arquivo, Server.js, no diretório raiz do seu aplicativo. Para o servidor, precisaremos de duas dependências; Axiospara lidar com nossa POSTsolicitação e Expressgerenciar as rotas do servidor. Podemos instalar essas dependências com os seguintes comandos da CLI:

npm i express axios cors

Em seguida, crie um arquivo Server.jsno diretório raiz da pasta do projeto. Em Server.js, digite o seguinte código:

const express = require("express");
const axios = require("axios");
const cors = require("cors");

const router = express.Router();
const app = express();
const port = 5000;

app.use(cors());
app.use(express.json());
app.use(express.urlencoded({ extended: true }));
app.use("/", router);

router.post("/status", async (req, res) => {
  const { token } = req.body; // get token from the request we will create in index.js
  const secret = "SITE SECRET";
  await axios.post(
    `https://www.google.com/recaptcha/api/siteverify`, // URL
    {
        secret: secret,
        response: token,
    }, // URL parameters
  );
  //return response based on the status of the post request
  if (res.status(200)) {
    res.send(true);
  } else {
    res.send(false);
  }
});
app.listen(port, () => {
  console.log(`server is listening on ${port}`);
});

No código acima, criamos um servidor que roda na porta 5000 e escuta route /status. Usando este servidor, faremos uma solicitação de postagem para determinar se o token é válido e retornaremos uma resposta. Se o token for válido, o servidor retornará uma resposta adequada. Caso contrário, ele retornaria uma resposta false. Abra o terminal e inicie o servidor com node Server.js.

Com isso em vigor, iniciaremos nossa solicitação index.jsem nossa reCaptchaValuefunção, conforme mostrado abaixo:

const [valid, setValid] = useState(false)
const reCaptchaValue = async () => {
  const token = getCaptchaRef.current.getValue();
  console.log(token);
  await axios
    .post("http://localhost:5000/status", {
      response: token,
    })
    .then((res) => {
      console.log(res);
      setValid(res.data)
    })
    .catch((err) => {
      console.log(err);
    });
};

No código, fizemos uma solicitação de postagem para a URL do nosso servidor com o token retornado pelo reCAPTCHA. Em seguida, definimos o valor de um estado validigual ao res.dataretornado do servidor, "true" ou "false".

6

Por fim, adicionaremos um onClickmanipulador ao nosso botão para realizar diferentes operações com base no valor de valid:

<button className="submit" onClick={()=>{handleSubmit()}}>Log in</button>

E na handleSubmit()função:

const handleSubmit = ()=>{
 if(valid){
 alert("welcome user " + value + " " + value2)
 }
 else{
   alert("please verify you are not a robot")
 }
}

Se executarmos nosso aplicativo agora, obteremos o seguinte resultado:

7

Se o usuário falhar no reCAPTCHA, ele simplesmente solicitará que o usuário tente novamente até que o teste seja bem-sucedido.

8

Conclusão

Este tutorial nos ensinou sobre o reCAPTCHA e como podemos integrar esse recurso de segurança em um aplicativo Next.

Fonte: https://blog.openreplay.com/prevent-spam-and-detect-bots-with-recaptcha

#recaptcha 

Evite Spam E Detecte Bots Com O ReCAPTCHA
顾 静

顾 静

1658946780

使用 ReCAPTCHA 防止垃圾邮件和检测机器人

最近,已经有不同的实现来防止不同 Web 服务的垃圾邮件。其中一种实现是使用 reCAPTCHA 功能。reCAPTCHA 是一种自动化测试,用于确定 Web 应用程序的用户是人类还是机器人。这样,特权或访问权只授予人类用户,从而减少不必要的使用。

在本教程中,读者将了解什么是 reCAPTCHA 以及如何在 Web 应用程序中实现它们。

什么是验证码?

reCAPTCHA 是一种验证码(完全自动化的公共图灵测试以区分计算机和人类)系统免费,易于添加,并且是 Google 拥有的高级站点安全功能。它的开发是为了管理来自机器人的不需要的网站使用,并通过实施各种技术来识别网页用户是人类还是机器人来防止垃圾邮件。这些技术涉及向用户提供人类容易解决但机器人或恶意软件难以确定的测试。在网页中实施此安全功能可防止网站滥用,同时仍允许人类用户按应有的方式使用该网站,即合法用户在通过 reCAPTCHA 测试后可以进行正常的访问和使用网站的活动。下面的 GIF 包含您可能在网页上遇到的 reCAPTCHA 类型示例:

第一的

在网站中实施 reCAPTCHA 安全功能将提供以下好处:

  • 防止自动化软件滥用某些活动。例如民意调查、新闻评论或调查。reCAPTCHA 技术将防止机器人重复操作,因为新用户会话需要进行新的 reCAPTCHA 测试。
  • reCAPTCHA 是一种垃圾邮件限制措施。
  • 拥有 reCAPTCHA 功能有助于区分网页上生成的虚假和真实流量。
  • reCAPTCHA 阻止用户在网站上运行暴力操作,因为软件每次运行时都无法通过安全测试。

总体而言,reCAPTCHA 是安全的,因为它们在呈现给用户的所选测试中没有可预测的模式。

不同的 reCAPTCHA 类型和操作模式

随着时间的推移,reCAPTCHA 的版本不断发展,每个新版本都添加了新的用户测试技术。到目前为止,谷歌已经发布了三个版本的 reCAPTCHA;v1、v2 和 v3。

  • reCAPTCHA v1 旨在显示图像和文本字段。用户需要输入他们在图像中可以看到的内容。此图像通常包含一组字符,这些字符要么扭曲、拉伸,要么稍微不那么明显。操纵文本的视觉方面的原因是使软件无法识别图像中写入的文本。如果在文本字段中输入的文本与图像中的字符匹配,则测试将成功。否则,用户将需要进行新的测试。2
  • reCAPTCHA v2 的第二个版本至今仍在使用。V2 有两种不同的类型:一种是用户必须选中复选框以确认“我不是机器人”的文本,第二种是安全挑战,向用户呈现不同的图像集,并且是需要选择与特定对象相对应的图像。这些对象可以是船、消火栓、路灯、飞机等。用户在选择所有对应的图像后进行验证,则认为测试成功。

3b

3

对于这个版本,reCAPTCHA 会监控用户的网站行为。如果用户可疑地使用该网站,他们会看到图像 reCAPTCHA;否则,它们会显示为复选框变体。

  • v3 是一种隐形形式的 reCAPTCHA。此版本的 reCAPTCHA 将监控网站的流量以确定用户的行为是否可疑。如果确定用户的行为不可疑,则不显示挑战,反之亦然。

将 reCAPTCHA 与 Next.js 集成

为了演示 reCAPTCHA 功能,我们将有一个使用 CAPTCHA 的表单,仅允许合法用户提交数据。要遵循本教程,请从GitHub 存储库克隆起始表单代码并npm install在项目目录中运行以安装所有必要的依赖项。

我们需要两件事:第一,访问 reCAPTCHA 的 API 密钥,第二,react-google-recaptcha依赖项。要获取您的访问密钥,请在浏览器中导航至此处

4

在此页面上,我们需要在Label字段中输入密钥的标题。对于 reCAPTCHA 类型,我们将使用 v2“我不是机器人”变体。在域字段中,我们将输入“localhost”,最后单击“提交”按钮生成密钥。复制生成的密钥,因为我们将在我们的应用程序中使用它们。接下来,react-google-recaptcha在 CLI 中使用以下命令安装依赖项:

npm install --save react-google-recaptcha

安装完成后,我们可以在以下地方导入并使用这个包Index.js

import ReCAPTCHA from "react-google-recaptcha";

接下来,ReCAPTCHA在登录按钮正下方的表单中添加组件:

//.... 
<input
    type="text"
    placeholder="Doe"
    value={value}
    onChange={(e) => {
      setValue(e.target.value);
    }}
  />
</span>
<button className="submit">Log in</button>
<ReCAPTCHA sitekey="your app site key"/>

ReCAPTCHA组件需要一个sitekey属性才能使用它。现在,如果我们使用npm run dev命令运行应用程序,我们将得到类似于图像的结果:

5

ReCAPTCHA组件允许我们使用不同的属性自定义 ReCAPTCHA 的行为和外观。其中一些属性包括:

  • 主题:这需要一个lightdark值。默认情况下,reCAPTCHA 使用浅色主题显示,但添加theme值为 的属性dark将呈现暗色的 reCAPTCHA。
  • onChange:当用户完成 reCAPTCHA 时执行回调函数。
  • 大小:此属性采用以下任何值compactnormalinvisible。它指定 reCAPTCHA 的大小或确定 reCAPTCHA 是否无敌。
  • 类型:这指定 reCAPTCHA 是否将使用图像或音频。

开源会话重播

OpenReplay是一个开源的会话重播套件,可让您查看用户在您的 Web 应用程序上所做的事情,从而帮助您更快地解决问题。OpenReplay 是自托管的,可以完全控制您的数据。

重播.png

开始享受您的调试体验 -开始免费使用 OpenReplay

处理表单提交

对于表单,我们希望用户只有在完成 reCAPTCHA 后才能提交。每当用户完成 reCAPTCHA 时,就会生成一个令牌。此令牌有效期为两分钟,并且只能使用一次。我们将在我们的应用程序中访问此令牌,以允许用户在完成 reCAPTCHA 后提交表单。为了捕获这个令牌,我们将使用 React 中的 useRef 钩子:

//first we add an import for useRef
import { React, useState, useRef } from "react";

在此之后,我们将创建一个变量,我们将在其中存储令牌的值,使用useRef

const getCaptchaRef = useRef(null);

然后将此变量添加到组件的ref属性中reCAPTCHA

<ReCAPTCHA
  sitekey= "your site key here"
  ref={getCaptchaRef}
/>

ref属性返回不同的辅助函数。其中一些功能及其相应的用途包括:

  • excecuteAsync():此函数发送一个返回令牌或错误(如果发生)的请求。不过,此功能仅适用于不可见的 reCAPTCHA。对于可见的 reCAPTCHA,该getValue()函数用于返回令牌。
  • getValue():顾名思义,这个函数返回reCAPTCHA字段的值。
  • reset():这用于重置 reCAPTCHA,适用于后续reCAPTCHA检查。

我们可以使用ref来获取我们的令牌,如下所示:

<ReCAPTCHA
  sitekey= "your site key"
  theme="dark"
  ref={getCaptchaRef}
  onChange={() => {
    reCaptchaValue();
  }}
/>

在这里,我们在组件的onChange属性中添加了一个函数。我们将使用此函数来设置令牌的值:

const reCaptchaValue = async () => {
  const token = getCaptchaRef.current.getValue();
};

接下来,我们必须在启用提交功能之前验证生成的令牌。为此,我们需要在后端发出使用 Node.js的POST请求。在应用程序的根目录中https://www.google.com/recaptcha/api/siteverify创建一个新文件. Server.js对于服务器,我们将需要两个依赖项;Axios处理我们的POST请求并Express管理服务器路由。我们可以使用以下 CLI 命令安装这些依赖项:

npm i express axios cors

接下来,Server.js在项目文件夹的根目录中创建一个文件。在Server.js中,输入以下代码:

const express = require("express");
const axios = require("axios");
const cors = require("cors");

const router = express.Router();
const app = express();
const port = 5000;

app.use(cors());
app.use(express.json());
app.use(express.urlencoded({ extended: true }));
app.use("/", router);

router.post("/status", async (req, res) => {
  const { token } = req.body; // get token from the request we will create in index.js
  const secret = "SITE SECRET";
  await axios.post(
    `https://www.google.com/recaptcha/api/siteverify`, // URL
    {
        secret: secret,
        response: token,
    }, // URL parameters
  );
  //return response based on the status of the post request
  if (res.status(200)) {
    res.send(true);
  } else {
    res.send(false);
  }
});
app.listen(port, () => {
  console.log(`server is listening on ${port}`);
});

在上面的代码中,我们创建了一个在 5000 端口上运行并监听路由的服务器/status。使用这个服务器,我们将发出一个 post 请求来确定令牌是否有效,然后返回一个响应。如果令牌有效,服务器将返回正确的响应。否则它会返回一个 response false。打开终端并使用 启动服务器node Server.js

有了这个,我们将index.js在我们的reCaptchaValue函数中发起我们的请求,如下所示:

const [valid, setValid] = useState(false)
const reCaptchaValue = async () => {
  const token = getCaptchaRef.current.getValue();
  console.log(token);
  await axios
    .post("http://localhost:5000/status", {
      response: token,
    })
    .then((res) => {
      console.log(res);
      setValid(res.data)
    })
    .catch((err) => {
      console.log(err);
    });
};

在代码中,我们使用 reCAPTCHA 返回的令牌向我们的服务器 URL 发出了一个 post 请求。然后我们将状态的值设置为valid等于res.data从服务器返回的值,“真”或“假”。

6

最后,我们将向onClick按钮添加一个处理程序,以根据 的值执行不同的操作valid

<button className="submit" onClick={()=>{handleSubmit()}}>Log in</button>

handleSubmit()函数中:

const handleSubmit = ()=>{
 if(valid){
 alert("welcome user " + value + " " + value2)
 }
 else{
   alert("please verify you are not a robot")
 }
}

如果我们现在运行我们的应用程序,我们会得到以下结果:

7

如果用户未能通过 reCAPTCHA,它只会请求用户重试,直到测试成功。

8

结论

本教程向我们介绍了 reCAPTCHA 以及我们如何将此安全功能集成到 Next 应用程序中。

来源:https ://blog.openreplay.com/prevent-spam-and-detect-bots-with-recaptcha

#recaptcha 

使用 ReCAPTCHA 防止垃圾邮件和检测机器人
坂本  篤司

坂本 篤司

1658944800

ReCAPTCHAでスパムを防ぎ、ボットを検出する

最近、さまざまなWebサービスのスパムを防ぐためのさまざまな実装があります。これらの実装の1つは、reCAPTCHA機能を使用することです。reCAPTCHAは、Webアプリケーションのユーザーが人間であるかボットであるかを判断するための自動テストです。このように、特権またはアクセスは人間のユーザーにのみ付与されるため、不要な使用を減らすことができます。

このチュートリアルでは、読者はreCAPTCHAとは何か、およびそれらをWebアプリケーションに実装する方法を学習します。

reCAPTCHAとは何ですか?

reCAPTCHAはCAPTCHAです(コンピュータと人間を区別するための完全に自動化された公開チューリングテスト)無料で追加が簡単で、Googleが所有する高度なサイトセキュリティ機能を備えたシステム。これは、ボットからの不要なサイトの使用を管理し、Webページのユーザーが人間であるかボットであるかを識別するさまざまな手法を実装することでスパムを防ぐために開発されました。これらの手法には、人間が解決するのは簡単ですが、ボットや悪意のあるソフトウェアが確認するのが難しいテストをユーザーに提示することが含まれます。このセキュリティ機能をWebページに実装すると、サイトの悪用を防ぎながら、人間のユーザーがサイトを本来の方法で使用できるようになります。つまり、正当なユーザーは、reCAPTCHAテストに合格した後、Webサイトにアクセスして利用する通常のアクティビティを実行できます。以下のGIFには、Webページで遭遇した可能性のあるreCAPTCHAタイプの例が含まれています。

1

WebサイトにreCAPTCHAセキュリティ機能を実装すると、次の利点があります。

  • 自動化されたソフトウェアが特定のアクティビティを悪用するのを防ぎます。そのような例は、世論調査、ニュースコメント、または調査です。reCAPTCHAテクノロジーは、新しいユーザーセッションに新しいreCAPTCHAテストが必要になるため、ボットによる繰り返しのアクションを防ぎます。
  • reCAPTCHAは、スパムを制限する手段として機能します。
  • reCAPTCHA機能があると、Webページで生成された偽のトラフィックと実際のトラフィックを区別するのに役立ちます。
  • reCAPTCHAは、ソフトウェアが実行されるたびにセキュリティテストに合格できないため、ユーザーがWebサイトでブルートフォース操作を実行するのを防ぎます。

全体として、reCAPTCHAは、ユーザーに提示される選択されたテストで予測可能なパターンがないため、保護されています。

さまざまなreCAPTCHAタイプと操作モード

時間の経過とともに、reCAPTCHAのバージョンが開発され、新しいバージョンごとに新しいユーザーテスト手法が追加されています。これまでのところ、GoogleはreCAPTCHAの3つのバージョンをリリースしています。v1、v2、およびv3。

  • reCAPTCHAのv1は、画像とテキストフィールドを表示するように設計されています。ユーザーは、画像に表示される内容を入力する必要がありました。この画像には通常、文字のセットが含まれており、これらの文字は歪んでいるか、引き伸ばされているか、わずかに見えにくくなっています。テキストの視覚的側面を操作する理由は、ソフトウェアが画像に書かれたテキストを識別できないようにするためです。テキストフィールドに入力されたテキストが画像の文字と一致する場合、テストは成功します。それ以外の場合、ユーザーは新しいテストを受ける必要があります。2
  • reCAPTCHAv2の2番目のバージョンは現在も使用されています。V2には2つの異なるタイプがありました。ユーザーがチェックボックスをオンにして「私はロボットではありません」というテキストを確認する必要があるテストと、ユーザーに異なる画像のセットが表示されるセキュリティ上の課題です。特定のオブジェクトに対応する画像を選択するために必要です。これらのオブジェクトには、ボート、消火栓、街灯、飛行機などがあります。対応するすべての画像を選択すると、ユーザーが確認され、テストは成功したと見なされます。

3b

3

このバージョンでは、reCAPTCHAはユーザーのサイトの動作を監視します。ユーザーがサイトを不審に使用すると、画像reCAPTCHAが表示されます。それ以外の場合は、チェックボックスバリアントが表示されます。

  • v3はreCAPTCHAの目に見えない形式です。このバージョンのreCAPTCHAは、サイトのトラフィックを監視して、ユーザーのアクションが疑わしいかどうかを判断します。ユーザーのアクションが疑わしくないと判断された場合、チャレンジは表示されず、その逆も同様です。

reCAPTCHAとNext.jsの統合

reCAPTCHA機能を示すために、CAPTCHAを使用して、正当なユーザーのみがデータを送信できるようにするフォームを用意します。このチュートリアルに従うには、GitHubリポジトリnpm installからスターターフォームコードのクローンを作成し、プロジェクトディレクトリで実行して、必要なすべての依存関係をインストールします。

2つ必要です。1つはreCAPTCHAにアクセスするためのAPIキーで、もう1つはreact-google-recaptcha依存関係です。アクセスキーを取得するには、ブラウザで次の場所に移動します

4

このページでは、Labelフィールドにキーのタイトルを入力する必要があります。reCAPTCHAタイプの場合、v2の「私はロボットではありません」バリアントを使用します。[ドメイン]フィールドに「localhost」と入力し、最後に[送信]ボタンをクリックしてキーを生成します。アプリケーションで使用するため、生成されたキーをコピーします。react-google-recaptcha次に、 CLIで次のコマンドを使用して依存関係をインストールします。

npm install --save react-google-recaptcha

インストールが完了したら、このパッケージをインポートして次の場所で使用できますIndex.js

import ReCAPTCHA from "react-google-recaptcha";

ReCAPTCHA次に、ログインボタンのすぐ下のフォームにコンポーネントを追加します。

//.... 
<input
    type="text"
    placeholder="Doe"
    value={value}
    onChange={(e) => {
      setValue(e.target.value);
    }}
  />
</span>
<button className="submit">Log in</button>
<ReCAPTCHA sitekey="your app site key"/>

ReCAPTCHAコンポーネントは、それを利用できるようにするためにプロパティを必要としますsitekeynpm run devここで、コマンドを使用してアプリケーションを実行すると、次のような結果が得られます。

5

このReCAPTCHAコンポーネントを使用すると、さまざまなプロパティを使用してReCAPTCHAの動作と外観をカスタマイズできます。これらのプロパティの一部は次のとおりです。

  • テーマ:これはlightorのdark値を取ります。デフォルトでは、reCAPTCHAは明るいテーマを使用して表示されますthemeが、値がのプロパティを追加すると、dark代わりに暗く見えるreCAPTCHAがレンダリングされます。
  • onChange:これは、ユーザーがreCAPTCHAを完了すると、コールバック関数を実行します。
  • サイズ:このプロパティは、、、またはのいずれかの値をcompact取りnormalますinvisible。これは、reCAPTCHAのサイズを指定するか、reCAPTCHAが無敵であるかどうかを決定します。
  • タイプ:これは、reCAPTCHAが画像または音声のどちらを使用するかを指定します。

オープンソースセッションリプレイ

OpenReplayは、オープンソースのセッションリプレイスイートであり、ユーザーがWebアプリで何をしているかを確認できるため、問題のトラブルシューティングを迅速に行うことができます。OpenReplayは自己ホスト型であり、データを完全に制御できます。

replayer.png

デバッグ体験を楽しんでください-OpenReplayを無料で使い始めてください。

取り扱いフォーム送信

フォームの場合、ユーザーがreCAPTCHAを完了したときにのみ送信できるようにする必要があります。ユーザーがreCAPTCHAを完了するたびに、トークンが生成されます。このトークンは2分間有効で、1回のみ使用できます。アプリケーションでこのトークンにアクセスして、ユーザーがreCAPTCHAの完了後にフォームを送信できるようにします。このトークンをキャプチャするには、ReactのuseRefフックを使用します。

//first we add an import for useRef
import { React, useState, useRef } from "react";

この後、以下を使用して、トークンの値を格納する変数を作成しますuseRef

const getCaptchaRef = useRef(null);

次に、この変数をコンポーネントのrefプロパティに追加します。reCAPTCHA

<ReCAPTCHA
  sitekey= "your site key here"
  ref={getCaptchaRef}
/>

プロパティは、refさまざまなヘルパー関数を返します。これらの機能の一部とそれに対応する目的は次のとおりです。

  • excecuteAsync():この関数は、トークンまたはエラー(発生した場合)を返す要求を送信します。ただし、この機能は非表示のreCAPTCHAにのみ適用できます。表示されるreCAPTCHAの場合、getValue()関数はトークンを返すために使用されます。
  • getValue():名前が示すように、この関数はreCAPTCHAフィールドの値を返します。
  • reset():これはreCAPTCHAをリセットするために使用され、後続のreCAPTCHAチェックの場合に適用されます。

ref以下に示すように、を使用してトークンを取得できます。

<ReCAPTCHA
  sitekey= "your site key"
  theme="dark"
  ref={getCaptchaRef}
  onChange={() => {
    reCaptchaValue();
  }}
/>

ここでは、コンポーネントのonChangeプロパティに関数を追加しました。この関数を使用して、トークンの値を設定します。

const reCaptchaValue = async () => {
  const token = getCaptchaRef.current.getValue();
};

次に、送信機能を有効にする前に、生成されたトークンを確認する必要があります。これを行うには、バックエンドでNode.jsPOSTを使用するようにリクエストする必要があります。アプリケーションのルートディレクトリに、https://www.google.com/recaptcha/api/siteverify新しいファイルを作成します。Server.jsサーバーの場合、2つの依存関係が必要になります。リクエストAxiosを処理し、サーバールートを管理します。これらの依存関係は、次のCLIコマンドを使用してインストールできます。POSTExpress

npm i express axios cors

次に、Server.jsプロジェクトフォルダのルートディレクトリにファイルを作成します。にServer.js、次のコードを入力します。

const express = require("express");
const axios = require("axios");
const cors = require("cors");

const router = express.Router();
const app = express();
const port = 5000;

app.use(cors());
app.use(express.json());
app.use(express.urlencoded({ extended: true }));
app.use("/", router);

router.post("/status", async (req, res) => {
  const { token } = req.body; // get token from the request we will create in index.js
  const secret = "SITE SECRET";
  await axios.post(
    `https://www.google.com/recaptcha/api/siteverify`, // URL
    {
        secret: secret,
        response: token,
    }, // URL parameters
  );
  //return response based on the status of the post request
  if (res.status(200)) {
    res.send(true);
  } else {
    res.send(false);
  }
});
app.listen(port, () => {
  console.log(`server is listening on ${port}`);
});

上記のコードでは、ポート5000で実行され、routeをリッスンするサーバーを作成しました/status。このサーバーを使用して、トークンが有効かどうかを判断するためのPOSTリクエストを作成し、応答を返します。トークンが有効な場合、サーバーは適切な応答を返します。それ以外の場合は、応答を返しfalseます。ターミナルを開き、でサーバーを起動しますnode Server.js

これが整ったら、以下に示すようindex.jsに、関数でリクエストを開始します。reCaptchaValue

const [valid, setValid] = useState(false)
const reCaptchaValue = async () => {
  const token = getCaptchaRef.current.getValue();
  console.log(token);
  await axios
    .post("http://localhost:5000/status", {
      response: token,
    })
    .then((res) => {
      console.log(res);
      setValid(res.data)
    })
    .catch((err) => {
      console.log(err);
    });
};

コードでは、reCAPTCHAから返されたトークンを使用してサーバーURLにPOSTリクエストを送信しました。次に、サーバーから返された状態の値を「true」または「false」に設定しvalidますres.data

6

最後に、ボタンにハンドラーを追加して、次onClickの値に基づいてさまざまな操作を実行しますvalid

<button className="submit" onClick={()=>{handleSubmit()}}>Log in</button>

そしてhandleSubmit()関数で:

const handleSubmit = ()=>{
 if(valid){
 alert("welcome user " + value + " " + value2)
 }
 else{
   alert("please verify you are not a robot")
 }
}

ここでアプリケーションを実行すると、次の結果が得られます。

7

ユーザーがreCAPTCHAに失敗した場合は、テストが成功するまでユーザーに再試行を要求するだけです。

8

結論

このチュートリアルでは、reCAPTCHAと、このセキュリティ機能をNextアプリケーションに統合する方法について説明しました。

ソース:https ://blog.openreplay.com/prevent-spam-and-detect-bots-with-recaptcha

#recaptcha 

ReCAPTCHAでスパムを防ぎ、ボットを検出する

Prevent Spam and Detect Bots with ReCAPTCHA

Recently, there have been different implementations to prevent spamming of different web services. One of these implementations is using a reCAPTCHA feature. A reCAPTCHA is an automated test to determine if the user of a web application is a human or a bot. This way, privileges or access are only granted to human users, thus reducing unwanted usage.

In this tutorial, readers will learn what reCAPTCHA’s are and how to implement them in a web application.

See more at: https://blog.openreplay.com/prevent-spam-and-detect-bots-with-recaptcha

#recaptcha 

Prevent Spam and Detect Bots with ReCAPTCHA
Hong  Nhung

Hong Nhung

1658943000

Ngăn Chặn Thư Rác Và Phát Hiện Bot Với ReCAPTCHA

Gần đây, đã có nhiều cách triển khai khác nhau để ngăn chặn việc gửi thư rác cho các dịch vụ web khác nhau. Một trong những cách triển khai này là sử dụng tính năng reCAPTCHA. ReCAPTCHA là một bài kiểm tra tự động để xác định xem người dùng ứng dụng web là người hay bot. Bằng cách này, các đặc quyền hoặc quyền truy cập chỉ được cấp cho người dùng là con người, do đó giảm việc sử dụng không mong muốn.

Trong hướng dẫn này, người đọc sẽ tìm hiểu reCAPTCHA là gì và cách triển khai chúng trong ứng dụng web.

ReCAPTCHA là gì?

ReCAPTCHA là một CAPTCHA(Kiểm tra Turing công khai hoàn toàn tự động để nói với máy tính và con người khác biệt) miễn phí, dễ thêm và một tính năng bảo mật trang web nâng cao do Google sở hữu. Nó được phát triển để quản lý việc sử dụng trang web không mong muốn từ bot và ngăn chặn việc gửi thư rác bằng cách triển khai các kỹ thuật khác nhau để xác định xem người dùng trang web là người hay bot. Các kỹ thuật này liên quan đến việc trình bày cho người dùng một bài kiểm tra mà con người có thể dễ dàng giải quyết nhưng khó xác định đối với bot hoặc phần mềm độc hại. Việc triển khai tính năng bảo mật này trong trang web sẽ ngăn chặn việc lạm dụng trang web trong khi vẫn cho phép người dùng sử dụng trang web như họ phải làm, tức là người dùng hợp pháp có thể thực hiện các hoạt động bình thường của họ là truy cập và sử dụng trang web sau khi vượt qua bài kiểm tra reCAPTCHA. Ảnh GIF bên dưới chứa các ví dụ về các loại reCAPTCHA mà bạn có thể đã gặp trên trang web:

1

Việc triển khai tính năng bảo mật reCAPTCHA trong một trang web sẽ mang lại những lợi ích sau:

  • Ngăn phần mềm tự động lạm dụng các hoạt động nhất định. Ví dụ về những điều đó là thăm dò ý kiến, bình luận tin tức hoặc một cuộc khảo sát. Công nghệ reCAPTCHA sẽ ngăn chặn các hành động lặp lại của bot vì cần có một bài kiểm tra reCAPTCHA mới cho một phiên người dùng mới.
  • reCAPTCHA đóng vai trò như một biện pháp hạn chế thư rác.
  • Có tính năng reCAPTCHA hỗ trợ phân biệt lưu lượng truy cập giả và thật được tạo trên trang web.
  • reCAPTCHA ngăn người dùng chạy các hoạt động thô bạo trên một trang web vì phần mềm sẽ không thể vượt qua bài kiểm tra bảo mật mỗi khi nó chạy.

Nhìn chung, reCAPTCHA được bảo mật, vì chúng không có các mẫu có thể dự đoán được trong bài kiểm tra đã chọn được trình bày cho người dùng.

Các loại reCAPTCHA và phương thức hoạt động khác nhau

Theo thời gian, đã có những phát triển trong các phiên bản reCAPTCHA, với mỗi phiên bản mới bổ sung thêm một kỹ thuật kiểm tra người dùng mới. Cho đến nay, Google đã phát hành ba phiên bản reCAPTCHA; v1, v2 và v3.

  • v1 của reCAPTCHA được thiết kế để hiển thị hình ảnh và trường văn bản. Người dùng phải nhập những gì họ có thể nhìn thấy trong hình ảnh. Hình ảnh này thường chứa một tập hợp các ký tự, với các ký tự này hoặc bị cong vênh, bị kéo căng hoặc ít hiển thị hơn một chút. Lý do của việc thao tác các khía cạnh trực quan của văn bản là làm cho phần mềm không thể nhận dạng văn bản được viết trong hình ảnh. Nếu văn bản được nhập vào trường văn bản khớp với các ký tự trong hình ảnh thì quá trình kiểm tra sẽ thành công. Nếu không, người dùng sẽ được yêu cầu thực hiện một bài kiểm tra mới.2
  • Phiên bản thứ hai của reCAPTCHA v2 vẫn được sử dụng cho đến ngày nay. V2 có hai loại khác nhau: kiểm tra trong đó người dùng phải chọn hộp kiểm để xác nhận văn bản nói rằng “Tôi không phải là rô bốt” và loại thứ hai là thử thách bảo mật trong đó người dùng được hiển thị với các bộ hình ảnh khác nhau và yêu cầu để chọn hình ảnh tương ứng với các đối tượng cụ thể. Những vật thể này có thể là thuyền, vòi chữa cháy, đèn đường, máy bay, v.v. Người dùng được xác minh khi chọn tất cả các hình ảnh tương ứng và thử nghiệm được coi là thành công.

3b

3

Đối với phiên bản này, reCAPTCHA giám sát hành vi trang web của người dùng. Nếu người dùng sử dụng trang web một cách đáng ngờ, họ sẽ được hiển thị với hình ảnh reCAPTCHA; nếu không, chúng được hiển thị với biến thể hộp kiểm.

  • v3 là một dạng reCAPTCHA vô hình. Phiên bản reCAPTCHA này sẽ theo dõi lưu lượng truy cập của trang web để xác định xem hành động của người dùng có đáng ngờ hay không. Nếu hành động của người dùng được xác định là không đáng ngờ, không có thách thức nào được hiển thị và ngược lại.

Tích hợp reCAPTCHA với Next.js

Để chứng minh tính năng reCAPTCHA, chúng tôi sẽ có một biểu mẫu sử dụng CAPTCHA để chỉ cho phép những người dùng hợp pháp gửi dữ liệu. Để làm theo hướng dẫn này, hãy sao chép mã biểu mẫu khởi động từ kho lưu trữ GitHub và chạy npm installtrong thư mục dự án để cài đặt tất cả các phụ thuộc cần thiết.

Chúng tôi sẽ cần hai thứ: thứ nhất, một khóa API để truy cập reCAPTCHA và thứ hai, react-google-recaptchaphụ thuộc. Để lấy khóa truy cập của bạn, hãy điều hướng trong trình duyệt của bạn đến đây :

4

Trên trang này, chúng tôi được yêu cầu nhập tiêu đề của khóa của chúng tôi vào Labeltrường. Đối với loại reCAPTCHA, chúng tôi sẽ sử dụng biến thể v2 “Tôi không phải là rô bốt”. Trong trường Tên miền, chúng tôi sẽ nhập “localhost” và cuối cùng nhấp vào nút “Gửi” để tạo khóa. Sao chép các khóa đã tạo vì chúng tôi sẽ sử dụng chúng trong ứng dụng của mình. Tiếp theo, cài đặt react-google-recaptchaphụ thuộc bằng lệnh sau trong CLI:

npm install --save react-google-recaptcha

Sau khi cài đặt xong, chúng ta có thể nhập và sử dụng gói này trong Index.js:

import ReCAPTCHA from "react-google-recaptcha";

Tiếp theo, thêm ReCAPTCHAthành phần trong biểu mẫu ngay bên dưới nút đăng nhập:

//.... 
<input
    type="text"
    placeholder="Doe"
    value={value}
    onChange={(e) => {
      setValue(e.target.value);
    }}
  />
</span>
<button className="submit">Log in</button>
<ReCAPTCHA sitekey="your app site key"/>

Thành ReCAPTCHAphần yêu cầu một sitekeythuộc tính để có thể sử dụng nó. Bây giờ, nếu chúng ta chạy ứng dụng bằng npm run devlệnh, chúng ta sẽ nhận được kết quả tương tự như hình ảnh:

5

Thành ReCAPTCHAphần này cho phép chúng tôi tùy chỉnh hành vi và giao diện của ReCAPTCHA bằng cách sử dụng các thuộc tính khác nhau. Một số thuộc tính này bao gồm:

  • Chủ đề: Điều này nhận một lighthoặc darkgiá trị. Theo mặc định, reCAPTCHA được hiển thị bằng chủ đề sáng, nhưng việc thêm themethuộc tính có giá trị là darksẽ hiển thị reCAPTCHA trông tối.
  • onChange: Điều này thực hiện một chức năng gọi lại khi người dùng hoàn thành reCAPTCHA.
  • Kích thước: Thuộc tính này nhận bất kỳ giá trị nào sau đây compact: normalhoặc invisible. Nó chỉ định kích thước của reCAPTCHA hoặc xác định xem reCAPTCHA có bất khả chiến bại hay không.
  • Loại: Điều này chỉ định xem reCAPTCHA có sử dụng hình ảnh hoặc âm thanh hay không.

Phát lại phiên nguồn mở

OpenReplay là bộ mã nguồn mở, phát lại phiên cho phép bạn xem người dùng làm gì trên ứng dụng web của mình, giúp bạn khắc phục sự cố nhanh hơn. OpenReplay được tự lưu trữ để kiểm soát toàn bộ dữ liệu của bạn.

replayer.png

Bắt đầu tận hưởng trải nghiệm gỡ lỗi của bạn - bắt đầu sử dụng OpenReplay miễn phí .

Xử lý Gửi biểu mẫu

Đối với biểu mẫu, chúng tôi muốn người dùng chỉ có thể gửi khi họ đã hoàn thành reCAPTCHA. Bất cứ khi nào người dùng hoàn thành reCAPTCHA, một mã thông báo sẽ được tạo. Mã thông báo này có giá trị trong hai phút và chỉ có thể được sử dụng một lần. Chúng tôi sẽ truy cập mã thông báo này trong ứng dụng của mình để cho phép người dùng gửi biểu mẫu sau khi hoàn thành reCAPTCHA. Để nắm bắt mã thông báo này, chúng tôi sẽ sử dụng hook useRef từ React:

//first we add an import for useRef
import { React, useState, useRef } from "react";

Sau đó, chúng tôi sẽ tạo một biến nơi chúng tôi sẽ lưu trữ giá trị của mã thông báo, bằng cách sử dụng useRef:

const getCaptchaRef = useRef(null);

Sau đó, thêm biến này vào thuộc reftính của reCAPTCHAthành phần:

<ReCAPTCHA
  sitekey= "your site key here"
  ref={getCaptchaRef}
/>

Thuộc reftính trả về các hàm trợ giúp khác nhau. Một số chức năng này và mục đích tương ứng của chúng bao gồm:

  • excecuteAsync(): Hàm này gửi yêu cầu trả về mã thông báo hoặc lỗi (nếu có). Mặc dù vậy, chức năng này chỉ áp dụng cho các reCAPTCHA vô hình. Đối với reCAPTCHA hiển thị, getValue()hàm được sử dụng để trả về mã thông báo.
  • getValue(): Như tên của nó, hàm này trả về giá trị của trường reCAPTCHA.
  • reset(): Điều này được sử dụng để đặt lại reCAPTCHA và có thể áp dụng trong trường hợp reCAPTCHAkiểm tra tiếp theo.

Chúng tôi có thể sử dụng refđể lấy mã thông báo của chúng tôi như hình dưới đây:

<ReCAPTCHA
  sitekey= "your site key"
  theme="dark"
  ref={getCaptchaRef}
  onChange={() => {
    reCaptchaValue();
  }}
/>

Ở đây, chúng tôi đã thêm một hàm trong thuộc tính thành phần của chúng tôi onChange. Chúng tôi sẽ sử dụng chức năng này để đặt giá trị của mã thông báo của chúng tôi:

const reCaptchaValue = async () => {
  const token = getCaptchaRef.current.getValue();
};

Tiếp theo, chúng tôi phải xác minh mã thông báo đã tạo trước khi bật tính năng gửi. Để thực hiện việc này, chúng ta cần POSTyêu cầu https://www.google.com/recaptcha/api/siteverifysử dụng Node.js trên chương trình phụ trợ. Tạo một tệp mới Server.js, trong thư mục gốc của ứng dụng của bạn. Đối với máy chủ, chúng tôi sẽ yêu cầu hai phần phụ thuộc; Axiosđể xử lý POSTyêu cầu của chúng tôi và Expressquản lý các tuyến máy chủ. Chúng ta có thể cài đặt các phần phụ thuộc này bằng các lệnh CLI sau:

npm i express axios cors

Tiếp theo, tạo một tệp Server.jstrong thư mục gốc của thư mục dự án. Trong Server.js, hãy nhập mã sau:

const express = require("express");
const axios = require("axios");
const cors = require("cors");

const router = express.Router();
const app = express();
const port = 5000;

app.use(cors());
app.use(express.json());
app.use(express.urlencoded({ extended: true }));
app.use("/", router);

router.post("/status", async (req, res) => {
  const { token } = req.body; // get token from the request we will create in index.js
  const secret = "SITE SECRET";
  await axios.post(
    `https://www.google.com/recaptcha/api/siteverify`, // URL
    {
        secret: secret,
        response: token,
    }, // URL parameters
  );
  //return response based on the status of the post request
  if (res.status(200)) {
    res.send(true);
  } else {
    res.send(false);
  }
});
app.listen(port, () => {
  console.log(`server is listening on ${port}`);
});

Trong đoạn mã trên, chúng tôi đã tạo một máy chủ chạy trên cổng 5000 và lắng nghe định tuyến /status. Sử dụng máy chủ này, chúng tôi sẽ thực hiện một yêu cầu đăng để xác định xem mã thông báo có hợp lệ hay không và sau đó trả lại phản hồi. Nếu mã thông báo hợp lệ, máy chủ sẽ trả lại phản hồi thích hợp. Nếu không, nó sẽ trả lại một phản hồi false. Mở thiết bị đầu cuối và khởi động máy chủ với node Server.js.

Với điều này tại chỗ, chúng tôi sẽ bắt đầu yêu cầu của chúng tôi index.jstrong chức năng của chúng tôi reCaptchaValue, như được hiển thị bên dưới:

const [valid, setValid] = useState(false)
const reCaptchaValue = async () => {
  const token = getCaptchaRef.current.getValue();
  console.log(token);
  await axios
    .post("http://localhost:5000/status", {
      response: token,
    })
    .then((res) => {
      console.log(res);
      setValid(res.data)
    })
    .catch((err) => {
      console.log(err);
    });
};

Trong mã, chúng tôi đã thực hiện một yêu cầu đăng lên URL máy chủ của chúng tôi với mã thông báo được trả lại bởi reCAPTCHA. Sau đó, chúng tôi đặt giá trị của một trạng thái validbằng với giá trị được res.datatrả về từ máy chủ, "true" hoặc "false".

6

Cuối cùng, chúng tôi sẽ thêm một onClicktrình xử lý vào nút của mình để thực hiện các hoạt động khác nhau dựa trên giá trị của valid:

<button className="submit" onClick={()=>{handleSubmit()}}>Log in</button>

Và trong handleSubmit()chức năng:

const handleSubmit = ()=>{
 if(valid){
 alert("welcome user " + value + " " + value2)
 }
 else{
   alert("please verify you are not a robot")
 }
}

Nếu chúng tôi chạy ứng dụng của mình ngay bây giờ, chúng tôi nhận được kết quả sau:

7

Nếu người dùng không thực hiện được reCAPTCHA, nó chỉ cần yêu cầu người dùng thử lại cho đến khi kiểm tra thành công.

8

Sự kết luận

Hướng dẫn này đã dạy chúng tôi về reCAPTCHA và cách chúng tôi có thể tích hợp tính năng bảo mật này vào ứng dụng Tiếp theo.

Nguồn: https://blog.openreplay.com/prevent-spam-and-detect-bots-with-recaptcha

#recaptcha

Ngăn Chặn Thư Rác Và Phát Hiện Bot Với ReCAPTCHA

Evita El Spam Y Detecta Bots Con ReCAPTCHA

Recientemente, ha habido diferentes implementaciones para evitar el spam de diferentes servicios web. Una de estas implementaciones está utilizando una función reCAPTCHA. Un reCAPTCHA es una prueba automatizada para determinar si el usuario de una aplicación web es un humano o un bot. De esta manera, los privilegios o el acceso solo se otorgan a usuarios humanos, lo que reduce el uso no deseado.

En este tutorial, los lectores aprenderán qué son los reCAPTCHA y cómo implementarlos en una aplicación web.

¿Qué es reCAPTCHA?

Un reCAPTCHA es un CAPTCHA(Prueba de Turing Pública Completamente Automatizada para Diferenciar Computadoras y Humanos) que es gratuito, fácil de agregar y una función avanzada de seguridad del sitio propiedad de Google. Fue desarrollado para administrar el uso no deseado del sitio por parte de los bots y evitar el spam mediante la implementación de varias técnicas para identificar si el usuario de una página web es un ser humano o un bot. Estas técnicas implican presentar al usuario una prueba que es fácil de resolver para los humanos pero difícil de determinar para los bots o el software malicioso. La implementación de esta característica de seguridad en una página web evita el abuso del sitio y al mismo tiempo permite que los usuarios humanos usen el sitio como deberían, es decir, los usuarios legítimos pueden realizar sus actividades normales de acceso y uso del sitio web después de pasar la prueba reCAPTCHA. El siguiente GIF contiene ejemplos de tipos de reCAPTCHA que puede haber encontrado en una página web:

primero

La implementación de la función de seguridad reCAPTCHA en un sitio web proporcionará los siguientes beneficios:

  • Evita que el software automatizado abuse de ciertas actividades. Ejemplos de tales son encuestas, comentarios de noticias o una encuesta. La tecnología reCAPTCHA evitará acciones repetidas por parte de los bots, ya que se requerirá una nueva prueba de reCAPTCHA para una nueva sesión de usuario.
  • Los reCAPTCHA sirven como una medida de restricción de spam.
  • Tener una función reCAPTCHA ayuda a distinguir el tráfico falso y real generado en una página web.
  • Los reCAPTCHA evitan que los usuarios ejecuten operaciones de fuerza bruta en un sitio web, ya que el software no podría pasar la prueba de seguridad cada vez que se ejecuta.

En general, los reCAPTCHA están protegidos, ya que no tienen patrones predecibles en la prueba seleccionada presentada al usuario.

Diferentes tipos de reCAPTCHA y modos de operación

Con el tiempo, ha habido desarrollos en las versiones de reCAPTCHA, y cada nueva versión agrega una nueva técnica de prueba de usuario. Hasta ahora, Google ha lanzado tres versiones de reCAPTCHA; v1, v2 y v3.

  • v1 de reCAPTCHA fue diseñado para mostrar una imagen y un campo de texto. Se esperaba que los usuarios ingresaran lo que podían ver en la imagen. Esta imagen generalmente contiene un conjunto de caracteres, con estos caracteres deformados, estirados o ligeramente menos visibles. La razón para manipular el aspecto visual del texto es hacer imposible que el software identifique el texto escrito en la imagen. Si el texto ingresado en el campo de texto coincide con los caracteres de la imagen, la prueba será exitosa. De lo contrario, el usuario deberá realizar una nueva prueba.2
  • La segunda versión de reCAPTCHA v2 todavía se usa hoy. V2 tenía dos tipos diferentes: una prueba en la que un usuario tiene que marcar una casilla de verificación para confirmar un texto que dice "No soy un robot", y el segundo tipo es un desafío de seguridad en el que al usuario se le presentan diferentes conjuntos de imágenes y es necesarios para seleccionar imágenes que correspondan a objetos específicos. Estos objetos pueden ser barcos, hidrantes, farolas, aviones, etc. El usuario se verifica al seleccionar todas las imágenes correspondientes y la prueba se considera exitosa.

3b

3

Para esta versión, reCAPTCHA monitorea el comportamiento del usuario en el sitio. Si el usuario usa el sitio de manera sospechosa, se le presenta la imagen reCAPTCHA; de lo contrario, se presentan con la variante de casilla de verificación.

  • v3 es una forma invisible de reCAPTCHA. Esta versión de reCAPTCHA monitoreará el tráfico de un sitio para determinar si las acciones de un usuario son sospechosas. Si se determina que las acciones del usuario no son sospechosas, no se muestran desafíos y viceversa.

Integrando reCAPTCHA con Next.js

Para demostrar la función reCAPTCHA, tendremos un formulario que usa un CAPTCHA para permitir que solo los usuarios legítimos envíen datos. Para seguir este tutorial, clone el código del formulario de inicio del repositorio de GitHub y ejecútelo npm installen el directorio del proyecto para instalar todas las dependencias necesarias.

Necesitaremos dos cosas: la primera, una clave API para acceder a reCAPTCHA, y la segunda, la react-google-recaptchadependencia. Para obtener su clave de acceso, navegue en su navegador hasta aquí :

4

En esta página, debemos ingresar el título de nuestra clave en el Labelcampo. Para el tipo reCAPTCHA, usaremos la variante v2 "No soy un robot". En el campo Dominio, ingresaremos “localhost” y finalmente daremos clic en el botón “Enviar” para generar la clave. Copie las claves generadas ya que las usaremos en nuestra aplicación. A continuación, instale la react-google-recaptchadependencia con el siguiente comando en la CLI:

npm install --save react-google-recaptcha

Una vez completada la instalación, podemos importar y usar este paquete en Index.js:

import ReCAPTCHA from "react-google-recaptcha";

A continuación, agregue el ReCAPTCHAcomponente en el formulario justo debajo del botón de inicio de sesión:

//.... 
<input
    type="text"
    placeholder="Doe"
    value={value}
    onChange={(e) => {
      setValue(e.target.value);
    }}
  />
</span>
<button className="submit">Log in</button>
<ReCAPTCHA sitekey="your app site key"/>

El ReCAPTCHAcomponente requiere una sitekeypropiedad para poder hacer uso de él. Ahora bien, si ejecutamos la aplicación con el npm run devcomando, obtendremos un resultado similar a la imagen:

5

El ReCAPTCHAcomponente nos permite personalizar el comportamiento y la apariencia del ReCAPTCHA usando diferentes propiedades. Algunas de estas propiedades incluyen:

  • Tema: Esto toma un valor lighto dark. De forma predeterminada, el reCAPTCHA se muestra con un tema claro, pero agregar una themepropiedad con un valor de darkhará que el reCAPTCHA se vea oscuro.
  • onChange: esto ejecuta una función de devolución de llamada cuando el usuario completa el reCAPTCHA.
  • Tamaño: Esta propiedad toma cualquiera de los siguientes valores: compact, normalo invisible. Especifica el tamaño del reCAPTCHA o determina si el reCAPTCHA sería invencible.
  • Tipo: Esto especifica si el reCAPTCHA usaría una imagen o audio.

Reproducción de sesión de código abierto

OpenReplay es un conjunto de reproducción de sesiones de código abierto que le permite ver lo que hacen los usuarios en su aplicación web, lo que lo ayuda a solucionar problemas más rápido. OpenReplay es autohospedado para un control total sobre sus datos.

reproductor.png

Empiece a disfrutar de su experiencia de depuración: empiece a usar OpenReplay gratis .

Enviar formulario de manejo

Para el formulario, queremos que el usuario pueda enviar solo cuando haya completado el reCAPTCHA. Cada vez que un usuario completa un reCAPTCHA, se genera un token. Este token es válido por dos minutos y solo se puede usar una vez. Accederíamos a este token en nuestra aplicación para permitir que el usuario envíe el formulario después de completar el reCAPTCHA. Para capturar este token, usaremos el gancho useRef de React:

//first we add an import for useRef
import { React, useState, useRef } from "react";

Luego de esto, crearemos una variable donde almacenaremos el valor del token, usando useRef:

const getCaptchaRef = useRef(null);

Luego agregue esta variable a la refpropiedad del reCAPTCHAcomponente:

<ReCAPTCHA
  sitekey= "your site key here"
  ref={getCaptchaRef}
/>

La refpropiedad devuelve diferentes funciones auxiliares. Algunas de estas funciones y sus correspondientes propósitos incluyen:

  • excecuteAsync(): Esta función envía una solicitud que devuelve el token o un error (si ocurre alguno). Sin embargo, esta función solo es aplicable a reCAPTCHA invisibles. Para reCAPTCHA visible, la getValue()función se usa para devolver el token.
  • getValue(): como su nombre lo indica, esta función devuelve el valor del campo reCAPTCHA.
  • reset(): Esto se usa para restablecer el reCAPTCHA y es aplicable en caso de reCAPTCHAverificaciones posteriores.

Podemos usar el refpara obtener nuestro token como se muestra a continuación:

<ReCAPTCHA
  sitekey= "your site key"
  theme="dark"
  ref={getCaptchaRef}
  onChange={() => {
    reCaptchaValue();
  }}
/>

Aquí, agregamos una función en la onChangepropiedad de nuestro componente. Usaremos esta función para establecer el valor de nuestro token:

const reCaptchaValue = async () => {
  const token = getCaptchaRef.current.getValue();
};

A continuación, debemos verificar el token generado antes de habilitar la función de envío. Para hacer esto, debemos realizar una POSTsolicitud para https://www.google.com/recaptcha/api/siteverifyusar Node.js en el backend. Cree un nuevo archivo, Server.js, en el directorio raíz de su aplicación. Para el servidor, necesitaremos dos dependencias; Axiospara manejar nuestra POSTsolicitud y Expressadministrar las rutas del servidor. Podemos instalar estas dependencias con los siguientes comandos CLI:

npm i express axios cors

A continuación, cree un archivo Server.jsen el directorio raíz de la carpeta del proyecto. En Server.js, ingresa el siguiente código:

const express = require("express");
const axios = require("axios");
const cors = require("cors");

const router = express.Router();
const app = express();
const port = 5000;

app.use(cors());
app.use(express.json());
app.use(express.urlencoded({ extended: true }));
app.use("/", router);

router.post("/status", async (req, res) => {
  const { token } = req.body; // get token from the request we will create in index.js
  const secret = "SITE SECRET";
  await axios.post(
    `https://www.google.com/recaptcha/api/siteverify`, // URL
    {
        secret: secret,
        response: token,
    }, // URL parameters
  );
  //return response based on the status of the post request
  if (res.status(200)) {
    res.send(true);
  } else {
    res.send(false);
  }
});
app.listen(port, () => {
  console.log(`server is listening on ${port}`);
});

En el código anterior, creamos un servidor que se ejecuta en el puerto 5000 y escucha la ruta /status. Usando este servidor, haremos una solicitud posterior para determinar si el token es válido y luego devolveremos una respuesta. Si el token es válido, el servidor devolverá una respuesta adecuada. De lo contrario, devolvería una respuesta false. Abra la terminal e inicie el servidor con node Server.js.

Con esto en su lugar, iniciaremos nuestra solicitud index.jsen nuestra reCaptchaValuefunción, como se muestra a continuación:

const [valid, setValid] = useState(false)
const reCaptchaValue = async () => {
  const token = getCaptchaRef.current.getValue();
  console.log(token);
  await axios
    .post("http://localhost:5000/status", {
      response: token,
    })
    .then((res) => {
      console.log(res);
      setValid(res.data)
    })
    .catch((err) => {
      console.log(err);
    });
};

En el código, hicimos una solicitud de publicación a la URL de nuestro servidor con el token devuelto por reCAPTCHA. Luego establecemos el valor de un estado validigual al res.datadevuelto por el servidor, ya sea "verdadero" o "falso".

6

Finalmente, agregaremos un onClickcontrolador a nuestro botón para realizar diferentes operaciones basadas en el valor de valid:

<button className="submit" onClick={()=>{handleSubmit()}}>Log in</button>

Y en la handleSubmit()función:

const handleSubmit = ()=>{
 if(valid){
 alert("welcome user " + value + " " + value2)
 }
 else{
   alert("please verify you are not a robot")
 }
}

Si ejecutamos nuestra aplicación ahora, obtenemos el siguiente resultado:

7

Si el usuario falla el reCAPTCHA, simplemente solicita que el usuario vuelva a intentarlo hasta que la prueba sea exitosa.

8

Conclusión

Este tutorial nos enseñó sobre reCAPTCHA y cómo podemos integrar esta característica de seguridad en una aplicación Next.

Fuente: https://blog.openreplay.com/prevent-spam-and-detect-bots-with-recaptcha

#recaptcha 

Evita El Spam Y Detecta Bots Con ReCAPTCHA
Rupert  Beatty

Rupert Beatty

1658392080

noCAPTCHA: Helper for Google's New NoCAPTCHA (reCAPTCHA V2 & V3)

noCAPTCHA (new reCAPTCHA)   

By ARCANEDEV©

What is reCAPTCHA?

reCAPTCHA is a free service that protects your site from spam and abuse. It uses advanced risk analysis engine to tell humans and bots apart. With the new API, a significant number of your valid human users will pass the reCAPTCHA challenge without having to solve a CAPTCHA. reCAPTCHA comes in the form of a widget that you can easily add to your blog, forum, registration form, etc.

New Google reCAPTCHA

Features

  • Framework agnostic package.
  • v2 (+ Invisible) & v3 reCaptcha are supported.
  • Easy setup & configuration.
  • Well documented & IDE Friendly.
  • Well tested with maximum code quality.
  • Laravel 4.2 to 9.x are supported.
  • PSR-7 Support (ServerRequest verification).
  • Made with :heart: & :coffee:.

Installation

Requirements

To use reCAPTCHA, you need to have a site key and a secret key. Click here to setup a domain and get your keys.

The site key is using for the widget and the secret key is used to validate the response we get from Google.

For more details, check the official documentation.

Version Compatibility

LaravelnoCaptcha
Laravel v9.xnoCaptcha v13.x
Laravel v8.xnoCaptcha v12.x
Laravel v7.xnoCaptcha v11.x
Laravel v6.xnoCaptcha v10.x
Laravel v5.8noCaptcha v9.x
Laravel v5.7noCaptcha v7.x noCaptcha v8.x
Laravel v5.6noCaptcha v6.x
Laravel v5.5noCaptcha v5.x
Laravel v5.4noCaptcha v4.x
Laravel v5.3noCaptcha v3.x
Laravel v5.2noCaptcha v3.x
Laravel v5.1noCaptcha v3.x
Laravel v5.0noCaptcha v3.x
Laravel v4.2noCaptcha v1.x

Note : This is a framework-agnostic package, so you can use any version of this package in your PHP project.

Composer

You can install this package via Composer by running this command composer require arcanedev/no-captcha.

Laravel

Setup

NOTE : The package will automatically register itself if you're using Laravel >= v5.5, so you can skip this section.

Once the package is installed, you can register the service provider in config/app.php in the providers array:

'providers' => [
    ...
    Arcanedev\NoCaptcha\NoCaptchaServiceProvider::class,
],

For Laravel 4.2 (PHP 5.4), the config file is located in app/config/app.php

In the providers array:

'providers' => [
    ...
    'Arcanedev\NoCaptcha\Laravel\ServiceProvider',
],

Configuration

There is not really a need to publish the configuration file. Both the secret and sitekey should be set in your environment file so it won't be available in your versioning system.

Option 1 - Environment Configuration:

See Environment Configuration documentation.

// Edit your .env file by adding this two lines and fill it with your keys.

NOCAPTCHA_SECRET=your-secret-key
NOCAPTCHA_SITEKEY=your-site-key

For Laravel 4.2: Protecting Sensitive Configuration

Option 2 - Publish configuration file:

Run php artisan vendor:publish --provider="Arcanedev\NoCaptcha\NoCaptchaServiceProvider" to publish the config file.

Edit the secret and sitekey values in config/no-captcha.php file:

For Laravel 4.2, run php artisan config:publish arcanedev/no-captcha and the file is located in app/config/packages/arcanedev/no-captcha/config.php.

Usage

Hard Coded (Any PHP Project)

Checkout example below:

<?php

require_once(__DIR__.'/vendor/autoload.php');

use Arcanedev\NoCaptcha\NoCaptchaV2;

$secret  = 'your-secret-key';
$sitekey = 'your-site-key';
$captcha = new NoCaptchaV2($secret, $sitekey);

if ($_POST) {
    // You need to check also if the $_POST['g-recaptcha-response'] is not empty.
    $response = $captcha->verify($_POST['g-recaptcha-response'] ?? null);

    echo $response->isSuccess()
        ? 'Yay ! You are a human.'
        : 'No ! You are a robot.';

    exit();
}

?>

<form action="?" method="POST">
    <?php echo $captcha->display(); ?>
    <button type="submit">Submit</button>
</form>

<?php
// At the bottom, before the </body> (If you're a good programmer and you listen to your mother)
echo $captcha->script();
?>

Note: The NoCaptcha constructor accepts four arguments:

ArgumentRequiredDescription
$secretYesYour secret key.
$siteKeyYesYour site key.
$langNoYou can specify your language.
$attributesNoYou can specify a global attributes for your captchas.

Check the examples folder for more usage details.

Invisible Captcha

The code below explains how to enable and customize the invisible reCAPTCHA on your webpage.

require_once(__DIR__ . '/../vendor/autoload.php');

use Arcanedev\NoCaptcha\NoCaptchaV2;

$secret  = 'your-secret-key';
$sitekey = 'your-site-key';
$captcha = new NoCaptchaV2($secret, $sitekey);

if ($_POST) {
    // You need to check also if the $_POST['g-recaptcha-response'] is not empty.
    $response = $captcha->verify($_POST['g-recaptcha-response'] ?? null);

    echo $response->isSuccess()
        ? 'Yay ! You are a human.'
        : 'No ! You are a robot.';

    exit();
}

?>

<form method="POST" id="demo-form">
    <?php echo $captcha->button('Send', ['data-badge' => 'inline']); ?>
</form>

<?php echo $captcha->script(); ?>

<script>
    function onSubmit(token) {
        document.getElementById("demo-form").submit();
    }
</script>

NOTE : You need to specify the invisible version in your captcha admin page. Check this page for more details: https://developers.google.com/recaptcha/docs/versions

Version 3

The code below shows you how to use the ReCaptcha V3:

<?php

require_once(__DIR__.'/vendor/autoload.php');

use Arcanedev\NoCaptcha\NoCaptchaV3;

$captcha = new NoCaptchaV3(
    'SECRET-KEY',
    'SITE-KEY'
);

if ($_POST) {
    $response = $captcha->verify($_POST['g-recaptcha-response'] ?? null);

    echo $response->isSuccess()
        ? 'Yay ! You are a human.'
        : 'No ! You are a robot.';

    exit();
}

?>

<form method="POST">
    <input type="email" name="email"><br>
    <button type="submit">Submit</button>

    <?php echo $captcha->input('g-recaptcha-response'); ?>
</form>

<?php echo $captcha->script(); ?>

<script>
    grecaptcha.ready(function() {
        grecaptcha.execute('SITE-KEY', {action: 'homepage'});
    });
</script>

Laravel

Views

Insert reCAPTCHA inside your form using one of this examples:

By using Blade syntax

{!! Form::open([...]) !!}
    // Other inputs...
    {!! no_captcha()->display() !!}
    {!! Form::submit('Submit') !!}
{!! Form::close() !!}

// Remember what your mother told you
{!! no_captcha()->script() !!}

For Laravel 4.2, use {{ ... }} instead of {!! ... !!}

Without using Blade syntax

<?php

echo Form::open([...]);
    // Other inputs...
    echo no_captcha()->display()->toHtml();
    echo Form::submit('Submit');
echo Form::close();

?>

<?php echo no_captcha()->script()->toHtml(); ?>

Back-end (Controller or somewhere in your project ...)

To validate the response we get from Google, your can use the captcha rule in your validator:

use Arcanedev\NoCaptcha\Rules\CaptchaRule;

$inputs   = Input::all();
$rules    = [
    // Other validation rules...
    'g-recaptcha-response' => ['required', new CaptchaRule],
];
$messages = [
    'g-recaptcha-response.required' => 'Your custom validation message.',
    'g-recaptcha-response.captcha'  => 'Your custom validation message.',
];

$validator = Validator::make($inputs, $rules, $messages);

if ($validator->fails()) {
    $errors = $validator->messages();

    var_dump($errors->first('g-recaptcha-response'));

    // Redirect back or throw an error
}

If you want to manage the localized messages, edit the validation.php files inside your lang directory.

For example:

// resources/lang/en/validation.php
return [
    ...
    // Add this line with your custom message
    'captcha'   => "If you read this message, then you're a robot.",
];
// resources/lang/fr/validation.php
return [
    ...
    // Ajoutez cette ligne avec votre message personnalisé
    'captcha'   => 'Si vous lisez ce message, alors vous êtes un robot.',
];

For the required rule, you can customize it by adding your messages to custom array in the resources/lang/xx/validation.php:

'custom' => [
    'g-recaptcha-response' => [
        'required' => 'Your custom validation message for captchas.',
    ],
],

For Laravel 4.2, the lang folder is located in app/lang

use Arcanedev\NoCaptcha\Rules\CaptchaRule;

$validator = Validator::make(Input::all(), [
    // Other validation rules...
    'g-recaptcha-response' => ['required', new CaptchaRule],
]);

if ($validator->fails()) {
    $errors = $validator->messages();

    var_dump($errors->first('g-recaptcha-response'));

    // Redirect back or throw an error
}

For more advanced usage, check the official recaptcha documentation.

Extras

[reCaptcha V2] g-recaptcha tag attributes

AttributesValueDefaultDescription
data-sitekey  Your sitekey
data-themedark / lightlightOptional. The color theme of the widget.
data-typeaudio / imageimageOptional. The type of CAPTCHA to serve.
data-sizecompact / normalnormalOptional. The size of the widget.
data-tabindex 0Optional. The tabindex of the widget and challenge. If other elements in your page use tabindex, it should be set to make user navigation easier.
data-callback  Optional. Your callback function that's executed when the user submits a successful CAPTCHA response. The user's response, g-recaptcha-response, will be the input for your callback function.
data-expired-callback  Optional. Your callback function that's executed when the recaptcha response expires and the user needs to solve a new CAPTCHA.

[Invisible reCaptcha] g-recaptcha tag attributes.

AttributesValueDefaultDescription
data-sitekey  Your sitekey
data-badgebottomleft / inline / bottomrightbottomrightOptional. Reposition the reCAPTCHA badge. 'inline' allows you to control the CSS.
data-typeaudio / imageimageOptional. The type of CAPTCHA to serve.
data-sizecompact / normalnormalOptional. The size of the widget.
data-tabindex  Optional. The tabindex of the widget and challenge. If other elements in your page use tabindex, it should be set to make user navigation easier.
data-callback onSubmitOptional. Your callback function that's executed when the user submits a successful CAPTCHA response. The user's response, g-recaptcha-response, will be the input for your callback function.

Examples

Check the examples folder for more usage details.

FAQ

  • Q: I have a question, what to do ?
  • A: Make sure to check our GitHub issues for answers.

  • Q: I can't find answers in your GitHub issues, please help me 😱 !!
  • A: 👑 KEEP CALM and feel free to post a new one and we will do our best to answer it.

Contribution

Any ideas are welcome. Feel free to submit any issues or pull requests, please check the contribution guidelines.

Security

If you discover any security related issues, please email arcanedev.maroc@gmail.com instead of using the issue tracker.

Credits

Author: ARCANEDEV
Source Code: https://github.com/ARCANEDEV/noCAPTCHA 
License: MIT license

#laravel #recaptcha #google 

noCAPTCHA: Helper for Google's New NoCAPTCHA (reCAPTCHA V2 & V3)

CakePHP plugin that allows you to hide email addresses using reCAPTCHA

reCAPTCHA Mailhide

reCAPTCHA Mailhide is a CakePHP plugin that allows you to hide email addresses using reCAPTCHA. It works by using the crabstudio/Recaptcha plugin, which must first be loaded and configured correctly.

Installation

You can install the plugin via composer:

$ composer require --prefer-dist mirko-pagliai/cakephp-recaptcha-mailhide

Then you have to load the plugin. For more information on how to load the plugin, please refer to the Cookbook.

Simply, you can execute the shell command to enable the plugin:

bin/cake plugin load RecaptchaMailhide

This would update your application's bootstrap method.

Then you also need to set up a key to encrypt/decrypt email addresses:

Configure::write('RecaptchaMailhide.encryptKey', 'thisIsAKeyForEncrypt12345678901234567890');

Installation on older CakePHP and PHP versions

Recent packages and the master branch require at least CakePHP 4.0 and PHP 7.2. Instead, the cakephp3 branch requires at least PHP 5.6.

In this case, you can install the package as well:

$ composer require --prefer-dist mirko-pagliai/cakephp-recaptcha-mailhide:dev-cakephp3

Note that the cakephp3 branch will no longer be updated as of May 7, 2021, except for security patches, and it matches the 1.4.7 version.

Configuration

First, you have to load the Recaptcha component provided by the crabstudio/Recaptcha plugin, as described here. The component must be loaded inside the initialize() method of your AppController class.

For more information on how to load the component, please refer to the Cookbook.

Then, you have to load the Mailhide helper:

$this->loadHelper('RecaptchaMailhide.Mailhide');

For more information on how to load the helper, please refer to the Cookbook.

Usage

You can now use the link() method provided by the Mailhide helper in your template files. Example:

echo $this->Mailhide->link('My mail', 'myname@mymail.com');

This will create a link. By clicking on the link, a popup will open and it will contain the reCAPTCHA control. If the check was filled in correctly, the clear email will be shown.

You can also use the email address as the title of the link. Example:

echo $this->Mailhide->link('myname@mymail.com', 'myname@mymail.com');

In this case, the email will be obfuscated (myn***@mymail.com) to be shown as the title of the link.

The third parameter of the method can be used for link options. Example:

echo $this->Mailhide->link('My mail', 'myname@mymail.com', ['class' => 'my-custom-class']);

Versioning

For transparency and insight into our release cycle and to maintain backward compatibility, reCAPTCHA Mailhide will be maintained under the Semantic Versioning guidelines.


Did you like this plugin? Its development requires a lot of time for me. Please consider the possibility of making a donation: even a coffee is enough! Thank you.

Make a donation


Author: Mirko-pagliai
Source Code: https://github.com/mirko-pagliai/cakephp-recaptcha-mailhide 
License: MIT license

#php #cakephp #recaptcha 

CakePHP plugin that allows you to hide email addresses using reCAPTCHA

Recaptcha: integrate Google Recaptcha V2 to Your CakePHP Project

Integrate Google Recaptcha v2 to your CakePHP project

Installation

You can install this plugin into your CakePHP application using composer.

The recommended way to install composer packages is:

composer require crabstudio/recaptcha

followed by the command:

composer update

Load plugin

From command line:

bin/cake plugin load Recaptcha

Load Component and Configure

Override default configure from loadComponent:

$this->loadComponent('Recaptcha.Recaptcha', [
    'enable' => true,     // true/false
    'sitekey' => 'your_site_key', //if you don't have, get one: https://www.google.com/recaptcha/intro/index.html
    'secret' => 'your_secret',
    'type' => 'image',  // image/audio
    'theme' => 'light', // light/dark
    'lang' => 'vi',      // default en
    'size' => 'normal'  // normal/compact
]);

Override default configure from app config file:

file: config/app.php

    /**
     * Recaptcha configuration.
     *
     */
    'Recaptcha' => [
        'enable' => true,
        'sitekey' => 'your_site_key',
        'secret' => 'your_secret',
        'type' => 'image',
        'theme' => 'light',
        'lang' => 'es',
        'size' => 'normal'
    ]

Override default configure from recaptcha config file:

file: config/recaptcha.php

<?php

return [
    /**
     * Recaptcha configuration.
     *
     */
    'Recaptcha' => [
        'enable' => true,
        'sitekey' => 'your_site_key',
        'secret' => 'your_secret',
        'type' => 'image',
        'theme' => 'light',
        'lang' => 'es',
        'size' => 'normal'
    ]
];

Load recaptcha config file:

file: config/bootstrap.php

    Configure::load('recaptcha', 'default', true);

Config preference:

  1. loadComponent config options
  2. recaptcha config file
  3. app config file

Usage

Display recaptcha in your view:

    <?= $this->Form->create() ?>
    <?= $this->Form->control('email') ?>
    <?= $this->Recaptcha->display() ?>  // Display recaptcha box in your view, if configure has enable = false, nothing will be displayed
    <?= $this->Form->button() ?>
    <?= $this->Form->end() ?>

Verify in your controller function

    public function forgotPassword()
    {
        if ($this->request->is('post')) {
            if ($this->Recaptcha->verify()) { // if configure enable = false, it will always return true
                //do something here
            }
            $this->Flash->error(__('Please pass Google Recaptcha first'));
        }
    }

Done

Author: ctlabvn
Source Code: https://github.com/ctlabvn/Recaptcha 
License: MIT license

#php #recaptcha #cakephp 

Recaptcha: integrate Google Recaptcha V2 to Your CakePHP Project