react 验证身份证

TL;DR: Security can't be overemphasized when it comes to developing software applications. A single authentication factor system (e.g username and password) is no longer safe enough. If credentials are stolen, a user can be impersonated. Implementing a multi-factor authentication system increases security by requiring the user to provide an additional sets of credentials before they are granted access.

TL; DR：在开发软件应用程序时，不能过分强调安全性。 单一身份验证因子系统（例如用户名和密码）已不再足够安全。 如果凭据被盗，则可以模拟用户。 实施多因素身份验证系统可通过要求用户在授予其访问权限之前提供其他凭据集来提高安全性。

Implementing multi-factor authentication can be time-consuming, challenging, and often difficult to get right. However, in this post I'll show you how to quickly implement multi-factor authentication in your React applications in just a few minutes without breaking a sweat!

实施多因素身份验证可能很耗时，具有挑战性，并且通常很难正确解决。 但是，在本文中，我将向您展示如何在短短几分钟内快速在您的React应用程序中实现多因素身份验证！

Note: You need to have a fair knowledge of React to get the most out of this tutorial.

注意：您需要对React有一定的了解才能充分利用本教程。

1. Step Up a React Application

1.加强一个React应用程序

It's very easy to set up a react application these days, all thanks to Facebook's infamous tool. If you haven't installed it yet, do so, else go ahead and create a new react app like so:

这些天来，建立一个React应用程序非常容易，这都要归功于Facebook臭名昭著的工具。 如果尚未安装，请进行安装，否则继续创建新的react应用，如下所示：

Create React App

创建React应用

2. Install the following dependencies

2.安装以下依赖项

There are some modules we'll need in the later part of this tutorial. Let's install them now. Open up your terminal and run this command like so:

在本教程的后面部分中，我们将需要一些模块。 现在安装它们。 打开您的终端并按以下方式运行此命令：

npm install auth0-lock bootstrap classnames jwt-decode react-bootstrap react-router --save

auth0-lock -- To adding Auth0 Lock widget for easy authentication

auth0-lock-添加Auth0 Lock小部件以简化身份验证

bootstrap -- To beautify our interface

bootstrap-美化我们的界面

classnames - For joining class names together

类名 -用于将类名连接在一起

jwt-decode -- To decode our JSON Web token

jwt-decode-解码我们的JSON Web令牌

react-bootstrap - Bootstrap for React

react-bootstrap -React的Bootstrap

react-router -- For routing

react-router-用于路由

3. Set Up Authentication Components, Routing and Styling

3.设置身份验证组件，路由和样式

There are several ways to set up authentication in a React app but we'll choose a service that does the heavy lifting for us. With , you can easily set up authentication in your React apps.

有几种方法可以在React应用程序中设置身份验证，但我们将选择一项对我们来说很繁重的服务。 使用 ，您可以轻松在React应用程序中设置身份验证。

Open up your src/ directory and delete everything inside except the index.js file. Now, replace the code in the index.js file with the following:

打开您的src /目录，并删除除index.js文件之外的所有内容。 现在，用以下代码替换index.js文件中的代码：

index.js

index.js

import React from 'react';import ReactDOM from 'react-dom';import App from './containers/App/App';import './app.css';import 'bootstrap/dist/css/bootstrap.css'import {
    hashHistory} from 'react-router';import makeRoutes from './routes';const routes = makeRoutes()ReactDOM.render(  
    ,  document.getElementById('root'));

Go ahead and create a routes.js and app.css file inside the src/ directory. Add code to the files respectively like so:

继续并在src /目录中创建一个route.js和app.css文件。 分别向文件添加代码，如下所示：

routes.js

routes.js

import React from 'react'import {
     Route } from 'react-router'import makeMainRoutes from './views/Main/routes'export const makeRoutes = () => {
      const main = makeMainRoutes();  return (    
    
           {
    main}    
      )}export default makeRoutes

app.css

app.css

@import url("styles/colors.css");*,*:after,*:before {
         box-sizing: border-box;    -webkit-font-smoothing: antialiased;    -moz-osx-font-smoothing: grayscale;    font-smoothing: antialiased;    text-rendering: optimizeLegibility;    font-size: 16px;}body {
       color: var(--dark);  font-weight: lighter;  font: 400 15px/22px 'Open Sans', 'Helvetica Neue', Sans-serif;  font-smoothing: antialiased;  padding: 0;  margin: 0;}

For brevity, head over to and copy the containers, styles, utils , views directory and its contents into your app. With this, we should have an almost-ready authentication app.

为简便起见，转到并将容器 ， styles ， utils ， views目录及其内容复制到您的应用程序中。 有了这个，我们应该有一个准备就绪的身份验证应用程序。

4. Set Up Authentication

4.设置身份验证

We have an Authentication helper class, src/utils/AuthService.js that encapsulates the login functionality and a JWT helper file, src/utils/jwtHelper.js that checks for the validity of JSON Web tokens in our app.

