构建具有身份验证的提前应用程序

本文最初发表在Okta开发人员博客上。感谢您支持使SitietPoint成为可能的合作伙伴。 React是一个快速且轻巧的库，它导致在SPA（单页应用程序）生态系统中快速采用。 preact是一种更轻巧的反应替代方案，重量为3kb！对于不太复杂的应用程序，它可能是一个不错的选择。> 在本教程中，您将使用OKTA登录窗口小部件构建一个基本的预先应用程序，并使用几个页面和用户身份验证。

钥匙要点

>利用preactcli有效地脚打新的提前应用程序，利用其与某些React插件的兼容性，同时享受较轻，更快的框架。

>使用OKTA登录窗口小部件将用户身份验证集成在您的reafeACT应用中，简化了管理用户会话和安全性的过程。>

>实现高阶组件（HOCS），以进行身份​​验证，以有效地管理用户登录状态并保护您的预先应用程序中的路由。

>
• >采用预先反应的路由器和自定义重定向组件来处理导航和路线保护，以确保根据其身份验证状态适当地指导用户。
>更新各种组件，例如登录和配置文件，以与身份验证逻辑进行交互，从而根据用户数据提供无缝的用户体验和个性化。
• 使用preactcli
• bootstrap您的应用程序
为了开始您的项目，您将使用NPM安装preactcli。
安装了CLI后，请运行命令以创建基本的提示应用程序：>
这个命令将持续几分钟，以脚手架为基本的提前应用程序并安装所有依赖项。完成后，您应该看到有关命令行的大量信息，以告知您下一步可以做什么。

更改为应用程序目录。

>

然后启动应用程序，只是为了确保所有内容都按预期工作。

>

npm install -g preact-cli

>您应该看到快速构建运行，屏幕将清除，并向您显示该应用程序正在http：// localhost：8080运行。当您在浏览器中打开该URL时，您应该看到这样的页面：

>

preact create okta-preact-example

关于preactcli

的一些事情要注意

>即使preactcli生成的应用程序看起来很像由Create-React-App生成的React应用程序，您甚至可以在您的预先应用程序中使用某些React插件（例如React-Router），但也有一些重要的差异。

例如，与ReactCli不同，没有办法弹出WebPack配置。取而代之的是，通过创建一个名为preact.config.js的文件，使用PREACTACT的WebPack配置帮助者和导出功能来更改WebPack的行为方式。

>即使PREACTCLI表示该应用程序正在http://0.0.0.0:8080运行，请使用http：// localhost：8080。这是同一件事，当您在Okta仪表板中设置应用程序时，您将将http：// localhost：8080设置为基本URL和回调URL，因此这只是确保您可以调用Okta apis。 >

创建您的Okta应用程序

>现在您拥有应用程序的基本外壳，现在该添加用户身份验证了。如果您还没有一个，请在Okta上创建一个免费的（永远）帐户。

创建帐户后，请转到管理仪表板，然后在页面菜单中单击“应用程序”。然后单击绿色的“添加应用程序”按钮，然后单击绿色“创建新应用”按钮，以便您看到一个模态窗口，例如：

>从平台按钮中选择“水疗”。单击“下一个”按钮以创建您的应用程序。

>这将带您进入屏幕，进入创建应用程序向导的“应用程序设置”页面。在应用程序名称字段中输入“ OktapReactexample”，然后添加http：// localhost：8080作为您的基本URI和登录重定向URI。完成后，您的表格应该看起来像这样：

>

>您需要创建一个用户（如果您还没有一个用户），并将您的新应用程序分配给他们。或者，您可以使用用于登录到Okta帐户的凭据（管理员用户）。 >在窗口小部件中安装Okta符号

>将Okta的身份验证进入您的新提前应用程序的最简单方法是使用Okta的登录窗口小部件。您将使用：安装NPM

>您还需要使用以下方式安装preact-router

添加一个auth高阶组件

>完成此操作，您现在需要添加一些高阶组件来帮助身份验证。

npm install -g preact-cli

>

>在 /src /lib文件夹中添加一个名为auth.js的文件，并添加以下代码：>

preact create okta-preact-example

在第一行代码中，您可以说出与众不同的东西。预告症中的H模块将JSX变成DOM元素。通常，React将使用React库生成React.Createelement语句从JSX中制作DOM元素。 preact使用h库来制作h（'div'，class：'sosity'sagings'}，'content'）语句的用法。

>

接下来，您从h进口下方的preact-router导入路由。这是preact用来在登录函数中进行重定向的方法。请注意，验证类只是一个常规功能，不会扩展组件。在构造函数中，内部函数与Auther类别的此上下文结合。

然后，将OKTA组织URL和客户端ID输入OKTA登录窗口小部件配置。您的组织URL将是您在Okta帐户中登录时使用的URL（例如http://dev-12345.oktapreview.com），并且您可以从应用程序属性页面中的“一般性”仪表板的属性页面获取客户ID。 ”标签用于您的应用程序（显然，您的应用程序不会模糊）：

>

>您还需要将Redirecturi属性更改为http：// localhost：8080，因为PREACCT使用端口8080而不是3000用于普通React Apps。

登录函数只需将用户路由到登录页面，而注销功能清除了保存在小部件的令牌管理器中的令牌，呼叫窗口上的签名，然后将用户重定向到应用程序的根。

>最后，创建了Auther类的单身人士，以由所有组件共享，并以称为AUTH的Prop将其传递给您将您包装在Aauth中的任何组件。

创建一个小部件包装器

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

>在这里，componentDidmount方法将Okta登录小部件呈现到渲染方法中的div，并且componentWillunMount函数删除了小部件。 在渲染方法中，有一些奇怪的代码。这使您可以将对当前元素的引用设置为一个称为widgetContainer的变量，然后在thice.widgetContainer中使用它。整洁，是吗？感谢Matt Raible向我展示了这个技巧！

创建重定向组件

npm install -g preact-cli

React-Router中有一个重定向组件，但是预先反应路由器没有，因此您需要一个。幸运的是，很容易创建自己的东西。在您的 /src /lib文件夹中创建一个名为redirect.js的文件，并添加以下代码：>

这只是一个基于传递给它的URL重定向的组件。在这种情况下，使用窗口机制将重定向，主要是因为您需要刷新页面。您也可以只使用路由（this.props.to.pathname），然后让preact的路由器重定向用户。

>

创建登录组件

接下来，在SRC/路由中创建一个登录文件夹。在该文件夹中，创建一个index.js文件和style.css文件。这只是随着预先CLI创建组件的方式。 在index.js文件中，创建一个包裹在withauth组件中的登录组件。首先，通过导入所需的模块：

npm install -g preact-cli

>通过包装在您之前创建的withauth高阶组件中启动组件，并设置开始状态。在这里，您将REDIRECTTOREFERRRER设置为False。

preact create okta-preact-example

>在componentwillmount Lifecycle功能中，将OnSuccess和OnError功能连接起来，并在组件中创建它们。

cd okta-preact-example

>您会注意到您的组件将身份验证的处理返回到高阶组件。这是高阶组件和JavaScript中构成的好处的一个典型例子。

>

>最后，创建渲染函数，该功能将决定显示登录窗口小部件，或者，如果用户已登录，则将其重定向到主页。您也可以将用户重定向到他们将要重定向到登录页面时要进入的页面，但是现在就跳过。

>您会在这里注意到preact有所不同，因为它为您提供了道具和状态作为渲染函数的参数的处理。此代码只是使用这些参数的破坏来使用位置，auth和redirecttoreferrer简单地制作，而无需拥有很多。

npm start

因此，您的最终/src/Routes/login/index.js文件将看起来像：

更新个人资料页面

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

>现在您拥有登录组件，并且正在使用Okta登录小部件，请使用您创建的auth组件，然后更新配置文件页面（in/src/routes/profile/index.js）有关用户的信息。这就是您的final/src/routes/profile/index.js文件应该看起来像：

>您已经在组件的组件Willmount功能中添加了组件级别的身份验证保护。如果对用户进行身份验证，它将在高阶组件上调用getCurrentuser函数，并将用户添加到组件的状态。在渲染函数中，您只需输出用户的名称和电子邮件。

>

npm install preact-router --save

更新标题组件

>现在，您只需要将路由进入应用程序，然后获取菜单以链接到它们。首先，将/src/components/header/index.js文件更改为：

>

>如果未登录用户，则将显示“登录”按钮，如果是“注销”按钮，则会显示“登录”按钮。它还将向那些登录的用户显示“配置文件”菜单项。

>

import {h} 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.login = this.login.bind(this);
    this.logout = this.logout.bind(this);
    this.isAuthenticated = this.isAuthenticated.bind(this);
    this.handleAuthentication = this.handleAuthentication.bind(this);

    this.widget = new OktaSignIn({
      baseUrl: 'https://{yourOktaDomain}.com/',
      clientId: '{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.
    return !!this.widget.tokenManager.get('accessToken');
  }

  getCurrentUser(){
    return this.widget.tokenManager.get('idToken');
  }

  login() {
    // Redirect to the login page
    route('/login/');
  }

  async logout() {
    this.widget.tokenManager.clear();
    await this.widget.signOut();
    location = '/';
  }

  handleAuthentication(tokens) {
    for (let token of tokens) {
      if (token.idToken) {
        this.widget.tokenManager.add('idToken', token);
      } else if (token.accessToken) {
        this.widget.tokenManager.add('accessToken', token);
      }
    }
  }
}

