使用Azure活动目录作为身份验证提供程序获取用户详细信息 [英] Get user details with azure active directory as authentication provider

问题描述

我在Azure Web应用程序中托管了一个角度应用程序.我已选择azure活动目录作为身份验证提供程序，如果请求未通过身份验证，则应使用相同的身份登录.因此，基本上，如果用户已经使用其Microsoft帐户登录，则无需再次登录.

I have an angular application hosted in Azure web app. I have selected azure active directory as the authentication provider and if the request is not authenticated then it should log in with the same. So, basically, if the user is already logged in with his/her Microsoft account then he/she does not need to log in again.

按照现在，我正在使用.auth/me来获取所有与用户有关的详细信息，例如给定名称，电子邮件等.现在，我需要显示用户的Outlook个人资料图片.为此，我尝试将Graph API与MSAL结合使用，当我使用以下代码时，它可以正常工作:-

As per now, I am using .auth/me to get all the user-related details such as givenName, email, etc. Now, I have a requirement to display the user's outlook profile picture. For this, I tried using Graph API with MSAL and when I use the below code then it is working fine: -

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()方法，以避免出现以下任何用户提示:-

Since I don't want any user prompt, I slightly changed my signIn() method to avoid any user prompt like below: -

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

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

After changing to this, it is redirecting to login.microsoft.com in an infinite loop. I am unable to find any way to avoid any kind of prompt or redirection to get all the user-related details including the profile photo. Please suggest some way to achieve this. My current working code for getting user name without any user prompt is given below: -

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

推荐答案

由于您已经在App服务中使用了简单身份验证，因此可以直接获取访问令牌，而无需再次登录.

Since you have already used easy auth with your App service, you can get the access token directly without logging in again.

您需要做的是配置Web应用程序以请求访问图API资源.转到azure资源浏览器->转到站点节点下，然后转到/config/authsettings .

What you need to do is configuring web app to ask for access to graph api resource. Go to the azure resource explorer-> go under the site node and go to /config/authsettings.

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

Click the edit button, and change the client secret to the secret your AAD Application has configured under the advanced authentications settings.

除了添加客户端机密外，将其他oginparams更改为以下内容

In addition to adding client secret, change the additionaloginparams to the following

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

然后，您的应用程序服务身份验证应开始接收 X-MS-TOKEN-AAD-ACCESS-TOKEN 标头，您可以使用该标头访问Microsoft Graph API.

Then your app service auth should start receiving the X-MS-TOKEN-AAD-ACCESS-TOKEN header which you can utilize to access the Microsoft Graph API.

参考:

查看全文