angular 模块构建_使用Angular 7中的所有新功能和值得关注的功能构建应用程序

最新推荐文章于 2024-10-02 10:53:34 发布

dingshi7798

最新推荐文章于 2024-10-02 10:53:34 发布

阅读量265

点赞数

文章标签： python java 编程语言数据库 web

原文链接：https://www.sitepoint.com/build-an-app-with-everything-new-noteworthy-in-angular-7/

版权

angular 模块构建

本文最初发布在Okta开发人员博客上。 感谢您支持使SitePoint成为可能的合作伙伴。

Angular 7在本季度初发布，我介绍了它的一些功能。如果您从Angular 2开始就一直关注Angular，那么您知道升级有时会很痛苦。没有Angular 3，但是升级到Angular 4并不是很糟糕，除了Angular的测试基础架构发生了许多变化。 Angular 4到Angular 5很轻松，而5到6只需要更改使用RxJS的类。

在我向您展示如何使用authn / authz构建Angular应用程序之前，让我们看一下此版本中的新功能和值得注意的功能。

升级到Angular 7

如果您是使用Angular CLI创建的应用程序，则可以使用ng update轻松升级到最新版本。

ng update @angular/cli @angular/core

您也可以使用《 Angular更新指南》获取完整的分步说明。

Angular更新指南

Angular 7的新增功能

Angular 7中有一些值得注意的功能，总结如下：

CLI提示 ：此功能已添加到Schematics中，因此您可以提示用户在运行ng命令时做出选择。
性能增强 ：Angular团队发现许多人都将reflect-metadata用作依赖项（而不是仅开发依赖项）。如果使用上述方法进行更新，则此依赖关系将自动移动。 Angular 7还增加了捆绑包预算，因此当捆绑包超过特定大小时，您会收到警告。
Angular Material ：Material Design在2018年进行了重大更新，Angular Material v7反映了这些更新。
虚拟滚动 ：此功能使您可以根据可见性加载/卸载列表的某些部分。
拖放：此功能已添加到Angular Material的CDK中。

捆绑预算是最让我兴奋的功能。我看到很多捆绑包尺寸很大的Angular应用程序。您希望基线成本最小，因此此功能应有所帮助。使用Angular CLI创建新项目时，在angular.json中指定了以下默认值。

"budgets": [{
  "type": "initial",
  "maximumWarning": "2mb",
  "maximumError": "5mb"
}]

您可以使用Chrome的数据保护程序扩展程序来最大程度地了解您的应用程序使用的数据。

有关Angular 7新增功能的更多详细信息，请参阅Angular博客， InfoQ的内容或Angular项目的changelog 。

既然您已经知道Angular 7的强大功能，让我们看一下如何使用它创建安全的应用程序！

创建一个安全的Angular 7应用程序

创建Angular 7应用程序的一种简单方法是使用Angular CLI 。要安装它，请运行以下命令：

npm i -g @angular/cli

下面的示例使用Angular CLI 7.1.0。要验证您使用的是同一版本，可以运行ng --version 。

