使用 Azure 活动目录作为身份验证提供程序获取用户详细信息

Question

我有一个 angular 应用程序托管在 Azure Web 应用程序中。我选择了 azure active directory 作为身份验证提供者，如果请求未通过身份验证，那么它应该使用相同的身份登录。因此，基本上，如果用户已经使用 his/her Microsoft 帐户登录，则 he/she 不需要再次登录。

目前，我正在使用 .auth/me 获取所有与用户相关的详细信息，例如 givenName、电子邮件等。现在，我需要显示用户的 outlook 个人资料图片。为此，我尝试将 Graph API 与 MSAL 一起使用，当我使用以下代码时它工作正常：-

async signIn(): Promise<void> {
    let result = await this.msalService.loginPopup(OAuthSettings.scopes)
      .catch((reason) => {
        this.alertsService.add('Login failed', JSON.stringify(reason, null, 2));
      });

    if (result) {
      this.authenticated = true;
      this.user = await this.getUser();
    }
  }

async getAccessToken(): Promise<string> {
    let result = await this.msalService.acquireTokenSilent(OAuthSettings.scopes)
      .catch((reason) => {
        this.alertsService.add('Get token failed', JSON.stringify(reason, null, 2));
      });

    return result;
  }

private async getUser(): Promise<User> {
    if (!this.authenticated) return null;

    let graphClient = Client.init({
      authProvider: async(done) => {
        let token = await this.getAccessToken()
          .catch((reason) => {
            done(reason, null);
          });

        if (token)
        {
          done(null, token);
        } else {
          done("Could not get an access token", null);
        }
      }
    });
    let graphUser = await graphClient.api('/me').get();

    let user = new User();
    user.displayName = graphUser.displayName;
    user.email = graphUser.mail || graphUser.userPrincipalName;

    return user;
  }

因为我不想要任何用户提示，所以我稍微更改了 signIn() 方法以避免出现如下所示的任何用户提示：-

 async signIn(): Promise<void> {
        let result = this.msalService.loginRedirect(OAuthSettings.scopes);
    this.user = await this.getUser();
    }

改成这个后，无限循环重定向到login.microsoft.com。我无法找到任何方法来避免任何类型的提示或重定向以获取所有与用户相关的详细信息，包括个人资料照片。请提出一些方法来实现这一目标。下面给出了我当前在没有任何用户提示的情况下获取用户名的工作代码：-

  getUserName(): Observable<any> {
    return this._http
      .get<any>(this.myAppUrl + '.auth/me', {
        withCredentials: true
      })
      .pipe(catchError(this.errorHandler));
  }

Answer 1

由于您的应用服务已经使用了easy auth，您可以直接获取access token，无需再次登录

您需要做的是配置 Web 应用程序以请求访问图形 api 资源。转到 azure resource explorer-> 在站点节点下转到 /config/authsettings.

单击编辑按钮，将客户端密码更改为您的 AAD 应用程序在高级身份验证设置下配置的密码。

除了添加client secret外，将additionaloginparams改为如下

["response_type=code id_token", "resource=https://microsoft.graph.com"]

然后您的应用服务授权应该开始接收 X-MS-TOKEN-AAD-ACCESS-TOKEN header，您可以利用它来访问 Microsoft Graph API。

参考：

Configuring an App Service to get an Access Token for AAD Graph API

使用 Azure 活动目录作为身份验证提供程序获取用户详细信息

Get user details with azure active directory as authentication provider

azure

azure-active-directory

msal

angular

azure-webapps