社区
学习
工具库
AI工具
休闲
搜索
简体中文
目录
添加搜索功能，在IDE或您喜欢的文本编辑器中打开项目。对于Intellij Idea，请使用文件>新项目>静态网络，并指向NG-DEMO目录。
>要命名，请修改edit.component.html，以将所需属性添加到名称。
>在.angular-cli.json中添加对此库的主要JavaScript文件的引用：
>您可以在GitHub上此博客文章中找到完整的应用程序。要在Angular中了解有关安全性的更多信息，请参见Angular的安全文档。如果您想了解有关OpenID Connect的更多信息，我建议您观看下面的舒缓视频。
openID Connect（OIDC）是在OAuth 2.0协议顶部构建的简单身份层。它允许客户根据授权服务器执行的身份验证来验证最终用户的身份。在Angular中，OIDC用于处理用户身份验证。它提供了一个安全且可扩展的框架，可以处理多个用户身份，从而更容易管理用户会话和访问控制。
如何在角度？几个步骤。首先，您需要安装必要的软件包，例如Angular-auth-oidc-client。然后，您在应用程序模块中配置OIDC模块，指定必要的参数，例如授权，客户端ID和响应类型。之后，您可以使用OIDC服务来处理用户登录，注销和令牌验证。
> OAuth2和OIDC？
>
确保您的Angular应用程序涉及多个步骤。首先，您应使用HTTPS在运输中加密数据。其次，使用JWT进行用户身份验证和会话管理。第三，实现访问控制以限制用户可以访问的资源。最后，对用户输入进行消毒以防止跨站点脚本（XSS）攻击。
>测试Angular auntartication涉及为您的身份验证服务和应用程序的端到端测试创建单元测试。您可以使用茉莉花和业力等工具进行单位测试，而量角器进行端到端测试。这些测试应验证身份验证过程是否可以按预期工作并正确处理错误。
首页 web前端 js教程 使用OpenID Connect和OKTA在应用中使用OpenID Connect和OKTA设置Angular身份验证

使用OpenID Connect和OKTA在应用中使用OpenID Connect和OKTA设置Angular身份验证

Joseph Gordon-Levitt
Joseph Gordon-Levitt
Feb 16, 2025 am 11:09 AM

使用OpenID Connect和OKTA在应用中使用OpenID Connect和OKTA设置Angular身份验证

本文最初发表在Okta开发人员博客上。感谢您支持使SitietPoint成为可能的合作伙伴。 Angular（以前称为Angular 2.0）迅速成为构建现代单页应用程序的最强大方法之一。核心优势是Angular专注于构建可重复使用的组件，这有助于您将应用程序中的各种担忧解散。以身份验证为例：构建可能会很痛苦，但是一旦将其包装到组件中，就可以在整个应用程序中重复使用身份验证逻辑。> >

钥匙要点

快速脚手架并使用角CLI运行新的角度应用，从而提高了开发效率。

>通过与Okta设置OpenID Connect应用程序无缝集成身份验证，以确保安全的用户管理。

>通过添加Angular功能强大的组件系统添加搜索和编辑功能来增强用户体验。

>利用路由来管理应用程序中的导航，允许使用更顺畅的用户流和更好的状态管理。
    实施表单验证以确保数据完整性并提供反馈，从而提高了总体可用性。
  • >使用Angular的Authguard安全应用程序路由来保护敏感信息并强制执行身份验证。
    • 创建一个Angular应用程序
    • >
  • 提示：如果您想跳过构建Angular应用程序并正确添加身份验证，则可以克隆我的NG-DEMO项目，然后跳过OKTA部分中的OpenID Connect App。 >
    • 您需要的
大约20分钟

>最喜欢的文本编辑器或IDE。我推荐Intellij Idea

已安装了 安装了角度CLI。如果您没有安装Angular CLI，请使用NPM安装-G @angular/cli>安装它 

<span>git clone https://github.com/mraible/ng-demo.git
</span>
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
登录后复制
>使用ng new命令创建一个新项目：>

这将创建一个NG-DEMO项目并在其中运行NPM安装。完成大约需要一分钟的时间，但这可能会根据您的连接速度而有所不同。
    >
    • >您可以看到您使用ng -version使用的Angular CLI。>
    • 运行您的Angular应用程序
    • 该项目配置为WebPack Dev Server。要启动它，请确保您在NG-DEMO目录中，然后运行：>
    <span>git clone https://github.com/mraible/ng-demo.git
</span>
    登录后复制
    登录后复制
    登录后复制
    登录后复制
    登录后复制
    登录后复制

    >您应该在http：// localhost：4200。

    使用OpenID Connect和OKTA在应用中使用OpenID Connect和OKTA设置Angular身份验证>您可以确保新项目的测试通过，运行NG测试：>

    添加搜索功能
    ng new ng-demo
    登录后复制
    登录后复制
    登录后复制
    登录后复制
    登录后复制

    添加搜索功能，在IDE或您喜欢的文本编辑器中打开项目。对于Intellij Idea，请使用文件>新项目>静态网络，并指向NG-DEMO目录。

    在终端窗口中，将CD CD到您的项目目录中并运行以下命令。这将创建一个搜索组件。

    >打开src/app/search/search.component.html，并用以下内容替换其默认的html：
    <span>[mraible:~/dev] $ ng new ng-demo