_                      _                 ____ _     ___
    / \   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
   / △ \ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
  / ___ \| | | | (_| | |_| | | (_| | |      | |___| |___ | |
 /_/   \_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
                |___/


Angular CLI: 7.1.0
Node: 11.1.0
OS: darwin x64
Angular:
...

Package                      Version
------------------------------------------------------
@angular-devkit/architect    0.11.0
@angular-devkit/core         7.1.0
@angular-devkit/schematics   7.1.0
@schematics/angular          7.1.0
@schematics/update           0.11.0
rxjs                         6.3.3
typescript                   3.1.6

要创建新应用，请运行ng new ng-secure 。当提示您进行路由时，键入“ Y ”。样式表格式与此示例无关，因此请选择所需的样式。我使用CSS。

Angular CLI完成创建您的应用程序后，cd进入其目录，运行ng new ，然后导航至http://localhost:4200以查看其外观。

默认的Angular应用！

使用OIDC向您的Angular 7应用添加身份和身份验证

如果您正在为大型企业开发应用程序，则可能需要对它们进行编码以使用同一组用户。如果您要为每个应用创建新的用户商店，请停止它！有一种更简单的方法。您可以使用OpenID Connect（OIDC）向您的应用程序添加身份验证，并允许它们全部使用同一用户存储。

OIDC需要身份提供者（或IdP）。有许多知名的IdP，例如Google，Twitter和Facebook，但这些服务不允许您像在Active Directory中一样管理用户。 Okta允许这样做，并且您可以将Okta的API用于OIDC。

注册一个永久免费的开发者帐户，完成后再回来，这样您就可以详细了解如何保护Angular应用！

免费学习PHP！

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

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

免费的开发者帐户！

现在您已经拥有一个开发人员帐户，我将向您展示几种向Angular 7应用程序添加OIDC身份验证的技术。但是首先，您需要在Okta中创建一个新的OIDC应用。

在Okta中创建OIDC应用

登录到您的Okta Developer帐户，然后导航到Applications > Add Application 。单击“ Web” ，然后单击“ 下一步” 。给应用程序起一个您会记住的名称，并指定http://localhost:4200作为登录重定向URI。单击完成。创建应用后，对其进行编辑，并将http://localhost:4200也指定为注销重定向URI。结果应类似于以下屏幕截图。

Okta OIDC应用程序

使用angular-oauth2-oidc

angular-oauth2-oidc库提供对OAuth 2.0和OIDC的支持。它最初由Manfred Steyer创建，并包含许多社区贡献。

使用以下命令安装angular-oauth2-oidc：

npm i angular-oauth2-oidc@5.0.2

打开src/app/app.module.ts并导入OAuthModule以及HttpClientModule 。

import { HttpClientModule } from '@angular/common/http';
import { OAuthModule } from 'angular-oauth2-oidc';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    HttpClientModule,
    OAuthModule.forRoot()
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

修改src/app/app.component.ts以导入OAuthService并将其配置为使用Okta应用程序设置。添加login()和logout()方法，以及获取用户名的方法。

import { Component } from '@angular/core';
import { OAuthService, JwksValidationHandler, AuthConfig } from 'angular-oauth2-oidc';

export const authConfig: AuthConfig = {
  issuer: 'https://{yourOktaDomain}/oauth2/default',
  redirectUri: window.location.origin,
  clientId: '{yourClientId}'
};

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'ng-secure';

  constructor(private oauthService: OAuthService) {
    this.oauthService.configure(authConfig);
    this.oauthService.tokenValidationHandler = new JwksValidationHandler();
    this.oauthService.loadDiscoveryDocumentAndTryLogin();
  }

  login() {
    this.oauthService.initImplicitFlow();
  }

  logout() {
    this.oauthService.logOut();
  }

  get givenName() {
    const claims = this.oauthService.getIdentityClaims();
    if (!claims) {
      return null;
    }
    return claims['name'];
  }
}

修改src/app/app.component.html以添加“ 登录”和“ 注销”按钮。

<h1>Welcome to {{ title }}!</h1>

<div *ngIf="givenName">
  <h2>Hi, {{givenName}}!</h2>
  <button (click)="logout()">Logout</button>
</div>

<div *ngIf="!givenName">
  <button (click)="login()">Login</button>
</div>

<router-outlet></router-outlet>

重新启动您的应用程序，您应该看到一个登录按钮。

带有登录按钮的应用

单击登录按钮，登录到Okta帐户，然后您应该会看到带有注销按钮的名称。

具有名称和注销按钮的应用

很漂亮吧？

Okta的Angular SDK

您也可以使用Okta的Angular SDK来实现相同的功能。您可以从安装开始。

npm i @okta/okta-angular@1.0.7

更改app.module.ts以配置Okta设置并导入OktaAuthModule 。

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { OktaAuthModule } from '@okta/okta-angular';

const config = {
  issuer: 'https://{yourOktaDomain}/oauth2/default',
  redirectUri: window.location.origin + '/implicit/callback',
  clientId: '{yourClientId}'
};

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    OktaAuthModule.initAuth(config)
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

您可能会注意到重定向URI与上一个有所不同。为此，您需要修改Okta应用并添加http://localhost:4200/implicit/callback作为登录重定向URI。

修改src/app/app-routing.ts以具有此路径的路由。

import { OktaCallbackComponent } from '@okta/okta-angular';

const routes: Routes = [
  {
    path: 'implicit/callback',
    component: OktaCallbackComponent
  }
];

更改app.component.ts以使用OktaAuthService确定用户是否已通过身份验证。

import { Component, OnInit } from '@angular/core';
import { OktaAuthService, UserClaims } from '@okta/okta-angular';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  title = 'ng-secure';
  isAuthenticated: boolean;
  email: string;

  constructor(public oktaAuth: OktaAuthService) {
  }

  async ngOnInit() {
    this.isAuthenticated = await this.oktaAuth.isAuthenticated();
    this.user = await this.oktaAuth.getUser();
    // Subscribe to authentication state changes
    this.oktaAuth.$authenticationState.subscribe( async(isAuthenticated: boolean)  => {
      this.isAuthenticated = isAuthenticated;
      this.user = await this.oktaAuth.getUser();
    });
  }
}

