用于将用户信息从azureAD传递到app.js的代码

Question

我正在尝试将单点登录( SSO )功能引入我的React应用程序，我想使用我公司的用户信息进行SSO验证。为此，我在Azure网站上注册了我的应用程序以获取clientID。我找到了一篇文章，介绍了如何使用React AAD MSAL包通过弹出方法：https://www.npmjs.com/package/react-aad-msal启用用户登录。我用以下代码创建了一个authProvider.js文件：

// authProvider.js
import { MsalAuthProvider, LoginType } from 'react-aad-msal';
 
// Msal Configurations
const config = {
  auth: {
    authority: 'https://login.microsoftonline.com/common',
    clientId: 'XXXXXXXXXXXXXXXXXXXXXXX',
    redirectUri: 'localhost:3000'
  },
  cache: {
    cacheLocation: "localStorage",
    storeAuthStateInCookie: true
  }
};
 
// Authentication Parameters
const authenticationParameters = {
  scopes: [
    'User.Read'
  ]
}
 
// Options
const options = {
  loginType: LoginType.Popup,
  tokenRefreshUri: window.location.origin + '/auth.html'
}
 
export const authProvider = new MsalAuthProvider(config, authenticationParameters, options)

我的index.js文件看起来像这样：

// index.js
import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter } from 'react-router-dom';
import { AzureAD } from 'react-aad-msal';
 
import App from './App';
import { authProvider } from './authProvider';
 
ReactDOM.render(
  <BrowserRouter>
    <AzureAD provider={authProvider} forceLogin={true}>
      <App />
    </AzureAD>
  <BrowserRouter>,
  document.getElementById('root'),
);

这段代码工作正常，允许我在登录时对用户进行身份验证，然后将他们重定向到重定向URL。现在，我想将用户信息(如姓名、电子邮件地址和个人资料图片)传递给App组件。

我在网上找不到可以帮助我做到这一点的资源，npm网站上的文档也没有这样做的例子。谁能提供如何做我想做的工作的代码示例？(我所有的文件都是js的，我不能使用微软提供的任何代码示例，因为他们使用tsx文件，我不想把我所有的文件都改成TypeScript)。

也许我可以在MsalAuthProvider中调用一些子函数或属性函数，但我也找不到有关该函数的文档。我也不确定在index.js中在哪里调用这些函数，因此代码示例将非常有用。谢谢

Answer 1

您可以使用MSAL.js通过myMSALObj.getAccount()获取用户信息。

const myMSALObj = new Msal.UserAgentApplication(msalConfig);

function signIn() {
  myMSALObj.loginPopup(loginRequest)
    .then(loginResponse => {
      console.log('id_token acquired at: ' + new Date().toString());
      console.log(loginResponse);

      if (myMSALObj.getAccount()) {
        showWelcomeMessage(myMSALObj.getAccount());
      }
    }).catch(error => {
      console.log(error);
    });
}

有关代码示例的更多详细信息，请参见here。

此外，您还可以使用react-aad-msal在代码中获取访问令牌。解码令牌后，会显示用户的一些信息，如用户名和电子邮件。

import jwtDecode from 'jwt-decode';
const claims = jwtDecode('base64 encoded token received from Azure AD');