</span>installing ng
  create .editorconfig
  create README.md
  create src/app/app.component.css
  create src/app/app.component.html
  create src/app/app.component.spec.ts
  create src/app/app.component.ts
  create src/app/app.module.ts
  create src/assets/.gitkeep
  create src/environments/environment.prod.ts
  create src/environments/environment.ts
  create src/favicon.ico
  create src/index.html
  create src/main.ts
  create src/polyfills.ts
  create src/styles.css
  create src/test.ts
  create src/tsconfig.app.json
  create src/tsconfig.spec.json
  create src/typings.d.ts
  create .angular-cli.json
  create e2e/app.e2e-spec.ts
  create e2e/app.po.ts
  create e2e/tsconfig.e2e.json
  create .gitignore
  create karma.conf.js
  create package.json
  create protractor.conf.js
  create tsconfig.json
  create tslint.json
Successfully initialized git.
Installing packages <span>for tooling via npm.
</span>Installed packages <span>for tooling via npm.
</span>You can <span><span>`ng set --global packageManager=yarn`</span>.
</span>Project <span>'ng-demo' successfully created.
</span><span>[mraible:~] 46s $
</span>
    登录后复制
    登录后复制
    登录后复制
    登录后复制
    登录后复制

    $ ng <span>--version
</span>    _                      _                 ____ _     ___
   / <span>\   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