然后更新app.component.html以使用isAuthenticated并显示用户名。

<h1>Welcome to {{ title }}!</h1>

<div *ngIf="isAuthenticated">
  <h2>Hi, {{user?.name}}!</h2>
  <button (click)="oktaAuth.logout()">Logout</button>
</div>

<div *ngIf="!isAuthenticated">
  <button (click)="oktaAuth.loginRedirect()">Login</button>
</div>

<router-outlet></router-outlet>

重新启动您的应用程序，您应该可以使用Okta的Angular SDK登录到您的应用程序。

使用授权码流程

OAuth有一个新的规范草案，称为基于浏览器的应用程序的OAuth 2.0 。这是由Okta自己的Aaron Parecki创建的，其中包含一个有趣的子句。

OAuth 2.0隐式授予授权流程（在OAuth 2.0 [RFC6749]的4.2节中定义）的工作原理是立即在HTTP重定向（前通道）中接收访问令牌，而无需执行代码交换步骤。隐式流不能受到PKCE [RFC7636]（根据第6节的要求）的保护，因此客户端和授权服务器不得对基于浏览器的应用程序使用隐式流。

angular-oauth2-oidc和Okta的Angular SDK都使用隐式流，这是在Aaron规范草案中最近讨论之前的公认惯例。那么，您如何遵循Aaron的建议，并在Angular应用程序中使用带有PKCE的授权代码流？有两种选择：

有一个名为angular-oauth2-oidc-codeflow的angular-oauth2-oidc分支。
AppAuth for JS支持授权代码流，并带有PKCE支持。

我尝试在Okta中使用angular-oauth2-oidc-codeflow。我使用了上面我的angular-oauth2-oidc示例中的代码，发现我只需要更改一些内容（使用npm i angular-oauth2-oidc-codeflow进行安装后， npm i angular-oauth2-oidc-codeflow ）：

导入应来自'angular-oauth2-oidc-codeflow'
AppComponent的login()方法应更改为使用身份验证代码流。

login() {
      this.oauthService.initAuthorizationCodeFlow();
    }

进行这些更改后，我尝试登录到原始SPA应用程序。我收到的错误是unsupported_response_type 。我尝试使用PKCE创建新的本机应用程序，但失败了，因为angular-oauth2-oidc-codeflow不会发送代码挑战。

在“ 使用电子和身份验证构建桌面应用程序”中，我成功使用了AppAuth和PKCE。之所以起作用，是因为它是一个桌面应用程序，并且不会发送origin标头。 Okta的令牌终结点不允许CORS（跨域资源共享），因此它无法在浏览器客户端中使用。

我们希望尽快解决此问题。随着行业的发展，我们将尽最大努力使图书馆保持最佳做法的最新状态。同时，我们建议您使用CSP（内容安全策略）以确保第3方脚本无法访问Angular应用。

请参阅10种保护Spring Boot应用程序安全的绝妙方法，以了解如何使用Spring Boot添加CSP。

您可能还会发现Micah Silverman的PKCE命令行项目很有趣。

基于组限制您的Angular 7应用访问

