[英]Angular 4/Angular 2 validate SPA against Azure B2C Active Directory
In Angular 4/Angular 2 app, I want to validate it against Azure B2C Active Directory. 在Angular 4 / Angular 2应用中,我想针对Azure B2C Active Directory进行验证。 In ASP.NET MVC, it was done using [Authorize] attribute on Controller and using an OWIN Startup.cs class to generate the authentication challenge and generating the Bearer token.
在ASP.NET MVC中,使用Controller上的[Authorize]属性并使用OWIN Startup.cs类来生成身份验证质询并生成Bearer令牌来完成此操作。
Moving on to a SPA application using Angular 4/Angular 2, I am not able to find a relevant tutorial for the same. 转到使用Angular 4 / Angular 2的SPA应用程序,我找不到与此相关的教程。 I have seen some examples using Auth0, but I am not looking for an Auth0 solution.
我已经看到了一些使用Auth0的示例,但是我没有在寻找Auth0解决方案。 I want to authenticate directly against the Azure B2C Active Directory.
我想直接针对Azure B2C Active Directory进行身份验证。
Can some approach and relevant example and tutorial describing the same be provided. 可以提供一些方法以及相关示例和描述它们的教程。
Tried ng2-adal sample suggested by 'Fei Xue - MSFT' below. 下面的“费雪-MSFT”建议对ng2-adal样品进行尝试。 Adding ng2-adal sample error message pics.
添加ng2-adal示例错误消息图片。
Added 'package.json' code:- 添加了'package.json'代码:-
{
"name": "angular2-azure-ad",
"version": "1.0.0",
"scripts": {
"gulp": "gulp",
"start": "tsc && concurrently \"npm run tsc:w\" \"npm run lite\" ",
"lite": "lite-server",
"postinstall": "typings install",
"build": "tsc",
"tsc": "tsc",
"tsc:w": "tsc -w",
"typings": "typings"
},
"license": "ISC",
"dependencies": {
"@angular/common": "~4.0.0",
"@angular/compiler": "~4.0.0",
"@angular/core": "~4.0.0",
"@angular/http": "~4.0.0",
"@angular/platform-browser": "~4.0.0",
"@angular/platform-browser-dynamic": "~4.0.0",
"@angular/router": "~4.0.0",
"angular2-adal": "^0.1.4",
"angular2-in-memory-web-api": "0.0.10",
"bootstrap": "^3.3.7",
"core-js": "^2.4.1",
"rxjs": "5.0.1",
"systemjs": "0.19.40",
"zone.js": "^0.8.4"
},
"devDependencies": {
"concurrently": "^2.0.0",
"lite-server": "^2.2.0",
"typescript": "^1.8.10",
"typings": "^1.0.4",
"gulp": "^3.9.1",
"gulp-typescript": "^2.13.6",
"gulp-sourcemaps": "^1.6.0",
"gulp-shell": "^0.5.2",
"del": "^2.2.0"
}
}
AFAIK, we need to implement CanActivate interface in the Angular 2 for the guard deciding if a route can be activated. AFAIK,我们需要在Angular 2中实现CanActivate接口,以使后卫确定是否可以激活路由。
To protect the SPA for the Angular 2 using Azure AD you can refer this code sample . 为了使用Azure AD保护Angular 2的SPA,可以引用此代码示例 。 And about the Azure AD B2C authentication, you can refer this document .
关于Azure AD B2C身份验证,可以参考此文档 。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.