Pass user Identity from SPFX Webpart to Azure function

%3CLINGO-SUB%20id%3D%22lingo-sub-112786%22%20slang%3D%22en-US%22%3EPass%20user%20Identity%20from%20SPFX%20Webpart%20to%20Azure%20function%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-112786%22%20slang%3D%22en-US%22%3E%3CP%3E%3CFONT%20color%3D%22%23000000%22%20face%3D%22Calibri%22%3ESay%20I%20have%20an%20SPFX%20WebPart%20that%20needs%20to%20call%20an%20Azure%20function%20to%20do%20some%20work.%20The%20Azure%20function%20needs%20to%20know%20who%20the%20user%20is%20that%20made%20the%20request.%20How%20do%20I%20pass%20the%20users%20Identity%20from%20the%20SPFX%20Webpart%20to%20the%20Azure%20function%3F%3C%2FFONT%3E%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-113178%22%20slang%3D%22en-US%22%3ERe%3A%20Pass%20user%20Identity%20from%20SPFX%20Webpart%20to%20Azure%20function%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-113178%22%20slang%3D%22en-US%22%3E%3CP%3EThere%20is%20one%20sample%20available%20at%26nbsp%3B%3CA%20href%3D%22https%3A%2F%2Fgithub.com%2FSharePoint%2Fsp-dev-fx-webparts%2Ftree%2Fmaster%2Fsamples%2Freact-aad-webapi%22%20target%3D%22_blank%22%20rel%3D%22noopener%20noreferrer%22%3Ehttps%3A%2F%2Fgithub.com%2FSharePoint%2Fsp-dev-fx-webparts%2Ftree%2Fmaster%2Fsamples%2Freact-aad-webapi%3C%2FA%3E.%20It's%20built%20using%20an%20older%20version%20of%20the%20SharePoint%20Framework%2C%20but%20it%20should%20give%20you%20a%20general%20idea%20of%20the%20different%20pieces%20involved.%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-113138%22%20slang%3D%22en-US%22%3ERe%3A%20Pass%20user%20Identity%20from%20SPFX%20Webpart%20to%20Azure%20function%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-113138%22%20slang%3D%22en-US%22%3E%3CP%3EThanks%20Waldek%2C%20Just%20what%20i%20needed!%3C%2FP%3E%3CP%3EDo%20we%20have%20a%20github%20sample%20for%20this%20yet%3F%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-113026%22%20slang%3D%22en-US%22%3ERe%3A%20Pass%20user%20Identity%20from%20SPFX%20Webpart%20to%20Azure%20function%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-113026%22%20slang%3D%22en-US%22%3E%3CP%3EInstead%20of%20sending%20the%20user's%20identity%2C%20you%20should%20consider%20authenticating%20against%20the%20API.%20Since%20SPFx%20solutions%20are%20client-side%2C%20it%20would%20be%20trivial%20for%20someone%20else%20to%20pretend%20they're%20calling%20the%20API%20on%20behalf%20of%20someone%20else.%20The%20following%20article%20explains%20the%20concept%20and%20available%20capabilities%20in%20more%20detail%3A%26nbsp%3B%3CA%20href%3D%22https%3A%2F%2Fdocs.microsoft.com%2Fen-us%2Fsharepoint%2Fdev%2Fspfx%2Fweb-parts%2Fguidance%2Fconnect-to-api-secured-with-aad%22%20target%3D%22_blank%22%20rel%3D%22noopener%20noreferrer%22%3Ehttps%3A%2F%2Fdocs.microsoft.com%2Fen-us%2Fsharepoint%2Fdev%2Fspfx%2Fweb-parts%2Fguidance%2Fconnect-to-api-secured-with-aad%3C%2FA%3E%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-1082163%22%20slang%3D%22en-US%22%3ERe%3A%20Pass%20user%20Identity%20from%20SPFX%20Webpart%20to%20Azure%20function%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-1082163%22%20slang%3D%22en-US%22%3E%3CP%3E%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F8901%22%20target%3D%22_blank%22%3E%40Russell%20Gove%3C%2FA%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EI'm%20two%20years%20late%20to%20the%20party%2C%20but%20I%20want%20to%20add%20my%202%20cents%20to%20help%20others%2C%20who%20are%20looking%20for%20the%20same%20answers.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%3CSTRONG%3EGoal%3C%2FSTRONG%3E%3C%2FP%3E%3CP%3E%3CSTRONG%3E-%20%3C%2FSTRONG%3ESecurely%20call%20Azure%20Function%20from%20an%20SPFx%20webpart%2Fextension%3C%2FP%3E%3CP%3E-%20Prevent%20users%20from%20spoofing%2Ffaking%20their%20logins%20by%20passing%20them%20to%20the%20Azure%20Function%3C%2FP%3E%3CP%3E-%20Inside%20Azure%20function's%20trigger%2C%20retrieve%20the%20login%20information%20of%20the%20currently%20logged%20SPFx%2FSharePoint%20in%20user%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%3CSTRONG%3ESolution%3C%2FSTRONG%3E%3C%2FP%3E%3CP%3E%3CSTRONG%3E-%20%3C%2FSTRONG%3EFollow%20this%20article%20to%20secure%20your%20Azure%20function%20with%20Azure%20AD.%20Instead%20of%20JavaScript%20-%20use%20C%23%20%2B%20.NET%20Core%3A%26nbsp%3B%3CA%20href%3D%22https%3A%2F%2Fdocs.microsoft.com%2Fen-us%2Fsharepoint%2Fdev%2Fspfx%2Fuse-aadhttpclient-enterpriseapi%22%20target%3D%22_blank%22%20rel%3D%22noopener%20noreferrer%22%3Ehttps%3A%2F%2Fdocs.microsoft.com%2Fen-us%2Fsharepoint%2Fdev%2Fspfx%2Fuse-aadhttpclient-enterpriseapi%3C%2FA%3E%3C%2FP%3E%3CP%3E-%20Inside%20your%20Azure%20function%20HTTP%20trigger%2C%20inject%26nbsp%3B%3CSTRONG%3EClaimsPrincipal%20claimsPrincipal%3C%2FSTRONG%3E.%20It%20will%20contain%20all%26nbsp%3B%20claims%20of%20the%20currently%20logged%20in%20user%20including%20login%3A%3C%2FP%3E%3CP%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-inline%22%20style%3D%22width%3A%20400px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Fgxcuf89792.i.lithium.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F163257i211AB69003B31704%2Fimage-size%2Fmedium%3Fv%3D1.0%26amp%3Bpx%3D400%22%20alt%3D%22Untitled.png%22%20title%3D%22Untitled.png%22%20%2F%3E%3C%2FSPAN%3E%3C%2FP%3E%3CP%3E%E2%80%83%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3C%2FLINGO-BODY%3E
Frequent Contributor

