SOLVED

SPFx and SQL in Azure

%3CLINGO-SUB%20id%3D%22lingo-sub-86283%22%20slang%3D%22en-US%22%3ESPFx%20and%20SQL%20in%20Azure%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-86283%22%20slang%3D%22en-US%22%3E%3CP%3EAre%20there%20any%20examples%20available%20of%20SPFx%20using%20a%20SQL%20Azure%20database%3F%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-LABS%20id%3D%22lingo-labs-86283%22%20slang%3D%22en-US%22%3E%3CLINGO-LABEL%3EPnP%3C%2FLINGO-LABEL%3E%3C%2FLINGO-LABS%3E%3CLINGO-SUB%20id%3D%22lingo-sub-216783%22%20slang%3D%22en-US%22%3ERe%3A%20SPFx%20and%20SQL%20in%20Azure%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-216783%22%20slang%3D%22en-US%22%3E%3CP%3EHey%20Peter%2C%26nbsp%3B%3C%2FP%3E%3CP%3EJust%20wondering%20how%20this%20worked%20out%20for%20you%2C%20and%20if%20you%20had%20any%20lessons%20learned%20you%20could%20share%20on%20this.%20I%20am%20heading%20down%20this%20path%20myself.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EAlso%2C%20did%20you%20consider%20using%20BCS%20to%20connect%20to%20sql%20azure%3F%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-87123%22%20slang%3D%22en-US%22%3ERe%3A%20SPFx%20and%20SQL%20in%20Azure%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-87123%22%20slang%3D%22en-US%22%3E%3CP%3EHi%26nbsp%3B%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F369%22%20target%3D%22_blank%22%3E%40Vesa%20Juvonen%3C%2FA%3E%2C%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EThat%20all%20seems%20to%20fit%20the%20work%20that%20we%20are%20investigating%20our%20options%20for.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EOne%20more%20question%20though%20....%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EIn%20our%20case%20we%20have%20an%20Office%20365%20tenant%20(running%20an%20SPFx%20web%20part).%20This%20web%20part%20will%20talk%20to%20a%20database%20through%20an%20API%20(preferably%20through%20the%20iframe%20option%20so%20that%20we%20don't%20get%20extra%20login%20dialogs).%20This%20all%20matches%20100%25%20your%20setup.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3ENow%20the%20extra%20complexity.%20We%20also%20have%20users%20that%20are%20not%20allowed%20to%20have%20any%20kind%20of%20access%20to%20the%20Azure%20API%2FSQL%20Database.%20These%20users%20are%20to%20login%20in%20a%20separate%20office%20365%20tenant%20and%20will%20use%20an%20SPFx%20web%20part%20to%20talk%20to%20an%20API%20in%20Azure%20whcih%20in%20its%20turn%20will%20do%20database%20updates.%26nbsp%3B%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EI've%20got%20the%20feeling%20that%20these%20second%20set%20of%20users%20will%20need%20some%20authentication%20sorted%20out.%20Is%20the%20best%20way%20now%20to%20create%20a%20second%20Azure%20environment%20and%20make%20this%20aware%20of%20my%20users%20that%20aren't%20allowed%20to%20access%20my%20first%20Azure%20environment%3F%20Or%20am%20I%20missing%20an%20easy%20option%20here%3F%3C%2FP%3E%3CP%3E%26nbsp%3B%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%3CLINGO-SUB%20id%3D%22lingo-sub-86289%22%20slang%3D%22en-US%22%3ERe%3A%20SPFx%20and%20SQL%20in%20Azure%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-86289%22%20slang%3D%22en-US%22%3E%3CP%3Ethanks%20a%20lot%20%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F369%22%20target%3D%22_blank%22%3E%40Vesa%20Juvonen%3C%2FA%3E%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EThe%20link%20in%20your%20response%20got%20corrupted%20by%20the%20full%20stop.%20For%20completeness%20the%20right%20link%3A%3C%2FP%3E%3CP%3E%3CA%20href%3D%22https%3A%2F%2Fdev.office.com%2Fsharepoint%2Fdocs%2Fspfx%2Fweb-parts%2Fguidance%2Fconnect-to-api-secured-with-aad%22%20target%3D%22_blank%22%20rel%3D%22noopener%20noreferrer%22%3Ehttps%3A%2F%2Fdev.office.com%2Fsharepoint%2Fdocs%2Fspfx%2Fweb-parts%2Fguidance%2Fconnect-to-api-secured-with-aad%3C%2FA%3E%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-86288%22%20slang%3D%22en-US%22%3ERe%3A%20SPFx%20and%20SQL%20in%20Azure%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-86288%22%20slang%3D%22en-US%22%3E%3CP%3ESince%20there's%20no%20native%20SQL%20connectivity%20from%20JavaScript%2C%20which%20makes%20sense%20(no%20way%20to%20hide%20connection%20details)%2C%20you'd%20be%20looking%20to%20have%20a%20service%2C%20which%20provides%20the%20needed%20access.%20This%20could%20be%20implemented%20as%20WebAPI%20or%20as%20Node.js%20application%20hosted%20in%20Azure.%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3EYou'd%20secure%20the%20call%20from%20SPFx%20to%20WebAPI%20using%20Azure%20capabilities%20and%20then%20provide%20needed%20operations%20towards%20your%20SQL%20Azure%20database%20(or%20any%20other%20service)%20from%20the%20WebAPI.%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3ESee%20following%20for%20additional%20details%20on%20how%20to%20secure%20the%20traffic%20between%20SPFx%20solution%20and%20WebAPI%20-%26nbsp%3B%3CA%20href%3D%22https%3A%2F%2Fdev.office.com%2Fsharepoint%2Fdocs%2Fspfx%2Fweb-parts%2Fguidance%2Fconnect-to-api-secured-with-aad.%26nbsp%3B%22%20target%3D%22_blank%22%20rel%3D%22noopener%20noreferrer%22%3Ehttps%3A%2F%2Fdev.office.com%2Fsharepoint%2Fdocs%2Fspfx%2Fweb-parts%2Fguidance%2Fconnect-to-api-secured-with-aad.%26nbsp%3B%3C%2FA%3E%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-849941%22%20slang%3D%22en-US%22%3ERe%3A%20SPFx%20and%20SQL%20in%20Azure%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-849941%22%20slang%3D%22en-US%22%3E%3CP%3E%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F369%22%20target%3D%22_blank%22%3E%40Vesa%20Juvonen%3C%2FA%3E%26nbsp%3B%3C%2FP%3E%3CP%3EWhat%20about%20SPFx%20web%20part%20that%20Posts%20and%20Gets%20to%20and%20from%20Cosmos%20DB%3F%3C%2FP%3E%3CP%3EThey%20have%20an%20express%20example%20that%20we%20can%20probably%20use%20to%20create%20the%20connection%20but%20if%20someone%20already%20did%20something%20similar%2C%20it%20will%20be%20easier.%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EThanks%26nbsp%3B%3C%2FP%3E%3C%2FLINGO-BODY%3E
MVP

Are there any examples available of SPFx using a SQL Azure database?

5 Replies
best response confirmed by Pieter Veenstra (MVP)
Solution

Since there's no native SQL connectivity from JavaScript, which makes sense (no way to hide connection details), you'd be looking to have a service, which provides the needed access. This could be implemented as WebAPI or as Node.js application hosted in Azure.

 

You'd secure the call from SPFx to WebAPI using Azure capabilities and then provide needed operations towards your SQL Azure database (or any other service) from the WebAPI.

 

See following for additional details on how to secure the traffic between SPFx solution and WebAPI - https://dev.office.com/sharepoint/docs/spfx/web-parts/guidance/connect-to-api-secured-with-aad. 

thanks a lot @Vesa Juvonen

 

The link in your response got corrupted by the full stop. For completeness the right link:

https://dev.office.com/sharepoint/docs/spfx/web-parts/guidance/connect-to-api-secured-with-aad

 

 

Hi @Vesa Juvonen,

 

That all seems to fit the work that we are investigating our options for.

 

One more question though ....

 

In our case we have an Office 365 tenant (running an SPFx web part). This web part will talk to a database through an API (preferably through the iframe option so that we don't get extra login dialogs). This all matches 100% your setup.

 

Now the extra complexity. We also have users that are not allowed to have any kind of access to the Azure API/SQL Database. These users are to login in a separate office 365 tenant and will use an SPFx web part to talk to an API in Azure whcih in its turn will do database updates. 

 

I've got the feeling that these second set of users will need some authentication sorted out. Is the best way now to create a second Azure environment and make this aware of my users that aren't allowed to access my first Azure environment? Or am I missing an easy option here?

 

 

 

 

Hey Peter, 

Just wondering how this worked out for you, and if you had any lessons learned you could share on this. I am heading down this path myself.

 

Also, did you consider using BCS to connect to sql azure?

 

 

@Vesa Juvonen 

What about SPFx web part that Posts and Gets to and from Cosmos DB?

They have an express example that we can probably use to create the connection but if someone already did something similar, it will be easier.

 

Thanks