在15分钟内使用Okta的登录小部件构建一个Angular应用程序

键突出显示：

尽管缺乏向后兼容性，但Angular 2和4仍然非常受欢迎，在UI框架中获得了第三名（在React和HTML5之后）。 OKTA提供了用于流线型用户帐户管理的用户友好的API，并与Angular应用程序无缝集成。 它的登录小部件提供了可自定义的JavaScript解决方案，包括密码重置，忘记的密码恢复和可靠的身份验证功能。

>使用NPM和最小代码将Okta的登录小部件集成到Angular项目中很简单，从而允许自定义匹配应用程序美学。 OKTA促进了Angular应用程序中的全面测试，并通过将Okta定义为提供商可以轻松解决任何问题。 完整的应用程序可以在GitHub上访问。
• >
• > AngularJS曾经统治JavaScript MVC框架，但宣布对后续版本的非背部兼容性导致了一些社区动荡，使React和Vue.js等竞争对手受益。 然而，杠杆化标题的Angular 2和4已被证明具有很高的弹性，保持了强大的地位，作为第三个最受欢迎的UI框架。
>本文展示了OKTA在基本角度应用程序中的用户身份验证的登录小部件的快速集成。 对于角初学者，建议使用补充角教程。源代码可在github上找到。
>
• 为什么选择用户身份验证的OKTA？ OKTA提供了一个全面的API，用于管理用户帐户，安全存储数据并连接到多个应用程序。 这简化了帐户管理，增强安全性并加速部署。 Okta登录窗口小部件提供了易于自定义的可嵌入的JavaScript登录解决方案，该解决方案镜像Okta的标准登录页面的功能，包括密码重置，遗忘的密码功能和强大的身份验证 - 所有这些都通过Okta的策略进行了管理，不需要自定义代码。 面向消费者的应用程序也支持社会登录。

构建一个角度应用程序

具有Angular 4和Angular CLI 1.0，创建一个新应用程序很简单：

安装Angular CLI：

创建一个新应用程序：

>

。

集成Okta的登录窗口

1. 1. 安装小部件：npm install --save @okta/okta-signin-widget
   >
   2. >将CSS添加到src/styles.css>：

   @import '~https://ok1static.oktacdn.com/assets/js/sdk/okta-signin-widget/2.1.0/css/okta-sign-in.min.css';
   @import '~https://ok1static.oktacdn.com/assets/js/sdk/okta-signin-widget/2.1.0/css/okta-theme.css';

   3. 创建src/app/shared/okta/okta.service.ts管理小部件：

   import { Injectable } from '@angular/core';
   import * as OktaSignIn from '@okta/okta-signin-widget/dist/js/okta-sign-in.min.js';
   
   @Injectable()
   export class Okta {
     widget;
   
     constructor() {
       this.widget = new OktaSignIn({
         baseUrl: 'https://{yourOktaDomain}.com',
         clientId: '{clientId}',
         redirectUri: 'http://localhost:4200'
       });
     }
   
     getWidget() {
       return this.widget;
     }
   }

   4. 添加Okta作为app.module.ts>的提供商。

      >

   5. 在您的Okta帐户中创建一个OpenID Connect应用程序，用您的okta.service.ts>和ClientId>。 Okta Domain

   >在
   6. 中实现登录/注销功能，然后调整

      以显示小部件和用户信息。> app.component.ts app.component.html

   测试和自定义

   >运行测试应用程序。 通过添加

   作为

   的提供商来解决潜在的测试失败。 通过创建自定义CSS来自定义小部件的外观。 完整的申请可在GitHub上获得。ng serve> Okta>src/app/app.component.spec.ts常见问题（常见问题解答）

   （这些是简短的；这些概述；请参阅原始答案。）

   与Angular的OKTA集成： okta集成：

   安装Okta Angular SDK，使用OKTA域和客户端ID进行配置，并使用其方法进行身份验证，会话管理和Route Security。
   • oktaaauthservice：>管理用户身份验证，包括登录，注销，身份验证检查和会话处理。>
   • 固定路线：>使用限制对身份验证的用户的访问。>
   • OKTA回调组件：处理okta的身份验证回调。 OktaAuthGuard>
   >自定义登录页面：
   • 通过Okta Admin仪表板或使用自定义HTML/CSS自定义 >>会话管理：
   >使用Okta的方法来创建，检查，更新和结束会话。>
   • OKTA代币管理器：安全地管理令牌。
   >
   • 错误处理：> SDK提供错误处理功能。
   • 测试：>使用模拟服务使用单元测试。
   >
   • 更新SDK：使用
   。
   • 。 OKTA简化了身份验证，使开发人员可以专注于应用程序功能。 免费开发人员帐户可用于实验。 有关问题，请参阅堆栈溢出，Twitter或github。>

以上是在15分钟内使用Okta的登录小部件构建一个Angular应用程序的详细内容。更多信息请关注PHP中文网其他相关文章！