无法在我的 angular 应用程序中单击按钮以通过 Microsoft 帐户重定向和连接

Question

我构建了一个 angular 应用程序，我想让用户仅通过 Microsoft 帐户使用 @azure/msal-angular 和 @azure/msal-browser 程序包连接到它。

我创建了一个组件来处理名为登录的连接

这是login.component.ts

import { Component, OnInit } from '@angular/core';
import { MsalService } from '@azure/msal-angular';
import { AuthenticationResult } from '@azure/msal-browser';

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css']
})
export class LoginComponent implements OnInit {
  title = 'Authenticate with Microsoft';

  constructor(private msalService: MsalService){
  }

  isLoggedIn() : boolean {
    return this.msalService.instance.getActiveAccount() != null
  }

  login() {
    this.msalService.loginRedirect();
    // this.msalService.loginPopup().subscribe((response: AuthenticationResult) => {
    //   this.msalService.instance.setActiveAccount(response.account)
    // })
  }

  logout() {
    this.msalService.logout();
  }

  ngOnInit(): void {
    this.msalService.instance.handleRedirectPromise().then(
      res => {
        if (res != null && res.account != null) {
          this.msalService.instance.setActiveAccount(res.account)
        }
      }
    )
  }

}

login.component.html

<div class="login_component">
  <table>
    <tr>
      <td><button (click)="login();" *ngIf="!isLoggedIn()">SIGN IN</button></td>
      <td><button (click)="logout();" *ngIf="isLoggedIn()">SIGN OUT</button></td>
    </tr>
  </table>

  <div *ngIf="isLoggedIn()">
    <h3>The user is logged in</h3>
  </div>
  <div *ngIf=!isLoggedIn()>
    <h3>You are NOT log in !!!</h3>
  </div>
</div>

<style>
  .login_component {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

</style>

app.module.ts

// IMPORT FOR ANGULAR CORE
import { LoginComponent } from './login/login.component';
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

// IMPORT FOR ANGULAR MATERIAL
import { MatButtonModule } from '@angular/material/button';
import { MatIconModule } from '@angular/material/icon';

// OTHER
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { HomePageComponent } from './home-page/home-page.component';


// START LOGIN WITH MICROSOFT
import { MsalModule, MSAL_INSTANCE, MsalService } from '@azure/msal-angular';
import { IPublicClientApplication, PublicClientApplication } from '@azure/msal-browser';

export function MSALInstanceFactory(): IPublicClientApplication {
  return new PublicClientApplication({
    auth: {
      clientId: 'something-here', // Application id
      authority: 'another-thing-here', // Directory (tenant) id
      redirectUri: 'http://localhost:4200' // Need to be changed in production
    }
  })
}
// END OF LOGIN WITH MICROSOFT

@NgModule({
  declarations: [
    AppComponent,
    HomePageComponent,
    DealListComponent,
    LoginComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    BrowserAnimationsModule,
    MatButtonModule,
    MatIconModule,
    MsalModule,
  ],
  providers: [
    {
      provide: MSAL_INSTANCE,
      useFactory: MSALInstanceFactory
    },
    MsalService
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

app.component.html


<div>
  <app-login></app-login>
</div>

<router-outlet></router-outlet>

最后是我的应用程序-routing.module.ts

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { HomePageComponent } from './home-page/home-page.component';
import { LoginComponent } from './login/login.component';


// ROUTES
const appRoutes: Routes =[
  {path: '', component: LoginComponent},
  {path: 'home', component: HomePageComponent},
]

@NgModule({
  imports:
  [RouterModule.forRoot(appRoutes,{ enableTracing: true })


  ],
  exports: [RouterModule
  ]



})
export class AppRoutingModule { }

当我点击那个按钮时

<td><button (click)="login();" *ngIf="!isLoggedIn()">SIGN IN</button></td>

登录，没有任何反应。当我尝试在登录函数 (login.component.ts) 中使用 loginPopup() 执行此操作时，我会有一个弹出窗口，它在出现后立即消失。我认为这是 portal.azure.com 的注册申请问题，所以我删除了以前的应用程序注册并创建了一个新的并将 id 放入 app.module 但仍然没有。

我们将不胜感激。

非常感谢！

Answer 1

export function MSALInstanceFactory(): IPublicClientApplication {
  return new PublicClientApplication({
    auth: {
      clientId: '0d6bd648-96d2-451b-9b06-5e087ec9a11c', // Application (iSell+) id

      // I had to put it that way, not just the tenantID 
      authority: 'https://login.microsoftonline.com/tenantID', // Directory (tenant) id


      redirectUri: 'http://localhost:4200', // Need to be changed when in production
      // clientId: 'de55bfa3-1bc6-450a-b2b6-83b38186af92',
      // redirectUri: 'http://localhost:4200',
    }
  })
}

无法在我的 angular 应用程序中单击按钮以通过 Microsoft 帐户重定向和连接

Unable to click to the button to redirect and connect via microsoft account in my angular application

angular

typescript

azure

angular-routing

msal-angular