WEBVTT 00:00:21.000 --> 00:00:27.000 >> So my name is matt i'm a senior cloud developer advocate 00:00:27.000 --> 00:00:31.000 At microsoft and when i say, who your users are and how they get 00:00:31.000 --> 00:00:34.000 In your web site and this and that the. 00:00:34.000 --> 00:00:40.000 Let's jump into a demo off the bat. 00:00:40.000 --> 00:00:46.000 I have an app. We are reviewing businesses, 00:00:46.000 --> 00:00:49.000 Restaurants, hotels. People can click in. 00:00:49.000 --> 00:00:52.000 And they can read reviews. But, if you're not logged in, i 00:00:52.000 --> 00:00:58.000 Don't want you to be able to edit one is eelses review. 00:00:58.000 --> 00:01:02.000 We want this to be -- people to be accountable for what they do. 00:01:02.000 --> 00:01:08.000 We have a sign up or sign in. And then, within this, i want to 00:01:08.000 --> 00:01:20.000 Be able to have internet. 00:01:20.000 --> 00:01:24.000 >> We're going to transition here. 00:01:24.000 --> 00:01:34.000 I want to 00:01:34.000 --> 00:01:39.000 -- So when we log in i want to make sure that the users 00:01:39.000 --> 00:01:49.000 Are able to enter either an e-mail address or sign in with twitter. 00:01:49.000 --> 00:01:52.000 >> Or any other various social 00:01:52.000 --> 00:01:56.000 Idea providers. >> As this spins up i will jump 00:01:56.000 --> 00:02:00.000 Into is slides. -- The slides. 00:02:00.000 --> 00:02:07.000 So there's a couple different ways of identity management. 00:02:07.000 --> 00:02:10.000 I will call the easy way and nothing is really easy. 00:02:10.000 --> 00:02:15.000 I'll call this the straightforward away. 00:02:15.000 --> 00:02:17.000 When you know who your users are. So somebody comes to you and say 00:02:17.000 --> 00:02:20.000 Here are your users and you know how they're going to log in. 00:02:20.000 --> 00:02:27.000 With an e-mail address or active directory and what not. 00:02:27.000 --> 00:02:29.000 Then you have the not so straightforward way. 00:02:29.000 --> 00:02:33.000 And this is when the users come knocking at your door. 00:02:33.000 --> 00:02:36.000 You don't know who that are tully they tell you. 00:02:36.000 --> 00:02:43.000 And you don't know how they're going to log in. You might give them a an e-mail address. 00:02:43.000 --> 00:02:48.000 You might want to give them a way to log in with twitter, 00:02:48.000 --> 00:02:56.000 Facebook or github. You can that separate away with 00:02:56.000 --> 00:03:03.000 Azure active directory b2 correct. Provider to use to give 00:03:03.000 --> 00:03:09.000 Authentication and authorization apps. 00:03:09.000 --> 00:03:13.000 Highly available and secure and scale to millions of identities. 00:03:13.000 --> 00:03:21.000 So customers can also use your social accounts, facebook, 00:03:21.000 --> 00:03:28.000 Twitter, get hub or -- get hob r hub or yous another password. 00:03:28.000 --> 00:03:38.000 And sports things like multi >> i can't hear you offhand. 00:03:38.000 --> 00:03:47.000 -- >> Just come afterwards. I'm sorry. 00:03:47.000 --> 00:03:52.000 Here's what i want to do. Vy a user and data source. 00:03:52.000 --> 00:03:54.000 And the app you want to create here is sign up or sign in. 00:03:54.000 --> 00:03:56.000 And then i want to have personal and relevant information. 00:03:56.000 --> 00:04:10.000 I want to be able to edit my reviews. Get my personal reviews back. 00:04:10.000 --> 00:04:14.000 That's what i want. 00:04:14.000 --> 00:04:21.000 How am i going to do this. I am going to have my user, i 00:04:21.000 --> 00:04:25.000 Have my azure a -- i have my 00:04:25.000 --> 00:04:28.000 Data source. So first off, i'm going to go in 00:04:28.000 --> 00:04:33.000 And invoke a policy. I want to sign in. 00:04:33.000 --> 00:04:41.000 From from there, i'm going to correctly. I get a tone back. 00:04:41.000 --> 00:05:01.000 I will take that token and make a request to my backend data 00:05:01.000 --> 00:05:03.000 Source. My backend data source will 00:05:03.000 --> 00:05:05.000 Verify and everything comes in back. 00:05:05.000 --> 00:05:09.000 Is happening. Let's do it. 00:05:09.000 --> 00:05:12.000 Let's set this up. 00:05:12.000 --> 00:05:19.000 All right. This demo then. 00:05:19.000 --> 00:05:21.000 I have an azure b2c instance. 00:05:21.000 --> 00:05:24.000 There's something i want to show. 00:05:24.000 --> 00:05:28.000 The first thing i want to show is 00:05:28.000 --> 00:05:33.000 The identity providers. So here i can do several things. 00:05:33.000 --> 00:05:35.000 These are the things i will be able to log in be. 00:05:35.000 --> 00:05:43.000 -- With. So you can see i have e-mail and 00:05:43.000 --> 00:05:50.000 I set up hub and twitter and others i can as well. 00:05:50.000 --> 00:05:54.000 And amazon. So you say you want a twitter 00:05:54.000 --> 00:06:07.000 Log in. I go to twitter itself. 00:06:07.000 --> 00:06:10.000 Back url which is all in the documentation. 00:06:10.000 --> 00:06:18.000 So this is how twitter knows how to call back to b2c. 00:06:18.000 --> 00:06:23.000 Then, posting the credentials back into here. 00:06:23.000 --> 00:06:29.000 So that's all i need to do. B2c is an job strakes 00:06:29.000 --> 00:06:38.000 -- I can set up and interact with them once. 00:06:38.000 --> 00:06:41.000 There's then underlying users. When people sign up, i can ask 00:06:41.000 --> 00:06:45.000 Them for, what's your job title? what is your postal code. 00:06:45.000 --> 00:06:49.000 I don't have to ask them for it, but it's there. 00:06:49.000 --> 00:06:55.000 >> The actual users underneath everything. Vy this user. 00:06:55.000 --> 00:07:01.000 So you can see if i had for a job title would have been posted 00:07:01.000 --> 00:07:08.000 Here. >> Then there's the application. 00:07:08.000 --> 00:07:13.000 You can think of the application as abstracting over my mobile 00:07:13.000 --> 00:07:19.000 App that will work i promise. The application has something 00:07:19.000 --> 00:07:23.000 Called application id which is important. Then various urls that it is 00:07:23.000 --> 00:07:29.000 Going to call back to. What you want to do here is 00:07:29.000 --> 00:07:39.000 I'm going to delete all these. 00:07:39.000 --> 00:07:48.000 Here. I'm going to call it jwt dot 00:07:48.000 --> 00:07:52.000 Ms. As soon as it saves. All right. 00:07:52.000 --> 00:07:58.000 What -- by putting that in, all i'm you saying i want to call 00:07:58.000 --> 00:08:03.000 This jwt dot ms web site. The reason i did that is this 00:08:03.000 --> 00:08:07.000 Other thing called policies. Defining a user experience 00:08:07.000 --> 00:08:10.000 People have when they interact with b2c. 00:08:10.000 --> 00:08:15.000 A sign up or sign in policy is exactly what it sounds like. 00:08:15.000 --> 00:08:18.000 What the user doeses when they sign up or in. 00:08:18.000 --> 00:08:22.000 When i create one of these, i can specify which providers 00:08:22.000 --> 00:08:28.000 Allowed to use. I have all the ones defined. 00:08:28.000 --> 00:08:33.000 Twitter and github. Which attributes and which 00:08:33.000 --> 00:08:36.000 Claims i will return back to the app. 00:08:36.000 --> 00:08:39.000 As well. 00:08:39.000 --> 00:08:50.000 I can set up other things. Multi factor authentication to go with it. 00:08:50.000 --> 00:08:54.000 Saying, my reply url is jwt dot his run 00:08:54.000 --> 00:08:56.000 Now. I will bring up a web site that 00:08:56.000 --> 00:09:07.000 I can log in with. I have an account created. 00:09:07.000 --> 00:09:13.000 My banking password here. 00:09:13.000 --> 00:09:18.000 That joke got no laughs. Post it back and this is the 00:09:18.000 --> 00:09:22.000 Token that is sent back at jwtms. 00:09:22.000 --> 00:09:29.000 It's a great web site which takes tokens and it decodes them for you. 00:09:29.000 --> 00:09:37.000 So you can see what's being sent back. It says that the name here is laboski. 00:09:37.000 --> 00:09:43.000 The e-mails that come back is mat at 00:09:43.000 --> 00:09:48.000 Comil matt.Com and the policy invoked to get me to this page. 00:09:48.000 --> 00:09:55.000 A nice way that you can go back and has a claims tab which 00:09:55.000 --> 00:10:00.000 Actually says, what each of these mean as well. 00:10:00.000 --> 00:10:05.000 So what i'm going to go back into here, i'm going to set the 00:10:05.000 --> 00:10:11.000 Call back urls of my application to be back to the 00:10:11.000 --> 00:10:13.000 To what i had before. 00:10:13.000 --> 00:10:27.000 To interact with my mobile app and web site. 00:10:27.000 --> 00:10:34.000 >> All right. So that's setting up the cloud 00:10:34.000 --> 00:10:37.000 Portion of the b2c. 00:10:37.000 --> 00:10:43.000 The next thing i want to show up is how to do the authentication 00:10:43.000 --> 00:10:49.000 Or verifying things on the backend. One of the 00:10:49.000 --> 00:10:52.000 An asp core web a perks that i have deployed in an azure app 00:10:52.000 --> 00:11:04.000 Service. Existing asp net core things. 00:11:04.000 --> 00:11:08.000 If you're used to it. 00:11:08.000 --> 00:11:14.000 All i'm doing is in the app settings, i'm calling out, this 00:11:14.000 --> 00:11:18.000 Is my log in. I am giving it the domain. 00:11:18.000 --> 00:11:22.000 This is to set up things i get from when i set up the b2c 00:11:22.000 --> 00:11:30.000 Service. Really plugging in configuration tokens. 00:11:30.000 --> 00:11:37.000 During the start up, i have a where is it? 00:11:37.000 --> 00:11:42.000 This at azure b2c token. This comes from one of the 00:11:42.000 --> 00:11:47.000 Samples we have on github. I will have a link to get this. 00:11:47.000 --> 00:11:53.000 This is an extension alternated helps me -- an extension that 00:11:53.000 --> 00:11:57.000 Helps me add everything and puts in the options authority. 00:11:57.000 --> 00:12:01.000 Me. Grabbing from the app settings 00:12:01.000 --> 00:12:06.000 And putting it here. When i want to go through and 00:12:06.000 --> 00:12:14.000 Make sure everything is authenticated. 00:12:14.000 --> 00:12:18.000 The scope is a way to make sure that permissions 00:12:18.000 --> 00:12:22.000 And i set a scope up within the application 00:12:22.000 --> 00:12:26.000 As well. Right here. This rvw all. 00:12:26.000 --> 00:12:33.000 I put that in my application in bwc. That gets sent back and i check 00:12:33.000 --> 00:12:36.000 It here by looking through the user of the 00:12:36.000 --> 00:12:41.000 Htp context and see if that review all is in there. 00:12:41.000 --> 00:12:47.000 So it's basic what's being done already 00:12:47.000 --> 00:12:50.000 In apps.Net. I'm also using with this mobile 00:12:50.000 --> 00:12:55.000 App azure functions. To set that up to communicate 00:12:55.000 --> 00:12:58.000 With b2c, there's an authentication note. 00:12:58.000 --> 00:13:01.000 In that authentication note there's an azure active 00:13:01.000 --> 00:13:12.000 Directory portion. Here i put into the client id 00:13:12.000 --> 00:13:17.000 What my application id was from. B2c and then an issuer. 00:13:17.000 --> 00:13:20.000 Then obtained through the documentation. 00:13:20.000 --> 00:13:31.000 It tells you where to get it. That's the backend stuff. 00:13:31.000 --> 00:13:35.000 Grabbing the mobile app site. 00:13:35.000 --> 00:13:39.000 The mobile app side works through the microsoft identity 00:13:39.000 --> 00:13:47.000 Client client. That's on .Net. 00:13:47.000 --> 00:13:54.000 There's a jai have script -- java script version and you can 00:13:54.000 --> 00:14:01.000 Do -- i'll show the .Net version. You can do it through your 00:14:01.000 --> 00:14:07.000 Choice of platforms. >> When we log -- or start it up 00:14:07.000 --> 00:14:12.000 There's two crucial methods. One that's called acquire token 00:14:12.000 --> 00:14:16.000 A-sync. Actually try to log in. 00:14:16.000 --> 00:14:21.000 You can see here, i'm saying i will pass a scope. 00:14:21.000 --> 00:14:25.000 The scope variable is the rvw all. 00:14:25.000 --> 00:14:29.000 Which i have set here. 00:14:29.000 --> 00:14:34.000 I will pass other things saying where do you want to get to. 00:14:34.000 --> 00:14:37.000 The authority happens to be the policy i want to call and so on. 00:14:37.000 --> 00:14:40.000 There's another one. Down here called. 00:14:40.000 --> 00:14:45.000 Acquire token silent a-sync. I can be cached. 00:14:45.000 --> 00:14:50.000 I don't necessarily have to go in call b to -- b2c. 00:14:50.000 --> 00:14:53.000 I log in and my token hasn't expired so there's no reason to 00:14:53.000 --> 00:14:58.000 Call it again. The mc client takes care of 00:14:58.000 --> 00:15:03.000 Everything for me. Let's run this. 00:15:03.000 --> 00:15:14.000 >> I'm going to set a break point 00:15:14.000 --> 00:15:18.000 As it compiles. I'm going to sign up or sign in. 00:15:18.000 --> 00:15:22.000 The break point. I'm not signed in yet so it will 00:15:22.000 --> 00:15:31.000 Go out. >> I'm going to sign in under 00:15:31.000 --> 00:15:44.000 Same credentials. 00:15:44.000 --> 00:15:49.000 >> It comes back. So now, i have 00:15:49.000 --> 00:15:54.000 In here an access token. If i can get that to come up i 00:15:54.000 --> 00:16:00.000 Will set that to the jwtms web site. 00:16:00.000 --> 00:16:10.000 If i can get that to come up. 00:16:10.000 --> 00:16:16.000 I will paste that in. 00:16:16.000 --> 00:16:19.000 There's a couple things i want to point out. 00:16:19.000 --> 00:16:25.000 The name comes back. The e-mail comes back and we can 00:16:25.000 --> 00:16:28.000 Seevy a scope saying i the rw all permissions. 00:16:28.000 --> 00:16:31.000 When i call to the web site, it will let me have it. 00:16:31.000 --> 00:16:34.000 That's what it's checking. I go through and it shows me the 00:16:34.000 --> 00:16:42.000 Reviews i currently have. So now when i go into this cool 00:16:42.000 --> 00:16:48.000 Restaurant review i can view it. If i go back to me i can go 00:16:48.000 --> 00:16:52.000 Through and edit reviews as well. 00:16:52.000 --> 00:16:55.000 So when i call out to things is right here. 00:16:55.000 --> 00:16:58.000 This is where i'm sending the token. So this is the request message 00:16:58.000 --> 00:17:03.000 I'm sending. And this is -- i'm sending a 00:17:03.000 --> 00:17:07.000 Token with it. That is all i have to do to call 00:17:07.000 --> 00:17:15.000 Out b2c. I can log in under anything. 00:17:15.000 --> 00:17:21.000 I log out here. 00:17:21.000 --> 00:17:23.000 I can go back in and when this shows up, you'll see i have 00:17:23.000 --> 00:17:25.000 Twitter. I can log in with github. 00:17:25.000 --> 00:17:28.000 It would send a text message to my phone which i would have to 00:17:28.000 --> 00:17:40.000 Enter to get through and so on. All right. 00:17:40.000 --> 00:17:46.000 So we'll keep on going. So, 00:17:46.000 --> 00:17:48.000 Ad b2c we have the cloud portion. 00:17:48.000 --> 00:17:53.000 It creates accounts and handles identities for the users you 00:17:53.000 --> 00:17:57.000 Don't now you have yet that let's them come to you. 00:17:57.000 --> 00:18:02.000 You have the backend of things as the functions. 00:18:02.000 --> 00:18:06.000 A web api where you can use the built in mechanisms to 00:18:06.000 --> 00:18:13.000 Authenticate the users. The microsoft identity client. 00:18:13.000 --> 00:18:21.000 To obtain tones. -- Tokens and handle them for you. 00:18:21.000 --> 00:18:25.000 And finally, i want to -- this slide here, if you follow this 00:18:25.000 --> 00:18:32.000 Link it will bring you to a full functioning web application. 00:18:32.000 --> 00:18:37.000 The web api and a function app which has the production steps 00:18:37.000 --> 00:18:43.000 Else. Finally, there's going to be 00:18:43.000 --> 00:18:47.000 In-depth work shops and session here. 00:18:47.000 --> 00:18:53.000 Tuesday and wednesday work shops and sessions. 00:18:53.000 --> 00:18:56.000 Highly recommend it. With that said, thank you very