UI Components and Authentication Providers for Microsoft Graph
The Microsoft Graph Toolkit is a collection of reusable, framework-agnostic components and authentication providers for accessing and working with Microsoft Graph. The components are fully functional right of out of the box, with built in providers that authenticate with and fetch data from Microsoft Graph.
Packages • Components • Providers • Getting Started • Running the Samples • Contribute • Feedback & Requests
• License • Code of Conduct
You can explore components and samples with the playground powered by storybook.
The Toolkit currently includes the following components:
- mgt-login
- mgt-person
- mgt-person-card
- mgt-people
- mgt-people-picker
- mgt-agenda
- mgt-tasks
- mgt-get
- mgt-todo
- mgt-teams-channel-picker
All web components are also available as React component - see @microsoft/mgt-react documentation.
Providers enable authentication and provide the implementation for acquiring access tokens on various platforms. The providers also expose a Microsoft Graph Client for calling the Microsoft Graph APIs. The components work best when used with a provider, but the providers can be used on their own as well.
You can also create your own providers by extending the IProvider abstract class.
The following guides are available to help you get started with the Toolkit:
- Build a web application (vanilla JS)
- Build a SharePoint Web Part
- Build a Microsoft Teams Tab
- Use the Toolkit with React
- Use the Toolkit with Angular
You can use the components by referencing the loader directly (via unpkg), or installing the npm package
<script src="https://unpkg.com/@microsoft/mgt/dist/bundle/mgt-loader.js"></script>You can then start using the components in your html page. Here is a full working example with the Msal provider:
<script src="https://unpkg.com/@microsoft/mgt/dist/bundle/mgt-loader.js"></script>
<mgt-msal-provider client-id="[CLIENT-ID]"></mgt-msal-provider>
<mgt-login></mgt-login>
<!-- <script>
// alternatively, you can set the provider in code and provide more options
mgt.Providers.globalProvider = new mgt.MsalProvider({clientId: '[CLIENT-ID]'});
</script> -->NOTE: MSAL requires the page to be hosted in a web server for the authentication redirects. If you are just getting started and want to play around, the quickest way is to use something like live server in vscode.
The benefits of using MGT through NPM is that you have full control of the bundling process and you can bundle only the code you need for your site. First, add the npm package:
npm install @microsoft/mgtNow you can reference all components and providers at the page you are using:
<script type="module" src="node_modules/@microsoft/mgt/dist/es6/index.js"></script>
<mgt-msal-provider client-id="[CLIENT-ID]"></mgt-msal-provider>
<mgt-login></mgt-login>
<mgt-agenda></mgt-agenda>Some of our samples are coupled to use the locally built mgt packages instead of the published version from npm. Because of this, it's helpful to build the monorepo before attempting to run any of the samples.
# Starting at the root
yarn
yarn build
# Now you can run the React sample using the local packages
cd ./samples/react-app/
yarn startThis also means that running the samples in isolation may fail if there are breaking changes between the published version of mgt and the local copy. To workaround this, use samples that are known to be compatible with a specific release by checking out the appropriate branch or tag first.
We enthusiastically welcome contributions and feedback. Please read our wiki and the contributing guide before you begin.
There are many exciting new features or interesting bugs that have been left behind because our team is small with limited capacity. We would love your help! We have tagged these issues with 'help wanted' and/or 'good first issue'. We added them into project board Community Love for easy tracking. If you see anything you would like to contribute to, you can reach out to [email protected] or tag one of us (Beth, Elise, Nick, Nikola, and Shane) in the issue for help or further discussion. By submitting a PR to solve an issue mentioned above, you can enter to win some exciting prizes! We have some cool socks and t-shirts waiting for you. Check out the official rules for Code Contribution Challenge. The contest will continue until March 2021 where prizes are awarded every month from now on.
For general questions and support, please use Stack Overflow where questions should be tagged with microsoft-graph-toolkit
Please use GitHub Issues for bug reports and feature requests. We highly recommend you browse existing issues before opening new issues.
All files in this GitHub repository are subject to the MIT license. This project also references fonts and icons from a CDN, which are subject to a separate asset license.
This project has adopted the Microsoft Open Source Code of Conduct. For more information see the Code of Conduct FAQ or contact [email protected] with any additional questions or comments.