You have a few options depending on what you are trying to do with your webservice.
A good tutorial I've used to set this up is http://www.mediacurrent.com/blog/using-json-web-tokens-jwt-authenticate-endpoints
It sounds like you are already successfully returning a JWT. Congrats I found that to be the difficult part between CORS and restui.
I'm using React as my front end and use this code to then store the token.
axios.post(apiLoginUrl, data, headers)
.then(response => {
console.log(response);
let jwt = '';
localStorage.setItem(jwt, response.data.token);
console.log(localStorage.getItem(jwt));
})
.catch(error => {
console.log(error);
});
So a breakdown of what this does is as follows. It reaches out to your end point for the JWT and then stores it in localStorage.
I would then pass the token in with each of your subsequent post requests using localStorage.getItem(jwt)
You could then pass it in with all with all posts...
So with Axios - axios.defaults.baseURL = 'https://api.example.com';
axios.defaults.headers.common['Authorization'] = localStorage.getItem(jwt);
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
Or with something like Apollo -
const networkInterface = createNetworkInterface ({
uri: 'http://examplesite.com/graphql'
});
networkInterface.use([{
applyMiddleware(req, next) {
if (!req.options.headers) {
req.options.headers = {}; // Create the header object if needed.
}
// get the authentication token from local storage if it exists
let jwt = '';
const token = localStorage.getItem(jwt);
console.log(token);
req.options.headers.authorization = token ? `Bearer ${token}` : null;
next();
}
}]);
const client = new ApolloClient({
networkInterface,
});
Basically the JWT becomes your Authorization part of the Post request.
Hope this helps.
To handle signing up new users your could use something like this... after exposing the user endpoint via RestUI.
handleSignup(event) {
console.log("running handleSignup")
event.preventDefault();
const apiSignupUrl = "http://example.com/user/register?_format=json";
const headers = {
"content-type": "application/json",
}
let data =
{
"name": {"value": this.state.username},
"mail": {"value": this.state.username},
"pass": {"value": this.state.password},
"field_name" : {"value:": "Name"}
}
axios.post(apiSignupUrl, data, headers)
.then(response => {
console.log(response);
if (response.data.uid.length > 0) {
console.log("Awesome!");
this.handleLogin();
}
else {
console.log("Back to the drawing board");
}
//If we return a successful creation log the user in.
//handleLogin();
})
.catch(error => {
console.log(error);
});
};
