Send Byline Authentication with airSlate SignNow

Authenticate byline

okay let's talk about fetch Werther's validation and authentication required so I'm gonna make a request from a web page this one right here so I'm on localhost I'm inside of a folder called Apache and I've got this HTML file when I click on this paragraph I want to do a fetch call to get some data that's inside a subfolder here so inside of Apache know browse I have this JSON file there it is I can fetch that no problem and when I click on here no problem it fetches that sample JSON file so it goes gets it comes back with the status 200 and it displays it now I'm gonna clear my cache reset this so let's take a look at the basic fetch what's happening in my page I have this paragraph that I click on to do the fetch so my script Dom content loaded the HTML is finished loading on the paragraph I'm putting a click listener to call this function this function will simply try to get this URL we're appending the accept header saying that this is what we're expecting to get back from the server some application JSON file I'm gonna set up my request I've got the URI I'm gonna say I'm using get this is the header and credentials I'll talk about this in a little bit but basically I'm saying that if I'm on localhost and I'm making a request to localhost then any cookies or validation or credentials that I've got are also going to be sent along if I was requesting something from a different domain then cookies username password that kind of thing any sort of identifying information won't get sent along so same origin is the default if you don't put this inside of your headers or inside your request object then this is the default value so I'm just leaving it for that for the moment we'll come back and we'll make a change to this a little bit later I'll show you how you can send cookies along to other requests now I have this is my HTML file here and inside the know Brow's folder along with the JSON I have my HD access so there's the JSON file here's the HT access these guys are in the same folder the HTML is at a higher level so this HT access is only going to apply to the sample dot JSON file now inside of here I have authentication and if I put these on like that so I've now enabled password protection for this folder and I'm going to do the JSON request the browser is gonna prompt me it's gonna say okay you know do you have the username and password to get into here for the fetch now we don't want to do this we don't want to force the user to have to type something in we're gonna do it through JavaScript so right now if I hit cancel my fetch request comes back with the 401 error authorization required okay I want to get around this problem and fetch the data without having to have the browser built-in pop-up let's say that we've got inputs or we've gathered that information from the user in some other way without having that that input pop-up so what we do is inside of here we need to create another header there is a header called authorization and this will be a value like this it'll be the word basic followed by a space and then we've got a username and a password like this but I cannot just put the username and password in like this the username and password with the colon separating them has to be converted into base64 to be passed along with this and we should be doing this as well on HTTP so let's fix this I'm gonna say basic plus I'm gonna have a value that I've encoded so let's create that variable this is going to be HTTP I'm going to reload this page in HTTP as well you should always be using HTTPS just to be more secure anyway but this is what we're going to be doing this page is HTTPS we're requesting this over HTTPS that way everything is going to be encrypted so let's create a variable here we'll call it encoded the name of the variable is not that important what is important is that we make the username password base64 encoded so window dot b/2a this is the function that we're gonna call the built-in method that's right at the root level at the window level it creates a base64 encoded string okay perfect that's what we look want to do and I've created a username and password on this folder using my HT password utility so that's already been set on the server this is the username this is the password there's a colon between them and then I'm gonna say the authorization value is going to be the string basic and then a space and then what we encoded like that so this whole value right here is gonna be that variable off okay so this header has now been added we've got one called accept which has the value application slash JSON and we've got one which is authorization with this as the value and we'll throw it in there well log it out to the console just so we can see what it is don't need to do this in production but this is just for us to see it the headers are being included in the request so let's try this again refresh we're on HTTP our call is to HTTP our username and password are included we click and there it is it came back no more prompting from the browser to see what's the username and password it's right here and if I jump over the console there it is basic space and then this that is the username and password converted into base64 and there's our data coming back from the server so we got the value coming back there we go again now very often you'll have some sort of key that you're required to use to say that you're allowed to access an API to get some data back from the server so this very well could be like your user ID and your key when the API when you signed up for the account and you were issued a key they'll they could be creating an entry inside their password file with or in their database using the user ID and this is the key so you may end up doing something like this with user ID and a key that was issued by the people who run the API so that you can then fetch the data and the one last thing I wanted to show you was just with credentials same-origin this was one possible value leave that in the comments if you are going to a different domain then you can use the value include this means that any identifying information such as cookies will also get sent along with the request to a different domain so that's if this is a different domain than what you're sitting on all right so I hope that helps you out that's how basic basic authentication works if you have any questions leave them before if this helped you out please share it and as always thanks for watching