What you need
- A web login page (.html, .aspx, .php, etc)
- Javascript code to have AJAX request to your REST API & wait for its response
- A middleware REST API to authorize the login information in your system & set JWT token if the user is valid
- DronaHQ JS in your web login page
Sample Demo
For instance, let’s consider the scenario where a user is required to enter their login ID and password on a login page. Once the user clicks on the login button, the login information is authenticated by consuming a REST API.
Step 1. Create Login Screen
Below is Sample Login UI.
Take a note of above Login URL that will be required to be added in DronaHQ JWT Custom Auth Configuration.
Step 2. Call your LoginUser Api
On click of a button, you may have below code implemented to consume the AuthorizeUser REST API.
Step 3. Backend Validate User and Generate JWT Token Response
On the Backend -
To validate the login ID and password, you can leverage RestSharp or database connectors to seamlessly communicate with your system. Upon successful validation, we can proceed to generate a JWT token to enable secure access to your system.
[Route("api/AuthorizeUser"), HttpPost]
public IHttpActionResult DoLoginWork(Payload payload)
{
// step 1: validate bearer token, if any
// step 2: fetch the necessary information from the payload
// validate it with your systems
// generate JWT token
if (isValid)
{
obj.status = 200;
obj.message = "valid user";
//JWT Token for Mobile
var jwtheaders = new Dictionary<string, object>()
{
{ "typ", "JWT" },
{ "alg", "SHA256" }
};
var payload = new Dictionary<string, object>()
{
{ "iss", DHQ_JWT_KEY },
{ "user_email", userEmail },
{ "user_name", userName },
{ "claims", obj }
};
byte[] key = Encoding.UTF8.GetBytes(DHQ_JWT_SECRET);
obj.token = Jose.JWT.Encode(payload, key, JwsAlgorithm.HS256, jwtheaders);
}
apiResponse = JsonConvert.SerializeObject(obj);
return Ok(apiResponse);
}
To obtain the DHQ_JWT_KEY and DHQ_JWT_SECRET, in DronaHQ Studio, Go to Manage Users > SSO Configuration > Select JWT - Custom Login Option and Locate DronaHQ SecretKey and DronaHQ SecretID respectively.
These keys will allow you to securely generate and validate JWT tokens for seamless authentication within your system.
Note - Everytime you open this New Configuration page, a new Secret Key and ID will be generated.
Step 4. Use DronaHQ.js SDK to Login User in DronaHQ Container App
Once you are now through with the API response, on the frontend side we will parse the response.
Pre-requisite - You must import dronahq.js in your Login HTML or if you are re-directing user to different URL then import it in that HTML page.
Latest DronaHQ JS SDK v7.3.3 is available at this link
For future DronaHQ JS SDK releases for versions greater than v7.3.3 - refer this link
Take a note of above Redirect URL that will be required to be added in DronaHQ JWT Custom Auth Configuration. If this logic is added on same Login HTML then Redirect URL and SignIn URL will be same…
var fnSuccess = function(apiResponse){
var jsonApiResponse = JSON.parse(apiResponse);
if(jsonApiResponse.status == "202"){
hideButtonLoader();
swal("Error", jsonApiResponse.message, "warning");
}
else{
var token = jsonApiResponse.token;
if(DronaHQ.user){
var userCookie = window.btoa(token);
DronaHQ.user.setLoginDetails(fnSuccess, fnError, userCookie);
}
else{
if (window.opener) {
pm({
target: window.opener,
type: 'provider_login',
data: { token: token }
});
}
}
}
}
var fnError = function(apiResponse){
hideButtonLoader();
swal("Error", "Invalid Login", "error");
}
In the above code, On success we are calling DronaHQ.user.setLoginDetails(fnSuccess, fnError, userCookie); which is a DronaHQ js sdk method and userCookie is the JWT Token sent by your backend server. This is log user into the DronaHQ Container app.
For configuring this Custom Auth Login using JWT in DronaHQ, you can refer to this link