Как внедрить reCaptcha в флаттер приложение - PullRequest
Новая
       11

Как внедрить reCaptcha в флаттер приложение

1 голос
/ 13 марта 2020

Я пытаюсь внедрить функцию reCaptcha в мое приложение-флаттер, но при регистрации капчи мне нужно предоставить домен, которого у меня нет, для мобильного приложения. Я просмотрел несколько руководств, в которых рассказывается, как внедрить reCaptcha в мобильное приложение, но эти руководства зарегистрировали свою reCaptcha с именами пакетов, но не с доменами. Как правильно внедрить reCaptcha в флаттер-приложение или любое мобильное приложение в 2020 году?

1 Ответ

1 голос
/ 30 марта 2020

Вы можете использовать этот плагин, flutter_recaptcha .

Для домена у меня возникла та же проблема. Сначала я обнаружил, что мне нужно использовать опцию «Я не робот» из здесь , и мне пришлось проверить репозиторий github , чтобы найти эту информацию, !!! Не забудьте добавить этот домен в настройку reCaptcha: recaptcha-flutter-plugin.firebaseapp.com,", что объясняет это.

Я немного растерялся, когда не увидел этого на главной странице, но теперь это имеет смысл. Надеюсь, это поможет.

Редактировать

Я кое-что заметил после того, как попробовал это, что я хотел бы упомянуть. Плагин не предоставляет контрольный ответ для использования для аутентификации пользователя на стороне сервера, поэтому он не выглядит очень полезным в том виде, как он есть. Тем не менее, это простой плагин, поэтому можно использовать его в качестве примера. Я думаю, что нужно будет создать веб-страницу с капчей. Как и в случае с плагином, используйте веб-просмотр, чтобы открыть страницу, затем запишите выходные данные формы и IP-адрес пользователя, отправившего форму, , используя что-то вроде , затем отправьте его на флаттер , а затем отправьте запрос с этой информацией и используйте библиотеку Google для проверки капчи.

Инструкции

Я только что завершил реализацию это и я нашел хороший способ, который работает. Сначала создайте страницу html, например: 

<html>
  <head>
    <title>reCAPTCHA</title>
    <script src="https://www.google.com/recaptcha/api.js" async defer></script>
  </head>
  <body style='background-color: aqua;'>
    <div style='height: 60px;'></div>
    <form action="?" method="POST">
      <div class="g-recaptcha" 
        data-sitekey="YOUR-SITE-KEY"
        data-callback="captchaCallback"></div>

    </form>
    <script>
      function captchaCallback(response){
        //console.log(response);
        if(typeof Captcha!=="undefined"){
          Captcha.postMessage(response);
        }
      }
    </script>
  </body>
</html>

Затем разместите ее в своем домене, например, example.com/captcha.

Затем создайте виджет для флаттера, например: это: 

import 'dart:async';

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

class Captcha extends StatefulWidget{
  Function callback;
  Captcha(this.callback);

  @override
  State<StatefulWidget> createState() {
    return CaptchaState();
  }

}
class CaptchaState extends State<Captcha>{
  WebViewController webViewController;
  @override
  initState(){
    super.initState();
  }


  @override
  Widget build(BuildContext context) {
    return Center(
      child: WebView(
        initialUrl: "https://example.com/captcha.html",
        javascriptMode: JavascriptMode.unrestricted,
        javascriptChannels: Set.from([
          JavascriptChannel(
            name: 'Captcha',
            onMessageReceived: (JavascriptMessage message) {
              //This is where you receive message from
              //javascript code and handle in Flutter/Dart
              //like here, the message is just being printed
              //in Run/LogCat window of android studio
              //print(message.message);
              widget.callback(message.message);
              Navigator.of(context).pop();
            })
        ]),
        onWebViewCreated: (WebViewController w) {
          webViewController = w;
        },
      )
    );
  }

}

Убедитесь, что вы зарегистрировались для ключа капчи на https://www.google.com/recaptcha (нажмите «Консоль администратора» в правом верхнем углу).

Затем , у вас есть встроенный интерфейс. Чтобы вызвать капчу, просто наберите: 

Navigator.of(context).push(
                  MaterialPageRoute(
                    builder: (context){
                      return Captcha((String code)=>print("Code returned: "+code));
                    }
                  ),
                );

Вы можете использовать любой обратный вызов, например: 

class GenericState extends State<Generic>{
void methodWithCaptcha(String captchaCode){
  // Do something with captchaCode
}

@override
  Widget build(BuildContext context) {
    return Center(child:FlatButton(
        child: Text("Click here!"),
        onPressed: (){
            Navigator.of(context).push(
                  MaterialPageRoute(
                    builder: (context){
                      return Captcha(methodWithCaptcha);
                    }
                  ),
                );
        }
  }
}

На стороне сервера, вы можете следовать инструкциям здесь (я следил за разделами «Прямая загрузка» и «Использование»). Я обнаружил, что для использования я мог просто использовать код: 

$recaptcha = new \ReCaptcha\ReCaptcha($secret);
$resp = $recaptcha->verify($gRecaptchaResponse, $remoteIp);
if ($resp->isSuccess()) {
    // Verified!
} else {
    $errors = $resp->getErrorCodes();
}

Использование setExpectedHostname, как в примере, было ненужным.

После этого все работает! Я думаю, что в настоящее время это лучший способ реализовать Google ReCaptcha V2 во флаттере (как для iOS, так и для Android).

...