</span>  / △ <span>\ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
</span> / ___ <span>\| | | | (_| | |_| | | (_| | |      | |___| |___ | |
</span>/_/   <span>\_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
</span>               <span>|___/
</span>@angular/cli: <span>1.3.2
</span>node: <span>8.4.0
</span>os: darwin x64
    登录后复制
    登录后复制
    登录后复制
    登录后复制
    登录后复制
    >在src/app/app.module.ts中，添加批准常数并在@ngmodule中导入：

    >

    >在src/app/app.component.html中，调整占位符内容，然后添加标签以显示路由。> 

    ng serve
    登录后复制
    登录后复制
    登录后复制
    登录后复制

    >现在您已经设置了路由，您可以继续编写搜索功能。

    如果您仍然有NG服务运行，则浏览器应自动刷新。如果没有，请导航到http：// localhost：4200。您可能会看到一个空白屏幕。打开您的JavaScript控制台，您会看到问题。
    $ ng <span>test
</span><span>...
</span>Chrome <span>60.0.3112 (Mac OS X 10.12.6): Executed 3 of 3 SUCCESS (0.239 secs / 0.213 secs)
</span>
    登录后复制
    登录后复制
    登录后复制
    登录后复制

    为了解决此问题，打开src/app/app.module.ts并添加formsModule作为@ngmodule中的导入：

    >

    >现在您应该看到搜索表格。使用OpenID Connect和OKTA在应用中使用OpenID Connect和OKTA设置Angular身份验证

    如果要为此组件添加CSS，请打开src/app/search/search.component.css并添加一些CSS。例如：
    $ ng g component search
installing component
  create src/app/search/search.component.css
  create src/app/search/search.component.html
  create src/app/search/search.component.spec.ts
  create src/app/search/search.component.ts
  update src/app/app.module.ts
    登录后复制
    登录后复制
    登录后复制
    登录后复制

    本节向您展示了如何将新组件生成具有角CLI的基本角度应用程序。下一节将向您展示如何创建和使用JSON文件和LocalStorage来创建假API。 使用OpenID Connect和OKTA在应用中使用OpenID Connect和OKTA设置Angular身份验证获得搜索结果，请创建一个向JSON文件提出HTTP请求的搜索服务。首先生成新服务。

    <span><span><span><h2</span>></span>Search<span><span></h2</span>></span>
</span><span><span><span><form</span>></span>
</span>  <span><span><span><input</span> type<span>="search"</span> name<span>="query"</span> [(ngModel)]<span>="query"</span> (keyup.enter)<span>="search()"</span>></span>
</span>  <span><span><span><button</span> type<span>="button"</span> (click)<span>="search()"</span>></span>Search<span><span></button</span>></span>
</span><span><span><span></form</span>></span>
</span><span><span><span><pre</span>></span>{{searchResults | json}}<span><span></pre</span>></span>
</span>
    登录后复制
    登录后复制
    登录后复制
    >将生成的search.service.ts及其测试移动到应用/共享/搜索。您需要创建此目录。

    创建SRC/Assets/data/people.json保存您的数据。 

    <span>import { Routes, RouterModule } from '@angular/router';
</span>
<span>const appRoutes: Routes = [
</span>  <span>{path: 'search', component: SearchComponent},
</span>  <span>{path: '', redirectTo: '/search', pathMatch: 'full'}
</span><span>];
</span>
<span><span>@NgModule</span>({
</span>  <span>...
</span>  imports<span>: [
</span>    <span>...
</span>    RouterModule<span>.forRoot(appRoutes)
</span>  <span>]
</span>  <span>...
</span><span>})
</span><span>export class AppModule { }
</span>
    登录后复制
    登录后复制
    登录后复制
    >修改src/app/app/shared/search/search.service.ts，并提供http作为其构造函数的依赖关系。在同一文件中，创建一个getall（）方法来收集所有人。另外，定义JSON将被编组为。

    >使这些类可用于组件的消费，请编辑src/app/shared/index.ts，并添加以下内容：>
    <span>git clone https://github.com/mraible/ng-demo.git
</span>
    登录后复制
    登录后复制
    登录后复制
    登录后复制
    登录后复制
    登录后复制

    创建此文件的原因是，您可以在单行上导入多个类，而不必在单独的行上导入每个单独的类。>

    >在src/app/search/search.component.ts中，添加这些类的导入。

    > 

    ng new ng-demo
    登录后复制
    登录后复制
    登录后复制
    登录后复制
    登录后复制
    >您现在可以添加查询和搜索变量。当您在那里时，请修改构造函数以注入搜索服务。

    > 

    <span>[mraible:~/dev] $ ng new ng-demo
</span>installing ng
  create .editorconfig
  create README.md
  create src/app/app.component.css
  create src/app/app.component.html
  create src/app/app.component.spec.ts
  create src/app/app.component.ts
  create src/app/app.module.ts
  create src/assets/.gitkeep
  create src/environments/environment.prod.ts
  create src/environments/environment.ts
  create src/favicon.ico
  create src/index.html
  create src/main.ts
  create src/polyfills.ts
  create src/styles.css
  create src/test.ts
  create src/tsconfig.app.json
  create src/tsconfig.spec.json
  create src/typings.d.ts
  create .angular-cli.json
  create e2e/app.e2e-spec.ts
  create e2e/app.po.ts
  create e2e/tsconfig.e2e.json
  create .gitignore
  create karma.conf.js
  create package.json
  create protractor.conf.js
  create tsconfig.json
  create tslint.json
Successfully initialized git.
Installing packages <span>for tooling via npm.
</span>Installed packages <span>for tooling via npm.
</span>You can <span><span>`ng set --global packageManager=yarn`</span>.
</span>Project <span>'ng-demo' successfully created.
</span><span>[mraible:~] 46s $
</span>
    登录后复制
    登录后复制
    登录后复制
    登录后复制
    登录后复制
    然后实现搜索（）方法来调用服务的getall（）方法。

    >此时，您可能会在浏览器的控制台中看到以下消息。
    $ ng <span>--version
</span>    _                      _                 ____ _     ___
   / <span>\   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
</span>  / △ <span>\ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
</span> / ___ <span>\| | | | (_| | |_| | | (_| | |      | |___| |___ | |
</span>/_/   <span>\_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
</span>               <span>|___/
</span>@angular/cli: <span>1.3.2
</span>node: <span>8.4.0
</span>os: darwin x64
    登录后复制
    登录后复制
    登录后复制
    登录后复制
    登录后复制
    >

    要修复上面的“无提供者”错误，请更新app.module.ts以导入搜索服务并将服务添加到提供商列表中。因为搜索服务取决于http，因此您还需要导入httpmodule。 
    ng serve
    登录后复制
    登录后复制
    登录后复制
    登录后复制

    现在，单击搜索按钮应起作用。为了使结果看起来更好，请删除

    标签，然后在src/app/app/search/search.component.html中替换为
    登录后复制
    。 然后，在src/app/search/search.component.css中添加一些其他CSS以改进其表布局。
    $ ng <span>test
</span><span>...
</span>Chrome <span>60.0.3112 (Mac OS X 10.12.6): Executed 3 of 3 SUCCESS (0.239 secs / 0.213 secs)
</span>
    登录后复制
    登录后复制
    登录后复制
    登录后复制

    现在，搜索结果看起来更好。
    $ ng g component search
installing component
  create src/app/search/search.component.css
  create src/app/search/search.component.html
  create src/app/search/search.component.spec.ts
  create src/app/search/search.component.ts
  update src/app/app.module.ts
    登录后复制
    登录后复制
    登录后复制
    登录后复制

    >但是，等等，您仍然没有搜索功能！要添加搜索功能，请在searchService中添加search（）方法。
    <span><span><span><h2</span>></span>Search<span><span></h2</span>></span>
</span><span><span><span><form</span>></span>
</span>  <span><span><span><input</span> type<span>="search"</span> name<span>="query"</span> [(ngModel)]<span>="query"</span> (keyup.enter)<span>="search()"</span>></span>
</span>  <span><span><span><button</span> type<span>="button"</span> (click)<span>="search()"</span>></span>Search<span><span></button</span>></span>
</span><span><span><span></form</span>></span>
</span><span><span><span><pre</span>></span>{{searchResults | json}}<span><span></pre</span>></span>
</span>
    登录后复制
    登录后复制
    登录后复制
    >

    然后重构搜索Component用其查询变量调用此方法。使用OpenID Connect和OKTA在应用中使用OpenID Connect和OKTA设置Angular身份验证>

    现在，搜索结果将被您输入的查询值进行过滤。> 
    <span>import { Routes, RouterModule } from '@angular/router';
</span>
<span>const appRoutes: Routes = [
</span>  <span>{path: 'search', component: SearchComponent},
</span>  <span>{path: '', redirectTo: '/search', pathMatch: 'full'}
</span><span>];
</span>
<span><span>@NgModule</span>({
</span>  <span>...
</span>  imports<span>: [
</span>    <span>...
</span>    RouterModule<span>.forRoot(appRoutes)
</span>  <span>]
</span>  <span>...
</span><span>})
</span><span>export class AppModule { }
</span>
    登录后复制
    登录后复制
    登录后复制
    >本节向您展示了如何获取和显示搜索结果。下一部分将基于此部分，并显示如何编辑和保存记录。

    >

    添加编辑功能
    <span><span><span><h1</span>></span>Welcome to {{title}}!<span><span></h1</span>></span>
</span><span><!-- Routed views go here -->
</span><span><span><span><router-outlet</span>></span><span><span></router-outlet</span>></span>
</span>
    登录后复制
    登录后复制

    >修改src/app/search/search.component.html添加一个用于编辑人员的链接。

    运行以下命令以生成editComponent。

    >在src/app/app.module.ts中为此组件添加路由：>

    >更新src/app/edit/edit/edit.component.html以显示可编辑的表单。您可能会注意到我已经在大多数元素中添加了ID属性。这是为了使事情在用量角器编写集成测试时变得容易。
    <span>import { FormsModule } from '@angular/forms';
</span>
<span><span>@NgModule</span>({
</span>  <span>...
</span>  imports<span>: [
</span>    <span>...
</span>    FormsModule
  <span>]
</span>  <span>...
</span><span>})
</span><span>export class AppModule { }
</span>
    登录后复制
    >

    >修改EditComponent以导入模型和服务类，并使用SearchService获取数据。
    <span><span>:host</span> {
</span>  <span>display: block;
</span>  <span>padding: 0 20px;
</span><span>}
</span>
    登录后复制

    >修改搜索服务，以包含以通过其ID找到一个人并保存它们的功能。当您在那里时，修改搜索（）方法以了解LocalStorage中的更新对象。 
    $ ng g <span>service search
</span>installing <span>service
</span>  create src/app/search.service.spec.ts
  create src/app/search.service.ts
  WARNING Service is generated but not provided, it must be provided to be used
    登录后复制

    >您可以将CSS添加到src/app/edit/edit/edit.component.css，如果要使表单看起来更好。

    > 
    <span>mkdir -p src/app/shared/search
</span><span>mv src/app/search.service.* src/app/shared/search/.
</span>
    登录后复制
    在这一点上，您应该能够搜索一个人并更新他们的信息。>使用OpenID Connect和OKTA在应用中使用OpenID Connect和OKTA设置Angular身份验证

    > 在src/app/edit/edit/edit.component.html中调用save（）函数以更新人的数据。您已经在上面实现了这一点。 该函数调用gotolist（）函数，该函数将用户发送回搜索屏幕时，将人的名字附加到URL。 

    <span>git clone https://github.com/mraible/ng-demo.git
</span>
    登录后复制
    登录后复制
    登录后复制
    登录后复制
    登录后复制
    登录后复制
    >由于执行此URL时搜索Component不会自动执行搜索，因此将以下逻辑添加到其构造函数中。

    >您需要实现ondestroy并定义ngondestroy方法来清理此订阅。
    ng new ng-demo
    登录后复制
    登录后复制
    登录后复制
    登录后复制
    登录后复制

    进行所有这些更改后，您应该能够搜索/编辑/更新一个人的信息。如果有效 - 工作好！

    > 
    <span>[mraible:~/dev] $ ng new ng-demo
</span>installing ng
  create .editorconfig
  create README.md
  create src/app/app.component.css
  create src/app/app.component.html
  create src/app/app.component.spec.ts
  create src/app/app.component.ts
  create src/app/app.module.ts
  create src/assets/.gitkeep
  create src/environments/environment.prod.ts
  create src/environments/environment.ts
  create src/favicon.ico
  create src/index.html
  create src/main.ts
  create src/polyfills.ts
  create src/styles.css
  create src/test.ts
  create src/tsconfig.app.json
  create src/tsconfig.spec.json
  create src/typings.d.ts
  create .angular-cli.json
  create e2e/app.e2e-spec.ts
  create e2e/app.po.ts
  create e2e/tsconfig.e2e.json
  create .gitignore
  create karma.conf.js
  create package.json
  create protractor.conf.js
  create tsconfig.json
  create tslint.json
Successfully initialized git.
Installing packages <span>for tooling via npm.
</span>Installed packages <span>for tooling via npm.
</span>You can <span><span>`ng set --global packageManager=yarn`</span>.
</span>Project <span>'ng-demo' successfully created.
</span><span>[mraible:~] 46s $
</span>
    登录后复制
    登录后复制
    登录后复制
    登录后复制
    登录后复制
    形式验证

    您可能会注意到的一件事是，您可以清除表单中的任何输入元素并保存。至少应需要名称字段。否则，搜索结果中没有任何点击。

    >

    >要命名，请修改edit.component.html，以将所需属性添加到名称。

    >您还需要将所有内容包裹在元素中。在

    标签之后添加，然后在最后一个之前将其关闭。您还需要将（ngsubmit）处理程序添加到表格中，然后更改保存按钮为常规提交按钮。

    进行这些更改后，将需要任何具有所需属性的字段。
    $ ng <span>--version
</span>    _                      _                 ____ _     ___
   / <span>\   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
</span>  / △ <span>\ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
</span> / ___ <span>\| | | | (_| | |_| | | (_| | |      | |___| |___ | |
</span>/_/   <span>\_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
</span>               <span>|___/
</span>@angular/cli: <span>1.3.2
</span>node: <span>8.4.0
</span>os: darwin x64
    登录后复制
    登录后复制
    登录后复制
    登录后复制
    登录后复制
    >

    在此屏幕截图中，您可能会注意到地址字段为空白。这是由您的控制台中的错误来解释的。

    > 
    ng serve
    登录后复制
    登录后复制
    登录后复制
    登录后复制

    要修复，请在所有地址字段中添加名称属性。例如：

    使用OpenID Connect和OKTA在应用中使用OpenID Connect和OKTA设置Angular身份验证

    现在的值应在所有字段中显示，并需要在所有字段中显示。

    > 
    $ ng <span>test
</span><span>...
</span>Chrome <span>60.0.3112 (Mac OS X 10.12.6): Executed 3 of 3 SUCCESS (0.239 secs / 0.213 secs)
</span>
    登录后复制
    登录后复制
    登录后复制
    登录后复制

    如果您想提供自己的验证消息而不是依靠浏览器，请完成以下步骤： 

    $ ng g component search
installing component
  create src/app/search/search.component.css
  create src/app/search/search.component.html
  create src/app/search/search.component.spec.ts
  create src/app/search/search.component.ts
  update src/app/app.module.ts
    登录后复制
    登录后复制
    登录后复制
    登录后复制
    >删除ngnativeValidate，然后将＃editform =“ ngform”添加到
    element。

    >添加＃名称=“ ngmodel”到 element。

    >添加[disabled] =“！editform.form.valid”到使用OpenID Connect和OKTA在应用中使用OpenID Connect和OKTA设置Angular身份验证> save

    button。

    >在名称字段下添加以下内容以显示验证错误。
      >
    2. 要了解有关形式和验证的更多信息，请参见Angular Forms文档。
      3. 在Okta
    3. 中创建一个OpenID Connect应用程序 OpenID Connect（OIDC）建立在OAuth 2.0协议之上。它允许客户端验证用户的身份以及获得其基本配置信息。要了解更多信息，请参见https://openid.net/connect。 >要集成OKTA以进行用户身份验证，您首先需要注册并创建一个OIDC应用程序。

      >登录到您的Okta帐户，或者如果没有一个帐户，则创建一个帐户。导航到应用程序，然后单击“添加应用”按钮。选择水疗中心，然后单击下一步。在下一页上，指定http：// localhost：4200作为基本URI，登录重定向URI和注销重定向URI。单击完成，您应该像以下内容一样看到设置。

      使用OpenID Connect和OKTA在应用中使用OpenID Connect和OKTA设置Angular身份验证

      >安装Manfred Steyer的项目，以使用NPM添加OAuth 2和OpenID Connect。 

      <span>git clone https://github.com/mraible/ng-demo.git
</span>
      登录后复制
      登录后复制
      登录后复制
      登录后复制
      登录后复制
      登录后复制
      >修改src/app/app.component.ts以导入oauthservice并配置应用程序以使用Okta应用程序的设置。 

      ng new ng-demo
      登录后复制
      登录后复制
      登录后复制
      登录后复制
      登录后复制
      创建src/app/home/home.component.ts并将其配置为具有登录和注销按钮。

      <span>[mraible:~/dev] $ ng new ng-demo
</span>installing ng
  create .editorconfig
  create README.md
  create src/app/app.component.css
  create src/app/app.component.html
  create src/app/app.component.spec.ts
  create src/app/app.component.ts
  create src/app/app.module.ts
  create src/assets/.gitkeep
  create src/environments/environment.prod.ts
  create src/environments/environment.ts
  create src/favicon.ico
  create src/index.html
  create src/main.ts
  create src/polyfills.ts
  create src/styles.css
  create src/test.ts
  create src/tsconfig.app.json
  create src/tsconfig.spec.json
  create src/typings.d.ts
  create .angular-cli.json
  create e2e/app.e2e-spec.ts
  create e2e/app.po.ts
  create e2e/tsconfig.e2e.json
  create .gitignore
  create karma.conf.js
  create package.json
  create protractor.conf.js
  create tsconfig.json
  create tslint.json
Successfully initialized git.
Installing packages <span>for tooling via npm.
</span>Installed packages <span>for tooling via npm.
</span>You can <span><span>`ng set --global packageManager=yarn`</span>.
</span>Project <span>'ng-demo' successfully created.
</span><span>[mraible:~] 46s $
</span>
      登录后复制
      登录后复制
      登录后复制
      登录后复制
      登录后复制
      创建src/app/app/auth/auth.guard.service.ts，如果没有认证，则导航到homecompont。

      > src/shared/index.ts中的导出authguard：> 
      $ ng <span>--version
</span>    _                      _                 ____ _     ___
   / <span>\   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
</span>  / △ <span>\ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
</span> / ___ <span>\| | | | (_| | |_| | | (_| | |      | |___| |___ | |
</span>/_/   <span>\_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
</span>               <span>|___/
</span>@angular/cli: <span>1.3.2
</span>node: <span>8.4.0
</span>os: darwin x64
      登录后复制
      登录后复制
      登录后复制
      登录后复制
      登录后复制

      >在src /app /app.module.ts中导入OAuthModule，配置新的HomeComponent，然后用Authguard锁定 /搜索和 /编辑路由。 

      ng serve
      登录后复制
      登录后复制
      登录后复制
      登录后复制
      进行这些更改后，您应该能够运行NG服务并查看登录按钮。>

      单击“登录”按钮，然后与Okta应用程序中配置的一个人登录。
      $ ng <span>test
</span><span>...
</span>Chrome <span>60.0.3112 (Mac OS X 10.12.6): Executed 3 of 3 SUCCESS (0.239 secs / 0.213 secs)
</span>
      登录后复制
      登录后复制
      登录后复制
      登录后复制

      登录后，您将可以单击使用OpenID Connect和OKTA在应用中使用OpenID Connect和OKTA设置Angular身份验证搜索

      并查看人们的信息。

      > 使用OpenID Connect和OKTA在应用中使用OpenID Connect和OKTA设置Angular身份验证

      如果有效 - 太好了！如果您想在应用程序中构建自己的登录表单，请继续阅读以学习如何使用Oauthservice使用Okta auth SDK。 用Okta auth SDK 进行身份验证 > Okta auth SDK在Otka的身份验证API和OAUTH 2.0 API之上构建，以使您能够使用JavaScript创建一个完全品牌的登录体验。

      使用OpenID Connect和OKTA在应用中使用OpenID Connect和OKTA设置Angular身份验证使用NPM安装它：

      >在.angular-cli.json中添加对此库的主要JavaScript文件的引用：

      本节中的组件使用Bootstrap CSS类。安装Bootstrap 4. 

      $ ng g component search
installing component
  create src/app/search/search.component.css
  create src/app/search/search.component.html
  create src/app/search/search.component.spec.ts
  create src/app/search/search.component.ts
  update src/app/app.module.ts
      登录后复制
      登录后复制
      登录后复制
      登录后复制
      >修改src/styles.css以添加引用Bootstrap的CSS文件的引用。

      <span><span><span><h2</span>></span>Search<span><span></h2</span>></span>
</span><span><span><span><form</span>></span>
</span>  <span><span><span><input</span> type<span>="search"</span> name<span>="query"</span> [(ngModel)]<span>="query"</span> (keyup.enter)<span>="search()"</span>></span>
</span>  <span><span><span><button</span> type<span>="button"</span> (click)<span>="search()"</span>></span>Search<span><span></button</span>></span>
</span><span><span><span></form</span>></span>
</span><span><span><span><pre</span>></span>{{searchResults | json}}<span><span></pre</span>></span>
</span>
      登录后复制
      登录后复制
      登录后复制
      >更新src/app/app.component.html用于其navbar和网格系统。

      > 

      <span>import { Routes, RouterModule } from '@angular/router';
</span>
<span>const appRoutes: Routes = [
</span>  <span>{path: 'search', component: SearchComponent},
</span>  <span>{path: '', redirectTo: '/search', pathMatch: 'full'}
</span><span>];
</span>
<span><span>@NgModule</span>({
</span>  <span>...
</span>  imports<span>: [
</span>    <span>...
</span>    RouterModule<span>.forRoot(appRoutes)
</span>  <span>]
</span>  <span>...
</span><span>})
</span><span>export class AppModule { }
</span>
      登录后复制
      登录后复制
      登录后复制
      > Create Src/app/shared/auth/okta.auth.wrapper.ts包装Okta auth SDK并将其与Oauthservice集成。它的登录（）方法使用Oktaaauth获取会话令牌并将其交换为ID和访问令牌。

      > 

      <span><span><span><h1</span>></span>Welcome to {{title}}!<span><span></h1</span>></span>
</span><span><!-- Routed views go here -->
</span><span><span><span><router-outlet</span>></span><span><span></router-outlet</span>></span>
</span>
      登录后复制
      登录后复制
      在上面的代码中，oauthservice.trylogin（）解析并存储iDtoken和accessToken，因此可以使用oauthservice.getIdtoken（）和oauthservice.getAccesstoken（）。 SRC/shared/index.ts中的oktaauthwrapper

      > 

      <span>git clone https://github.com/mraible/ng-demo.git
</span>
      登录后复制
      登录后复制
      登录后复制
      登录后复制
      登录后复制
      登录后复制

      >在app.module.ts。 

      ng new ng-demo
      登录后复制
      登录后复制
      登录后复制
      登录后复制
      登录后复制
      >更改家庭成员以声明oktaaauth并修改其模板，以便它具有登录的按钮，以及登录表单。

      进行这些更改后，家庭成分应如下呈现。
      <span>[mraible:~/dev] $ ng new ng-demo
</span>installing ng
  create .editorconfig
  create README.md
  create src/app/app.component.css
  create src/app/app.component.html
  create src/app/app.component.spec.ts
  create src/app/app.component.ts
  create src/app/app.module.ts
  create src/assets/.gitkeep
  create src/environments/environment.prod.ts
  create src/environments/environment.ts
  create src/favicon.ico
  create src/index.html
  create src/main.ts
  create src/polyfills.ts
  create src/styles.css
  create src/test.ts
  create src/tsconfig.app.json
  create src/tsconfig.spec.json
  create src/typings.d.ts
  create .angular-cli.json
  create e2e/app.e2e-spec.ts
  create e2e/app.po.ts
  create e2e/tsconfig.e2e.json
  create .gitignore
  create karma.conf.js
  create package.json
  create protractor.conf.js
  create tsconfig.json
  create tslint.json
Successfully initialized git.
Installing packages <span>for tooling via npm.
</span>Installed packages <span>for tooling via npm.
</span>You can <span><span>`ng set --global packageManager=yarn`</span>.
</span>Project <span>'ng-demo' successfully created.
</span><span>[mraible:~] 46s $
</span>
      登录后复制
      登录后复制
      登录后复制
      登录后复制
      登录后复制
      >

      >为用户名和密码字段添加局部变量，导入Oktaauthwrapper，并在HomeComponent中实现loginwithpassword（）方法。使用OpenID Connect和OKTA在应用中使用OpenID Connect和OKTA设置Angular身份验证>

      >您应该可以使用应用程序的注册用户之一使用表格登录。登录后，您可以单击搜索链接并查看人们的信息。 
      $ ng <span>--version
</span>    _                      _                 ____ _     ___
   / <span>\   _ __   __ _ _   _| | __ _ _ __     / ___| |   |_ _|
</span>  / △ <span>\ | '_ \ / _` | | | | |/ _` | '__|   | |   | |    | |
</span> / ___ <span>\| | | | (_| | |_| | | (_| | |      | |___| |___ | |
</span>/_/   <span>\_\_| |_|\__, |\__,_|_|\__,_|_|       \____|_____|___|
</span>               <span>|___/
</span>@angular/cli: <span>1.3.2
</span>node: <span>8.4.0
</span>os: darwin x64
      登录后复制
      登录后复制
      登录后复制
      登录后复制
      登录后复制
      如果一切都起作用 - 恭喜！如果您遇到问题，请发布一个问题，以堆叠使用Okta标签，或在Twitter @mrabily上打我。使用OpenID Connect和OKTA在应用中使用OpenID Connect和OKTA设置Angular身份验证

      >您可以在GitHub上此博客文章中找到完整的应用程序。要在Angular中了解有关安全性的更多信息，请参见Angular的安全文档。如果您想了解有关OpenID Connect的更多信息，我建议您观看下面的舒缓视频。

      >

      经常询问有关Angular身份验证的问题（常见问题解答）

      > OIDC在Angular身份验证中的作用是什么？

      openID Connect（OIDC）是在OAuth 2.0协议顶部构建的简单身份层。它允许客户根据授权服务器执行的身份验证来验证最终用户的身份。在Angular中，OIDC用于处理用户身份验证。它提供了一个安全且可扩展的框架，可以处理多个用户身份，从而更容易管理用户会话和访问控制。

      如何在角度？几个步骤。首先，您需要安装必要的软件包，例如Angular-auth-oidc-client。然后，您在应用程序模块中配置OIDC模块，指定必要的参数，例如授权，客户端ID和响应类型。之后，您可以使用OIDC服务来处理用户登录，注销和令牌验证。

      >

      >如何使用Angular hander hander jwt代币？将各方之间的信息牢固地传输为JSON对象。当用户登录时，服务器会生成一个包含用户身份并将其发送给客户端的JWT。客户端存储此令牌，并将其包含在服务器的每个请求中。然后，服务器验证令牌以确保用户被认证。

      >

      > OAuth2和OIDC？

      oauth2是一个协议，该协议允许应用程序在HTTP服务上获得对用户帐户的有限访问权限。它用于授权。另一方面，OIDC是在OAuth2顶部构建的身份层。它扩展了OAuth2以提供身份验证，从而允许应用程序验证用户的身份。

      >

      >我如何保护我的Angular应用程序？

      确保您的Angular应用程序涉及多个步骤。首先，您应使用HTTPS在运输中加密数据。其次，使用JWT进行用户身份验证和会话管理。第三，实现访问控制以限制用户可以访问的资源。最后，对用户输入进行消毒以防止跨站点脚本（XSS）攻击。

      如何使用JWT处理Angular的用户会话？当用户登录时，服务器会生成一个包含用户身份并将其发送给客户端的JWT。客户端存储此令牌，并将其包含在服务器的每个请求中。然后，该服务器验证令牌以确保用户被身份验证。

      如何使用路由警卫实现Angular？路线护罩是可以告诉路由器的接口，是否应允许导航到请求的路线。它们可用于根据用户的角色或身份验证状态来限制对某些路线的访问。

      >

      >我如何处理Angular身份验证中的错误？

      可以使用错误处理程序来处理Angular身份验证中的错误。错误处理程序是将错误作为参数并处理的函数。您可以使用它向用户显示错误消息，记录错误，甚至将用户重定向到另一个页面。

      >

      如何测试角身份验证？

      >测试Angular auntartication涉及为您的身份验证服务和应用程序的端到端测试创建单元测试。您可以使用茉莉花和业力等工具进行单位测试，而量角器进行端到端测试。这些测试应验证身份验证过程是否可以按预期工作并正确处理错误。

      >

以上是使用OpenID Connect和OKTA在应用中使用OpenID Connect和OKTA设置Angular身份验证的详细内容。更多信息请关注PHP中文网其他相关文章！

本站声明
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序，用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

Video Face Swap

Video Face Swap

使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸！

显示更多

热门文章

如何修复KB5055612无法在Windows 10中安装？
4 周前 By DDD
<🎜>：泡泡胶模拟器无穷大 - 如何获取和使用皇家钥匙
4 周前 By 尊渡假赌尊渡假赌尊渡假赌
<🎜>：种植花园 - 完整的突变指南
3 周前 By DDD
北端：融合系统，解释
4 周前 By 尊渡假赌尊渡假赌尊渡假赌
Mandragora：巫婆树的耳语 - 如何解锁抓钩
3 周前 By 尊渡假赌尊渡假赌尊渡假赌
显示更多

热工具

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版，非常好用

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

显示更多

热门话题

Java教程
1672
14
CakePHP 教程
1428
52
Laravel 教程
1332
25
PHP教程
1276
29
C# 教程
1256
24
显示更多
Related knowledge
Python vs. JavaScript：学习曲线和易用性 Python vs. JavaScript：学习曲线和易用性 Apr 16, 2025 am 12:12 AM

Python更适合初学者，学习曲线平缓，语法简洁；JavaScript适合前端开发，学习曲线较陡，语法灵活。1.Python语法直观，适用于数据科学和后端开发。2.JavaScript灵活，广泛用于前端和服务器端编程。

JavaScript和Web：核心功能和用例 JavaScript和Web：核心功能和用例 Apr 18, 2025 am 12:19 AM

JavaScript在Web开发中的主要用途包括客户端交互、表单验证和异步通信。1)通过DOM操作实现动态内容更新和用户交互；2)在用户提交数据前进行客户端验证，提高用户体验；3)通过AJAX技术实现与服务器的无刷新通信。

JavaScript在行动中：现实世界中的示例和项目 JavaScript在行动中：现实世界中的示例和项目 Apr 19, 2025 am 12:13 AM

JavaScript在现实世界中的应用包括前端和后端开发。1)通过构建TODO列表应用展示前端应用，涉及DOM操作和事件处理。2)通过Node.js和Express构建RESTfulAPI展示后端应用。

了解JavaScript引擎：实施详细信息 了解JavaScript引擎：实施详细信息 Apr 17, 2025 am 12:05 AM

理解JavaScript引擎内部工作原理对开发者重要，因为它能帮助编写更高效的代码并理解性能瓶颈和优化策略。1)引擎的工作流程包括解析、编译和执行三个阶段；2)执行过程中，引擎会进行动态优化，如内联缓存和隐藏类；3)最佳实践包括避免全局变量、优化循环、使用const和let，以及避免过度使用闭包。

Python vs. JavaScript：社区，图书馆和资源 Python vs. JavaScript：社区，图书馆和资源 Apr 15, 2025 am 12:16 AM

Python和JavaScript在社区、库和资源方面的对比各有优劣。1)Python社区友好，适合初学者，但前端开发资源不如JavaScript丰富。2)Python在数据科学和机器学习库方面强大，JavaScript则在前端开发库和框架上更胜一筹。3)两者的学习资源都丰富，但Python适合从官方文档开始，JavaScript则以MDNWebDocs为佳。选择应基于项目需求和个人兴趣。

