Tutorial: Build Secure Azure SQL & Azure Web API with Azure Key Vault and App Builder

foreign [Music] hey everyone let's get started today we are going to cover securing Azure SQL web apis with app builder and Azure key Vault this is a slightly different webinar than we've done in the past though we have the same hosts of course myself Brian's online it's ravco's online George is online Constantine Pablo the whole product team's online but I actually recorded the demo for today and so it's a recorded sort of thing because it is very complex and it in normal circumstances probably would have been an hour and a half demo but I wanted to get it in so I squeezed in the actual demo part to around 45 minutes but we're all online live so you're getting live q a uh along with this but it is a killer demo and hopefully it gives you some insight on how to use these Cloud tools and then how you can use app builder which the app builder story is going to be the same as you see in the past and then we've covered some of this in other webinars but I think it's a pretty cool example and I also learned a lot too doing it so today's agenda we're going to do this end to end from scratch we're going to create an Azure SQL database we're actually going to migrate from SQL uh Express to the cloud we're going to create and deploy a web API app we are going to get everything working in terms of the app the database from our local machine then we're going to deploy it to the cloud and then we're going to use Azure key Vault to encrypt the connection string so there's no connection string in your application code and it's all in the cloud in a secure environment then of course we're going to consume that data right inside of app builder but before we get to that I want to highlight Q4 2022 is big for app builder there is a bitly link and a QR code that you can go and read uh rattles blog on the new features that we shipped in 22.2 but there's more coming uh in the next couple of weeks and we hope to get it all in but you know if it kind of gets into January it'll be very early January uh but we've got new web components code generation so the web components uh is now getting code generated of another option in your code generation in app builder we've got updated Blazer coach and of course we have that brand new blazer grid the most feature-rich high performance Blazer grid on the market it will blow you away if you haven't seen it with all the theming and everything all that good stuff if you haven't seen our what's new 22.2 webinar make sure you check that out coming soon new pivot grid inside of app builder coming soon column can or no I'm sorry column templates are coming soon in app builder we shipped column configuration so you can change column configuration right inside app builder on the canvas but we're going to ship column configuration so you can do column I'm sorry column templates so you can actually do column templates which is killer because sometimes you want write an app builder to add an image add a sparkline do something special you'll be able to do that with column templates chart aggregations which is a feature that I demoed in several webinars on how you can take lots of data and aggregate it right within the chart data engine that is now inside of app builder grid crud this is the one that's on the fence may ship may not ship but needless to say grid crud is coming soon and then finally hierarchical data the app builder only supports flat data but with hierarchical data it opens up a lot of new options like the hierarchical grid so anyway keep an eye on the December blogs for app builder because we're pretty excited about some of the stuff that we're shipping and go back and watch the 22.2 what's new webinar if you haven't scan the QR code to read rato's blog so good things happening with app builder we aren't slowing down but for today what are we gonna do I put together this diagram of all the things that you're going to see today so starting from the left hand side we are looking at a visual studio webapi.net6 web API app with minimal API connecting to SQL Server we're going to do a simple HTTP get we're going to have a single table a single view in SQL server and we're going to serve that up over a Swagger UI then we are going to push that code to GitHub and then inside of GitHub you have your normal check-in checkout stuff but the neat thing is once we actually deploy that API app in Azure we are going to trigger a continuous delivery script inside of GitHub so every time we check in our code in Visual Studio our code in Azure gets updated along with that we're going to do that SQL migration that's one of the first things we're going to do is get that database up in Azure and then at the very end of the webinar after we get all the key Vault stuff working all the encryption working will push the code one last time and then we will just consume that API from app builder and that part of the demo is like of course 30 seconds that's the easy part the hard part is getting everything set up but you can see today that this demo is about 45 minutes without some of the editing that I did because like for example when you update the visual studio code and it uh you check it into GitHub and then you're doing a script uh The Continuous delivery is happening with Azure that could take like five minutes because it's not up to you it's up to GitHub and it's up to Azure and it's up to the cloud so while all of this is automated it doesn't often happen in five seconds or two seconds like it would locally for example when you deploy the SQL database it could take Azure five minutes to finally deploy it when we uh submit the web API it could take five minutes for Azure to deploy it so that's why I I did this webinar a little bit different today but I think you're going to be blown away by everything that you see it's pretty exciting and was really fun to put together so make sure you ask all of the questions inside of the chat and the Q a of course the webinar will be available on YouTube tomorrow we will email you a link to it so if you can't watch it all or you want to send it around to your friends you will get a link uh as soon as it's uploaded to YouTube so let's go ahead and get started and create the database consume it from a web API secure it with Azure key Vault and then consume everything inside of an app builder app in this example we are going to use Azure SQL as the database so here I have a database in SQL Express on my local machine and I am going to migrate that to Azure SQL the Autos table will select the first 1000 rows it's really only 500 rows of data and it's probably got I don't know 15 or 25 columns so to get started let's go ahead and go to our Azure portal so here I have my Azure portal and I am going to go to my resource groups and I'm going to create a new Resource Group and in this Resource Group we're going to create a database we're going to create a web API application that we're going to get from GitHub which we're going to create in visual studio and we are going to add our Azure key Vault so let's go ahead and click create and we're going to create a new Resource Group we'll just call it new demo group and the east region is fine next we have no tags and so we'll just go ahead and hit create and this will create our Resource Group so let's go to our Resource Group now inside of our Resource Group we want to add our SQL Server so let's go ahead and click create again and in the marketplace let's just type in SQL and Azure SQL pops up first so let's go ahead and click the create button Azure SQL and we'll create a single database I'm going to click create and now we're going to add this to the resource Group that we just created so I already have a resource Group for another application set called SQL Server Resource Group we're going to put this to the new demo group and the database name will be called autos test DB and the server we're not going to put it in J Barris East we're going to create a new server and this will be called autos DB server and we will use both SQL server and Azure active directory authentication oh you'll notice here your server can only contain lowercase letters so I always forget that let's go ahead and fix this I don't know why they don't fix that for you but for our login I'll go ahead and use a login that I will remember the oops like so I'll set the admin and the admin for this Azure directory is going to be me and we'll select myself and now that is the admin for this SQL Server database we'll click OK and now the next thing that we want to do is make sure that we're not going to get charged 227 dollars a month I have the free Azure tier which I believe gives me 150 a month so I'm going to change this to a development database and I'm going to configure it to the service tier of DTU based which is for Less demanding workloads perfect for demos or small databases or things that not many people have to access I'll go ahead and click apply and that will charge me I think around yeah four dollars and ninety cents a month and locally redundant next for networking we're going to allow the public endpoint we want to allow Azure services to access this server we want to make sure that my IP address can be used for this specific database so if you try to connect to this you won't be able to and I'll click security next and I don't believe I want any of that click next for additional settings I have data already so we're not going to use the sample data tags nothing review and create and everything looks like it should four dollars and ninety cents is good and let's go ahead and click create so this usually takes a minute but what it's doing is it's actually going to create that database in the resource Group that I created so we'll wait for that to complete and then we'll go back to SQL Server management studio and we will migrate our local SQL Express database to Azure SQL you see the deployment is just wrapping up and the deployment is complete so let's go ahead and go to our resource and we'll be able to use this now so what we can do and what this defaults to is to start working with your database there's a couple things that you can actually do you can open this up in Azure data studio and then run a script to add data they have a beta query editor that you could use to add your tables and Views and insert data into those tables or you can use SQL Server management studio so if I go to SQL Server management studio and you go to your database and you right click and you go to tasks there's an option to deploy database to Microsoft Azure SQL database so if I click this I'm going to have a wizard that pops up and it is going to prompt me for some user ID and Etc info another option that you have is if you right click on the database you have the tasks again and you can generate scripts I personally like doing this because then I can modify the scripts if I want you click generate scripts and what this will do is allow you to script the database so here if I want to script the entire database and all objects I click next the one nice thing here is if you click Advanced and you scroll down to types of data to script you can select schema and data and click OK and I will open this in a new query editor window and I'll click next and it does it for me here so we'll finish and you can see that it does the create table and this actually did the create database and everything but here's my create table here's my create view here and then this is the insert statements for all of the data that I have in the database all 500 records what we'll do since we've never tried this before is we'll right click on auto people we'll go to tasks and we'll go to deploy database to an Azure SQL database so let's go through this wizard so let's go ahead and connect to our server so our server is going to be the SQL Server that we just created so if I go back to my overview here you can see this is called Auto dbserver.database.windows.net so I'm going to copy this to the clipboard let's go back to our wizard and I'm going to paste this in I'm going to use SQL Server authentication and I'm going to use my username and password that I typed in and I'll say remember password will connect and what we have now is the connection that's successful and a couple questions the addition the maximum size I'm guessing this is the basic I don't know I'm going to take the defaults let's click next here's my source database there's my target database and let's just go ahead and click finish and we'll watch The Wizard complete so it's basically running the same script and then it's going to run it in the cloud on Azure so let's watch this happen and we will look at the results in azure so we have success everything was deployed to Azure all the results look good so we'll close the wizard dialog and if we go back to our Azure database we'll be able to look at our SQL databases here we have Auto people and auto testdb now keep in mind when we created the SQL Server itself we created a database auto test DB when we ran the wizard it created Auto people so Auto people is actually the database that has all of the data in it so if we go to the query editor let's continue to log in as myself and we'll expand tables and we should see our Autos table in here and if we select this and on the Overflow select top 1000 rows it will execute the query and we will see our data so there we go now we know we have some data here so the next thing that we want to do now that we have the database and the table Autos we want to create a web API in visual studio and then we will deploy that web API to Azure and after that we will secure our credentials using Azure key Vault so let's go and open up visual studio so I'm going to open up visual studio let's go ahead and create a new project we will create an asp.net core web API project and we will call this autos API demo one and we will uncheck to use minimal API except the other defaults and click create so here we have our application we go to program.cs we can see we have this boilerplate code which we always want to delete so let's delete that and let's delete that and there we go so what we're going to do is use the Entity framework power tools of course to generate our Entity framework models and then we'll create the API to access it from the server so I'm going to right click I'm going to go to EF Core Power Tools and I'm going to select reverse engineer so from here I want to add my database connection and of course we need that server name again from Azure so let's go back to our overview that's fine and we will copy the name of the server and let's paste this in we will use SQL Server Authentication and we'll save the password and we'll select the database we're going to use Auto people and we will say ok so we're going to select our table and our views we'll click ok and the options here we will put this in the models directory that's fine we'll put this in the data directory or data folder we have installed EF core package and product and we also want to select include connection string and generated code so then we'll have that and we're not going to leave it in the generated code when we officially deploy it but you'll see why we will use it in the very beginning let's go ahead and click OK and click ok so the wizard is complete it created my data context it created my models so I've got my autos and my Autos view so all of the hard work of typing all this has done for me by the tool which I love Entity framework power tools you'll also notice that the power tools readme popped up and it gave me my connection string information which I will need to connect to the database but what I what I wanted to highlight is that if I go to my data context here what you'll notice is that the SQL Server Connection is also generated here which means that it will automatically connect to the server when I run my web API now if I run this right now nothing will happen because there's a couple errors you can see we've got the red squigglies everywhere and if we look at all the errors Entity framework core DB context all these things don't exist so I'm going to right click here we're going to go to manage nuget packages and we are going to install what we need to make this work so we need the Entity framework so we can just start typing in any framework core and it will come up so we've got the Entity framework core SQL Server we need click OK and accept the defaults there and we also just need the Entity framework core package which should be first there it is I'll install this guy and that should do it for so yeah no more errors let's close this out if we build there should be nothing a suspect happening but when we run it we won't get anything in our Swagger UI because we haven't added any HTTP gets yet so here is our Autos API it's connected to our SQL server in the cloud but it's not doing anything so what we want to do is go to our program Cs and we need to modify this which will actually generate that DB context which will connect to the cloud which will get our data in our Swagger UI so the first thing that we need to do is generate that DB context so here before Builder dot build we want to create our DB context so we'll do a builder dot services dot add what do we want to add we want to add a DB context now we have to tell it which DB context to add you can see my intellisense is trying to guide me in the right direction here but just so you know what is your DB context let's go to the auto people context and there is my DB context it's called Auto people context and this is in the Autos API demo1.data so let's copy this and we'll go back to our program CS up here let's just say using and in our ad DB context let's go ahead and add our Auto people contacts which comes up very nicely and that's all we need to do so this will automatically create the DB context and when it does that it will create a connection to our SQL Server let's go back to program CS now we are going to run this locally in Visual Studio but our data is in the cloud so here we have if app environment is development use Swagger UI I want to use the Swagger UI even if it's not in development because I want to use it when we deploy it into the cloud as well we have app.use HTTP redirection now we have to add our map get which will create the API so I have this already created for us here so I want to do an app.map get API Auto so when I type in API Autos it'll pull that data that's using map get of course you have map put map delete Etc and then we're going to use from Services the auto people context.db we're going to get the Autos View and then we're going to make that an async list which comes back so we're just going to update some using statements here so we have using Entity framework core and then from Services is going to be in the MVC namespace let's using asp.net core MVC so that's all we need to do let's go ahead and run this now and let's see what we get my Swagger UI pops up let's go ahead and try this out click try it out click execute scroll down a bit and we should see some data coming back from the server now keep in mind when you do this yourself there's always going to be some slight delays because we do have that very low end development database but nevertheless we have data which came back so you can see I've got all of my Fields ID title first name Etc and the data from the database so this is awesome we're almost ready to go Next Step you do not want to deploy your connection string inside of your app code because what we're going to do is deploy this to GitHub and the GitHub is you know where everything is at and anyone can go in there and look at your secure information so what I want to do is I want to take this and I want to put it in my secrets if you remember and the power tools read me it gave me this connection strings code so I'm going to copy this I'm going to right click on my project I'm going to go to manage user secrets and I'm just going to paste this in and now I have a connection strings default connection so now it's completely Secret because when you manage user Secrets you'll see secrets.json this doesn't get deployed to GitHub it doesn't get deployed with your app that's why we need to update the connection string in Azure key Vault so we have a connection string once everything's up in the cloud so if I now go to my auto people context we no longer want to use any of this so I'm going to hit the delete key and we're done so let's save and if we run this it's not going to work why because if we go to program.cs we are adding the default DB context we don't want to do that now we need to use some other options to get the connection string out of our user secrets so of course I happen to have a code snippet for that and let's add the default DB context here and because this is called default connection which was the name of our user secret config which of course if we go back to our power tools readme you'll see it's called default connection and we go back to program CS this is part of the builder.configuration.getconnectionstring method so it's saying get this connection string from a configuration file what is the configuration file it's either going to be appsettings.json or it's going to be your user Secrets dot Json so it'll look in either one of these four uh whatever configuration you might you might happen to have you could have multiple configurations this happens to be get connection string what's the connection string it's called default connection now that is the DB context that we want to add of course it's not Dev test context this was something else I was working on it is the auto people context so for auto people contacts please use this new connection string that we just pulled in that's all I need to change let's save it let's run it and now this will do the same thing that we just saw except we have our secret secured as a user secret in the application so we'll try it out we'll execute and the best thing to do when you're starting to learn all of this is always make sure you're getting data back because nine times out of ten you're going to forget a step or something's going to be wrong and you're not going to get data and if you do incrementally testing by the time it deploys everything should work okay so just a little tip there so let's go ahead and close this now what we want to do is I want to deploy this to GitHub so github's my source control system so I'm going to right click and I am going to deploy to a git repository so let's click create git repository the nice thing is I've done this multiple times so it is already logged into GitHub if you haven't done this you just log in uh there's my repo or not my repo there's my my ID for GitHub I have several of course they don't want me to be a manager on any of these but I happen to be one so I can deploy which is scary some people but anyway this Autos API demo one is the name of my project name of my description I'm going to keep this private and I am going to create and push so let's go ahead and create and push and this only takes a second but this is going off to GitHub and you can see I've got the locks here for everything and all is good so if I go to get changes there's nothing happening here and if I go back to solution Explorer we're in our program Cs and we can just add a comment like so and you'll see that I don't have the lock here anymore and if I wanted to deploy this I could I can just say updated comment and I better change this to the right word here like so and I can commit all my changes save and commit them all and then I can do a poll and then a push and it automatically updates GitHub so all this is up in GitHub everything is fine if we want to see it in GitHub we can go to Edge and we can go to github.com forward slash J Veris and we'll go to repositories and there's my Autos API demo one now what is the next step the next step is to get this as an API app inside of azure how do we do that let's go back to our Azure portal so I'm going to go back home and I'm going to go to my new demo group Resource Group remember we created this earlier here I've got my database and other things now from Azure I want to create a new API app so let's go ahead and hit create what do I want to create we're going to search for API and there's API management but I want the Azure API app so let's click create on an Azure API app and we have another wizard here so let's enter the app name the name of our project I think was Auto's API demo one let's see if that'll work for us autos API demo one looks good publish code runtime stack we'll use the current version of.net region I'm in the Eastern us we'll use eastern U.S my windows plan this is the ASP SQL Server Resource Group I do not want to put it there I want to create a new one and this will just be called autos API oops so click OK and this is a standard S1 1.7 gig of memory if we click change size this is a production one which is probably going to cost me some money uh 43 bucks a month is way too much so I'm going to click Dev test and this is going to be a shared one gigabyte of memory 60 Minutes of compute per day which is perfect for me so let's go ahead and apply that and the magic word here is free so let's do click next for deployment now this is what is so cool it's I've already done this before but so it knows that I've got a GitHub account so what I want to do is enable a continuous deployment you know you hear about CI CD continuous integration continuous deployment that's what we're doing here so I have my GitHub account here Jay Barris if I want to change it I could I'm not going to I'm going to select the jberis organization and now I'm going to select the Autos API demo one repository that we just deployed and I want to pull from the master Branch now what is this doing it's going to create a yaml script in my GitHub repo which will trigger a continuous deployment every time I check in new code which is magical so let's go to networking enable Network injection off monitoring I think we just leave all the defaults here enable no I don't want application insights I don't need tags everything looks good I'm just taking all the defaults and I'm going to click create so now this is deploying my application so this will take a few minutes while the application is getting deployed but at the same time it is updating my GitHub repository with some new code with some new scripts and then those new scripts will trigger every time I actually run this guy so you can see deployment is still in progress there's my API Auto API resource plan that we created and now we'll just wait for this to finish up and we'll take a look at what we got so our deployment is complete let's go to our resource and this is our Autos API demo one now when you're here there is no code so it's not like you're looking at code or running code this is actually a running web API at this point so you have a URL Autos API demo one.azurewebsites.net so if I click this you'll get either an error or some default page so it says your web app is running and waiting for your content but what we want to do is use our Swagger URL so if I do a forward slash Swagger I get an error it's temporary on unavailable if you get that you can always try Swagger forward slash index.html that might not work uh if that doesn't work you can also check to see if the application is just maybe there's something wrong with the Swagger page you can also try API and I think our API name was autos and nothing seems to work yet so what usually happens here is the website says it's ready and deployed but it's really not so you have to wait a few minutes you shouldn't so if I click this and you get this page that means it's really not running yet that means that you know this is sort of like a a please hold page what you should get is a straight up error I think it's a 404 error on this page so we will go do one other thing in the meantime so one of the things that we need to do is give this application permission to have an identity within active directory so what I want to do is I want to select the identity Tab and you can see that there's no system assigned identity I want to switch this to on and you'll see why when we add our Azure key Vault because we want to associate the key Vault with an application and that's all done through active directory so that's what we're going to do there and we are good to go so we're not going to do anything to our code in visual studio until we see that our application is actually up and running so let's go back to overview whoops is there oh there's the save button make sure you hit save so this is enabling my Autos API and there's my Azure role assignment so this register with active directory that is the important thing it does not do that by default and you will run into problems adding a key Vault if you don't do that so make sure you do it let's go back over here and let's see what's going on with our application perfect so you can see we get an error 404 that means our app is actually deployed how do we know that let's go to Swagger forward slash index.html and hit enter and there's our Swagger UI so you have just deployed an application to the cloud in Azure with a web API now let's try it out try it out notice we have the schema here because Swagger has the schema we'll click execute and what's going to happen we get an error so we have error 500 internal server error and for everyone that's Savvy it's because our user Secrets don't get deployed there is no DB contacts there is no connection string it has no idea where to get its data from at this point so that's why we add the key Vault so let's go back home and let's go to Resource groups and we are going to go to our new demo Resource Group we are going to select create and what we want to create is a key Vault so let's type in key Vault and you can see here we've got the Microsoft Azure key Vault service so let's click this guy and now again we are going to create this object and then we're going to run through a wizard asking us a few questions to set up this key Vault within our application and then we're going to use this key vault in the app so what I already know is our Resource Group we're in the new uh new demo Resource Group we're going to call this one autos key vault demo one and we need this so I'm going to copy this and paste it off to the side because we'll need that later standard pricing eastern US just accept all the defaults here we'll click next and this is where it gets quite important for that identity that we added you'll notice that from a user perspective I jsonby at infogistics.com has a bunch of different permissions on this key Vault but we need our application to have permissions as well so I'm going to click create and we need to have secret permissions enabled get and list because that's what we're going to do we're telling the key Vault to go ahead and get this information from the key Vault and then allow me to use it from my application so I'm going to say get enlist under secret I'm going to say next and now it wants to know what principle to associate this with so let's just type in Auto and lo and behold there is our Autos API demo one so that's what I was talking about if you don't enable the principal object on the web API that you just deployed it won't come up here here and you'll be like wait a minute how do I give this app permission so now this application has permission to access this key Vault so I click next I click next and I click create that's one of if not the most important part of this configuration we'll click next yes enable Public Access allow access from all networks click next and by the way if I go back here we have a lot of customers that use like our reveal SDK Etc uh make sure that you have your firewall set up correctly so if you have IP ranges that you want to allow access to things like the key Vault your web apis your databases every networking tab ends up being very important for that let me click next here next here and let's click create so now we're deploying our key Vault deployment is in progress and now the next step is when this is complete we are going to tell our application to actually use it in Azure then we're going to go modify the code in Visual Studio to pull from the key Vault so it says your deployment is complete let's go to our resource there's our Autos key Vault demo one and now we create the actual secret that is stored inside of auto key Vault demo one so we're going to go to secrets on the left hand side and we are going to generate or import a secret so upload options are manual the name of this secret will be azure or actually it'll be Auto API demo secret one and we need to enter the secret so the secret is actually our connection string that's all of this is to get the connection string encrypted online so Azure Services can actually use it so let's go back here I'm going to move this off the screen so I can safely copy all of my username and password info so let's go to let's paste it in there and you can see that it is pasted so I have Auto API demo secret one and we can move Visual Studio back we'll minimize it I am going to copy this as well so I don't forget it let's go back here and paste it in my notes all of these things end up being important because you need to use them in other places so you want to make sure that you have them handy okay we won't set an activation or expiration date it's enabled so let's go ahead and click create so now this secret is created within our key Vault so now how do we use that key vault in our application the first thing we need to do is add a couple new nuget packages these nuget packages will allow us to access the Azure identity service and the Azure key Vault so let's go ahead and type in Azure identity actually Azure dot ident I think will work and let's see here we go Azure dot identity and let's install the latest stable and we will also then search for the Azure Security nuget package security and it's actually azure.security.keyvault.secrets because that's what we're going to access we want to do the latest stable and let's install that now if you remember when we connected to our basic Azure SQL or local SQL Server we were just doing a get connection and we were using user Secrets or the default DB context what we need to do now is remove this because we want to access the key Vault and remember the way we access the key vault is through that key Vault URL how are we going to get that key Vault URL in the app well we are going to add it to the app settings and the reason we can add it to the app settings is because it's harmless there's really nothing anyone can do with this URL unless they have our authentication to Azure like for example in my case it's my IP address in your case you could have a a token IP range or an application name it's it's really up to you so I'm going to go to the toolbox and I happen to have here my key Vault entry so I am going to add this vault key is going to be the name that I look for when I get the configuration and then this is the URL that I want to go up to the server now this is not the URL that we were using because this is one I was using earlier and testing I want to copy the one that I copied earlier so it's called Auto's key Vault demo one so it's Auto's key Vault demo one how do you know that let's refresh we can go back home we can go to Auto's key Vault demo one and there you've got the URL so this URL is what's important and then if we go to Secrets what are we going to get out of that URL this secret name so I'll I guess I'll copy it I do have it over here Auto API demo secret one we'll actually see if we can remember that let's go back to visual studio so I want to get this vault key how do I get that vault key and while we're at this let's go to our user secrets so I'm going to go to manage user secrets and I am going to comment all this out just so there's no doubt as to what's actually happening here there's no other connection string in this application at this point except a URL to the cloud so let's go to program.cs and I'm going to delete this code because we are not going to use that method of getting the connection string I'm gonna go to my toolbox here and let's add these four lines of code now these four lines of code are using similar so we're going to use builder.configuration what configuration vault key of course vault key is what I added to my app settings and then we're going to create something called The Secret client what is the secret client well the secret client is what is at the endpoint that is at the vault key so I want to pull that in now secret client is of the Azure Identity or Azure security key Vault secret so we need to add that using statement up here and then we need to add the Azure dot identity so we'll go ahead and add that as well so using Azure identity so now what do we do next so the next thing is we are going to get the actual secret so of course I already forgot what the secret was called let's copy this the secret up at our URL is called Auto API demo secret one what's an AP Auto API demo secret one is our connection string and this is a standard connection string so it's you know database equals user ID equals so it's exactly what you would use on you know any database now at the same time if you want to know what the exact connection string should be you can always go to your database let me go to SQL databases and then within the SQL database I have connection string so I can click on connection strings and this will tell you exactly what to put in so you can see this is what I actually had in my configuration user ID DAV I had my password in there so depending on how you're connecting what your server or client is or your driver you would use these guys so let's go ahead and minimize that go back to here and I'm actually all done that's all I needed to do so I changed four lines of code here which are going to point to the URL in the cloud in the key Vault to get the encrypted connection string so let's go ahead and run this make sure it works now the first time you run this it might take a few seconds because it's going up to Azure it's authenticating your application for the first time against the principal in active directory so it knows that it's authorized to access this encrypted key Vault data and then it's going to pull that key Vault data into our application so now if I run this try it out execute and we will see data so just like that I get all of the data that I had before now if I close this out and let's just set a break point here let's run this again and at our break point we can look at some other information that we've pulled in so we've got KVs here so I've got my auto API demo secret and then of course my connection string so all of this was just pulled in from Azure key Vault we're done so what do we do now the next thing we need to do is commit all of this to GitHub so let's go to get changes and there was a bunch of different changes and just going to say updated to Azure key vault for connection I'm going to commit everything and then I'm going to do a poll then a push and let's go back over to the browser and let's go to github.com forward slash Jay Barris and take a look at what's happening here so I'm going to go to my repositories and here's our Autos API demo one now let's go to our actions so this is where it gets really cool so you can see that it's merging Branch master of GitHub jberis Autos demo one up to the cloud so this is the workflow build and deploy if I go to my code we go to GitHub workflows Master Auto's API demo one yaml this is the script that was created by Azure that does the actual deployment or the build and then deploy to the server so let's say for example that you messed up and you want to delete your API app in the cloud all you need to do to stop this like check-in continuous deployment is click the delete file and that will automatically delete this job from happening so there's no trigger that would happen in that case but anyway so this is going to merge this will take a minute and when it's done we will take a look at our application in the cloud so we have the green check box it looks like everything was complete and the way we can test this is by simply going to our Swagger API let's do a refresh to make sure that it is the latest version you can see it's taking a second to load because the application was literally just redeployed so the application restarts now let's click try it out we'll click execute now this is doing all that same stuff we did locally it's going to the key Vault through that URI it is pulling out the secret and look at that we have data so we have successfully deployed our web API to Azure with an Azure SQL database using an encrypted connection string so nothing is in our code that would expose us to a security risk and the Azure key vault is pretty much the most secure option you have for storing any app configuration especially your SQL connection strings the nice thing is let's say you're using a different Vault client like hashicorp and there's others they all integrate in with Azure so you're not limited to the Azure key Vault you can use any key Vault that you like so that's it we've taken an application started from scratch end to end built an entire cloud-based app using visual studio and net with web API and now what we can do is just consume this like any other API in our application so I'm going to go ahead and copy this URL I'm going to open up a new browser window and I'm going to go over to app builder so inside of app builder I'm going to create a new application so let's do a new app I'm going to use a template I'm going to use a blank template and in my blank template I am going to drag a grid onto the form so let's drag a grid onto the form like so and I am going to then add a data source so let's add plus rest API I want to use Swagger I'm going to add my URL of course I'm going to add my brand new web API click done there we go configure my endpoints there's my Autos select data select all click done select my grid let's go over to the data Tab and let's select our Autos API and now I have a real live business application with real live data coming from Azure and I want to do a Blazer server app here and I can do a preview so this is my application has all my data everything that I would expect and then of course all of the generated code that I need to build out my entire app so just like that you now can consume that web API in a real live Blazer angular web component application using app builder without writing a single line of code okay so before we wrap up that was awesome great job Jason on that demo uh can everyone please take the poll we're going to kick off the poll and it's about five questions or maybe seven I forget we added a couple new questions what we're really interested in is if you're using Azure are you using Azure SQL are you using a Azure API apps like what is your story for the cloud or are you still on Prem because we can tailor content to where you're doing your development I think in Q2 through Q4 this year we did a lot of cool demos around Entity framework around creating web apis with SQL server and all that all kind of in relation to app builder while we didn't spend a lot of time on app builder in this particular webinar we will in the future because there's more and more features that really matter to you and we really want to make sure you know how to use those features but please answer the questions in the poll if there's other things that you think we should have asked but we didn't just go ahead and type it in the chat and give us you know your your thoughts and of course you can email myself Brian George doesn't really matter any of us with what you are thinking so please get app builder today uh we've got uh at builder.indigo design is where you log in uh our playlist up on YouTube which is ever growing has more cool videos there and we're constantly adding more content with the new blazer capability with the new web component capability it's really getting exciting and with this release coming a couple weeks when you be able to add column templates when you can do just more and more of code that you would normally have to write yourself we're going to remove that from you and then early q1 when we finally get that Master detail done it is really exciting so we're just opening up more and more of your time to spend on what's important versus writing tedious error prone and mundane code so January 26th is the next webinar we are going to focus solely on app builder there are so many new features to show inside of app builder so George and I will be doing those demos it's pretty exciting and I can't wait to get it into your hands uh the new stuff in December and then everything that we're going to be shipping in q1 so I'm very excited about that and we won't be having a demos like this until the new year so I hope everyone has a good holiday season as well and I want to thank everyone for continuing to support us and to join these webinars to learn about technology so thanks again this is my email Brian's email we're going to stay online and make sure that we answer every single question if you could keep finishing up those poll questions we really appreciate it and thank you again everyone for attending today's webinar [Music] thank you

Channel: Infragistics

Views: 3,037

Keywords: #appbuilder, #appmaker, #blazor, #blazorapps, #azuresql, #azurewebapi

Id: zagGhHL6E1k

Length: 54min 23sec (3263 seconds)

Published: Wed Dec 07 2022