Say I have an SPFX WebPart that needs to call an Azure function to do some work. The Azure function needs to know who the user is that made the request. How do I pass the users Identity from the SPFX Webpart to the Azure function?

 

4 Replies

Instead of sending the user's identity, you should consider authenticating against the API. Since SPFx solutions are client-side, it would be trivial for someone else to pretend they're calling the API on behalf of someone else. The following article explains the concept and available capabilities in more detail: https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/guidance/connect-to-api-secured-with-...

Thanks Waldek, Just what i needed!

Do we have a github sample for this yet?

There is one sample available at https://github.com/SharePoint/sp-dev-fx-webparts/tree/master/samples/react-aad-webapi. It's built using an older version of the SharePoint Framework, but it should give you a general idea of the different pieces involved.

@Russell Gove 

 

I'm two years late to the party, but I want to add my 2 cents to help others, who are looking for the same answers.

 

Goal

- Securely call Azure Function from an SPFx webpart/extension

- Prevent users from spoofing/faking their logins by passing them to the Azure Function

- Inside Azure function's trigger, retrieve the login information of the currently logged SPFx/SharePoint in user

 

Solution

- Follow this article to secure your Azure function with Azure AD. Instead of JavaScript - use C# + .NET Core: https://docs.microsoft.com/en-us/sharepoint/dev/spfx/use-aadhttpclient-enterpriseapi

- Inside your Azure function HTTP trigger, inject ClaimsPrincipal claimsPrincipal. It will contain all  claims of the currently logged in user including login:

Untitled.png