How to Go Passwordless with idemeum JavaScript SDK
source link: https://hackernoon.com/how-to-go-passwordless-with-idemeum-javascript-sdk-kk1l34v9
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
How to Go Passwordless with idemeum JavaScript SDK
@idemeumidemeum
idemeum is a passwordless and private digital identity platform.
Passwordless technology can be confusing... In our previous post, we took a deep dive into various passwordless solutions with the goal to understand how it all works.
What exactly do you do if you want to go passwordless?
You can do it yourself, but the development and proper implementation will require significant resource investment. Master FIDO2 / WebAuthn, secure JWT tokens, manage sessions, deal with token validation, OIDC flows - just to name a few areas that need to be considered for secure and scalable passwordless implementation.
At idemeum we faced the same challenge, and we decided to simplify things with our JavaScript SDK. Our goal was simple - provide you with a seamless intuitive integration experience, yet give you the flexibility to implement the login flows that you need. With one SDK and simple configuration you get it all - one-click, WebAuthn, or QR-code login experience. You choose what works best for your use case through simple developer portal settings.
idemeum JS SDK provides 4 methods to help you with your login needs:
loginlogoutuserClaimsisLoggedInIn this guide, we will go through the following steps to implement passwordless login with idemeum JavaScript SDK:
- Initialize idemeum SDK
- Manage authentication state with
isLoggedIn - Log the user in and out with
andloginlogout - Get and validate user claims with
userClaims
1. Initialize idemeum JavaScript SDK
Basic HTML setup
Our application will display a simple log in button. Upon clicking the button, user will be authenticated by idemeum. After successful authentication idemeum will return ID and Access tokens to the application, and the user will be greeted.
As a first step, let's set up a simple
index.html<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>idemeum JS SDK</title>
<link rel="stylesheet" type="text/css" href="/src/styles.css" />
</head>
<body>
<h2>idemeum JS authentication sample</h2>
<h4>Welcome to Application!</h4>
<div id="initial">Loading...</div>
</body>
</html>And our simple
styles.css/* our css style sheet that we save in styles.css and then import in out index page */
body {
font-family: sans-serif;
}
#initial {
align-self: center;
justify-self: center;
background-color: #eee;
text-align: center;
width: 300px;
padding: 27px 18px;
}Import idemeum JS SDK
We can now import idemeum JavaScript SDK.
For this guide, we will simply import the script from idemeum CDN.
<script src="https://asset.idemeum.com/webapp/SDK/idemeum.js"></script>
Initialize idemeum SDK
We can now initialize idemeum SDK instance. Do not forget to use your
clientId var idemeum = new IdemeumManager(
// 👇 Replace clientId with the the one you get from idemeum developer portal
(clientId = "00000000-0000-0000-0000-000000000000")
);2. Manage user authentication state
idemeum SDK helps you manage authentication state of the user, so that you can determine if the user is logged in or not, and then take actions depending on the outcome. idemeum
isLoggedInIn our application, we will follow the following logic.
- If the user is logged in, we will greet the user and display user claims.
- In case the user is not logged in, we will not show any content and will simply display the
button.login
As you can see in the code below, we are simply using
loginonclick function isUserLoggedIn() {
// Process the user logged-in state.
idemeum.isLoggedIn().then(
function (data) {
// Display user claims if the user is logged in
renderUserClaims();
},
function (errorData) {
// Display the login button if the user is NOT logged in
html = `<button id="btn-login" onclick="login()">Log in</button>`;
document.getElementById("initial").innerHTML = html;
}
);
}And we can trigger
isUserLoggedIn() <body onload="isUserLoggedIn()">3. Log the user in
When user clicks
Loginlogin function login() {
idemeum.login({
onSuccess: function (signinResponse) {
// Your application will receive ID and Access tokens from idemeum
// renderUserClaims() (defined below) validates the oidc token and fetches the user approved claims
renderUserClaims();
},
onError: function (errorResponse) {
// If there is an error you can process it here
}
});
}4. Get and validate user claims
idemeum SDK returns ID and Access tokens upon successful user login. For token validation you can:
- Validate token yourself using any of the open source JWT token validation libraries.
- Use idemeum SDK that provides
method to validate tokens.userClaims
In our guide we will rely on idemeum SDKs to validate tokens and extract user identity claims. In the code below we will take user claims (first name, last name, and email), and we will display these claims when the user is logged in.
function renderUserClaims() {
idemeum
.userClaims()
.then(function (userClaimsResponse) {
//fetch user approved claims from OIDC token
htmlStart = `<div>
<p align="left">You are currently logged in.</p>
<pre id="ipt-user-profile" align="left">User profile:<br>`;
htmlProfile =
"<b><h3 style='color:Tomato;'>First Name:" +
userClaimsResponse.given_name +
"</h3></b><br>" +
"<b><h3 style='color:Tomato;'>Last Name:" +
userClaimsResponse.family_name +
"</h3></b><br>" +
"<b><h3 style='color:Tomato;'>Email:" +
userClaimsResponse.email;
htmlEnd = `
</pre>
</div>
<button id="btn-logout" onclick="idemeum.logout();isUserLoggedIn();">Log out</button>`;
document.getElementById("initial").innerHTML =
htmlStart + htmlProfile + htmlEnd;
})
.catch(function (errorResponse) {
// If there is an error you can process it here
});
}We are done with our simple SPA application!
Check the full working code example in CodeSandbox.
If you have any questions❓or suggestions, please, reach out to [email protected] or ping us on Slack.
Create your free account to unlock your custom reading experience.
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK