SPFX With Graph API To Pull Azure Active Directory Group Users
import { Version } from '@microsoft/sp-core-library';
import {
IPropertyPaneConfiguration,
PropertyPaneTextField,
PropertyPaneDropdown
} from '@microsoft/sp-property-pane';
import { BaseClientSideWebPart } from '@microsoft/sp-webpart-base';
import { escape } from '@microsoft/sp-lodash-subset';
import styles from './ActiveDirectoryWebpartWebPart.module.scss';
import * as strings from 'ActiveDirectoryWebpartWebPartStrings';
import * as jquery from "jquery";
import { SPHttpClientResponse } from '@microsoft/sp-http';
import { SPWeb, SPPermission, SPSite, SPList } from '@microsoft/sp-page-context';
let token;
let id;
let ad;
let WebpartID;
export interface IActiveDirectoryWebpartWebPartProps {
description: string;
dropdown: string;
}
export default class ActiveDirectoryWebpartWebPart extends BaseClientSideWebPart<IActiveDirectoryWebpartWebPartProps> {
public render(): void {
ad = this.properties.description;
WebpartID = this.properties.dropdown;
this.domElement.innerHTML = `
<div class="${ styles.activeDirectoryWebpart}">
<div id="${WebpartID}links"></div>
<div id="links"></div>
</div>`;
this.getAzureActiveDirectory();
}
private async getAzureActiveDirectory() {
debugger;
jquery.ajax({
async: true,
crossDomain: true,
url: "https://cors-anywhere.herokuapp.com/https://login.microsoftonline.com/dintakurthianil.com/oauth2/v2.0/token", // Pass your tenant name instead of sharepointtechie
method: "POST",
headers: {
"content-type": "application/x-www-form-urlencoded"
},
data: {
"grant_type": "client_credentials",
"client_id ": "325asdfasdf4-6ac1-40ed-add1-a1a59eecc1ac", //Provide your app id
"client_secret": "k2T2asdfasdf34523gcD8.2[lRs@4vXFnyjCcJFj@1-DC3", //Provide your client secret genereated from your app
"scope ": "https://graph.microsoft.com/.default"
},
success: function (response) {
console.log(response);
token = response.access_token;
fetchOffice365UserFromGroup();
},
error: function (value) {
console.log(value);
}
});
function fetchOffice365UserFromGroup() {
jquery.ajax({
method: 'GET',
url: "https://graph.microsoft.com/v1.0/groups?$top=999",
headers: {
'Authorization': 'Bearer ' + token,
'Content-Type': 'application/json'
},
success: function (response) {
console.log(response.value);
var data = response.value;
jquery.each(data, function (index, item) {
if (item.displayName == ad) {
id = item.id;
console.log(id);
getmembers();
}
});
},
error: function (error) {
console.log(error);
}
});
}
function getmembers() {
let controlID = `${WebpartID}links`
jquery.ajax({
method: 'GET',
url: "https://graph.microsoft.com/v1.0/groups/" + id + "/members",
headers: {
'Authorization': 'Bearer ' + token,
'Content-Type': 'application/json'
},
success: function (response) {
console.log(response.value);
var data = response.value;
var html = "<ul>";
if (data.length) {
jquery.each(data, function (index, item) {
html += '<li><a style="cursor:pointer" href="#" class="list-group-item">' + item.displayName + '</a></li>';
});
html += "</ul>"
jquery("#"+controlID).html(html);
//jquery("#1links").html(html);
}
else {
jquery("#" + { WebpartID } + "links").html("No Users in the Active Direcotry Group");
}
},
error: function (error) {
console.log(error);
}
});
}
}
protected get dataVersion(): Version {
return Version.parse('1.0');
}
protected getPropertyPaneConfiguration(): IPropertyPaneConfiguration {
return {
pages: [
{
header: {
description: strings.PropertyPaneDescription
},
groups: [
{
groupName: strings.BasicGroupName,
groupFields: [
PropertyPaneTextField('description', {
label: "Group Name"
}),
PropertyPaneDropdown('dropdown', {
label: 'WebPart ID',
options:[
{key:"1",text:"1"},
{key:"2",text:"2"},
{key:"3",text:"3"},
{key:"4",text:"4"},
{key:"5",text:"5"},
{key:"6",text:"6"},
{key:"7",text:"7"},
{key:"8",text:"8"}
]
})
]
}
]
}
]
};
}
}
Comments