如何将OpenID连接快速添加到Angular应用程序中

吴欣
222 阅读5分钟

AngularJS 1.0于2010年10月发布。在当时，它被认为是有史以来最具革命性和最受欢迎的网络框架之一。开发者们很喜欢它，并用它创建了许多应用程序。然而，作为JS框架领域的先驱，AngularJS有一些成长的烦恼和重大问题。团队又回到了绘图板上，发布了Angular 2的重大突破。它花了两年时间来开发，并影响了许多开发人员在此期间跳到其他框架上。

今天，在Angular 2发布五年后，我们只叫它 "Angular"，其版本号的意义也大打折扣。对于一个现代JS网络框架来说，五年是一个漫长的生存和发展时间。如果你看一下Stack Overflow的问题数量，你会发现用户对React的纠结程度远远超过Angular。

hotframeworks.com

我开玩笑，我开玩笑。😅

我不认为Stack Overflow的标签表明开发者对框架有困难；我认为它们表明一个繁荣的社区。人们使用的技术越多，他们提交的问题就越多。

hotframeworks.com列出了一个结合GitHub星级和Stack Overflow标签的分数，并说前六名网络框架如下（在撰写本文时）。

  1. React
  2. ASP.NET MVC
  3. Angular
  4. Ruby on Rails
  5. AngularJS
  6. Vue.js

Angular在开发者中仍然非常流行。如果你今天正在开发一个Angular应用程序，你可能需要一种方法来验证你的用户。这就是OpenID Connect（OIDC）可以帮助你的地方。OIDC是OAuth 2.0之上的一个层，提供身份认证。

在本教程中，我将向你展示如何通过Auth0向一个新的Angular应用添加OIDC认证，只需几个步骤。

先决条件。

如果你想通过观看视频来了解情况，请看下面OktaDev YouTube频道的截屏。

创建一个Angular应用程序

首先，你需要创建一个新的Angular应用程序，并启用路由功能。在全球范围内安装Angular CLI，然后创建一个应用程序。

npm i -g @angular/cli@13
ng new auth0-demo --routing

你会被提示选择你喜欢的样式表格式。你所做的选择对这个例子并不重要，因为我们关注的是功能而不是更新视觉效果。

用OpenID连接添加认证

要用Auth0添加认证，你首先需要一个免费的Auth0账户。安装Auth0 CLI并运行auth0 login 来注册你的账户。然后，运行auth0 apps create 。使用名称 auth0-demo并指定一个你选择的描述。选择单页网络应用，并使用 http://localhost:4200/home作为回调URL。指定 http://localhost:4200其余的URL。我们在这里使用4200作为端口，因为那是本地Angular开发的默认端口。

Auth0 Apps Create

你也可以使用Auth0控制台来创建一个OIDC应用程序。

  • 登录到Auth0，如果你没有账户，可以创建一个账户。转到应用程序>创建应用程序。
  • 选择单页Web应用程序作为应用程序类型，然后点击创建。
  • 点击Angular，然后点击设置标签。
  • 添加 http://localhost:4200/home作为允许的回调URL和 http://localhost:4200作为注销URL。
  • 指定 http://localhost:4200作为允许的起源，并点击底部的保存更改。

一旦你有了一个新的Angular应用程序和Auth0 OIDC设置，你就可以使用OktaDev Schematics为你的Angular应用程序添加OAuth 2.0和OIDC支持。请确保在应用程序本身的文件夹中执行该命令 (auth0-demo)旁边的文件夹中执行这个命令。 package.json.

ng add @oktadev/schematics --auth0

Auth0 CLI会提示你提供发行人URL和客户ID，这些信息在Auth0中设置应用时已经显示。如果你使用CLI，它就会在客户ID的正上方显示发行者URL。

=== dev-0ua1y-go.us.auth0.com application created

  CLIENT ID            TJgZxGnlSkqUe6JfMFSipZcFsbpl6LS2

这个过程将为你执行以下步骤。

  1. 安装Auth0 Angular SDK。
  2. 添加 src/app/auth-routing.module.ts与你的OIDC配置和初始化逻辑。
  3. 配置一个AuthHttpInterceptor ，为出站请求添加一个带有访问令牌的Authorization 头。
  4. 创建一个HomeComponent ，并将其配置为认证逻辑。
  5. 更新AppComponent 和HomeComponent 的单元测试，模拟Auth0。

要查看它对你的文件所做的所有改动，请看GitHub上的这个拉动请求。如果你有兴趣了解更多关于Schematics的信息，我推荐你阅读我的《使用Angular Schematics来简化你的生活》教程。

测试你的Angular认证流程

在你的应用程序中运行ng serve ，你应该看到一个登录按钮在 http://localhost:4200/home.

Auth0 Login button

点击登录按钮，用你的Auth0应用程序的一个配置的用户登录。因为这只是一个演示，你可能还没有这样做--更有可能的是，你应该作为一个新用户注册。

Auth0 Login form

登录后，你会被重定向到你的应用程序，你会看到左下角显示一个注销按钮。

Auth0 Logout button

显示认证用户的名字

为了显示认证用户的名字，你可以在AuthService 实例上使用user$ 观察变量。

修改一下 src/app/home/home.component.html来向用户显示一个欢迎信息。

<div>
  <button *ngIf="(auth.isAuthenticated$ | async) === false" (click)="login()" id="login">Login</button>
  <div *ngIf="auth.user$ | async as user">
    <h2>Welcome, {{user?.name}}!</h2>
  </div>
  <button *ngIf="auth.isAuthenticated$ | async" (click)="logout()" id="logout">Logout</button>
</div>

刷新你的应用程序，你应该看到显示你的名字。

Display user's name

如果一切顺利的话--恭喜你!

了解更多关于Angular和OpenID Connect的信息

我希望你喜欢这个关于在Angular应用程序中使用Auth0和OIDC进行认证的快速教程。如果你正在寻找一个更详细的分步教程，请阅读《使用Auth0进行Angular用户认证的完整指南》。

你可以在GitHub的@oktadev/auth0-angular-example仓库中找到这个例子的源代码。

要了解更多关于Angular和OIDC的信息，请查看下面的博文。

avatar
文章
阅读
粉丝