https://github.com/jquery/jquery
This tutorial I will share how to consume API that uses JWT (JSON Web Token) in authentication. I suggest you follow the tutorial I made earlier about creating API with JWT. because later I will use the API that I have created in the previous tutorial. I will share how APIs are consumed with JWT on JQuery and Vue.
I have created the server in another part of the tutorial about JWT. you can read it in the curriculum available at the bottom of this post.
There are several stages that we will do to ready to consume JWT:
Because we will use tokens as authentication, of course, we must save tokens on the client side. the question is where will we store the token?.
Where will we store the token?
There are two options we can do to store tokens. ie using local storage or using cookies. but in my opinion, to be more secure I will use cookies. but of course, you can look for other references.
index.html
<!DOCTYPE html>
<html>
<head>
<title>Consuming JWT with Jquery and Vuejs</title>
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script type="text/javascript" src="./jqueryCookies.js"></script>
</head>
<body> </body>
</html>
Noted: During this tutorial, I use Mozilla Firefox, because of chrome bit strict with localhost. you can use chrome with the local server like Wamp, Xampp or etc.
I will add a simple login form that will be used for user authentication.
<h1> Consuming JWT with Jquery</h1>
<form id="form">
<input type="email" name="email" id="email">
<input type="password" name="password" id="password">
<input type="submit" name="submit" value="Log In">
</form>
$.post().Example:
<script>
$(document).ready(function{
//form submit
$("form").submit(function(event){
var _email = $('#email').val();
var _password = $('#password').val();
$.post("http://localhost:3000/api/login",{
email:_email, password: _password
}).done(function(data){
$.cookie('token',data.token)
})
})
});
</script>
< form id = "form" > < /form >1. The first parameter: The first parameter is the URL or endpoint to be addressed. in this tutorial is local server HTTP:/localhost:3000.
2. The Second parameter: The second parameter is the object that contains the key and value we will post to the endpoint.in this tutorial key and value, we will post is {email: _email, password: _password. The key is email and password. The value is _email and _password from var _email = $('#email').val(); and var _password = $('#password').val();. We can take value from an input with jquery method val() : $('#IDofInput').val()
We will use the ajax method from jquery to connect with API.
$.ajaxSetup({
headers:{
'Authorization': $.cookie('token')
}
})
< button type="submit" id="getuser" >Get User< /button >.Example:
$('getuser').click(function(){
$.ajax({
type : 'GET',
url : 'http:/localhost:3000/api/users',
success : function(data){
console.log(data)
}
});
});
< button type="submit" id="getprofile" >Get Userdata< /button >.
$('#getprofile').click(function(){
$.ajax({
type : 'GET',
url : 'http:/localhost:3000/api/profile',
success : function(data){
console.log(data)
}
});
});
Note: make sure the server nodes and mongod databases you have run, as long as you interact with the endpoint or API that we created in the previous tutorial, if you are confused you can follow some tutorials below.