{"id":7029,"date":"2021-09-08T12:43:03","date_gmt":"2021-09-08T19:43:03","guid":{"rendered":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/?p=7029"},"modified":"2021-11-15T15:55:15","modified_gmt":"2021-11-15T23:55:15","slug":"announcing-a-new-microsoft-teams-authentication-provider-and-file-upload-feature-in-the-microsoft-graph-toolkit","status":"publish","type":"post","link":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/announcing-a-new-microsoft-teams-authentication-provider-and-file-upload-feature-in-the-microsoft-graph-toolkit\/","title":{"rendered":"Announcing a new Microsoft Teams authentication provider and file upload feature in the Microsoft Graph Toolkit"},"content":{"rendered":"

Today,\u00a0thanks to the support and contributions of the community,\u00a0we are excited to\u00a0share\u00a0another new release of the Microsoft Graph Toolkit, version 2.3. This release includes a new Microsoft Teams authentication provider,\u00a0file\u00a0upload\u00a0support\u00a0in the\u00a0File List component, and\u00a0several feature updates and bug fixes!\u00a0<\/span>\u00a0<\/span><\/p>\n

As a recap, the\u00a0<\/span>Microsoft Graph Toolkit<\/span><\/a>\u00a0is a collection of functional UI components and authentication providers that makes your integration with Microsoft Graph as easy as writing two lines of code. If you\u2019re not familiar with the Toolkit yet, learn more by reading our\u00a0<\/span>documentation<\/span><\/a>, visiting our\u00a0<\/span>component playground<\/span><\/a>, or following the\u00a0<\/span>Microsoft Graph Toolkit Learn Path<\/span><\/a>.<\/span>\u00a0<\/span><\/p>\n

Updating your application<\/span>\u00a0<\/span><\/h4>\n

To take advantage of the new features, you\u2019ll need to update your application to use the newest version of the Microsoft Graph Toolkit. If you\u2019re using the Toolkit via npm, go to your project directory and run:<\/span>\u00a0<\/span><\/p>\n

Npm i @microsoft\/mgt@latest<\/pre>\n
If you\u2019re using the Toolkit via unpkg, your application will automatically be updated to the newest version.<\/span>\u00a0<\/span><\/p>\n
What\u2019s New<\/span>\u00a0<\/span><\/h4>\n
Microsoft Teams authentication provider with support for single sign-on (SSO)<\/h5>\n
Version 2.3 includes a brand new Provider,\u00a0TeamsMsal2Provider<\/a>, for authentication in Microsoft Teams applications. Built on top of msal-browser and the more secure Authorization Code Flow with PKCE, this new provider supports both single-sign on and interactive login in your Microsoft Teams tab applications.<\/p>\n
What\u2019s the difference between the TeamsProvider and TeamsMsal2Provider?<\/span><\/b>\u00a0<\/span><\/p>\n
The\u00a0TeamsProvider<\/a>, built on top of\u00a0msal.js<\/a>, uses the implicit grant flow and only supports authentication through interactive client-side login. The new\u00a0TeamsMsal2Provider<\/a>, built on top of\u00a0msal-browser<\/a>, implements the OAuth 2.0 Authorization code flow with PKCE, which is more secure. Additionally, the TeamsMsal2Provider now supports single sign-on in addition to interactive login.<\/p>\n
Why should\u00a0I\u00a0migrate?<\/span><\/b>\u00a0<\/span><\/p>\n
Authorization\u00a0Code\u00a0Flow is more secure for web applications than the implicit grant flow used in our original Teams Provider, and we recommend\u00a0using the TeamsMsal2Provider going forward.<\/span>\u00a0<\/span><\/p>\n
Previously, our original Teams\u00a0Provider only provided support for interactive login.\u00a0With the new provider, you are\u00a0able to leverage Single Sign-On\u00a0in\u00a0your Teams application,\u00a0which means if a\u00a0user consents to use your app, they do not have to consent again on another device as they are signed in automatically.\u00a0\u00a0<\/span>\u00a0<\/span><\/p>\n
Please note, for SSO, you will need to implement a backend that enables exchanging the Microsoft Teams authentication token with a token that can be used to call Microsoft Graph via the on-behalf-of flow. Take a look at our\u00a0Node SSO Sample<\/a>\u00a0for a reference\u00a0<\/span>implementation\u00a0of the backend service, and for an\u00a0end-to-end\u00a0example of enabling Single Sign-On with the Microsoft Graph Toolkit in your Microsoft Teams apps.\u00a0<\/span>\u00a0<\/span><\/p>\n
Will you continue supporting the\u00a0existing\u00a0TeamsProvider?<\/span><\/b>\u00a0<\/span><\/p>\n
Yes, as long as\u00a0msal.js\u00a0is supported, we will continue supporting the original Teams Provider.\u00a0However, we do not plan to add any additional features and any new feature development will go in the new TeamsMsal2Provider.<\/span>\u00a0<\/span><\/p>\n
How do I\u00a0migrate or\u00a0get started\u00a0developing with the new provider?<\/span><\/b>\u00a0<\/span><\/p>\n
Check out our\u00a0Teams MSAL2 Provider documentation<\/a>\u00a0for migration instructions, and our step-by step\u00a0Build a Microsoft Teams Tab<\/a>\u00a0(interactive login) or\u00a0Build a Microsoft Teams SSO Tab<\/a>\u00a0guides to get started with developing an application.<\/p>\n
File upload functionality in the File List component<\/span>\u00a0<\/span><\/h5>\n
We\u2019ve updated our\u00a0File List component<\/a>\u00a0<\/span>to support the uploading of files\u00a0by\u00a0users.\u00a0Now, you can\u00a0display\u00a0a list of files\u00a0and\/or folders\u00a0from One Drive or SharePoint\u00a0and allow users to upload\u00a0items\u00a0from their device\u00a0to that location\u00a0with a\u00a0single attribute.<\/span>\u00a0<\/span><\/p>\n
Below is an example that shows a signed-in user uploading files to their root drive:<\/span>\u00a0<\/span><\/p>\n
 <\/p>\n
 <\/p>\n
\"Image<\/a><\/p>\n
 <\/p>\n
\n
\n
To try out this new feature, visit the documentation to learn how to use\u00a0<\/span>File List<\/span><\/a>.<\/span>\u00a0<\/span><\/p>\n
Bug Fixes and Improvements<\/span>\u00a0<\/span><\/h4>\n
This release also includes numerous bug fixes and improvements. To see the full list, check out our\u00a0release notes<\/a>.<\/p>\n
Thank you to everyone who has reported bugs or sent us feature requests since the last release! We are continuously reading your feedback and making improvements to make the Toolkit valuable for our community.\u00a0<\/span>\u00a0<\/span><\/p>\n
Thank you to those who have contributed features and bug fixes to make this release possible! If you would like to contribute to the Microsoft Graph Toolkit, visit our\u00a0<\/span>GitHub issues<\/span><\/a>\u00a0and look for those tagged with \u201cgood first issue\u201d or \u201chelp wanted\u201d.<\/span>\u00a0<\/span><\/p>\n
We\u2019re looking forward to hearing your thoughts and feedback on this new release. Please submit any bugs, feature requests, and feedback by opening an issue in our\u00a0GitHub repository<\/a>.<\/p>\n