Blank ReCaptcha Screen

[morluna]

Hey @fjcaetano, it seems like our app's sign up flow broke and users are reporting a blank screen when ReCaptcha is triggered. I saw that a PR was merged that seems to have fixed it: https://github.com/fjcaetano/ReCaptcha/pull/129

Any chance a release can be put up today? We need to submit to Apple asap. Thanks so much 🙏🏼

[fjcaetano]

I don't have an estimate of when this will be released as a new version. In the meantime, you should be able to update the lib with these changes by pointing to the commit dc2b4414e707fb55db7f075c1456f10fda43191c, currently at the head of the master branch. Let me know if that doesn't work.

I'll leave this issue open, in case anyone else stumble upon this issue while it isn't released.

[verreliocr]

my apps also having the same issue

[raju20212]

my apps also having the same issue

[eldesouky]

We are still sometimes having the issue even after pointing to the fix. Anyone else still has the issue post fix ?

[fjcaetano]

I don't have the capacity right now to work on this issue with the priority it deserves. PRs are more than welcome and I'll do my best to review and merge them as soon as I can.

[venupendota]

Replace the following code in ReCaptchaWebViewManager

lazy var webView: WKWebView = { let mainScreen = UIScreen.main.bounds let webview = WKWebView( frame: CGRect(x: 0, y: 0, width: mainScreen.width, height: mainScreen.height), configuration: self.buildConfiguration() ) webview.accessibilityIdentifier = "webview" webview.accessibilityTraits = UIAccessibilityTraits.link webview.isHidden = true return webview }()

Try this. It worked for me

[raju20212]

Hi,

When I click on button first time getting recaptcha executing at the same time when I click on second time didn't get any response .

How to resolve this ? anyone help me.

Thanks

[morluna]

It's fixed in master @fjcaetano, I think a release is just needed. Most development teams prefer to use an official release over pointing to a master branch to be safer.

[fjcaetano]

Just took a few moments to take a closer look at this. After checking out the master branch and thoroughly testing the example project, I cannot reproduce the intermittent issue and validation worked seamlessly every time.

It seems to me that the proposed fix of setting the webview's width and height the same values as the screen seems incorrect, since it now covers the whole content. On top of that, if the validation happens automatically, without the need of solving the captcha, the webview never gets removed.

I'd like to get a raise of hands here to assess if the code currently on the master branch is good enough for a release, or if there's more work needed. Could you please react to this message with the following emojis:

• 👎 - if you're still having issues pointing to dc2b441 on the master branch
• 🚀- if you're not seeing these intermittent issues and think master is worthy of a release

Thank you!

[beshich]

Good afternoon Same problem. White screen. This is due to the fact that the captcha content has become small for some reason. It is on the captcha screen, but takes the size from this code

lazy var webView: WKWebView = {
        let webview = WKWebView(
            frame: CGRect(x: 0, y: 0, width: 1, height: 1),
            configuration: self.buildConfiguration()
        )
        webview.accessibilityIdentifier = "webview"
        webview.accessibilityTraits = UIAccessibilityTraits.link
        webview.isHidden = true

        return webview
    }()

If you change width and height The captcha is displayed in the size we need and expands its content

Video:

https://github.com/fjcaetano/ReCaptcha/assets/106145589/4685ddef-42ac-40fc-b86c-a97626e783e8

[fjcaetano]

@beshich have you tried setting up the size that works for you using the configureWebView method?

[beshich]

@beshich have you tried setting up the size that works for you using the configureWebView method?

Yes, I have, in method configureWebView I set the dimensions, print the size in the debug, everything is correct.

recaptcha?.configureWebView { [weak self] webview in 
    webview.frame = self?.view.bounds ?? CGRect.zero 
}

The webview is stretched and appears on the screen properly, but the content itself with the captcha remains as small as in the video.

The solution that helps at the moment is to change the size of the webview inside ReCaptchaWebViewManager. I haven't found the reason for this behavior yet

[raju20212]

Hi,

When I click on first time on button am getting

[JS LOG]: executing and getting recaptcha string

At the same time when I press second time am getting like this

[JS LOG]: executing and didn't get string . please help me on this issue?

[raju20212]

Hi everyone,

recaptcha properly not working in iPad, recaptcha selectable left side only and right side not selectable.

please help me.

[Lipe1994]

Hello everyone, good evening!

I performed a 'git clone' on this project's master branch and noticed there's a fix for the white screen issue in the HTML file, specifically in this section:

<style>
  .g-recaptcha div {
    width: 100% !important;
    height: 100% !important;
  }
</style>
</head>
<body id="body" class="g-recaptcha">

This code forces the Recaptcha iframe to resize along with the WebView.

I also have an alternative solution for those who can't directly pull from the master branch. You can add the following JavaScript at the plugin's startup (for version 1.6.0):

     self.recaptcha!.configureWebView { [weak self] webview in
        let size = self!.webViewContainer!.frame;
        webview.frame = size
        webview.tag = 10
        webview.isOpaque = false;
        webview.backgroundColor = UIColor.clear
          
          webview.evaluateJavaScript(
    """
document.body.background = 'none';

var iframe = document.getElementsByTagName("iframe")[2];

iframe.style.display = 'block';
iframe.style.margin = '0 auto';
iframe.style.background = 'none';
iframe.style.border = '1px solid rgb(204, 204, 204)';

iframe.parentElement.style.width = '100%';
iframe.parentElement.style.height = '100%';
iframe.parentElement.style.background = 'none';
iframe.parentElement.style.border = 'none';
    """);
} 

[AmerigoM]

I am facing this exact same issue on version 1.5.0. The weird thing is that the library suddenly stopped working some weeks ago and showing a blank page exactly like @beshich shown in his video, while it was working fine before. Has anyone any idea why that happened?

[Lipe1994]

@AmerigoM , can be something in Iframe of recaptcha. try put this in your code...

js code in method evaluateJavaScript, it will try adjust html dynamically

     self.recaptcha!.configureWebView { [weak self] webview in
        let size = self!.webViewContainer!.frame;
        webview.frame = size
        webview.tag = 10
        webview.isOpaque = false;
        webview.backgroundColor = UIColor.clear
          
          webview.evaluateJavaScript(
    """
document.body.background = 'none';

var iframe = document.getElementsByTagName("iframe")[2];

iframe.style.display = 'block';
iframe.style.margin = '0 auto';
iframe.style.background = 'none';
iframe.style.border = '1px solid rgb(204, 204, 204)';

iframe.parentElement.style.width = '100%';
iframe.parentElement.style.height = '100%';
iframe.parentElement.style.background = 'none';
iframe.parentElement.style.border = 'none';
    """);
} 

[AmerigoM]

@Lipe1994 this was helpful and fixed the issue. Thanks.

[beshich]

If you don’t want to wait for changes to be uploaded to the main branch on iOS, you can specify the master branch in the podfile.

pod 'ReCaptcha', :git => 'https://github.com/fjcaetano/ReCaptcha.git', :branch => 'master'

Will work properly