// create a singleton
const auth = new Auth();
export const withAuth = WrappedComponent => props =>
  <wrappedcomponent auth="{auth}"></wrappedcomponent>;

更改路由

最后，更改/src/components/app.js文件中的路由，以便您的应用程序知道您的新路由以及如何处理它们。因此，您的新app.js文件将看起来像：

>真正更改的所有内容是您导入了新创建的登录组件，然后删除要传递到配置文件组件的用户属性，并为登录组件添加了一个新路由。>

运行您的新提前应用程序！

>

>现在，您应该能够保存工作并在根文件夹中运行NPM启动，并通过OKTA查看使用用户身份验证的完全启用的proeact应用程序！

>

>提前和反应之间有很多相似之处，但是有一些关键差异。 preact是针对将下载大小保持很小的应用程序。预先路由器中有一些不错的便利性，但是缺少一些东西（例如withRouter）。还有一些整洁的便利，例如拥有道具和状态传递给渲染功能。总而言之，我认为preactect很整洁，但是我可以看到真的需要为复杂的应用程序做出一个成熟的反应。

了解更多

>您可以从他们的网站和github存储库中找到有关preaxct的更多信息。

>

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

>一如既往，如果您对文章，代码，预先反应或OKTA有任何疑问，评论或疑虑，请随时通过电子邮件与我联系，或在评论中或通过Twitter @LeeBrandt与我联系。 🎜>

经常询问有关使用身份验证构建预先验证应用的问题

什么是预告症，它与反应有何不同？

>

> preactct是一个与反应相似的快速，轻巧的JavaScript库。它被设计为小而有效的，压缩尺寸仅为3KB。 PREACT提供了相同的现代UI库和React的功能，例如虚拟DOM扩散和组件，但占地面积较小。它非常适合带宽和性能可能是问题的移动设备。 preact还旨在在API中尽可能接近反应，从而使React开发人员可以轻松地开始使用最小的调整。

>

>如何设置一个预先启动项目？提前项目很简单。您可以使用preact-CLI，这是一种命令行工具，可帮助您创建和管理提前项目。要安装它，您需要在计算机上安装node.js和NPM。安装后，您可以通过运行命令preacct创建默认的my-project来创建一个新项目，其中“ my-project”是您项目的名称。这将使用项目文件和依赖项创建一个新的目录。

>如何将身份验证添加到我的preacct应用程序？

>向您的preeact应用程序添加身份验证涉及多个步骤。首先，您需要安装和导入必要的库，例如用于处理cookie的路由和预先烹饪的前路由。然后，您需要创建一个登录表单和一个身份验证服务，该服务将处理登录请求并管理用户的会话。最后，您需要在呈现受保护的组件之前检查用户是否已进行身份验证来保护您的路线。

>如何处理preacct中的路由？这是一个使用浏览器的历史记录API的简单小路由器。要使用它，您需要通过NPM安装它并将其导入项目。然后，您可以使用组件和组件来定义路线。每个组件代表一个页面，并且具有与URL相匹配的“路径”支架。

我如何在preactct中管理状态？

preeact使用称为“ props”和“ of”的概念状态”来管理数据。道具从父母传递给组件，而状态在组件中进行管理。 PREACT的国家管理与React相似。您可以使用this.setState（）方法来更新状态并重新渲染组件。对于复杂的状态管理，您可以使用redux或mobx。不写课。要使用挂钩，您需要从“预先/钩子”中导入它们。提前中的挂钩API与React相同，因此您可以以相同的方式使用usestate，usefeft和usecontext之类的挂钩。

>

>我如何测试我的preeact应用程序？可以使用JEST和酶等测试库和框架来测试您的提前应用程序。 JEST是一个JavaScript测试框架，可与预先反应效果很好，而酶是对React的测试实用程序，也可以与预先反应一起使用。您还可以使用preact-test-utils，该图书馆提供用于测试proexct组件的辅助功能的库。

>

>如何部署我的preact应用程序？

>

> Netlify，Vercel和GitHub页面等平台。要部署，您需要通过运行NPM运行构建命令来构建应用程序以进行生产。这将使用您的编译应用程序创建一个“构建”目录。然后，您可以将此目录部署到所选的托管平台。

>

>如何优化我的preacct应用程序以供性能？

>

您可以做的事情使您的应用程序更快。这包括代码拆分，懒惰的组件以及优化图像和其他资产。您还可以使用preactconconconponupdate（）生命周期方法来防止不必要的重新租赁。

>我可以在我的reateact应用程序中使用React库和组件吗？您的realact应用程序中的组件得益于“ preeact-compat”，这是一个薄层，试图实现与React的100％兼容性。这意味着您可以从React切换到代码的最小更改。但是，由于预先反应的尺寸很小，因此不支持React的某些特征。

以上是构建具有身份验证的提前应用程序的详细内容。更多信息请关注PHP中文网其他相关文章！