当前位置：首页 > news >正文

建设部网人事考试网站/网页设计软件

news 2025/7/17 22:33:30

建设部网人事考试网站,网页设计软件,网站专题建设,杭州市住房和城乡建设部网站react 身份证校验校验本文最初出现在OKTA博客上。感谢您支持使SitePoint成为可能的合作伙伴。根据JAXenter的说法， React已Swift成为最受欢迎的前端Web框架之一，并且仅次于普通的旧HTML5。因此， 开发人员正在学习它 ，而雇主正…

react 身份证校验校验

本文最初出现在OKTA博客上。 感谢您支持使SitePoint成为可能的合作伙伴。

根据JAXenter的说法， React已Swift成为最受欢迎的前端Web框架之一，并且仅次于普通的旧HTML5。因此，开发人员正在学习它，而雇主正在要求它也就不足为奇了。

在本教程中，您将从一个非常简单的React应用程序开始，该应用程序具有几个页面和内置的一些路由，并使用Okta的Sign-In Widget添加身份验证。 Sign-In Widget是一个可嵌入的Javascript Widget，它使开发人员可以在React应用程序中以最小的努力使用Okta的安全，可扩展的体系结构。让我们开始吧！

获取简单的React Seed项目

首先克隆简单的React Seed项目。

git clone https://github.com/leebrandt/simple-react-seed.git okta-react-widget-sample
cd okta-react-widget-sample

添加Okta登录小部件

使用npm安装Okta登录小部件。

npm install @okta/okta-signin-widget@2.3.0 --save

这会将Okta登录小部件代码添加到您的node_modules文件夹中。我们将使用2.3.0版的“登录小部件”。

Okta在node_modules中

然后从Okta CDN在index.html文件中添加小部件的样式。将这些行添加到<head>标记内：

<link
href="https://ok1static.oktacdn.com/assets/js/sdk/okta-signin-widget/2.3.0/css/okta-sign-in.min.css"
type="text/css"
rel="stylesheet"/>
<!-- Theme file: Customize or replace this file if you want to override our default styles -->
<link
href="https://ok1static.oktacdn.com/assets/js/sdk/okta-signin-widget/2.3.0/css/okta-theme.css"
type="text/css"
rel="stylesheet"/>

LoginPage组件

首先，在./src/components文件夹中创建一个名为auth的文件夹，然后在LoginPage组件所在的位置创建一个名为LoginPage.js的文件。

从最基本的组件开始：

import React from 'react';
export default class LoginPage extends React.Component{
render(){
return(
<div>Login Page</div>
);
}
}

这个小组件并没有做什么用，但是至少您现在有了一个将LoginPage添加到路由中的句柄。因此，在./src/app.js文件中，您将在顶部导入组件：

import LoginPage from './components/auth/LoginPage';

然后将路径添加到主路径（路径为“ /”的路径）内

<Route path="/login" component={LoginPage}/>

在Okta中添加OpenID Connect应用程序

为了使用Okta作为OpenID Connect提供程序进行身份验证，您需要在Okta开发人员控制台中设置一个应用程序。

如果您没有Okta开发者帐户，请创建一个！登录后，单击顶部导航栏中的“ 应用程序 ”，然后单击“ 添加应用程序” 。选择SPA作为平台，然后单击Next。将重定向URI更改为http://localhost:3000 ，然后单击“完成”。将使用以下设置创建该应用程序：

OIDC应用程序设置

现在，您已经在Okta中创建了一个应用程序，您可以设置该小部件以与您的新应用程序对话！

将小部件添加到您的组件

import React from 'react';
import OktaSignIn from '@okta/okta-signin-widget';
export default class LoginPage extends React.Component{
constructor(){
super();
this.widget = new OktaSignIn({
baseUrl: 'https://{oktaOrgUrl}',
clientId: '{clientId}',
redirectUri: 'http://localhost:3000',
authParams: {
responseType: 'id_token'
}
});
}
render(){
return(
<div>Login Page</div>
);
}
}

复制从应用程序的设置页面生成的客户端ID，并将其粘贴到{clientId} 。确保您还用Okta组织URL替换了{oktaOrgUrl} ，可以通过返回开发者控制台中的“仪表板”主页面找到该URL。通常情况如下： https://dev-12345.oktapreview.com : https://dev-12345.oktapreview.com 。

