0
もう一度私はセキュリティに潜入するために残しました。 AngularJS SPAを安全な環境でAPIに呼び出す方法を理解したいと思っています。OAuth2 Adal Angularjs Web APiの機能に問題があります - Web APiが承認しない
私が苦労しているのは、私が考えるセキュリティトークンのパスです。
私はAngularJS SPAをOAuth2で保護するために、Azure Active Directory開発者ガイドのMicrosoftのガイドの1つを利用して保護しています。
私は今、ログインしてSPAを入力することが許可になって、私は別のAPIエンドポイントは、それらの上承認タグを持っているAPIに私の呼び出しを行うとき、私は、願いがの理解しやすい無断で得ることができますコース。
これは私の次の問題につながります。まず、私のWeb APIでAuthorizationを処理するものはありませんし、エンドポイントが呼び出されたり要求があったときにAPIを使ってAngularJS SPAからの呼び出しを許可するにはどうすればよいでしょうか。
両方のアプリケーションの間で正しいフローを理解して実装するためには、次のステップとは何かを知る必要があります。
______________________UPDATE____________________________
だから私は少しさらに来ています。今は401が無許可になったので、Angular SPAは認可タグを通過しません。何か不足していますか？
Javacriptはapp.js：
var app = angular.module('app', ['AdalAngular']);
app.config(['$httpProvider', 'adalAuthenticationServiceProvider', function ($httpProvider, adalProvider) { //$routeProvider,
$httpProvider.defaults.withCredentials = true;
var endpoints = {
"https://localhost:44376/": "http://oauthsolutionadtest.onmicrosoft.com/theapi"
};
adalProvider.init(
{
instance: 'https://login.microsoftonline.com/',
tenant: 'oauthsolutionadtest.onmicrosoft.com',
clientId: 'CLIENT-ID',
endpoints: endpoints,
},
$httpProvider
);
}]);
var sampleController = app.controller("sampleController", ["$scope", "$http", "adalAuthenticationService", function ($scope, $http, adalService) {
$scope.login = login;
$scope.logout = logout;
$scope.onlyAdmin = onlyAdmin;
function login(){
adalService.login();
};
function logout(){
adalService.logOut();
};
function onlyAdmin() {
alert("INNE_1");
$http.get("https://localhost:44376/api/testmessage")
.success(
function (data, status, headers, config, response) {
alert("INNE_2");
$scope.admin = true;
console.log(data, status, headers, config, response);
}).error(
function (response) {
alert("INNE_3 " + response);
console.log(response);
}
)
}
}])
HTML：
<!DOCTYPE html>
<html ng-app="app">
<head>
<title>Sample SPA (AngularJs) And Azure AD</title>
<meta charset="utf-8" />
<link href="Content/bootstrap.min.css" rel="stylesheet" />
<link href="Content/toaster.css" rel="stylesheet" />
<link href="Content/loading-bar.min.css" rel="stylesheet" />
</head>
<body ng-controller="sampleController">
<!--<div data-ng-view=""></div>-->
<div>
<button ng-click="login()" ng-hide="userInfo.isAuthenticated">Login</button>
<button ng-click="logout()" ng-show="userInfo.isAuthenticated">Logout</button>
<button ng-click="onlyAdmin()">
Admin
</button>
{{admin}}
<pre>
{{userInfo}}
</pre>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script>
<script src="https://secure.aadcdn.microsoftonline-p.com/lib/1.0.13/js/adal.min.js"></script>
<script src="https://secure.aadcdn.microsoftonline-p.com/lib/1.0.13/js/adal-angular.min.js"></script>
<script type="text/javascript" src="App/app.js"></script>
</body>
</html>
WEBAPIコントローラ：
using System;
using System.Configuration;
using System.Linq;
using System.Security.Claims;
using System.Web.Http;
using System.Web.Http.Cors;
namespace OAuthSolution.API.Controllers
{
public class ContactController : ApiController
{
[Route("api/testmessage")]
[HttpGet]
[EnableCors(origins: "https://localhost:44311", headers: "*", methods: "GET, POST, OPTIONS", SupportsCredentials =true)]
[Authorize]
public string testMessage()
{
return "You got the Test Message";
}
[Route("api/theGet")]
[HttpGet]
[EnableCors(origins: "https://localhost:44311", headers: "*", methods: "*", SupportsCredentials = true)]
[Authorize]
public IHttpActionResult Get()
{
var adminGroupId = ConfigurationManager.AppSettings["adminGroupId"];
Claim groupAdmin = ClaimsPrincipal.Current.Claims.FirstOrDefault(x => x.Type == "groups" && x.Value.Equals(adminGroupId, StringComparison.CurrentCultureIgnoreCase));
if(groupAdmin != null)
{
return Ok("Admin");
}
return Unauthorized();
}
}
}
WebAPIのStartup.cs：
/////STARTUP.CS
using Microsoft.Owin;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using Owin;
using Microsoft.Owin.Security.ActiveDirectory;
using System.Configuration;
using System.Web.Http;
using Microsoft.Owin.Security.OAuth;
[assembly: OwinStartup(typeof(OAuthSolution.API.Startup))]
namespace OAuthSolution.API
{
public partial class Startup
{
public void Configuration (IAppBuilder app)
{
ConfigureAuth(app);
app.UseCors(Microsoft.Owin.Cors.CorsOptions.AllowAll);
}
private void ConfigureAuth(IAppBuilder app)
{
var azureADBearerAuthOptions = new WindowsAzureActiveDirectoryBearerAuthenticationOptions
{
Tenant = ConfigurationManager.AppSettings["ida:Tenant"],
};
azureADBearerAuthOptions.TokenValidationParameters = new System.IdentityModel.Tokens.TokenValidationParameters()
{
ValidAudience = ConfigurationManager.AppSettings["ida:Audience"],
};
app.UseWindowsAzureActiveDirectoryBearerAuthentication(azureADBearerAuthOptions);
}
}
}
WebApiConfig.cs：
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web.Http;
using System.Web.Http.Cors;
namespace OAuthSolution.API
{
public static class WebApiConfig
{
public static void Register(HttpConfiguration config)
{
// Web API configuration and services
config.EnableCors();
// Web API routes
config.MapHttpAttributeRoutes();
config.Routes.MapHttpRoute(
name: "DefaultApi",
routeTemplate: "api/{controller}/{id}",
defaults: new { id = RouteParameter.Optional }
);
}
}
}
のWeb.Config： 
ヘッダ： 
jwt.ioから復号化されたトークン：
{
"typ": "JWT",
"alg": "RS256",
"x5t": "Y4ueK2oaINQiQb5YEBSYVyDcpAU",
"kid": "Y4ueK2oaINQiQb5YEBSYVyDcpAU"
}
{
"aud": "http://oauthsolutionadtest.onmicrosoft.com/theapi",
"iss": "https://sts.windows.net/f2f535e0-294f-4704-befc-8ce754f10bd7/",
"iat": 1486134484,
"nbf": 1486134484,
"exp": 1486138384,
"acr": "1",
"amr": [
"pwd"
],
"appid": "a9d7f295-1c8e-43bc-9600-bdc0bff1d567",
"appidacr": "0",
"e_exp": 10800,
"family_name": "admin",
"given_name": "admin",
"groups": [
"f929d8fd-e361-473d-8325-6e8d1ccba5a0"
],
"ipaddr": "90.224.252.71",
"name": "admin",
"oid": "251df8ba-112b-4c06-af7e-4c0899f0118b",
"platf": "3",
"scp": "user_impersonation",
"sub": "Ih0hL_bmMPuMeYk3R_gEWZZmUteJfL0F1afFhiPYUFU",
"tid": "f2f535e0-294f-4704-befc-8ce754f10bd7",
"unique_name": "[email protected]",
"upn": "[email protected]",
"ver": "1.0"
}
AngularアプリはAPIと同じドメインにありますか？オーディエンス設定の設定はAPIでどのように設定されていますか？ – juunas
別のアップデートを投稿します。web.config情報が必要ですか？あなたの素早い返信Juunasに感謝します。 :) – John
@juunas彼らは同じコンピュータ（localHost）にありますが、彼らは同じ紺碧の広告に登録されています。もしあなたが何を求めているのであれば。また、同じ解決策であれば、それはどんな助けでもあります。 – John