Question

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

Log in via Microsoft Graph using Typescript and Angular 2

它运行良好，但是，在该示例中，它重定向回到启动登录过程的主屏幕。我试图弄清楚如何重定向回到不同的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”来找到此信息。

- 无论其 -

我不能让这个工作为一个普通的＆ol;从头开始制作。每当我尝试用https://www.google.com之类的东西替换https://localhost:8080/redirect时，我在浏览器中收到一条错误，说“＆＃34; ERR_CONNECTION_CLOSED＆＃34;或类似的东西。

现在我在Azure AD中将此作为我的网络应用的回复网址：

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

由于

Answer 1

为此，您将重定向网址设置为 http://localhost:8080 。

$(document).ready(function () {
    $('#sala').change(function (event) {
        var name = $('#sala').val();
        $.post('../EditarSala', {
            sala: name
        }, function (responseText) {
            $('#resultado').html(responseText);
        });
    });
});

并在状态值中设置您的特定路由，因此当auth成功时，它会重定向 http://localhost:8080/?state=YOUR_ROUTE&id_token=YOUR_TOKEN。成功重定向后，从主app.component.ts文件中的url获取数据，如

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";
}

Angular 2：Azure AD登录重定向URI

1 个答案: