Create simple POS with React, Node and MongoDB #5: Setup ReCaptcha and define CORS

栏目: IT技术 · 发布时间: 4年前

内容简介:Previous article:For the Frontend, we will use ReCaptcha protected form;For backend, we will define CORS, which will be receiving requests only from the Frontend.
Create simple POS with React, Node and MongoDB #5: Setup ReCaptcha and define CORS

Setup ReCaptcha and define CORS

Previous article: Optimize App and Setup Deployment Workflow .

For the Frontend, we will use ReCaptcha protected form;

For backend, we will define CORS, which will be receiving requests only from the Frontend.

Setup ReCaptcha protected frontend

Step one:We will get Recaptcha key from Google

Create simple POS with React, Node and MongoDB #5: Setup ReCaptcha and define CORS

Google Recaptcha setting domain page

Step two:Add our whitelist domain, then choose localhost and Netlify, then grab Recaptcha key, and finally, set up on Netlify first

Create simple POS with React, Node and MongoDB #5: Setup ReCaptcha and define CORS

Google Recaptcha api key

Step three:Setting up on Netlify. Go to Netlify dashboard and setup Recaptcha Key as an environment variable

Create simple POS with React, Node and MongoDB #5: Setup ReCaptcha and define CORS

Netlify deploy setting page

Step four:Now come back to local and install React Captcha package

npm install react-recaptcha

Step five: Next step is to import Recaptcha

import Recaptcha from "react-recaptcha";

Step six:Add validation rule name Recaptcha as required

const LoginSchema = Yup.object().shape({
   username: Yup.string()
                .min(2, "username is Too Short!")
                .max(50, "username is Too Long!")
                .required("Username is Required"),
            recaptcha: Yup.string().required(),
            password: Yup.string().required("Password is required")
   });

Step seven:We will create a function for initializing Recaptcha

initilizeRecaptcha = async => {
    const script = document.createElement("script");
    script.src = "https://www.google.com/recaptcha/api.js";
    script.async = true;
    script.defer = true;
    document.body.appendChild(script);
  };
  componentDidMount() {
    this.initilizeRecaptcha();
}

Last step:Add <Recaptcha> component and a validation message

<div className="form-group">
          <label>Recaptcha Validation</label>
          <Recaptcha
            sitekey={process.env.REACT_APP_RECAPCHA_KEY}
            render="explicit"
            theme="light"
            verifyCallback={response => {
              setFieldValue("recaptcha", response);
            }}
            onloadCallback={() => {
              console.log("done loading!");
            }}
          />
     {errors.recaptcha && touched.recaptcha && <p>{errors.recaptcha}</p>}
 </div>

Your final result should look like the image below

Create simple POS with React, Node and MongoDB #5: Setup ReCaptcha and define CORS

add ReCaptcha to login page

One more step:We’ll be adding register and forgot password form

Create simple POS with React, Node and MongoDB #5: Setup ReCaptcha and define CORS

add ReCaptcha to register page

Create simple POS with React, Node and MongoDB #5: Setup ReCaptcha and define CORS

add ReCaptcha to login page

You will be able to fill all input, but can’t submit without resolving the Recaptcha

Create simple POS with React, Node and MongoDB #5: Setup ReCaptcha and define CORS

ReCaptcha require validation

The last thing is to push to GitHub which will also auto-deploy to Netlify

Setup CORS protected backend

Now we want to add whitelist IP or domain name to CORS option, open index.js on backend side then update CORS as seen in the image below;

var allowedOrigins = ['http://localhost:3000',
                      'https://basicpos.netlify.com/'];
app.use(cors({
  origin: function(origin, callback){
    // allow requests with no origin 
    // (like mobile apps or curl requests)
    if(!origin) return callback(null, true);
    if(allowedOrigins.indexOf(origin) === -1){
      var msg = 'The CORS policy for this site does not ' +
                'allow access from the specified Origin.';
      return res.json({status:'error',msg});
    }
    return callback(null, true);
  }
}));

If an error occurs, try changing to another domain

Create simple POS with React, Node and MongoDB #5: Setup ReCaptcha and define CORS

CORS error result

Now push the updated code to Github. Finally, we can now protect our backend from unknown request

Conclusion

In this chapter, we have learned how to make our apps safe on the internet by setting up Recaptcha on React and CORS on Express. next chapter we will add redux that make our app are solid foundation one last thing your will find code for this chapter on this backend branch and frontend branch

Previous lessons:


以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

Java Concurrency in Practice

Java Concurrency in Practice

Brian Goetz、Tim Peierls、Joshua Bloch、Joseph Bowbeer、David Holmes、Doug Lea / Addison-Wesley Professional / 2006-5-19 / USD 59.99

This book covers: Basic concepts of concurrency and thread safety Techniques for building and composing thread-safe classes Using the concurrency building blocks in java.util.concurrent Pe......一起来看看 《Java Concurrency in Practice》 这本书的介绍吧!

RGB转16进制工具
RGB转16进制工具

RGB HEX 互转工具

MD5 加密
MD5 加密

MD5 加密工具

XML 在线格式化
XML 在线格式化

在线 XML 格式化压缩工具