Use SPFx to get a Delegated Access Token for a Resource to Pass onto Azure Functions

spfx-get-delegated-accesstoken.md

Use SPFx to get a Delegated Access Token

Note the tokenAcquisitionEvent part of the code doesn't seem to work

Using this technique you can acquire a delegated access token for a resource, SharePoint or the Graph API, and pass that token onto a HTTP triggered Azure Functions endpoint for it to use to call the appropriate API.

This is a simple re-imagination of the on-behalf-of flow involving a secured Azure Functions endpoint then executing an OAuth on-behalf-of flow to exchange the received access token for one which can be used to call an API on behalf of the calling user.

Documented originally by Paolo Pialorsi and Joel Rodrigues

• here https://piasys.com/getting-an-access-token-for-a-service-in-spfx/
• and here https://twitter.com/JoelFMRodrigues/status/1417975503202439186

const tokenEventHandler = useCallback((e: SPEventArgs) => {
	console.debug(`PersonnelDirectory.useEffect([])::> provider.tokenAcquisitionEvent <:: `, e);
}, []);

...

useEffect(() => {
	console.debug(`useEffect([])::> tenantId: ${props.context.pageContext.aadInfo.tenantId.toString()}`);
	( async () => {
		try {
			const provider = await props.context.aadTokenProviderFactory.getTokenProvider();
			console.debug(`provider.getTokenProvider() <:: `, provider);
			provider.tokenAcquisitionEvent.add({
				instanceId: props.context.instanceId,
				componentId: props.context.manifest.id,
				isDisposed: false,
				dispose: () => {
					console.debug(`provider.tokenAcquisitionEvent ::> dispose() <:: `);
				}
			}, tokenEventHandler);

			const spAccessToken = await provider.getToken("https://<tenant-name>.sharepoint.com");
			console.debug(`provider.getToken() SP API <:: `, spAccessToken);

			const graphAccessToken = await provider.getToken("https://graph.microsoft.com");
			console.debug(`provider.getToken() Graph API <:: `, graphAccessToken);

		} catch (error) {
			console.error(error);
		}
	})();
}, []);