Я новичок в Azure. Я хочу создать раскрывающийся список, содержащий все отображаемые имена пользователей из Active Directory Azure, но я не знаю, как это сделать.
Я хочу заполнить раскрывающийся список их отображаемыми именами в приложении React JS.
🤔 А знаете ли вы, что...
JavaScript можно использовать для создания ботов и автоматизации задач в браузерах с помощью Puppeteer.
Чтобы получить всех пользователей из Azure Active Directory, вы можете вызвать API Microsoft Graph.
Обязательно предоставьте User.Read.All
разрешение API:
Добавьте URL-адрес перенаправления:
authConfig.js
файл
// src/authConfig.js
export const msalConfig = {
auth: {
clientId: "ClientID",
authority: "https://login.microsoftonline.com/TenantID",
redirectUri: "http://localhost:3000",
},
cache: {
cacheLocation: "localStorage",
storeAuthStateInCookie: false,
},
};
export const loginRequest = {
scopes: ["User.Read.All"],
};
index.js
файл:
// src/index.js
import React from 'react';
import ReactDOM from 'react-dom';
import { MsalProvider } from '@azure/msal-react';
import { PublicClientApplication } from '@azure/msal-browser';
import App from './App';
import { msalConfig } from './authConfig';
const msalInstance = new PublicClientApplication(msalConfig);
ReactDOM.render(
<MsalProvider instance = {msalInstance}>
<App />
</MsalProvider>,
document.getElementById('root')
);
App.js
файл:
import React from 'react';
import Users from './Users';
function App() {
return (
<div className = "App">
<header className = "App-header">
<h1>Azure AD Users</h1>
</header>
<main>
<Users />
</main>
</div>
);
}
export default App;
Создайте файл src/Users.js
и используйте приведенный ниже код для получения пользователей:
import React, { useState, useEffect } from 'react';
import { MsalAuthenticationTemplate, useMsal } from '@azure/msal-react';
import { InteractionType } from '@azure/msal-browser';
import { loginRequest } from './authConfig';
import axios from 'axios';
const Users = () => {
const { instance, accounts } = useMsal();
const [users, setUsers] = useState([]);
useEffect(() => {
if (accounts.length > 0) {
instance.acquireTokenSilent({
...loginRequest,
account: accounts[0],
}).then(response => {
axios.get('https://graph.microsoft.com/v1.0/users', {
headers: {
Authorization: `Bearer ${response.accessToken}`,
},
}).then(response => {
setUsers(response.data.value);
}).catch(error => {
console.error(error);
});
});
}
}, [instance, accounts]);
return (
<MsalAuthenticationTemplate interactionType = {InteractionType.Redirect} authenticationRequest = {loginRequest}>
<div>
<h2>Users</h2>
<ul>
{users.map(user => (
<li key = {user.id}>{user.displayName}</li>
))}
</ul>
</div>
</MsalAuthenticationTemplate>
);
};
export default Users;
Пользователи успешно перечислены, как показано ниже:
Ссылка:
Список пользователей — Microsoft Graph v1.0 | Майкрософт