如果您想基于用户的组显示/隐藏应用程序的组件，则需要在ID令牌中添加“组”声明。登录到您的Okta帐户，导航到“ API” >“ 授权服务器” ，单击“ 授权服务器”选项卡，然后编辑默认帐户。点击索赔标签，然后添加索赔 。将其命名为“组”，并将其包含在ID令牌中。将值类型设置为“ Groups”，并将过滤器设置为.*的正则表达式。

现在，您可以创建一个Angular指令，以基于用户的组显示/隐藏元素。当前有一个未解决的问题，表明您可能如何执行此操作。

使用AuthGuard控制对路由的访问

Angular的路由器文档包含一个示例，说明如何创建AuthGuard来保护路由，以便仅对经过身份验证的用户可用。

Okta的Angular SDK随附了OktaAuthGuard ，可用于保护路线。在允许用户导航到路线之前，它将验证是否存在有效的访问令牌。以下是如何在app-routing.module.ts进行配置的示例。

import { OktaAuthGuard } from '@okta/okta-angular';

const routes: Routes = [
  { path: 'secure', component: MySecureComponent, canActivate: [OktaAuthGuard] }
]

您可以为Angular -oauth2-oidc实现类似的身份验证保护，如使用OpenID Connect和Okta在20分钟内进行角度身份验证中所示。

import { Injectable } from '@angular/core';
import { ActivatedRouteSnapshot, CanActivate, Router, RouterStateSnapshot } from '@angular/router';
import { OAuthService } from 'angular-oauth2-oidc';

@Injectable({
  providedIn: 'root'
})
export class AuthGuard implements CanActivate {

  constructor(private oauthService: OAuthService, private router: Router) {}

  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
    if (this.oauthService.hasValidIdToken()) {
      return true;
    }

    this.router.navigate(['/']);
    return false;
  }
}

带有Spring Boot的Angular 7 CLI教程和Angular 7 CRUD

哎呀，关于Angular 7身份验证的很多信息！有关更直接的Angular内容，我邀请您看一下我最近升级到Angular 7的一些教程。

我最近更新了一些教程以使用Angular 7。

Angular 7和Angular CLI教程 ：该教程向您展示了如何从头创建和测试应用程序。包括有关如何使用Okta添加Angular Material，Bootstrap和身份验证的部分。
使用Angular 7.0和Spring Boot 2.1构建Basic CRUD应用程序 ：这是一个具有Spring Boot后端和Angular UI的教程。

实际上，我非常喜欢Angular 7，因此将基本的CRUD应用程序教程变成了一个截屏视频！

JHipster和Angular 7

我是一个名为JHipster的项目的提交者。 JHipster允许您快速轻松地使用Angular UI生成Spring Boot应用程序。 JHipster团队在其5.6.0版本中升级到了Angular 7。您可以使用单个JDL文件使用Angular创建JHipster应用。 JDL代表JHipster域语言。

要查看实际使用的JHipster，请使用npm i generator-jhipster安装它，并使用以下JDL创建一个app.jh文件。

application {
  config {
    baseName blog,
    applicationType monolith,
    packageName com.jhipster.demo.blog,
    prodDatabaseType mysql,
    cacheProvider hazelcast,
    buildTool maven,
    clientFramework angular,
    useSass true,
    testFrameworks [protractor]
  }
}

JHipster默认使用JWT身份验证，但是您可以将其切换为使用OIDC进行身份验证非常容易（提示：只需将authenticationType oauth2添加到app.jh ）。

创建一个blog目录，并在其中运行jhipster import-jdl app.jh 。一两分钟后，您将拥有一个功能齐全（且经过充分测试）的Spring Boot + Angular + Bootstrap应用程序！如果要将实体添加到CRUD，请参见此示例JDL 。

提到的样本JDL将React用于其clientFramework 。确保将其更改为angular以使用Angular 7。

如果您以前从未听说过JHipster，则应该从InfoQ下载免费的JHipster Mini-Book ！这是我写的一本书，旨在帮助您立即开始使用髋关节技术：Angular，Bootstrap和Spring Boot。 5.0版本是最近发布的。