显示React Recaptcha

编程问答 2022-06-08

问题描述

我有这段代码，我想隐藏Recaptcha， 怎么做，我的Recaptcha用右下角的图标显示一般状况。 我需要清洁recaptcha吗？ <div ref={recaptchaWrapperRef}> <div id="recaptcha-container"></div> </div>

我不会显示此图标，即recaptcha徽标。我需要它 制作2FA验证短信+电子邮件。它应该工作 没有显示一些元素，或者我有问题 这个div？

import { Button } from '@material-ui/core'
import React,{ useEffect,useRef } from 'react'
import { auth,provider } from '../firebase/firebase'
import useDeviceDetect from '../utils/useDeviceDetect'
import './Login.scss'

declare global {
    interface Window { recaptchaVerifier: any; }
}

function Login(props: any) {
    const val = useRef()
    const recaptchaWrapperRef = useRef(null);

    useEffect(() => {
        initialiseRecaptcha()
    },[])
    const { isMobile } = useDeviceDetect();

    const initialiseRecaptcha = () => {
        setTimeout(() => {
            if (!window['recaptchaVerifier']) {
                window['recaptchaVerifier'] = new auth.RecaptchaVerifier(
                    "recaptcha-container",{
                        'size': "invisible"
                    }
                );
            }
        },2000)
    }

    const TwoFactorAuthentication = (e: React.MouseEvent<HTMLButtonElement,MouseEvent>) => {
        smsverification()
        signIn(e)
    }

    const signIn = (e: React.MouseEvent<HTMLButtonElement,MouseEvent>) => {
        e.preventDefault()
        auth().signInWithPopup(provider)
            .then(result => {
                localStorage.setItem('user',JSON.stringify(result.user));
                window.location.href = '/'
            }).catch(error => {

                alert(error.message)
            })
    }

    const smsverification = () => {
        if (window['recaptchaVerifier'] != null) {
            new auth.PhoneAuthProvider().verifyPhoneNumber("+421944777170",window['recaptchaVerifier'])
                .then(function (verificationId) {
                    var verificationCode = window.prompt('Please enter the verification code' +
                        ',that was sent on mobile device')
                    if (verificationCode != null) {
                        return auth.PhoneAuthProvider.credential(verificationId,verificationCode)
                    }

                })
                .then(function (phoneCredential) {
                    if (phoneCredential != null) {
                        console.log(phoneCredential)
                        return auth().signInWithCredential(phoneCredential)
                    }

                })
                .catch(function (error) {
                })
        }
    }

    return (<>
        <div className="login">
            <div className="login__logo">
                <img
                    src="https://i.pinimg.com/originals/c6/f2/cd/c6f2cd5e0ebf33ff1ae0b01d0407224c.png"
                    alt="" />

                <img
                    src="https://svgshare.com/i/PTv.svg"
                    alt="" />
            </div>

            <Button id="sign-in-button" type="submit" onClick={TwoFactorAuthentication}>
                Signin
            </Button>
            <div ref={recaptchaWrapperRef}>
                <div id="recaptcha-container"></div>
            </div>
        </div>
    </>
    )
}

export default Login

    const hiddenGRecaptcha = () => {
        var head = document.getElementsByClassName('grecaptcha-badge')[0] as HTMLElement
        if (head !== undefined) {
            head.style.visibility = "hidden"
            console.log(head)
        }
    }

编辑： 我发现我需要设置可见性：隐藏在grecaptcha div的CSS中，但是它始终会重新渲染并禁用我的设置。

{{1}}

这是我在打字稿中的新功能，用于隐藏Recaptcha徽章，但CSS始终被覆盖，不知道将其放置在哪里或如何使其持久。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

reactjsreactjsreactjsreactjsrecaptcharecaptcha