Note: The AuthCodeMSALBrowserAuthenticationProvider
is introduced in version 3.0.0 of Microsoft Graph Client Library
Steps to use AuthCodeMSALBrowserAuthenticationProvider
;
- Installation
Using npm:
npm install @azure/msal-browser @microsoft/microsoft-graph-client
Using CDN:
<!--Using script tag to include the bundled file or the CDN source--><scripttype="text/javascript" src="https://alcdn.msauth.net/browser/2.15.0/js/msal-browser.min.js"></script><scriptsrc="graph-js-sdk.js"></script><scriptsrc="graph-client-msalBrowserAuthProvider.js"></script>
Reference : MSAL Browser CDN usage
Initialize the
msal-browser
PublicClientApplication
instance: Learn more how to initialize msalFollowing sample shows how to initialize a Microsoft Graph SDK
Client
instance,
Using npm:
import{PublicClientApplication,InteractionType,AccountInfo}from"@azure/msal-browser";import{AuthCodeMSALBrowserAuthenticationProvider,AuthCodeMSALBrowserAuthenticationProviderOptions}from"@microsoft/microsoft-graph-client/authProviders/authCodeMsalBrowser";import{Client}from"@microsoft/microsoft-graph-client";constoptions: AuthCodeMSALBrowserAuthenticationProviderOptions={account: account,// the AccountInfo instance to acquire the token for.interactionType: InteractionType.Popup,// msal-browser InteractionTypescopes: ["user.read","mail.send"]// example of the scopes to be passed};// Pass the PublicClientApplication instance from step 2 to create AuthCodeMSALBrowserAuthenticationProvider instanceconstauthProvider=newAuthCodeMSALBrowserAuthenticationProvider(publicClientApplication,options);// Initialize the Graph clientconstgraphClient=Client.initWithMiddleware({ authProvider });
Using CDN or script:
constmsalClient=newmsal.PublicClientApplication(msalConfig);constauthProvider=newMSGraphAuthCodeMSALBrowserAuthProvider.AuthCodeMSALBrowserAuthenticationProvider(msalClient,{ account,// the AccountInfo instance to acquire the token forscopes: ["user.read","mail.send"],interactionType: msal.InteractionType.Popup,});// Initialize the Graph clientconstgraphClient=MicrosoftGraph.Client.initWithMiddleware({ authProvider });