构建带有身份验证的Preact应用程序

寻找一个有趣的新框架来构建您的SPAs?请阅读下面的内容，看看如何使用Preact创建应用程序。

我喜欢编写身份验证和授权代码。——没有开发人员。

React是一个快速的、轻量级的库，它已经导致了在SPA(单页应用程序)生态系统的快速采用。Preact (Preact)是一种更轻松、更快速的反应方式，在区区3kb的基础上称重!对于不太复杂的应用程序，它可以是一个不错的选择。

在本教程中，您将使用Okta登录小部件构建一个基本的Preact应用程序，并使用几个页面和用户身份验证。

引导您的应用程序与PreactCLI。

为了启动您的项目，您将使用NPM安装PreactCLI。

npm install -g preact-cli

一旦安装了CLI，运行该命令创建一个基础Preact应用程序:

preact create okta-preact-example

这个命令将在几分钟内发出一个基本的Preact应用程序，并安装所有的依赖项。一旦完成，您应该在命令行上看到一堆信息，告诉您下一步可以做什么。

更改为应用程序目录。

cd okta-preact-example

然后启动应用程序，以确保一切正常工作。

npm start

您应该会看到一个快速构建运行，屏幕将清晰显示，并显示应用程序在http://localhost:8080上运行。当您在浏览器中打开该URL时，您应该看到这样的页面:

超前的应用基础

一些关于PreactCLI的注意事项

尽管preactclic生成的应用程序看起来很像create- response -app生成的React应用程序，你甚至可以在Preact应用程序中使用一些反应插件(比如反应路由器)，但有一些显著的差异。

例如，不像反应，没有办法弹出Webpack配置。相反，Preact鼓励开发人员通过创建名为preact.config的文件来定制Webpack.js使用Preact的Webpack配置助手和导出功能来改变Webpack的行为方式。

尽管PreactCLI说应用程序运行在http://0.0.0.0:8080上，但使用http://localhost:8080。这是相同的事情，当您在Okta仪表板中设置应用程序时，您将设置http://localhost:8080as您的基本URL和回调URL，所以这只会确保您可以调用Okta api。

Okta应用程序创建

现在您已经拥有了应用程序的基本外壳，现在是添加用户身份验证的时候了。如果你还没有，在Okta创建一个免费(永久)帐户。

创建了帐户后，转到管理仪表板，并单击页面菜单中的“应用程序”。然后点击绿色的“添加应用”按钮，然后绿色的“创建新的App”按钮，这样你就可以看到一个模式窗口:

创建应用程序屏幕

从平台按钮选择“SPA”。单击“下一步”按钮创建应用程序。

这将把您带到创建应用程序向导的“应用程序设置”页面。在应用程序名称字段中输入“oktapresponse示例”，并添加http://localhost:8080as作为基本URI，并作为登录重定向URI。完成后，表单应该如下所示:

创建集成的屏幕

您需要创建一个用户(如果您还没有的话)，并将新的应用程序分配给它们。或者您可以使用您使用的凭证登录到Okta帐户(管理用户)。

在小工具上安装Okta标志

将Okta的认证应用到新的Preact应用程序中最简单的方法就是使用Okta的登录小部件。您将使用npm安装它:

npm install preact-router --save

您还需要安装preact-router:

npm install preact-router --save

添加一个Auth高阶组件

这样做之后，您现在需要添加一些高阶组件来帮助进行身份验证。

添加一个名为auth的文件。js在/src/lib文件夹中并添加以下代码:

import from 'preact';

import { route } from 'preact-router';

import OktaSignIn from '@okta/okta-signin-widget/dist/js/okta-sign-in.min.js';

import '@okta/okta-signin-widget/dist/css/okta-sign-in.min.css';

import '@okta/okta-signin-widget/dist/css/okta-theme.css';

class Auth {

constructor() {

this.isAuthenticated = this.isAuthenticated.bind(this);

this.handleAuthentication = this.handleAuthentication.bind(this);

this.widget = new OktaSignIn({

baseUrl: 'https://.com/',

clientId: '',

redirectUri: 'http://localhost:8080',

authParams: {

responseType: ['id_token', 'token'],

scopes: ['openid', 'email', 'profile']

}

});

}

isAuthenticated() {

// Checks if there is a current accessToken in the TokenManger.

}

getCurrentUser(){

}

login() {

// Redirect to the login page

route('/login/');

}

async logout() {

location = '/';

}

handleAuthentication(tokens) {

for (let token of tokens) {

if (token.idToken) {

} else if (token.accessToken) {

}

}

}

}

