Bonjour hi welcome to another episode of cloud in five minutes I'm Frank Boucher
and today I want to show you how to use the Twitter Facebook to get up all the
social account to get authenticated in your website hosted on Azure
in a project I'm working on I want the user to be authenticated but I didn't
want to manage all the password forget and all those forms so I thought what if
I could use social login to do it well it's very simple and I will show
you how to get started in this video I will use a dotnet core application just
because it's easier for me but be sure that it's working with all the
JavaScript and other languages so let's get started so first we'll create a new
web app just to get started so here I'm using blazer server like I said it could
be anything else the beauty here is I'm using authentication by individual so
the logging screen and a few little things will all be already be
implemented for me so now let's go in this specific folder in this demo I will
use Twitter API to get authenticated not because it's better just because I
picked one so to be able to use it in my code I will need to you the pack you to
add a package so if I was using node it will be a NPN something here I'm with
net core so it's DUT net add package and then here I'm using version 3 just
because on this laptop right now version 3.1 is nothing stalled but of course
it's supported perfect so now let's open the code to see what it looks like
perfect so if I open the project file here we'll see that my package is hadded
excellent let's modify quickly one page so we know it's a wrap so we'll go in
page I will pick the index and welcome to your new cloud five minutes let's go
minutes app great so let's close this and now before going too far let's look
what we have so what's been scaffold for us so in the area section I have account
and I haven't shared a partial login so that was one of the pages that was
rated for us when we added the identification individual and you will
see later that we'll had in the top right corner of the scaffold website a
place to register and login how can we add more things and use Twitter so if we
go in the startup page in the configuration service section will add a
new part of code so just a line that better and we'll add identification and
we'll had Twitter here if we were about to use more social attacked occasion
we'll just cue them so add Twitter at Facebook at github at Microsoft all and
now I'm passing to specific parameter here and it's the consumer key in this
consumer secret will need to create an application in the Twitter API to
generate those keys and will use them but of course I don't want those value
inside my app settings because it's very sensible so I will show you a nice trick
to use those keys without being visible but the name here website identification
Twitter consumer key it means to be that specific name I will show you shortly
where that name come from now talking about the devil we need to have those
keys so let's go on the Twitter developer website and get our keys to
get there we need to go to developer twitter.com and here I have other apps
let's create a new one by clicking the blue button so we need a name a
description a URL so here the URL don't be afraid you can change those but it
needs to be a valid URL of course don't forget to check that little enable sign
in with Twitter otherwise you won't get far one of the most important part is
the callback URL so now what I will do is using my Ashur website address and
add the sign on Twitter this part is really important so we'll do this and to
be able to also debug locally what you can do is add another one of
course don't do that while in production but you can do add localhost and sign on
Twitter it will also work if you're working locally now all other values are
optional except this description here I'm really I'm creating now my
application is creating and to get my kima API key and secret I need to go
here in keys and tokens so I click here and I'll have my value so I'm showing
you that because after recording this demo I will delete everything but
usually you will never show those value so copy/paste that on the side I will
show you how to use them now I'm back in my terminal and I want to show you a
nice trick to use those keys locally so what you can do is use here dotnet user
secret and you will pass the same variable with your secret so you do that
for both and they will be in your environment variables so this way your
website will be able to reach them but they won't be visible and you won't push
it to get or get up accidentally so it's way more secure so you do that for both
little typo here voila excellent so now if I go back
individuals to a code and I run I will be able to experience my new website so
let's have a look and voila we have the new website and like I mentioned here in
the corner the top right corner we have register and login so let's try it so I
will login so now here I have I have the usual login I can completely remove that
part of tied really don't want to manage user password and all those things and
keep the Twitter this part was added just by the little code snippet we had
so I can click the button and now I'm rhetoric to Twitter I authorize the
application and now I can just specify my email and register voila
now I'm register to my application excellent how can you manage those keys
in Azure let's see that so now we'll quickly
deploy the code there's many different ways to deploy the code since I'm in
visuals your code I will use that one if you want to know other ways to deploy
where web app I will put a link in the top right corner have a look if you're
interested great so now the code is in Azure so let's go in the azure portal to
finish the configuration so this is my wedding my the resources I deploy and
this is the website so we'll click on that and remember I told you we won't
use the configuration because this is very visual so instead what will be is
here in the left section in under the settings sections will click on
identification and authorization then we'll turn it on and we'll have
different option here to use different odds system so we are using Twitter so
we click on Twitter and you will enter your key and secret don't forget to save
voila and now let's go back in the overview and if I click here I have my
website so it's the same website as usual and I have my registration so if I
try to log in I can use Twitter and boom voila I'm in as simple and remember
since I was using the same application on in Twitter the same Twitter API
application that's why I didn't need to click again the authorize button from
Twitter because I'm using the same one in a real word dev should be using a
very different application than in prod but since here it's just a demo I was
using this thing I hope you liked this video and I hope it was useful if you
have any questions you can ask them in the comment section
I'm always Appy and I try to do my best to answer it talking about questions
let's read sums that you sent me so first questions today comes from Raul
hey Frank great video can you help me to extract data from D 365 so dynamics
true data entities in to blob using logic app well I'm not the best one for
dynamics 360 because I I don't use it a lot so quickly I saw that there's plenty
of connectors so if I'm not mistaking you're probably just need to go there
add the connector and everything will be working automatically so second question
here from ion is asking thanks for the video are there PowerShell step to
accomplish this and it was in the video video where I was deploying docker
container and I'm I was using Azure CLI so of course everything that is possible
in PowerShell is possible in Azure CLI and the other way around so it's always
possible and it's also possible through the portal so last questions come from
Chris so he's using TFS 2017 yeah with the tasks Bill they are done in llamo
and he's looking forward to use Azure DevOps and would like to see if it's
possible to migrate to llamo if there's a conversion system that exists where
you put the file in one place and just get out in the other format the system
are that different that there's no conversion system that exists well or at
least not that I know I asked around and that was mostly the same answer I got
every time so I'm sorry about that though if you put them side-by-side the
logic should be the same it's just they're using different format and
that's it for today thank you for watching see you next time
you