Security News
Research
Data Theft Repackaged: A Case Study in Malicious Wrapper Packages on npm
The Socket Research Team breaks down a malicious wrapper package that uses obfuscation to harvest credentials and exfiltrate sensitive data.
@microsoft/mgt-spfx
Advanced tools
Use the SharePoint Framework library for Microsoft Graph Toolkit to use Microsoft Graph Toolkit in SharePoint Framework solutions.
To prevent multiple components from registering their own set of Microsoft Graph Toolkit components on the page, you should deploy this library to your tenant and reference Microsoft Graph Toolkit components that you use in your solution from this library.
To load Microsoft Graph Toolkit components from the library, add the @microsoft/mgt-spfx
package as a runtime dependency to your SharePoint Framework project:
npm install @microsoft/mgt-spfx
or
yarn add @microsoft/mgt-spfx
Before deploying your SharePoint Framework package to your tenant, you will need to deploy the @microsoft/mgt-spfx
SharePoint Framework package to your tenant. You can download the package corresponding to the version of @microsoft/mgt-spfx
that you used in your project, from the Releases section on GitHub.
Important: Since there can be only one version of the SharePoint Framework library for Microsoft Graph Toolkit installed in the tenant, before using MGT in your solution, consult with your organization/customer if they already have a version of SharePoint Framework library for Microsoft Graph Toolkit deployed in their tenant and use the same version to avoid issues.
If you need to use a different version of MGT other than the one supplied by the centrally deployed version of mgt-spfx
then please refer to the documentation for disambiguation and mgt-spfx-utils
.
When building SharePoint Framework web parts and extensions, reference the Microsoft Graph Toolkit Provider
and SharePointProvider
from the @microsoft/mgt-spfx
package. This will ensure, that your solution will use MGT components that are already registered on the page, rather than instantiating its own. The instantiation process is the same for all web parts no matter which JavaScript framework they use:
import { Providers, SharePointProvider } from '@microsoft/mgt-spfx';
// [...] trimmed for brevity
export default class MgtWebPart extends BaseClientSideWebPart<IMgtWebPartProps> {
protected async onInit() {
if (!Providers.globalProvider) {
Providers.globalProvider = new SharePointProvider(this.context);
}
}
// [...] trimmed for brevity
}
When building web parts using framework other than React, you can load components directly in your web part:
export default class MgtNoFrameworkWebPart extends BaseClientSideWebPart<IMgtNoFrameworkWebPartProps> {
protected async onInit() {
if (!Providers.globalProvider) {
Providers.globalProvider = new SharePointProvider(this.context);
}
}
public render(): void {
this.domElement.innerHTML = `
<div class="${styles.mgtNoFramework}">
<div class="${styles.container}">
<div class="${styles.row}">
<div class="${styles.column}">
<span class="${styles.title}">No framework webpart</span>
<mgt-person person-query="me" show-name show-email></mgt-person>
</div>
</div>
</div>
</div>`;
}
// [...] trimmed for brevity
}
If you build web part using React, load only components from the /dist/es6/spfx
path in the @microsoft/mgt-react
package:
import { Person } from '@microsoft/mgt-react/dist/es6/spfx';
// [...] trimmed for brevity
export default class MgtReact extends React.Component<IMgtReactProps, {}> {
public render(): React.ReactElement<IMgtReactProps> {
return (
<div className={ styles.mgtReact }>
<Person personQuery="me" />
</div>
);
}
}
FAQs
SharePoint Framework library for Microsoft Graph Toolkit
The npm package @microsoft/mgt-spfx receives a total of 4,068 weekly downloads. As such, @microsoft/mgt-spfx popularity was classified as popular.
We found that @microsoft/mgt-spfx demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 2 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Research
The Socket Research Team breaks down a malicious wrapper package that uses obfuscation to harvest credentials and exfiltrate sensitive data.
Research
Security News
Attackers used a malicious npm package typosquatting a popular ESLint plugin to steal sensitive data, execute commands, and exploit developer systems.
Security News
The Ultralytics' PyPI Package was compromised four times in one weekend through GitHub Actions cache poisoning and failure to rotate previously compromised API tokens.