我们有一个身份验证帮助程序类src / utils / AuthService.js封装了登录功能，还有一个JWT帮助程序文件src / utils / jwtHelper.js来检查应用程序中JSON Web令牌的有效性。

Now, open up src/views/Main/routes.js. In this file, we have a line like so:

现在，打开src / views / Main / routes.js 。 在此文件中，我们有这样一行：

....const auth = new AuthService(_AUTH0_CLIENT_ID_,  _AUTH0_DOMAIN_);

We need to replace the AUTH0CLIENT_ID_ and *AUTH0DOMAIN_ *with real values. If you don't have an account with , go ahead to the for a free account to continue. Then create a new client app and go to the settings tab to grab the keys like so:

我们需要用真实值替换AUTH0 CLIENT_ID_和* AUTH0 DOMAIN_ * 。 如果您没有帐户，请继续免费帐户以继续。 然后创建一个新的客户端应用程序，然后转到“设置”标签以按如下方式获取密钥：

Auth0 Credentials

Auth0凭证

Now, run npm start, your welcome page should look like this:

现在，运行npm start ，您的欢迎页面应如下所示：

5. Set up Multifactor Authentication

5.设置多因素身份验证

With Auth0, it is very easy to set up multi-factor authentication. On your Auth0 dashboard, click on the** Multifactor Auth** tab on the left. You'll get a page like this below:

使用Auth0，可以轻松设置多因素身份验证。 在您的Auth0信息中心上，点击左侧的** Multifactor Auth **标签。 您会在下面看到这样的页面：

You can choose what form of multi-factor authentication you want. In this tutorial, we'll go with push notification. So go ahead and turn that on by sliding the knob to the right.

您可以选择所需的多因素身份验证形式。 在本教程中，我们将使用推送通知 。 因此，继续前进，然后向右滑动旋钮将其打开。

After you have done that, run the application again and try to sign up. From clicking on the login button and signing up, we'll have:

完成之后，再次运行该应用程序并尝试注册。 通过单击登录按钮并进行注册，我们将具有：

Sign Up

注册

2nd Factor Authentication Interface

第二因素认证界面

Here, there is the option to download the Auth0 Guardian app from either the or from . Underneath that, there is the option to use or depending on the application's settings.

在这里，可以选择从或下载Auth0 Guardian应用 。 在此之下，可以根据应用程序的设置选择使用或 。

Let's go with Auth0 Guardian. Once you have downloaded that, the next screen brings out a code that you need to scan with the app like so:

让我们一起来看看Auth0 Guardian 。 下载完后，下一个屏幕将显示您需要使用应用程序扫描的代码，如下所示：

The user will have to open up the Auth0 Guardian app on the mobile device like so:

用户将必须在移动设备上打开Auth0 Guardian应用，如下所示：

*Note: * I'm using an IPhone

* 注意：*我正在使用iPhone

Opening Auth0 Guardian

开启Auth0守护者

The user will have to scan the QR code. Immediately it scans, the next screen is presented like so:

用户将必须扫描QR码。 立即扫描，显示下一个屏幕，如下所示：

Save the number. It's useful when you need to login and you don't have your device with you! Proceed by checking the box like so:

保存号码。 当您需要登录并且没有设备时，此功能非常有用！ 选中复选框，如下所示：

Continue, the next screen that is presented is this below:

继续，显示的下一个屏幕如下：

Click on continue.

单击继续。

You'll receive a notification on your phone like the one below:

您会在手机上收到如下通知：

You can allow or deny the request from the homescreen as shown below:

您可以从主屏幕允许或拒绝该请求，如下所示：

Or you can open your phone, you'll see the request as shown below:

或者您可以打开手机，您将看到如下所示的请求：

Clicking on the request quickly brings out a screen that gives you the option to allow the request with some information about the incoming login request too. Pretty slick right?

快速单击请求会弹出一个屏幕，您可以在其中选择允许请求，同时提供有关传入登录请求的一些信息。 很漂亮吧？

Once you allow the request, the web application gets notified that you have accepted the request and proceeds to login like so:

允许请求后，Web应用程序将收到通知，通知您您已接受请求并继续登录，如下所示：

The user has been finally logged in

用户终于登录了

Multi-factor authentication with Auth0 Guardian is really that simple. No complications, no hassle!

使用Auth0 Guardian进行多因素身份验证非常简单。 没有并发症，没有麻烦！

The code for this application is available on . Check it out!

上提供了此应用程序的代码。 看看这个！

Conclusion

结论

Holy Molly! We have been able to integrate multi-factor authentication into a React application within just a few minutes. The awesome goodness about multi-factor authentication with Auth0 is that there are lots of configuration options available to you as a or an .

莫莉！ 我们能够在短短几分钟内将多因素身份验证集成到React应用程序中。 使用Auth0进行多因素身份验证的出色之处在于，您可以以或身份使用许多配置选项。

There is no whining about this. Go forth and make your applications a massive stronghold by adding second factor authentication to your apps today!

对此没有抱怨。 继续，今天就向您的应用程序添加二次身份验证，使您的应用程序成为强大的堡垒！

翻译自:

react 验证身份证