angular构建项目_在10分钟内通过用户身份验证构建Angular应用

angular构建项目

Angular is one of the hottest JavaScript MVC frameworks today. If you look at the number of jobs on LinkedIn, you’ll see that many companies are looking for developers that know Angular.

Angular是当今最热门JavaScript MVC框架之一。 如果查看LinkedIn上的职位数量，您会发现许多公司正在寻找了解Angular的开发人员。

If you look on Google Trends, you can see that a lot of folks are searching for the term “angular".

如果您查看Google趋势，就会发现很多人都在搜索“角度”一词。

This proves that Angular is a hot skill to have! In this article, I’ll show you a quick way to get started with Angular, and add user authentication with Stormpath.

这证明了Angular是一项热门技能！ 在本文中，我将向您展示一种快速入门Angular的方法，并使用Stormpath添加用户身份验证。

TIP: If you’re just getting started with Angular, you might want to watch a video of my recent Getting Started with Angular webinar:

提示：如果您刚刚开始使用Angular，则可能要观看我最近的Angular入门网络研讨会的视频：

https://www.youtube.com/watch?v=Jq3szz2KOOs

https://www.youtube.com/watch?v=Jq3szz2KOOs

为什么要使用Stormpath进行用户身份验证？ ( Why User Authentication with Stormpath? )

Stormpath is an API service that allows developers to create, edit, and securely store user accounts and user account data, and connect them with one or multiple applications. We make user account management a lot easier, more secure, and infinitely scalable.

Stormpath是一项API服务，允许开发人员创建，编辑和安全地存储用户帐户和用户帐户数据，并将它们与一个或多个应用程序连接。 我们使用户帐户管理变得更加轻松，安全和无限扩展。

Recently, we launched our Client API which allows you to authenticate directly against Stormpath without installing a server component. This means frontend and mobile developers can enjoy the same first-class developer experience our server-side developers do. All our client SDKs (Angular, React, iOS, and Android) have been updated to support Client API.

最近，我们启动了客户端API ，该API可让您直接针对Stormpath进行身份验证，而无需安装服务器组件。 这意味着前端和移动开发人员可以享受与服务器端开发人员相同的一流开发人员体验。 我们所有的客户端SDK（ Angular ， React ， iOS和Android ）均已更新，以支持Client API。

This article shows how you can use our Angular SDK to create login, registration, and forgot password forms in an Angular application. The forms will interact with Stormpath’s Client API without the need for any server-side code.

本文介绍了如何使用Angular SDK在Angular应用程序中创建登录，注册和忘记密码形式。 这些表单将与Stormpath的客户端API进行交互，而无需任何服务器端代码。

创建一个Angular应用程序 ( Create an Angular Application )

To see how you might use Stormpath in a simple Angular application, create a new application with Angular CLI. First, you’ll need to install Angular CLI.

要查看如何在简单的Angular应用程序中使用Stormpath，请使用Angular CLI创建一个新应用程序。 首先，您需要安装Angular CLI。

yarn add global angular-cli

NOTE: You can also use npm install -g angular-cli, but Yarn is faster.

注意：您也可以使用npm install -g angular-cli ，但是Yarn更快。

After this command completes, you can create a new application.

此命令完成后，您可以创建一个新的应用程序。

ng new angular-stormpath-example

This will create a new angular-stormpath-example directory and run npm install to install all the necessary dependencies. To verify everything works, run ng serve in one terminal window and ng e2e in another. All tests should pass and you should see results like the following.

这将创建一个新的angular-stormpath-example目录，并运行npm install来安装所有必需的依赖项。 要验证一切正常，请在一个终端窗口中运行ng serve ，然后在另一个终端窗口中运行ng e2e 。 所有测试都应该通过，您应该看到类似以下的结果。

整合Stormpath的角度支持 ( Integrate Stormpath’s Angular Support )

Install the Angular components for Stormpath using yarn.

使用纱线为Stormpath安装Angular组件 。

yarn add angular-stormpath

Modify app.module.ts to import StormpathModule and configure your app to use Stormpath's Client API.

修改app.module.ts以导入StormpathModule并配置您的应用程序以使用Stormpath的Client API 。

import { StormpathModule, StormpathConfiguration } from 'angular-stormpath';
...

export function stormpathConfig(): StormpathConfiguration {
 let spConfig: StormpathConfiguration = new StormpathConfiguration();
 spConfig.endpointPrefix = 'https://{DNS-LABEL}.apps.stormpath.io';
 return spConfig;
}

@NgModule({
 ...
 imports: [
   ...
   StormpathModule
 ],
 providers: [{
   provide: StormpathConfiguration, useFactory: stormpathConfig
 }],
 bootstrap: [AppComponent]
})
export class AppModule {}

Change app.component.ts to extend AuthPortComponent.

更改app.component.ts以扩展AuthPortComponent 。

import { AuthPortComponent } from 'angular-stormpath';

...
export class AppComponent extends AuthPortComponent {
...

Update app.component.html to use the <sp-authport> component and hide views if the user is not authenticated.

更新app.component.html以使用<sp-authport>组件，如果用户未通过身份验证，则隐藏视图。

<h1>{{title}}</h1>
<sp-authport></sp-authport>

<div *ngIf="(user$ | async)">
 <h2>
   Welcome, {{ ( user$ | async ).fullName }}


