Adicionar recaptcha ao login

Author: gabrielfaro97

package.json

@@ -79,8 +79,10 @@
     "moment": "2.24.0",
     "platform": "1.3.5",
     "react-custom-scrollbars": "4.2.1",
+    "react-google-recaptcha-v3": "1.9.4",
     "react-helmet-async": "1.0.3",
     "react-i18nify": "1.11.18",
+    "react-recaptcha-v3": "2.0.1",
     "react-text-mask": "5.4.3",
     "text-mask-addons": "3.8.0"
   }

src/app/App/index.js

@@ -37,6 +37,7 @@ class App extends Foundation {
     ssoError: false
   }
   componentDidMount() {
+    
     if (this.props.multitenant) {
       RealmStore.fetch().then(realms => {
         const hostname = window.location.hostname
@@ -84,6 +85,7 @@ class App extends Foundation {
     RealmStore.menuBackground = this.props.menuBackground
     AppStore.menuFixed = !!this.props.menuFixed
     AppStore.startExpanded = !!this.props.startExpanded
+    
   }
 
   resolveCurrent = () => {

src/app/Login/index.js

@@ -23,6 +23,10 @@ import ConfirmPhone from './ConfirmPhone'
 import ConfirmEmail from './ConfirmEmail'
 import PasswordRule from './PasswordRule'
 import cs from 'classnames'
+// import { loadReCaptcha } from 'react-recaptcha-v3'
+import { ReCaptcha } from 'react-recaptcha-v3'
+import { loadReCaptcha } from 'react-recaptcha-v3'
+
 
 const styles = theme => ({
   root: {
@@ -237,6 +241,10 @@ const styles = theme => ({
   },
   icon: {
     height: 90
+  },
+  centered: {
+    margin: 'auto',
+    marginTop: '20px',
   }
 })
 export default
@@ -275,10 +283,23 @@ class Login extends React.Component {
     newUser: false,
     allowSendEmail: true,
     userInconsistent: false,
-    noTestify: false
+    noTestify: false,
+    recaptchaSate: ''
+  }
+
+  componentDidMount() {    
+    loadReCaptcha(process.env.REACT_APP_RECAPTCHA_SITE_KEY)
   }
 
-  componentDidMount() { }
+   verifyCallback = (recaptchaToken) => {
+     if(recaptchaToken){
+       this.setState({recaptchaSate: recaptchaToken})    
+     }    
+  }
+
+  updateToken = () => {    
+    this.recaptcha.execute();
+  }
 
   login = e => {
     UserStore.error = null
@@ -314,16 +335,20 @@ class Login extends React.Component {
   }
 
   check = e => {
-    UserStore.error = null
-    UserStore.check(this.props.loginType === 'cpf' ? this.state.username.replace(/\./g, '').replace(/-/g, '') : this.state.username).then(result => {
-      if (result) {
+    UserStore.error = null    
+    UserStore.check(this.props.loginType === 'cpf' ? this.state.username.replace(/\./g, '').replace(/-/g, '') : this.state.username, this.state.recaptchaSate).then(result => {
+      if (result) {        
         AppStore.setEmail(result.email)
-        if (result.code === 1) {
+        if (result.code === 6) {
+          // Invalid recaptcha response
+          this.setState({error: 'Por favor, tente novamente.'}, this.updateToken())          
+        } else if (result.code === 1) {
           // Common valid user
           this.go('PasswordPage')
         } else if (result.code === 2 || result.code === 3) {
           // User invalid
           if (AppStore.email || RealmStore.confirmationMethod === 'CPF' || RealmStore.confirmationMethod === 'DISABLED') {
+            console.log(result)
             this.go('FirstLoginPage')
             this.setState({ requireValidationKey: result.code === 3 }, () => this.go('FirstLoginPage'))
           } else {
@@ -428,8 +453,7 @@ class Login extends React.Component {
       }
     )
   }
-
-  resolveSubmit = e => {
+  resolveSubmit = e => {    
     switch (this.state.page) {
       default:
         return this.handleSubmitLoginPage
@@ -454,10 +478,11 @@ class Login extends React.Component {
     }
   }
 
-  handleSubmitLoginPage = e => {
-    e.preventDefault()
-    if (this.state.usernameValid) {
-      this.check()
+  handleSubmitLoginPage = e => {    
+    e.preventDefault()    
+    if (this.state.usernameValid) {      
+      this.setState({ error: false }, this.check())
+      
     } else {
       this.setState({ error: true })
     }
@@ -570,7 +595,8 @@ class Login extends React.Component {
       privacy,
       userInconsistent,
       newUser,
-      noTestify
+      noTestify,
+      recaptchaSate
     } = this.state
     const { full, bottom } = RealmStore.logos || {}
 
@@ -594,13 +620,19 @@ class Login extends React.Component {
       return <PageLoading />
     }
 
-    let mainTenant = UserStore.realm === 'incentiveme'
+    let mainTenant = UserStore.realm === 'incentiveme'    
 
     return (
-      <Background>
+      <Background>         
         <div className={classes.root}>
           <Card className={classes.card}>
-            <form className={classes.flex} onSubmit={this.resolveSubmit()} noValidate>
+            <form className={classes.flex} onSubmit={this.resolveSubmit()} noValidate>       
+            <ReCaptcha
+              ref={ref => this.recaptcha = ref}
+              sitekey={process.env.REACT_APP_RECAPTCHA_SITE_KEY}
+              action='submit'
+              verifyCallback={this.verifyCallback}
+            />     
               <LinearLayout visible={!UserStore.busy() || !!UserStore.error} flex={1}>
                 {full ? (
                   <div className={cs(classes.logoContainer, AppStore.device.hasNotch ? classes.logoContainerIos : classes.logoContainerDefault)}>
@@ -611,6 +643,7 @@ class Login extends React.Component {
                   )}
                 {!UserStore.logged || UserStore.logged.enabled ? (
                   <div className={classes.formWrapper}>
+
                     {(() => {
                       switch (page) {
                         default:
@@ -767,9 +800,14 @@ class Login extends React.Component {
                       </React.Fragment>
                     )}
                     {page !== 'ConfirmEmailPage' && page !== 'ConfirmPhonePage' && page !== 'AdminLogin' ? (
-                      <Button id="sign-in-button" className={classes.button} type="submit" color="secondary" variant="contained" fullWidth>
-                        Continuar
-                      </Button>
+                      recaptchaSate === '' ?
+                      <div className={classes.centered}>
+                        <CircularProgress /> 
+                      </div>                  
+                        : 
+                        <Button id="sign-in-button" className={classes.button} type="submit" color="secondary" variant="contained" fullWidth>
+                          Continuar
+                        </Button>                      
                     ) : null}
 
                     {/*page === 'LoginPage' && (
@@ -834,7 +872,7 @@ class Login extends React.Component {
                         ) : (
                             <span>{AppStore.messages.userBlockedWithoutEmail}</span>
                           )}
-                      </div>
+                      </div>                      
                       <Button className={classes.button} onClick={this.logout} color="secondary" variant="contained" fullWidth>
                         Continuar
                     </Button>

src/stores/UserStore.js

@@ -127,10 +127,11 @@ class Users extends Collection {
       email,
     })
 
-  check = username =>
+  check = (username, recaptchaToken) =>
     this.rpc('check', {
       realm: this.realm,
       username,
+      recaptchaToken
     })
 
   sendVerification = () => this.rpc('send-verification')

yarn.lock

@@ -3591,6 +3591,13 @@ highlight.js@^9.15.5:
   resolved "https://registry.yarnpkg.com/highlight.js/-/highlight.js-9.15.6.tgz#72d4d8d779ec066af9a17cb14360c3def0aa57c4"
   integrity sha512-zozTAWM1D6sozHo8kqhfYgsac+B+q0PmsjXeyDrYIHHcBN0zTVT66+s2GW1GZv7DbyaROdLXKdabwS/WqPyIdQ==
 
+hoist-non-react-statics@3.3.2:
+  version "3.3.2"
+  resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz#ece0acaf71d62c2969c2ec59feff42a4b1a85b45"
+  integrity sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==
+  dependencies:
+    react-is "^16.7.0"
+
 hosted-git-info@^2.1.4:
   version "2.7.1"
   resolved "https://registry.yarnpkg.com/hosted-git-info/-/hosted-git-info-2.7.1.tgz#97f236977bd6e125408930ff6de3eec6281ec047"
@@ -6194,6 +6201,13 @@ react-fast-compare@2.0.4:
   resolved "https://registry.yarnpkg.com/react-fast-compare/-/react-fast-compare-2.0.4.tgz#e84b4d455b0fec113e0402c329352715196f81f9"
   integrity sha512-suNP+J1VU1MWFKcyt7RtjiSWUjvidmQSlqu+eHslq+342xCbGTYmC0mEhPCOHxlW0CywylOC1u2DFAT+bv4dBw==
 
+react-google-recaptcha-v3@1.9.4:
+  version "1.9.4"
+  resolved "https://registry.yarnpkg.com/react-google-recaptcha-v3/-/react-google-recaptcha-v3-1.9.4.tgz#9121d8cda048ae6f6014d198c3f7f39d3295ea90"
+  integrity sha512-WfDzE6WxhM6N2hEGUvPsRPvnxE/fLLEER4g8GAdqExW+MI7MCEjDIpsVkQtNvYo6H2/XRvUjcHStEp9sk0trVg==
+  dependencies:
+    hoist-non-react-statics "3.3.2"
+
 react-helmet-async@1.0.3:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/react-helmet-async/-/react-helmet-async-1.0.3.tgz#68a176dd266c2caf63762879c573a866b89a2098"
@@ -6214,7 +6228,7 @@ react-i18nify@1.11.18:
     moment "^2.22.1"
     prop-types "^15.6.1"
 
-react-is@^16.8.0:
+react-is@^16.7.0, react-is@^16.8.0:
   version "16.13.1"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
   integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
@@ -6224,6 +6238,11 @@ react-is@^16.8.1, react-is@^16.8.4:
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.8.6.tgz#5bbc1e2d29141c9fbdfed456343fe2bc430a6a16"
   integrity sha512-aUk3bHfZ2bRSVFFbbeVS4i+lNPZr3/WM5jT2J5omUVV1zzcs1nAaf3l51ctA5FFvCRbhrH0bdAsRRQddFJZPtA==
 
+react-recaptcha-v3@2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/react-recaptcha-v3/-/react-recaptcha-v3-2.0.1.tgz#b8dd391e9e36785f250d5e01aad235dd2fea2285"
+  integrity sha512-ZQ+auotgu+E/6YAbPqk53sf9xgcp8TFvVVfL4bVR7PXj98nQmdaONugdLJEA7g1iTZ4yQqC4mZbcVUGZmwb25Q==
+
 react-text-mask@5.4.3:
   version "5.4.3"
   resolved "https://registry.yarnpkg.com/react-text-mask/-/react-text-mask-5.4.3.tgz#991efb4299e30c2e6c2c46d13f617169463e0d2d"