角2/4阿達勒-angular4活動目錄進行身份驗證API問題

我已經以下這個例子中，從一個角度（4）應用程序訪問天青活動目錄：https://github.com/benbaran/adal-angular4-example 角2/4阿達勒-angular4活動目錄進行身份驗證API問題

我可以對AD認證但我想隨後對在AD中註冊的API/APP進行調用。

我一直在使用這個例子嘗試：

public CallAPI() { 
    let headers = new Headers({ 'Content-Type': 'application/json' }); 
    var token; 

    this.service.acquireToken("{client id}").subscribe(p => { 
    token = p; 

    headers.append("Authorization", 'Bearer ' + token); 

    let options = new RequestOptions({ headers: headers }); 
    // Make the HTTP request: 
    this.httpClient.get('https://localhost:45678/stuff', options).subscribe(data => { 
     // Read the result field from the JSON response. 
     this.results = data['results']; 
     console.log(data); 
    }); 

    }, (error => { 
    console.log(error); 
    })); 
}

的第一個問題我已經是一個CORS錯誤。我正在本地主機上運行客戶端應用程序：並獲取：

XMLHttpRequest無法加載https://localhost:45678/stuff。從'https://localhost:45678/stuff'重定向到'https://login.microsoftonline.com/ ..........'已被CORS策略阻止：請求的資源上沒有'Access-Control-Allow-Origin'標頭。因此不允許訪問原產地'https://localhost:4200'。

的應用程序/ API我試圖訪問也可以本地運行（包括客戶端和服務器HTTPS）

他們在Active Directory中的註冊應用他們的登記表/應用程序ID的URI都被設置爲各自的本地主機地址。

該應用程序/ API使用服務棧，並且設置這樣的：

app.SetDefaultSignInAsAuthenticationType(CookieAuthenticationDefaults.AuthenticationType); 
app.UseCookieAuthentication(new CookieAuthenticationOptions()); 
app.UseWindowsAzureActiveDirectoryBearerAuthentication(
    new WindowsAzureActiveDirectoryBearerAuthenticationOptions 
    { 
    TokenValidationParameters = new System.IdentityModel.Tokens.TokenValidationParameters 
    { 
     ValidAudience = Audience 
    }, 
    Tenant = Domain 
    }); 

public override void Configure(Container container) 
{ 
    AddPreRequestFilters(); 
    AddErrorResponseFilters(); 

    this.Plugins.AddRange(ServiceConfiguration.GetPlugins()); 
    this.Plugins.Add(new SwaggerFeature()); 
    this.Plugins.Add(new CorsFeature(allowedHeaders: "Origin, X-Requested-With, Content-Type, Accept, Authorization", allowCredentials: true)); 
    ServiceConfiguration.Configure(container); 

}

要繞過我用Allow-Control-Allow-Origin鉻延伸CORS誤差，使用此我得到一個OPTIONS請求然後302（我的「東西'端點）其中包含我的授權：Bearer {token}標題。最後，還有一個選項和GET（加入auth頭），以login.microsoft.com /..../ oath2 ...

這始終無法登錄

我ADAL的配置是這樣的：

const config: adal.Config = {       
    tenant: 'xxxx.onmicrosoft.com',    
    clientId: 'xxxxxxxxxxxxxx', // client id of AD app 
    redirectUri: 'https://localhost:4200/', // the angular app 
    cacheLocation: 'localStorage' 

}

有什麼明顯的我失蹤了嗎？我也曾嘗試使用端點屬性無濟於事繞過acquireToken步：

endpoints: { 
    'https://localhost:45678/': 'https://localhost:45678/' <-- the address of the API/APP I want to call 
}

來源

2017-08-02 Michael Harper

的問題是不與您的網站，而是一個事實，即'的https：// login.microsoftonline.com /'你的代碼是重定向請求不會發送接入-Control-Allow-Origin響應頭，瀏覽器需要這些響應頭允許您的前端JavaScript代碼訪問響應的跨域。在這種情況下唯一可能的解決方案是不處理來自前端代碼的登錄請求，而是從後端代碼處理它。你現在試圖遵循的流程不會起作用。 – sideshowbarker

自從您提到「它們都是活動目錄中的註冊應用程序並且它們的登錄/應用程序標識被設置爲其各自的本地主機地址」。您需要爲您的API應用程序獲取令牌，acquireToken函數的客戶端ID值是多少？ api應用程序令牌驗證邏輯中的「ValidAudience」值是什麼？ –

@NanYu acquireToken中的客戶端ID是在AD中註冊的API服務應用程序的應用程序ID（在我的示例中，它是'stuff'endpoint/https：// localhost：45678 /）角度應用程序使用AD登錄，然後從acquireToken獲取令牌。問題是，當我嘗試使用此令牌訪問API本身時，我可以看到授權：承載者.....存在但我總是得到一個「我們無法登錄」的HTML頁面響應。我的ValidAudience被設置爲API的本地主機地址，即https：// localhost：45678/ 謝謝 –

我們（以及我們的高級開發人員）發現一對夫婦的問題，試圖登錄到AD（adal4後訪問註冊API時。 service.js）

首先在handleWindowCallback中，requestType在我們的例子中始終設置爲UNKNOWN，所以statematch總是爲false。

位一個黑客在這裏：

if(requestInfo.requestType === 'UNKNOWN') { 
requestInfo.requestType = this.adalContext.REQUEST_TYPE.RENEW_TOKEN; 
requestInfo.stateMatch = true; 
}

我們還必須改變這一點：

else if (requestInfo.requestType === 
this.adalContext.REQUEST_TYPE.RENEW_TOKEN) { 
this.adalContext.callback = 
window.parent.callBackMappedToRenewStates[requestInfo.stateResponse]; 
}

這樣：

else if (requestInfo.requestType === 
this.adalContext.REQUEST_TYPE.RENEW_TOKEN) { 
this.adalContext.callback = 
window.parent.callBackMappedToRenewStates[ 
decodeURIComponent(requestInfo.stateResponse)]; 
}

在stateResponse的URL進行編碼（百分比符號等），所以永遠不會匹配留下回調空。

希望這可以幫助別人 - 也許找到更好的解決方案！

這裏的叉：adal-angular4

來源

2017-08-07 09:35:20

角2/4阿達勒-angular4活動目錄進行身份驗證API問題

回答

相關問題