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

回答

相关问题