到目前为止，您已经从之前安装的Okta登录小部件 npm模块导入了OktaSignIn函数。接下来，在组件的构造函数中，使用应用程序的配置初始化OktaSignIn的实例。这样，应用程序代码将能够与Okta对话，并且Okta将识别出这是您刚刚创建的应用程序。

显示登录小部件

接下来，您将创建代码以将Sign-In Widget实际呈现到页面！您需要更改render方法，以创建可将小部件呈现到HTML元素。确保获得对将要呈现的元素的引用。然后，添加一个componentDidMount函数，以确保您不会在HTML元素出现在页面上之前尝试呈现窗口小部件。

import React from 'react';
import OktaSignIn from '@okta/okta-signin-widget';
export default class LoginPage extends React.Component{
constructor(){
super();
this.state = {user:null};
this.widget = new OktaSignIn({
baseUrl: 'https://{oktaOrgUrl}',
clientId: '{clientId}',
redirectUri: 'http://localhost:3000',
authParams: {
responseType: 'id_token'
}
});
}
componentDidMount(){
this.widget.renderEl({el:this.loginContainer},
(response) => {
this.setState({user: response.claims.email});
},
(err) => {
console.log(err);
}
);
}
render(){
return(
<div ref={(div) => {this.loginContainer = div; }} />
);
}
}

免费学习PHP！

全面介绍PHP和MySQL，从而实现服务器端编程的飞跃。

~~原价$ 11.95~~ 您的完全免费

您还向组件添加了状态。如果您使用的是流量实现，则自然会来自应用程序状态。但是，为了使本教程简单LoginPage ，请让您的LoginPage跟踪其自身的状态。

检查用户是否登录

我们快到了，但是您不一定要立即渲染小部件。您需要添加检查以确保用户尚未登录，然后将renderEl移到名为showLogin的函数中。

// ...other stuff removed for brevity's sake
componentDidMount(){
this.widget.session.get((response) => {
if(response.status !== 'INACTIVE'){
this.setState({user:response.login});
}else{
this.showLogin();
}
});
}
showLogin(){
Backbone.history.stop();
this.widget.renderEl({el:this.loginContainer},
(response) => {
this.setState({user: response.claims.email});
},
(err) => {
console.log(err);
}
);
}

您可能已经在showLogin方法中注意到了一些奇怪的代码。第一行： Backbone.history.stop() 。小部件本身使用Backbone.js在其自己的屏幕之间进行导航（登录，忘记密码等），并且在呈现时将启动Backbone.history 。由于您现在已将其移至showLogin函数中，因此只要调用该函数，该小部件都将重新呈现。因此，这只是告诉Backbone停止历史记录的一个小技巧，因为它将在呈现小部件时重新启动。

最终的LoginPage React组件

让我们总结一下。确保将类的this上下文绑定到每个方法。添加logout方法，然后更改render方法，以根据是否有当前登录的用户来决定要渲染的内容。

因此， LoginPage.js的最终版本应如下所示：

import React from 'react';
import OktaSignIn from '@okta/okta-signin-widget';
export default class LoginPage extends React.Component{
constructor(){
super();
this.state = { user: null };
this.widget = new OktaSignIn({
baseUrl: 'https://{oktaOrgUrl}',
clientId: '{clientId}',
redirectUri: 'http://localhost:3000',
authParams: {
responseType: 'id_token'
}
});
this.showLogin = this.showLogin.bind(this);
this.logout = this.logout.bind(this);
}
componentDidMount(){
this.widget.session.get((response) => {
if(response.status !== 'INACTIVE'){
this.setState({user:response.login});
}else{
this.showLogin();
}
});
}
showLogin(){
Backbone.history.stop();
this.widget.renderEl({el:this.loginContainer},
(response) => {
this.setState({user: response.claims.email});
},
(err) => {
console.log(err);
}
);
}
logout(){
this.widget.signOut(() => {
this.setState({user: null});
this.showLogin();
});
}
render(){
return(
<div>
{this.state.user ? (
<div className="container">
<div>Welcome, {this.state.user}!</div>
<button onClick={this.logout}>Logout</button>
</div>
) : null}
{this.state.user ? null : (
<div ref={(div) => {this.loginContainer = div; }} />
)}
</div>
);
}
}