// create a singleton

const auth = new Auth();

export const withAuth = WrappedComponent => props =>

;

在第一行代码中，您可以看出一些不同的东西。Preact中的h模块将JSX转换为DOM元素。通常情况下，反应会使用反应库生成反应。从JSX中创建DOM元素的createElement语句。Preact使用h库来生成类似于h('div'， ， 'Content')这样的语句。

接下来，您从位于h导入下面的preact-router导入路由。这是Preact在登录函数中执行重定向所使用的方法。注意，Auth类只是一个常规函数，不扩展组件。在构造函数中，内部函数与来自Auth类的上下文绑定在一起。

然后输入Okta组织URL和客户机ID到Okta登录小部件配置。您的组织URL将是您登录Okta帐户时使用的URL(例如http://dev-12345.oktapreview.com)，您可以在应用程序的“General”选项卡上的管理指示板中从应用程序的属性页获取您的客户端ID(显然，您的应用程序不会被清除):

客户机ID屏幕

您还需要将redirectUri属性更改为http://localhost:8080，因为Preact使用端口8080而不是3000作为正常的响应应用程序。

登录函数简单地将用户路由到登录页面，而注销函数清除了在小部件的令牌管理器中保存的令牌，调用小部件上的signOut，并将用户重定向到应用程序的根。

最后，将创建一个Auth类的单例，由所有组件共享，并将其作为一个名为Auth的道具传递给您所使用的任何组件。

创建一个小部件包装器

在您的/src/lib文件夹中创建一个名为OktaSignInWidget.js的文件。输入此组件的代码:

import { h, Component } from 'preact';

export default class OktaSignInWidget extends Component {

componentDidMount() {

}

componentWillUnmount() {

}

render() {

return

{ this.widgetContainer = div; }} />

}

};

在这里，componentDidMount方法将Okta登录小部件呈现给呈现方法中的div，而componentWillUnmount函数删除小部件。

在呈现方法中，有一些奇怪的代码。这允许您将当前元素的引用设置为一个名为widgetContainer的变量，然后在componentDidMount中使用它作为这个.widgetContainer。整洁的,是吧?感谢Matt Raible给我展示了这个魔术!

创建一个重定向组件

在它中，反应路由器有一个重定向组件，但是Preact路由器没有，所以你需要一个。幸运的是，创建自己的网站很容易。在您的/src/lib文件夹中创建一个名为重定向的文件。js并添加以下代码:

import { Component } from 'preact';

export default class Redirect extends Component {

componentWillMount() {

}

render() {

return null;

}

}

创建一个登录组件

接下来，在src/路由中创建一个登录文件夹。在该文件夹中，创建一个索引。js文件和风格。css文件。这和Preact CLI创建组件的方式一样。

在index.js文件，创建一个包含在withAuth组件中的登录组件。首先，导入需要的模块:

import { h, Component } from 'preact';

import Redirect from '../../lib/Redirect';

import OktaSignInWidget from '../../lib/OktaSignInWidget';

import { withAuth } from '../../lib/auth';

通过在前面创建的withAuth高阶组件进行包装，并设置初始状态，从而启动组件。在这里，您将在默认情况下将redirectToReferrer设置为false。