  <a href="#" (click)="logout(); false">Logout</a>
</div>
<div [hidden]="!(user$ | async)">
<!-- secure components or <router-outlet></router-outlet> -->
</div>

The Stormpath components use Bootstrap CSS classes by default. Add a reference to Bootstrap's CSS in the <head> of index.html.

默认情况下，Stormpath组件使用Bootstrap CSS类。 在index.html的<head>中添加对BootstrapCSS的引用。

<head>
 ...
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>

After making these changes, if you run ng serve, you’ll likely see something similar to the following error in your browser’s console.

进行这些更改后，如果运行ng serve ，则可能会在浏览器的控制台中看到类似于以下错误的内容。

XMLHttpRequest cannot load https://raible.apps.stormpath.io/me. Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:4200 is therefore not allowed access. The response had HTTP status code 403.

XMLHttpRequest无法加载https://raible.apps.stormpath.io/me。 对预检请求的响应未通过访问控制检查：在所请求的资源上不存在“ Access-Control-Allow-Origin”标头。 因此，不允许访问源'http：// localhost：4200。 响应的HTTP状态码为403。

To fix this, you’ll need to login and navigate to Applications > My Application and modify the Authorized Origin URIs to include http://localhost:4200.

要解决此问题，您需要登录并导航至“应用程序”>“我的应用程序”，然后修改“ 授权来源URI”以包括http://localhost:4200 。

After making this change, you should be able to login with one of your user's that's configured in Stormpath.

进行此更改后，您应该能够使用在Stormpath中配置的用户之一登录。

After logging in, you'll be able to search and see the user's information.

登录后，您将可以搜索并查看用户的信息。

If it works - congrats! If it doesn't, let us know in our

Talk Stormpath Slack channel, or hit me up on Twitter.

Talk Talkpath Slack频道中让我们知道，或者在Twitter上打我。

修复测试 ( Fix Tests )

If you try to run npm test or ng test, tests will fail with the same error you saw before:

如果尝试运行npm test或ng test ，则测试将失败，并返回与您之前看到的相同的错误：

'sp-authport' is not a known element:
1. If 'sp-authport' is an Angular component, then verify that it is part of this module.

The first step to fixing this is to import StormpathModule into src/app/app.component.spec.ts.

解决此问题的第一步是将StormpathModule导入src/app/app.component.spec.ts 。

beforeEach(() => {
  TestBed.configureTestingModule({
    declarations: [
      AppComponent
    ],
    imports: [StormpathModule]
  });
});

This will get you a bit further, but there will be an error about the /me endpoint not being found.

这会使您更进一步，但是会出现关于/ me端点未找到的错误。

Chrome 55.0.2883(Mac OS X 10.12.2) ERROR
  Uncaught Error: /me endpoint not found, please check server configuration.

To workaround this, you can override the Angular’s Http dependency and mock out its backend.

要解决此问题，您可以覆盖Angular的Http依赖关系并模拟出其后端。

import{ StormpathModule, Stormpath } from 'angular-stormpath';
import { BaseRequestOptions, Http, ConnectionBackend } from '@angular/http';
import { MockBackend } from '@angular/http/testing';
...
beforeEach(() => {
  TestBed.configureTestingModule({
    declarations: [AppComponent],
    imports: [StormpathModule],
    providers: [
      {
        provide: Http, useFactory: (backend: ConnectionBackend, defaultOptions: BaseRequestOptions) => {
        return new Http(backend, defaultOptions);
      },
        deps: [MockBackend, BaseRequestOptions]
      },
      {provide: Stormpath, useClass: Stormpath},
      {provide: MockBackend, useClass: MockBackend},
      {provide: BaseRequestOptions, useClass: BaseRequestOptions}
    ]
  });
});

After making these changes, you should see the sweet smell of success.

进行这些更改之后，您应该会看到成功的甜美气味。

Chrome 55.0.2883(Mac OS X 10.12.2): Executed 3 of 3 SUCCESS (1.031 secs / 1.026 secs)

Protractor tests should still work as well. You can prove this by running npm start in one terminal and npm run e2e in another.

量角器测试也应该仍然有效。 您可以通过在一个终端上运行npm start在另一个终端上npm run e2e来证明这一点。

角+风暴路径 ( Angular + Stormpath )

You can find a completed version of the application created in this blog post on GitHub.

您可以在GitHub上的此博客文章中找到该应用程序的完整版本。

If you’re interested in learning more about why you should let us build auth for you, check out our Build Versus Buy whitepaper. TL;DR? Building authentication in an application is hard. It’s even less fun to build it over and over again in each application you build. Stormpath does the hard part for you and makes it a lot more fun to be a developer! Sign up for a forever-free developer account and try Stormpath today!

如果您想了解更多有关为什么要让我们为您构建auth的信息，请查看Build Versus Buy白皮书 。 TL; DR？ 在应用程序中建立身份验证很困难。 在您构建的每个应用程序中一遍又一遍地构建它的乐趣就更少了。 Stormpath为您完成了艰辛的工作，使成为一名开发人员变得更加有趣！ 注册一个永久免费的开发者帐户 ，今天就尝试Stormpath！

I hope you’ve enjoyed this quick tour of our Angular support. If you have questions about Stormpath’s features, or what we’re building next, please hit me up on Twitter, leave a comment below, or open an issue on GitHub.

希望您喜欢我们的Angular支持快速浏览。 如果您对Stormpath的功能或下一步要解决的问题有疑问，请在Twitter上打我， 在下方发表评论，或在GitHub上发布问题 。

翻译自: https://scotch.io/tutorials/build-an-angular-app-with-user-authentication-in-10-minutes

angular构建项目