{"id":6613,"date":"2021-08-17T06:30:10","date_gmt":"2021-08-17T14:30:10","guid":{"rendered":"https:\/\/officedevblogs.wpengine.com\/?p=6613"},"modified":"2021-08-26T14:28:30","modified_gmt":"2021-08-26T21:28:30","slug":"microsoft-graph-javascript-sdk-3-0-0-is-now-generally-available","status":"publish","type":"post","link":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/microsoft-graph-javascript-sdk-3-0-0-is-now-generally-available\/","title":{"rendered":"Microsoft Graph JavaScript SDK 3.0.0 is now generally available"},"content":{"rendered":"<p>Do more with the new <a href=\"https:\/\/www.npmjs.com\/package\/@microsoft\/microsoft-graph-client\/v\/3.0.0\">3.0.0 release<\/a> of the Microsoft Graph JavaScript SDK. This release includes support for multiple authentication flows and enhancements to the large file upload task. The changes introduced in the new version are not backward-compatible; for details about how to update your client, see the <a href=\"https:\/\/github.com\/microsoftgraph\/msgraph-sdk-javascript\/blob\/dev\/changelogs\/v3-upgrade-guide.md\">upgrade guide.<\/a><\/p>\n<p>The Microsoft Graph JS SDK 3.0.0 requires Node.js 12 LTS or higher. The source code is implemented\u00a0using TypeScript 4.x.<\/p>\n<h4>Authentication Enhancements<\/h4>\n<p>In this update,\u00a0 we have added support for multiple authentication flows by adding support for @azure\/msal-browser and @azure\/identity. This update also includes the removal of the ImplicitMSALAuthenticationProvider.<\/p>\n<h4>Support for Authentication Code Flow using @azure\/msal-browser<\/h4>\n<p>The Microsoft Graph JavaScript SDK 3.0.0 enhances authentication by introducing the <strong>AuthCodeMSALBrowserAuthenticationProvider<\/strong> class. This class adds support for authentication using the <a href=\"https:\/\/www.npmjs.com\/package\/@azure\/msal-browser\">@azure\/msal-browser<\/a>. This MSAL library supports the <strong>Authorization Code Flow with PKCE<\/strong> for browser-based applications.<\/p>\n<p>Wondering whether this is the authentication provider you need? Learn more about <a href=\"https:\/\/docs.microsoft.com\/en-us\/graph\/sdks\/choose-authentication-providers?tabs=CS\">how to choose a Microsoft Graph authentication provider based on scenario<\/a>.<\/p>\n<pre class=\"lang: decode:true\">import {\r\n  PublicClientApplication,\r\n  InteractionType,\r\n  AccountInfo,\r\n} from \"@azure\/msal-browser\";\r\nimport {\r\n  AuthCodeMSALBrowserAuthenticationProvider,\r\n  AuthCodeMSALBrowserAuthenticationProviderOptions,\r\n} from \"@microsoft\/microsoft-graph-client\/authProviders\/authCodeMsalBrowser\";\r\n\r\nconst options: AuthCodeMSALBrowserAuthenticationProviderOptions = {\r\n  account,\r\n  interactionType: InteractionType.PopUp,\r\n  scopes: [\"user.read\", \"mail.send\"],\r\n};\r\n\r\nconst authProvider = new AuthCodeMSALBrowserAuthenticationProvider(\r\n  publicClientApplication,\r\n  options\r\n);\r\n\r\nconst graphClient = Client.initWithMiddleware({\r\n  authprovider,\r\n});\r\n<\/pre>\n<h4>Enabling Client Credential Flow and more with @azure\/identity<\/h4>\n<p>The JavaScript SDK 3.0.0 introduces the <strong>TokenCredentialAuthenticationProvider<\/strong> class, which enables the use of @azure\/identity credential classes for authentication.<\/p>\n<p>The <strong>TokenCredentialAuthenticationProvider <\/strong>class adds the following new capabilities<strong>:<\/strong><\/p>\n<ul>\n<li>Server-side authentication using credential classes such as <strong>ClientSecretCredential<\/strong> or <strong>ClientCertificateCredential<\/strong>.<\/li>\n<li>Support for multiple authentication flows using credential classes such as <strong>DeviceCodeCredential<\/strong>, <strong>VisualStudioCodeCredential<\/strong>, and <strong>DefaultAzureCredential<\/strong>.<\/li>\n<\/ul>\n<p><strong>TokenCredentialAuthenticationProvider.<\/strong><\/p>\n<p><a href=\"https:\/\/github.com\/microsoftgraph\/msgraph-sdk-javascript\/blob\/dev\/docs\/TokenCredentialAuthenticationProvider.md\">creating an instance of TokenCredentialAuthentication<\/a><\/p>\n<h4>ImplicitMSALAuthenticationProvider is removed<\/h4>\n<p>The <strong>ImplicitMSALAuthenticationProvider<\/strong> class will not be available starting with version 3.0.0 of the Microsoft Graph JavaScript SDK.<\/p>\n<p>In accordance with <a href=\"https:\/\/oauth.net\/2\/grant-types\/implicit\/\">OAuth 2.0 Implicit Grant<\/a>, we no longer recommend the use of <strong>ImplicitMSALAuthenticationProvider<\/strong>, that is, using the implicit authorization flow.<\/p>\n<h4>Upload larger files using Node.js Stream<\/h4>\n<p>The <strong>LargeFileTaskUpload<\/strong> class enables you to upload files to OneDrive, Outlook, and Universal Print. With this release, we added <strong>StreamUpload<\/strong>, which supports Node.JS stream, and <strong>FileUpload<\/strong>, which supports upload of file formats like ArrayBuffer, Blob, and Buffer.<\/p>\n<p>You can now track the progress of the upload by using <strong>UploadEventHandlers. <\/strong><\/p>\n<p>The following example shows how you can use the new <strong>StreamUpload <\/strong>class.<\/p>\n<pre class=\"lang: decode:true \">import StreamUpload from \"@microsoft\/microsoft-graph-client\";\r\n\r\nimport * as fs from \"fs\";\r\n\r\nconst fileName = \"&lt;FILE_NAME&gt;\";\r\n\r\nconst stats = fs.statSync(`.\/test\/sample_files\/${fileName}`);\r\n\r\nconst totalsize = stats.size;\r\n\r\nconst readStream = fs.createReadStream(`.\/test\/sample_files\/${fileName}`);\r\n\r\nconst fileObject = new StreamUpload(readStream, fileName, totalsize);\r\n\r\nconst progress = (range?: Range, extraCallBackParam?: unknown) =&gt; {\r\n\r\n\u00a0 \/\/ Handle progress event\r\n\r\n};\r\n\r\nconst uploadEventHandlers: UploadEventHandlers = {\r\n\r\n\u00a0 progress,\r\n\r\n\u00a0 extraCallBackParam,\r\n\r\n};\r\n\r\nconst options: LargeFileUploadTaskOptions = {\r\n\r\n\u00a0 rangeSize: 327680,\r\n\r\n\u00a0 uploadEventHandlers: UploadEventHandlers,\r\n\r\n};\r\n\r\nconst uploadTask = new LargeFileUploadTask(client, fileObj, uploadSession, options);\r\n\r\nconst uploadResult: UploadResult = await uploadTask.upload();<\/pre>\n<p>To learn more about the new updates, see <a href=\"https:\/\/github.com\/microsoftgraph\/msgraph-sdk-javascript\/blob\/dev\/docs\/tasks\/LargeFileUploadTask.md\">Large file upload task<\/a>.<\/p>\n<h4>We love hearing from you<\/h4>\n<p>Thank you to all the community members who continue to provide feedback on this library. We encourage you to upgrade to the new version of our Microsoft Graph JavaScript SDK. See the\u00a0<a href=\"https:\/\/github.com\/microsoftgraph\/msgraph-sdk-javascript\/blob\/dev\/changelogs\/v3-upgrade-guide.md\">upgrade guide<\/a>\u00a0and\u00a0<a href=\"https:\/\/www.npmjs.com\/package\/@microsoft\/microsoft-graph-client\">npm packages<\/a>. Submit any issues or feature requests on the <a href=\"https:\/\/github.com\/microsoftgraph\/msgraph-sdk-javascript\/issues\">Issues tab<\/a> of the GitHub repo.<\/p>\n<p>This post is written by <strong>Nikitha Chettiar<\/strong> and <strong>Roina Ochieng<\/strong><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Do more with the new 3.0.0 release of the Microsoft Graph JavaScript SDK. This release includes support for multiple authentication flows and enhancements to the large file upload task. <\/p>\n","protected":false},"author":69077,"featured_media":6844,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[3,5],"tags":[22],"class_list":["post-6613","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-microsoft-graph","category-microsoft-identity-platform","tag-azure-ad"],"acf":[],"blog_post_summary":"<p>Do more with the new 3.0.0 release of the Microsoft Graph JavaScript SDK. This release includes support for multiple authentication flows and enhancements to the large file upload task. <\/p>\n","_links":{"self":[{"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/posts\/6613","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/users\/69077"}],"replies":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/comments?post=6613"}],"version-history":[{"count":0,"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/posts\/6613\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/media\/6844"}],"wp:attachment":[{"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/media?parent=6613"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/categories?post=6613"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/microsoft365dev\/wp-json\/wp\/v2\/tags?post=6613"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}