export default withAuth(class Login extends Component {

state = {

redirectToReferrer: false

};

}

在componentWillMount生命周期函数中，连接onSuccess和onError函数并在组件中创建它们。

componentWillMount() {

this.onSuccess = this.onSuccess.bind(this);

this.onError = this.onError.bind(this);

}

onSuccess(tokens) {

this.setState({

redirectToReferrer: true

});

}

onError(err) {

console.log('error logging in', err);

}

您将注意到您的组件将身份验证的处理传递回高阶组件。这是高阶组件和JavaScript组合的好处的主要例子。

最后，创建呈现函数，该函数将决定是否显示登录小部件，或者，如果用户已经登录，将它们重定向到主页。您还可以将用户重定向到他们在重定向到登录页面时将要访问的页面，但是现在我们跳过这个。

render(, ) {

let from;

if (location && location.state) {

from = location.state;

} else {

from = { pathname: '/' };

}

if (auth.isAuthenticated() || redirectToReferrer) {

return ;

}

return (

widget=

onSuccess=

onError= />

);

}

这里你会注意到Preact有点不同，它会让你处理道具和状态作为渲染函数的参数。这段代码简单地使用了这些参数的析构，以使使用位置、auth和redirectToReferrer简单，而不需要大量的这些。

所以你最后/src/routes/login/index.js文件如下:

import { h, Component } from 'preact';

import Redirect from '../../lib/Redirect';

import OktaSignInWidget from '../../lib/OktaSignInWidget';

import { withAuth } from '../../lib/auth';

export default withAuth(class Login extends Component {

state = {

redirectToReferrer: false

};

componentWillMount() {

this.onSuccess = this.onSuccess.bind(this);

this.onError = this.onError.bind(this);

}

onSuccess(tokens) {

this.setState({

redirectToReferrer: true

});

}

onError(err) {

console.log('error logging in', err);

}

render(, ) {

let from;

if (location && location.state) {

from = location.state;

} else {

from = { pathname: '/' };

}

if (auth.isAuthenticated() || redirectToReferrer) {

return ;

}

return (

widget=

onSuccess=

onError= />

);

}

})

更新个人资料页面

现在您已经有了登录组件，并且使用了Okta登录部件，使用您创建的第auth组件并更新配置文件页面(in /src/ path /profile/index.js)，以便向您提供更多关于用户的信息。这是您的最终/src/rout/profile/index。js文件应该是:

import { h, Component } from 'preact';

import { route } from 'preact-router';

import { withAuth } from '../../lib/auth';

import style from './style';

export default withAuth(class Profile extends Component {

constructor(props){

super(props);

}

componentWillMount(){

this.state = {

};

}else{

return route('/login/');

}

}

render(props, { user }) {

return (

user ?

Profile

Name:

Email:

null

);

}

})

您已经在组件的componentWillMount函数的组件级别添加了身份验证保护。如果用户经过身份验证，它将调用高阶组件上的getCurrentUser函数，并将用户添加到组件的状态。在render函数中，您只需输出用户的姓名和电子邮件。

更新头组件

现在你只需要把这些路由到你的应用程序中，然后让菜单链接到它们。开始通过改变/src/components/header/index.js文件:

import { h, Component } from 'preact';

import { Link } from 'preact-router/match';

import { withAuth } from '../../lib/auth';

import style from './style';

export default withAuth(class Header extends Component {

componentWillMount(){

this.setState({

});

}

}

render(props, ) {

return (

Preact App

Home

href="/profile">Profile : null }

onClick= href="javascript:;">Logout

:

Login}

);

}

})

这将显示“登录”按钮，如果用户没有登录，如果他们是“注销”按钮。它也只会向登录的用户显示“Profile”菜单项。

改变你的路由

最后，改变你/src/components/app.js 文件让你的应用程序知道你的新路线和如何处理它们。js文件会是这样的:

import { h, Component } from 'preact';

import { Router } from 'preact-router';

import Header from './header';

import Home from '../routes/home';

import Profile from '../routes/profile';

import Login from '../routes/Login';

// import Home from 'async!./home';

// import Profile from 'async!./profile';

export default class App extends Component {

/** Gets fired when the route changes.

* @param event "change" event from [preact-router](http://git.io/preact-router)

* @param event.url The newly routed URL

*/

handleRoute = e => {

this.currentUrl = e.url;

};

render() {

return (

);

}

}

真正改变的是，您导入了新创建的登录组件，并删除了被传递到Profile组件的用户属性，并为登录组件添加了一条新路径。

运行新的Preact应用程序

现在，您应该能够保存您的工作并运行npm在根文件夹中启动，并通过Okta查看一个具有用户身份验证的完整功能的Preact应用程序!

预反应和反应之间有很多相似之处，但有一些关键的区别。Preact指的是保持下载规模小的应用程序的关键。在Preact路由器中有一些很好的便利，但是有些东西丢失了(比如withRouter)。还有一些简洁的便利，比如让道具和状态传递给渲染功能。总而言之，我认为Preact很简洁，但我可以看到，对于复杂的应用程序，我确实需要全面的反应。

了解更多

您可以从他们的网站和GitHub存储库的Preact- router中找到更多关于Preact的信息。

您还可以从Okta开发人员GitHub知识库中获取本文的完整代码。

和往常一样，如果您对文章、代码、Preact或Okta有任何问题、评论或关注，请随时在评论或Twitter @leebrandt中找到我。

如果你有兴趣了解更多关于使用Okta登录小部件的身份验证，你可以在这里和这里跟踪Matt Raible的帖子，如果你想知道更多关于Okta的身份平台的信息，请阅读Randall Degges的帖子。