Angular 2：Azure AD登录重定向URI-Java 学习之路

我正在使用Azure AD登录Angular 2应用程序 . 以下Github链接显示了一种简单的登录方式，无需使用任何auth库 .

但是，它运行良好，在示例中，它会重定向回到启动登录过程的主屏幕 . 我试图弄清楚如何重定向回到不同的localhost视图，但由于某种原因我无法让它工作 .

我可以重定向到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”，可以找到此选项 .

然而 -

我不能让这个工作为一个简单的'从头开始制作的视图 . 每当我尝试用https://localhost:8080/redirect之类的东西替换https://www.google.com时，我在浏览器中出现错误，说"ERR_CONNECTION_CLOSED"或者其他类似的东西 .

现在我在Azure AD中将此作为我的Web应用程序的回复URL：

enter image description here

我更新的登录代码（我在本地使用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视图，因为我没有部署出来 .

谢谢

1 回答

为此，您将重定向网址设置为 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";
}

并在状态值中设置您的特定路由，以便在auth成功时重定向，如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;
                }
            });
    }

回复于 2024-04-27T00:52:00+08:00

Angular 2：Azure AD登录重定向URI

1 回答

相关问题