作为 AAD B2C msal.js 代码的一部分返回电子邮件地址

Question

如何使用 msal.js 响应中的 returns 电子邮件地址正确配置和编码对 AAD B2C 的调用？

背景

我正在寻找 javascript 集成到 R 仪表板解决方案 Shiny 中，它需要 JavaScript 集成身份验证解决方案。仪表板必须针对 Azure Active Directory B2C 进行身份验证。 Shiny 本质上是一个 SPA 应用程序。

AAD B2C 配置

我有一个 AAD B2C 用户流：

name: B2C_1_signup_signin
identity providers: email signup
user attributes: email address
application claims:
  email addresses
  identity provider

我有一个 AAD B2C 应用程序：

name: bigdashboard
app id: a0cfc440-c766-43db-9ea8-40a1efbe22ac
include web app / web api: yes
allow implicit flow: yes
app id uri: https://lduceademo.onmicrosoft.com/big
include native client: no
api access:
  Access the user's profile: (All available options selected)
    Acquire an id_token for users (openid)
    Acquire a refresh_token for users (offline access)
  bigdashboard:
    read (read)
    Access this app on behalf of the signed-in user (user_impersonation)
published scopes:
     read
     user_impersonation

此外，我已经使用应用程序注册（预览版）为 Microsoft Graph 添加了一些 api 权限，并且所有权限都已获得管理员同意。

Microsoft Graph:
  User.Read
  email
  offline_access
  openid
  profile

当前JavaScript

根据以下示例修改的代码：

AAD B2C JS MSAL SPA

MSAL.js lib v1.1.3 用于支持以下定制代码。


    // The current application coordinates were pre-registered in a B2C tenant.
    var appConfig = {
      b2cScopes: ["profile","email","openid", "https://lduceademo.onmicrosoft.com/big/read"]
    };


    // configuration to initialize msal
    const msalConfig = {
        auth: {
            clientId: "a0cfc440-c766-43db-9ea8-40a1efbe22ac", //This is your client ID
            authority: "https://lduceademo.b2clogin.com/lduceademo.onmicrosoft.com/B2C_1_signup_signin", //This is your tenant info
            validateAuthority: false
        },
        cache: {
            cacheLocation: "localStorage",
            storeAuthStateInCookie: true
        }
    };

    // instantiate MSAL
    const myMSALObj = new Msal.UserAgentApplication(msalConfig);

    // request to signin - returns an idToken
    const loginRequest = {
        scopes: appConfig.b2cScopes
    };

    // request to acquire a token for resource access
    const tokenRequest = {
        scopes: appConfig.b2cScopes
    };

    // signin and acquire a token silently with POPUP flow. Fall back in case of failure with silent acquisition to popup
    function signIn() {
        myMSALObj.loginPopup(loginRequest).then(function (loginResponse) {
            getToken(tokenRequest).then(updateUI);
        }).catch(function (error) {
            console.log(error);
        });
    }

    //acquire a token silently
    function getToken(tokenRequest) {
        return myMSALObj.acquireTokenSilent(tokenRequest).catch(function(error) {
          console.log("aquire token popup");
          // fallback to interaction when silent call fails
          return myMSALObj.acquireTokenPopup(tokenRequest).then(function (tokenResponse) {
          }).catch(function(error){
            console.log("Failed token acquisition", error);
        });
      });
    }

    // updates the UI post login/token acqusition
    function updateUI() {
      const userName = myMSALObj.getAccount().name;
      console.log(myMSALObj.getAccount());
      console.log("User '" + userName + "' logged-in");

          $('.signin').toggleClass('hidden', true);
        $('.signout').toggleClass('hidden', false);

       Shiny.setInputValue('message', userName);
}

    // signout the user
    function logout() {
      // Removes all sessions, need to call AAD endpoint to do full logout
      myMSALObj.logout();
    }

当前回复

从这里我得到一个显示在控制台中的帐户对象，如：

accountIdentifier: "ddc90829-f331-4214-8df1-0cf6052f4b61"
environment: "https://lduceademo.b2clogin.com/c1138a05-4442-4003-afc7-708629f4554c/v2.0/"
homeAccountIdentifier: "ZGRjOTA4MjktZjMzMS00MjE0LThkZjEtMGNmNjA1MmY0YjYxLWIyY18xX3NpZ251cF9zaWduaW4=.YzExMzhhMDUtNDQ0Mi00MDAzLWFmYzctNzA4NjI5ZjQ1NTRj"
idToken:
  aud: "a0cfc440-c766-43db-9ea8-40a1efbe22ac"
  auth_time: 1575368495
  exp: 1575372095
  iat: 1575368495
  iss: "https://lduceademo.b2clogin.com/c1138a05-4442-4003-afc7-708629f4554c/v2.0/"
  nbf: 1575368495
  nonce: "0933fc11-e24f-4ce2-95e2-0afe9bcc1d72"
  sub: "ddc90829-f331-4214-8df1-0cf6052f4b61"
  tfp: "B2C_1_signup_signin"
  ver: "1.0"
name: undefined
sid: undefined
userName: undefined

Answer 1

部分地，我的测试帐户不是很好 - 它是一个原生的，即没有注册 AAD B2C 帐户，但查询电子邮件地址应该像这样执行：

function updateUI() {
    // query the account
    const account = msal.getAccount();
    // first email address
    const username = account.idTokenClaims.emails[0];
    // situation specific code
    $('.signin').toggleClass('hidden', true);
    $('.signout').toggleClass('hidden', false);
    Shiny.setInputValue('message', username);
}

作为 AAD B2C msal.js 代码的一部分返回电子邮件地址

Returning email address as part of AAD B2C msal.js code

azure-ad-b2c

msal

msal.js

背景

AAD B2C 配置

当前JavaScript

当前回复