 What's going on YouTube? My name is Lee Brandt. I'm a developer advocate here at Okta today. We're going to talk about Document databases. We're going to talk about MongoDB Document databases have become increasingly popular over the past few years They're really good for their speed and their ability to store large amounts of kind of semi-structured or even unstructured data if you need to get up to speed with Getting to a MongoDB source from .net today. We got you covered. Well, let's get started Okay, so the first thing we're going to need to do is scaffold out the application now. I'm going to show this on a Mac It works just the same way on Linux on Windows. You can just open up Visual Studio and file a new project So I want to show this on an operating system that doesn't have all quite all those bells and whistles yet So let's take a look at just the command line here We're going to start by creating a new application And this is my .net new MVC. We're not going to use HTTPS So we don't have to have a local local developer certificate and We're going to put this out into a folder called Okta.net core Mongo MVC Mongo example in case you needed a really really long folder somewhere on your system If you have if you don't have one of those already So once this is all done We can change directories over into that folder and we can see it scaffolded it up our basic application Now we need a couple of packages here. So let's go ahead and add those as well if you're on Visual Studio proper you can just go into your new get package manager and Do that but here we're going to add this package the MongoDB Driver we're using 2.10.4. That's the latest as of this writing Or this video I suppose And then we're also going to add another package that is the open ID connect package from Microsoft That we'll be using for the authentication piece and This is just Microsoft ASP net core authentication open ID connect We're using version 3.1.4. So we'll go ahead and add that package And this just allows us to use OIDC protocols All the stuff that you're going to need in a Visual Studio application to make it use OIDC So Yeah, now everything's scaffolded Everything's ready to go and we can actually start setting up the database cluster now All right to get started with the MongoDB. We need to set up the database Just go to MongoDB.com and you can go to sign in or sign up I just signed up with my gmail account And once you get logged in this is the page you'll be taking to that shows you your clusters now There's only one by default cluster zero now if I go to collections It will show me all the databases and collections that I have in this cluster, which is none okay, so If I want to create my own database I would just go in here and say add my own data We'll call this suggest me And we'll call the collection submissions And we'll go ahead and create that collection And now on to see we'll see we've got the suggest me database with the submissions collection in it So now we have a data store that we can go ahead and save data to all right So now that you've got your Setup you're going to want to create a database user that you can use it'll create an admin one for you But if you're like me you've gone through gmail and it's just easier to just go ahead and set up another database user So click on database access And then go over here to add new database user. We're going to use password As the authentication method and we'll just call this a web app And we'll set the password to something super secure And we'll leave it as read and write to any database, but I'm going to set up the database user to only live for a day so Once we go ahead and add this user now that user can access that database So then when we come up here to clusters and we go to connect We're going to connect our application is what we're going to want to do It'll give us this connection string and we can go ahead and copy that And we can add it to our app settings over in our application. So let's go do that Okay, now that we've got that let's go ahead and set up our database connection So come over here and we'll cut and paste our code in here So we've got our mongo db connection string that we're going to want to get from Uh that we just got from the settings in uh mongo We copy those again Come back And we'll just replace that connection string Right here now. We'll see db name in here So let's replace db name With suggest me That's our database name. We've got our username and password Web app And my super secure password Okay, so now we've got this mongo db serve the whole connection string We've got the database we've changed And the username and password So now we can actually connect to our database The next thing we're going to want to do is we're going to want to write some code that actually gets those database settings And brings them into our services so that we can actually connect to the mongo database And read and write to it. So we'll do that next So the next thing we're going to want to do is we're going to want to create some classes That'll get our connection string working directly So what we'll do is over in our models folder We'll create a new model Called database settings And we'll get some code to plug in there. So you don't have to sit and watch me type it off cutting paste it from my clipboard here And so what we've got here is we've got an interface and a class that's going to implement that database The only reason we're really doing this for an interface Um, not only because it's best practice, but Because we're going to be injecting the database settings into our controllers So we're going to want an interface that we can use as a placeholder That the database settings and can then be Injected into so really just we get the connection string the database name that will be coming from here All right, okay So now that's saved The next thing we need to do is wire it up. So it'll actually be um used So over in our start-up.cs We're going to add a couple of lines to Configure services Right at the top before the add with controllers So we're going to get database settings We'll bring in the model's namespace so that it can do that And there's some other namespaces that might need to be brought in for the options So now Format this document now I've configured the database settings by getting the section out of Out of the app settings the database settings section Out of app settings And put them into this database settings object That will then be injected as a singleton anytime somebody requires I database settings interface We'll go ahead and get the database settings And pass them in So now we're all set up to connect to our database. So let's start doing that Okay, so the last thing we need to do here before we start saving stuff for the databases We need to create a model that's going to model What our data should look like in that collection So we'll create a new file. We'll call it submissions. That's what our collection is called And uh, yeah, so there's a couple things we brought in was the mongo db bison, which is um binary json's how it stores the object and the object id so That's why we have these where we get these attributes from this bison id and the bison representation of an object id Just let's um dot net know how to handle the id that's coming back Um, and then we've got user user id username content Which is the submission they're going to create the suggestion that we're gonna they're going to send Um when it was created and when it was last updated Okay, so now we've got our object We've got our startup that's going to be injecting our database settings into all of our controllers We've got our database settings object so we can pull data out of the app settings object Now it's finally time to get down to connecting to mongo db and Creating saving updating and deleting these submissions to our suggestions out All right, so to make things easier We're actually going to create a service here and inject the database settings and the database connection stuff Into the service this will make the controllers a lot leaner and it'll kind of separate out Our database logic a little bit and allow us to quickly substitute in a different type We just go to the core of the application will create a new folder called services And inside the services folder we're going to create a new file and we're going to call it Submission service With just one c and here's the content so we're going to get our mongo db driver And we're going to bring in our models that we created the submission so we have access to the submission object And i'm going to create an i-mongo collection right here at the top of the submission service That is an i-mongo collection of type submissions Then we've got our constructor here for the service that takes in the i database settings Which is going to get injected with the actual database settings And allow us to create a new mongo client with the connection string We're going to be able to get the database from the settings the database name And then we're going to be able to get the collection called submissions and save them into submission objects Then we've got our create read find update and delete methods That basically just take that submissions collection and either insert one and then returns that submission Finds one based on the sub that we've listed Oh, this one reads so this one gets all of the submissions. So we're going to do a find where the uh Subject of this is actually just true. So find all of them And we're going to put them in a list And this one we're going to look at the submissions We're going to find where the id is equal to the id that gets passed in And we're going to get a single or default default being null if it doesn't find one Submissions we're going to replace one. So we're going to up for the update. We're going to replace one Based on the id we pass in we want to replace it with the submission that you just sent in So that's how our update's going to go is it's going to be Just replace the one that's already there with this one. So it Doesn't change the id just changes all the other information So that just means that we're going to make sure we're going to need to make sure that when we pass in a submission Here that it has all the data because if we leave data off because like Maybe there was some information that was already there that we don't want to change Can't do that. We're replacing the whole thing. So Um same thing with the delete. We're just going to go and delete one Wherever that id matches the id passed in pretty straightforward Create read update and delete Okay, so here's our service and it's all set up Now we can actually use this service in our controllers. So let's do that next Okay, so the next thing we're going to want to do is create a controller that will consume this submission service So we'll come over here into the controllers. We'll add a new file. We'll call this submission controller And here's the contents of that So you'll see there's an authorized header on there. We're going to add authentication to this Mostly so that Anybody can view the list of suggestions that are out there, but only the people who submitted That suggestion can edit it or update it right or delete it. So Well, let's add some authentication to it here in a minute Um, or we're going to bring in the submission service It's going to get injected with just one line of code that we need to add here in just a second But we've got our submission service It's going to come in and then we've got this allow anonymous And that's our index action and all it's going to do is return the the view for the index view And it's going to do the submission service read which is basically This guy here that's going to return all the submissions from the collection right Then we've got our create action That's just going to return the view an empty view and that's the htp get create action And then we've also got an htp post with an anti forgery token so that we Don't get a man in the middle attack between sending the view out to somebody and the submission that gets sent back to the controller And the action result is going to be the action result with the submission in it The create's going to take a submission in It's going to get this created and last I did last updated date to date time now Okay We're going to set the user id to whatever the currently logged in users first First claim type that looks like name identifier. That's the value we want to get So that's the user id the name identifier is the id the user id they get stored in octa And our username is going to be the user id dot identity dot name Which will get populated for us from octa once they're signed in which we'll see in just a minute We want to make sure the model state is valid and if it is then we want to just go ahead and Run the create action on the Submission service We want to create function passing in that submission And then we want to redirect to the index action Then we've got an htp get here that is the edit submission Which is just going to return the view with the submission that you find So it's going to take call the submission service and say find the one with this id and return it to that view the edit view Then we've got our again our edit that's the get we've got our htp post with our any forgery token We've got our edit that's going to take in a submission And it's going to set the last dated last updated date to date time now It's also going to set the created date to the submission dot created dot two local time Now this may seem a little weird But what ends up happening is when if you save the object to mongo db It's going to convert the date time that you sent it to gmt And then allow you to change it back to local time when you get it And that's the reason so we're updating one here We want to take the created date that was originally saved to the database Which was a gmt date time And we want to set it to local time So that when we go and save it again because remember we're replacing the whole thing We don't want mongo db to take our local or our gmt time that we got from it to begin with and commit it to and and try and Change that to gmt because what it's going to do is it's going to see that I am at gmt minus six I think and it's going to take whatever date time I send in and subtract six hours And I don't want it to do that So We want to make sure that the model state is valid We also want to make sure that Whoever's trying to edit this has permission to So we look and see in the user claims If the user id is not equal to the submission's user id So The submission that you're editing right now If the id of the currently logged in user doesn't match the id of the submission It's just going to return a 401 author unauthorized page so Otherwise just go ahead and run the regular submission service update with that submission And then redirect to the index page again Otherwise if it isn't valid then go ahead and return the view With the submission in it and then we've got delete that's just going to delete Based on that id and redirect action honestly, we're probably should have a A check here to make sure that the id is equal to But we don't actually have the submission here. We only have the id So we'll have to do that check on the way in So we're just not going to give them the user id Available to do that So now we have our submission set up The very last thing we need to do to make sure that it gets injected in there Is we're going to add to our configuration And make sure that we have That submission service Being injected in just like we did with The database settings So we'll just go to the end of this line. We'll add another line here that just adds the submission service Which we'll need to bring in that Using statement so it knows what The submission service actually is and so we're just going to inject that into anybody who needs it So now this thing is all set up and ready to go The only exception is we haven't Implemented any login or anything so that we have user information that we can store In the database and use to check to see if they can actually edit those ones So um The next thing we're going to do is we're going to add some views And then we'll add the user authentication So now that we've got that we need some views to To hook up to this controller And the last thing we're going to do is add the user authentication So let's go ahead and add our views and in our views folder. We're just going to create a new folder in here called submission To match our submission controller So here's our submission folder and we need a new couple of files in here. We'll do the index.cshtml That's number one And here's our code for that We're going to tell it that the model is going to be an innumerable of submissions So we're going to get a list of submissions And we're just going to loop through each one of them and um And spit them out to the screen now This Is our security for the front side for our ui that says user dot identity dot is authenticated and The claims first of default where the name identifier claim type is equal to the user ID of the submission Then show them the edit and the delete button Okay And we've also got to create a new idea Now Once we've got this setup We're going to need a couple more right so we need one for uh create update and delete right so for the create dot cshtml New file create dot cshtml Here's our code pretty straightforward It's just a form that says submit an idea and it's got a text area for the idea and a submit button That's it. That's all they're actually going to be inputting The controller itself does all the rest of it putting in the who created it what their name was When they created it when it was last updated that's all being done by the controller So the view doesn't actually need to know anything about it at least the create view doesn't okay But we're going to need an edit view as well So let's create an edit dot cshtml And we're going to get the code from for that It's a little bit more involved So we've got some hidden fields for the created user id username that We want to Be able to pass to the front side and back to the controller again But we don't want the user being able to manipulate those things And because remember when we update something we're actually replacing the whole document In the document collection the submissions collection We're replacing that whole document with a brand new document So we need to make sure that the stuff that was originally saved also gets passed through So now we've got that The only thing left Is some styling so let's go ahead and Just put some styling around this to make this a little bit prettier Um in our There's a css site And let's go to the bottom of this and we'll put in some Basic styles all i'm doing is for an idea i'm putting borders around it A little bit of padding and margin bottom so they look okay when they're displayed The any kind of span inside there. I want to set the font size and maybe a color for the uh font Um, yeah, all these are pretty straightforward and they're straight off the blog post So um, check it out if you want to just cut and paste that code Um, or you can style it up however you like So now that we've got a little bit of styling and we've got the views set in place The last thing we need to do is add authentication to this so that people can log in Submit ideas and they can edit and delete their own ideas, but they can't do that to other people's ideas So let's go and see what that looks like in octa All right, so the first thing we need to do is we need to tell octa we're going we're going to be using it as Uh an identity provider for this application So if you don't already have one you can set up an octa free account free developer account All the stuff we're doing here is all included in the free account So you just go to your dashboard once you get logged in Go to applications here at the top And add application We're going to choose web because it's a basic dot net server side app. It's not uh an angular reacts Client side app or a native app or an api So web is the one we want to choose and we're just going to call this Suggest me And by default it's got 8080, but we want uh port 5000 And we're going to change this to port 5000 Okay, so for the login redirect uris we're going to add uh localhost 5000 sign in dash oidc And for the log out redirects we want to change this to port 5000 But we're actually going to change it to a different value So we're going to change it to a different value other than just this plain old thing It's going to be sign out dash call back dash oidc Um, that's just because that's what dot net is going to be handling for us And authorization code everything else that's in here. You can leave it just like it is and click done Now once you've done that you'll be taken back to the general settings tab of the suggest me app It has all the same stuff we just put in there, but at the bottom it's got client credentials So we have a client id and a client secret down here at the bottom that we're going to need here in just a minute So now that we've created the application We need to go back into our code and we need to add the code that will Allow our application to now talk to octa and be our identity provider. So let's do that next Okay, now we're back in our code And we're going to go back to our app settings again, and we're going to add the settings for octa now So we've got our client id client secret our domain and then the localhost 5000, which is the place that will be actually redirected to once So we set out the post logout redirect uri in octa that tells octa where to come back to in our application Now when it gets back to our application, this uri is where our application is going to redirect you to Once it's gotten the okay from octa that you've actually been logged out. So hopefully that makes sense Now your octa domain you can get right at the top of our right at the top of your dashboard And it's usually going to be something like dev dash something some number dot octa.com Now we want our client secret that we just saw In the application itself Our client id that we got from that page And the client secret Now once we've got that all set in Now everything set up for us to use octa We just need to tell our application to use octa Okay, now we need to configure octa for our application In the startup.cs. So we go into our startup.cs And right here before the ad controller service with views We're just going to pop this in here now. There's a lot here But a lot of it is kind of basic setup stuff. So um We have ad authentication And really that's the two pieces that we added we added ad authentication and ad authorization Those are the two services we configured for the app Now there are some options that need to go in here So one of them is the default scheme the default scheme is going to be the cookie authentication scheme And the default challenge scheme is going to be open id connect defaults That way when we actually go into the account controller And we do a challenge That's what's telling the challenge how to do How to challenge the user Now, um, we're going to add a cookie which basically means it's going to whenever you get authenticated it's going to add a A cookie for the token when it gets it back The sky sign-in scheme we're going to be using is cookie authentication defaults authentication scheme We're going to the authority that's going to be giving it to us is whatever our octa domain is over here in App settings our octa domain dev blah blah blah blah dot octa.com That guy plus oauth to slash default because whenever you create a new account with octa, it sets up a default authentication server and that's the authority that's going to be giving out the token um Requires hd hdps metadata true, which basically just means we're going to be running octa and hdps Um client id we're going to get from our application settings the response type We're going to be expecting back as a code because we're using the authorization code flow So it's going to get an authorization code first and then exchange that for a token Um, it's going to get the claims from the user info endpoint. Oh idc already has a well known endpoint for getting User info from it. Um, so we're going to get user info from the user info endpoint We're also going to add a couple of scopes, which is open id and profile Which just means I want the open id scope and the profile scope Which just means that I want my application to be able to access Open id and profile information Um, I want to save the tokens once I get them the token validation parameters The name claim type is name by default it's Name with a capital n and it is case sensitive So and the role take claim type is usually roles But in this case coming from octa for for the way I've got mine set up its groups So I just want to make sure that roles get into groups Um, you don't necessarily have to do this for this application because we're not using it But I use it everywhere when I use octa because especially for dot net apps There's a lot of times that I'm building an application And I want to be able to not only make sure that someone's logged in But in order to get to a specific page or specific, uh Controller action, they have to be in a specific group So you don't necessarily need this Um, but it's good to have and validate issue or you probably want to have anyway Um, then we've got this ad authorization that we've added The last thing we need to do is come down here and add this line, which I already had in there But use authentication. So we've configured it up. We've configured authentication up here We added it here Now we're telling it down here that you wanted to use that Um, use authorization should already be in there The scaffolded app already has it in there, but use authentication you're going to need to add Now once that's in there The only thing really left to do is make sure that I mean all this will work There's just no links to get to any of this stuff. So you have to type in the url all the time So let's not let's not do that. Let's go into the views and over in our shared views We're going to create a new file Called login partial That's cshtml And the login partial We'll have some code in it That will allow us to put some, uh, menu items up there for For login So this is basically just stuff that's going to go into the navigation bar And it's just going to be Injected in there for us So all this is going to do is say if they are actually logged in then just say hello Whatever your name is and give them a log out button If they are logged in or if they aren't logged in then just show the login button Okay So now we got that the only other thing left we need to do is we need to add that to the Um layout page So I'm going to copy this little chunk here And it's not so self-explanatory as it might seem once I cut and paste it in there Um, I'll show you so if we go out to our layout partial This is the section that we're going to replace this div section where it's that's Um set with the first class of navbar collapse We're going to replace that with navbar collapse, but We changed this to justify content between because we're going to put the menu items in there For the home and submission and privacy and all that good stuff But we're also going to put the login partial on there and we want the regular menu items to sit here on this side and then the login partial the Um, hello, whatever your name is with the log out button or the login button depending on your login status Off to the right and you want to justify the space in between them So now that that's all done we should now be able to just run this thing and away we go So we'll f5 to run it if f5 doesn't run it for you You may need to reopen the application and it'll say Hey, do you want to add the vs that dot vs code folder? Yes, we do because that will generate all the stuff for you Okay, now that you got the application up and running um, there should be an ideas Button here at the top menu item There should also be a login button So I could log in but if I come over here to ideas We'll see that I I have put a couple of ideas in here just for testing purposes You should have none If you run add new idea It should take you to a login page. This is I got a login to be got a login to be able to do that So then we just log in with our um, you can log in with the username and password that you set up when you created the account And that should take you back to the submit an idea page where you can add a new idea And you can submit that idea And we'll see some ideas here now that I've logged in I've got my edit and delete buttons here and we can go in and Update that and it'll tell me when it was updated who it was created by And I can delete an idea And I can also log out And then when I come to ideas Since I'm not logged in it doesn't know that I'm a lead brand so I can edit these two now This is your application. It is now saving data to mongo db getting data out of mongo db And uh being able to update and delete data in mongo db So, um, hopefully you enjoyed this content if you did smash the like button down below Make sure you subscribe if you like this content. We put new content out every tuesday and thursday Um, so make sure you subscribe and we'll check you next time