Python vs. JavaScript：开发环境和工具 Python vs. JavaScript：开发环境和工具 Apr 26, 2025 am 12:09 AM

Python和JavaScript在开发环境上的选择都很重要。1)Python的开发环境包括PyCharm、JupyterNotebook和Anaconda，适合数据科学和快速原型开发。2)JavaScript的开发环境包括Node.js、VSCode和Webpack，适用于前端和后端开发。根据项目需求选择合适的工具可以提高开发效率和项目成功率。

C/C在JavaScript口译员和编译器中的作用 C/C在JavaScript口译员和编译器中的作用 Apr 20, 2025 am 12:01 AM

C和C 在JavaScript引擎中扮演了至关重要的角色，主要用于实现解释器和JIT编译器。 1）C 用于解析JavaScript源码并生成抽象语法树。 2）C 负责生成和执行字节码。 3）C 实现JIT编译器，在运行时优化和编译热点代码，显着提高JavaScript的执行效率。

从网站到应用程序：JavaScript的不同应用 从网站到应用程序：JavaScript的不同应用 Apr 22, 2025 am 12:02 AM

JavaScript在网站、移动应用、桌面应用和服务器端编程中均有广泛应用。1)在网站开发中，JavaScript与HTML、CSS一起操作DOM，实现动态效果，并支持如jQuery、React等框架。2)通过ReactNative和Ionic，JavaScript用于开发跨平台移动应用。3)Electron框架使JavaScript能构建桌面应用。4)Node.js让JavaScript在服务器端运行，支持高并发请求。

See all articles