Angular 2：Azure AD登錄重定向URI

我正在使用Azure AD登錄到Angular 2應用程序。下面的Github鏈接顯示了一個簡單的方法來登錄，而不使用任何auth庫。Angular 2：Azure AD登錄重定向URI

它工作得很好，但是，在這個例子中，它重定向右後衛在登錄過程從開始主屏幕。我試圖找出如何重定向回到不同的本地主機視圖，但由於某種原因，我無法讓它工作。

我可以重定向到https://www.google.com工作。您可以通過改變/src/authHelper/authHelper.ts找到使用你選擇的重定向URL代碼做到這一點，而不是回覆到window.location.href：

login() { 
    //redirect to get id_token 
    window.location.href = "https://login.microsoftonline.com/" + SvcConsts.TENTANT_ID + 
     "/oauth2/authorize?response_type=id_token&client_id=" + SvcConsts.CLIENT_ID + 
     "&redirect_uri=" + encodeURIComponent('HTTPS://WWW.GOOGLE.COM') + 
     "&state=SomeState&nonce=SomeNonce"; 
}

這也需要您設置Azure Active Directory中的回覆URL爲https://www.google.com。這可以通過選擇Azure AD，然後單擊該AD下的應用程序，然後在舊的Azure門戶上的配置選項卡下設置回覆URL來找到。

--HOWEVER--

我不能讓這對定製從劃傷視圖純醇」工作。每次我嘗試用https://localhost:8080/redirect之類的東西來代替https://www.google.com時，我在瀏覽器中出現錯誤，說「ERR_CONNECTION_CLOSED」或其他內容。

現在我有這個在Azure的AD作爲回覆的網址爲我的web應用程序：（我用的是SvcConsts本地，本引用）

我更新登錄代碼：

login() { 
    console.log("Logging in!"); 

    //redirect to get id_token 
    window.location.href = "https://login.microsoftonline.com/" + this.TENTANT_ID + 
     "/oauth2/authorize?response_type=id_token&client_id=" + this.CLIENT_ID + 
     "&redirect_uri=" + encodeURIComponent('https://localhost:8080/#/redirect') + 
     "&state=SomeState&nonce=SomeNonce"; 
}

...和路由器/路由在我app.component.ts文件中配置：

import { Component, ChangeDetectionStrategy } from '@angular/core'; 
import { Routes, ROUTER_DIRECTIVES } from '@angular/router'; 
import { Store } from '@ngrx/store'; 
import { Observable } from 'rxjs/Observable'; 
import { AuthenticationComponent } from '../authentication/authentication.component'; 
import { AuthRedirectComponent } from '../authRedirect/authRedirect.component'; 
import { HomeComponent } from '../home/home.component'; 

import '../style/styles.less'; 

@Component({ 
    selector: 'app', 
    template: 
    ` 
    <h1>{{title}}</h1> 
    <em>some content</em> 
    <app-login></app-login> 
    <router-outlet></router-outlet> 
    `, 
    directives: [ROUTER_DIRECTIVES, AuthenticationComponent], 
    changeDetection: ChangeDetectionStrategy.OnPush 
}) 

@Routes([ 
    { path: '/', component: HomeComponent }, 
    { path: '/redirect', component: AuthRedirectComponent } 
]) 

export class AppComponent { 
    title: string = "App Component Title"; 

}

有沒有人得到這個？我需要保留我的Azure AD進行身份驗證，所以我不能使用本地帳戶或Auth0等任何其他庫。我現在也必須堅持localhost的觀點，因爲我沒有找到部署。

感謝

來源

2016-07-05 sup bro

Azure的AD不支持重定向的URI在他們的片段（＃）。另一件事（可能是顯而易見的，但爲了以防萬一）要確保你實際上有IIS/Node/Apache或者在localhost：8080上運行的東西。你能否確認你實際上可以在你的瀏覽器上導航到localhost：8080？ – Saca

@Saca我有一個服務器啓動localhost：8080與Webpack。這就是我開始我的會議。我點擊了一個按鈕，將您帶到Azure登錄頁面...我只想發送到不同的視圖，等待成功驗證。 –

@supbro你有沒有得到這個工作？我有一個類似的問題，但與巴克斯的QS。代碼正在QS中查找id_token，但它沒有正確構建 –

此設置重定向URL作爲http://localhost:8080。

login() { 
    //redirect to get id_token 
    window.location.href = "https://login.microsoftonline.com/" + SvcConsts.TENTANT_ID + 
     "/oauth2/authorize?response_type=id_token&client_id=" + SvcConsts.CLIENT_ID + 
     "&redirect_uri=" + encodeURIComponent('http://localhost:8080') + 
     "&state=YOUR_ROUTE&nonce=SomeNonce&response_mode=query"; 
}

，並設置狀態值的具體路線，所以當身份驗證成功重定向像 http://localhost:8080/?state=YOUR_ROUTE&id_token=YOUR_TOKEN。後成功重定向得到你的主要app.component.ts從URL數據文件中像

import {Router, ActivatedRoute, Params} from '@angular/router'; 

constructor(private activatedRoute: ActivatedRoute) {} 

    ngOnInit() { 
     this.activatedRoute.queryParams.subscribe((params: Params) => { 

       let token = params['id_token']; 
     //save token 
       if(typeof token !="undefined"){ 
       window.localStorage.setItem('authToken',token); 
        let route = JSON.parse(params['state']); 
       window.location.href =route; 
       } 
      }); 
    }

來源

2017-01-28 10:29:28

Angular 2：Azure AD登錄重定向URI

回答

相關問題