Integrating Wink Login
Add the Wink Login component to your webpage or app
The easiest way to add the Wink Login component to your site is to use an automatically rendered component provided by Wink. With only a few lines of code, you can add this button that automatically configures itself to have the appropriate camera and microphone permissions and the sign-in state of the user and the scopes you request.
To create a Wink Login component that uses the default settings, add the below javascript to your sign-in page:
<script src="winklogin.module.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
File Location
The winklogin.module.js file must be in the root directory to ensure wink is loaded properly. The file can be found here.
Example Code
View the below example and the Recipe for a step by step explanation on how to implement Wink Login
<script>
var config = {
url: "https://auth.winklogin.com/auth",
realm: "wink",
clientId: "<client specific id>"
};
const winkLogin = new WinkLogin(config);
window.addEventListener("load", (event) => {
winkLogin.initWinkClient({
onFailure: onFailure,
getUserProfile: getUserProfile,
});
const loginButton = document.getElementById("wink-oauth-button");
if (!loginButton) {
alert("No login button found in the document!");
} else {
loginButton.addEventListener("click", () => {
winkLogin.winkLogin();
});
}
});
function onFailure(error) {
console.log("onFailure");
console.log(error);
}
function getUserProfile(profile) {
console.log("getUserProfile");
console.log("Username (winkTag): " + profile.username);
console.log("Name: " + winkLogin.idTokenParsed.given_name);
console.log("Surname: " + winkLogin.idTokenParsed.family_name);
console.log("Phone: " + winkLogin.idTokenParsed.phone_number);
console.log("Email: " + winkLogin.idTokenParsed.email);
console.log("ID: " + profile.id);
console.log("Session: " + winkLogin.session_state);
console.log("Access token: " + winkLogin.token);
console.log("Refresh token: " + winkLogin.refreshToken);
console.log("ID token: " + winkLogin.idToken);
console.log("Refresh token (parsed)");
console.log(winkLogin.refreshTokenParsed);
console.log(
"Refresh token expiration date: " +
winkLogin.getFormattedTime(winkLogin.refreshTokenParsed.exp)
);
console.log(
"ID token (parsed): " + JSON.stringify(winkLogin.idTokenParsed)
);
console.log(winkLogin.idTokenParsed);
console.log(
"ID token expiration date: " +
winkLogin.getFormattedTime(winkLogin.idTokenParsed.exp)
);
}
function signOut() {
winkLogin && winkLogin.logout();
}
function refreshToken() {
winkLogin
.updateToken(0)
.then(function (refreshed) {
if (refreshed) {
console.log("Token was successfully refreshed");
} else {
console.log("Token is still valid");
}
})
.catch(function () {
console.log(
"Failed to refresh the token, or the session has expired"
);
});
}
</script>
silent-check-sso.html file
Additional File
In order for Oauth to function properly, a file named silent-check-sso.html must be placed in the root directory. This file must contain the below tag and can be found here.
<html><body><script>parent.postMessage(location.href, location.origin)</script></body></html>
Add a Wink Sign-In button
It is also possible to add a "Sign-In with Wink" button. With only a few lines of code, you can add a button that automatically configures itself to have the appropriate text, logo, and colors for the sign-in state of the user and the scopes you request.
Button Styling
The Wink Button styling as well as the images can be found here.
<button id="wink-oauth-button" class="wink-oauth-button-light">
<img src="semicolon-white.svg" />
Login with Wink
</button>
Get User Profile
After you have signed in a user with Wink using the default scopes, you can access the user's name, phone number, and email address.
To retrieve profile information for a user, use the getUserProfile() method.
function getUserProfile(profile) {
console.log("getUserProfile");
console.log("Username (winkTag): " + profile.username);
console.log("Name: " + winkLogin.idTokenParsed.given_name);
console.log("Surname: " + winkLogin.idTokenParsed.family_name);
console.log("Phone: " + winkLogin.idTokenParsed.phone_number);
console.log("Email: " + winkLogin.idTokenParsed.email);
console.log("ID: " + profile.id);
console.log("Session: " + winkLogin.session_state);
console.log("Access token: " + winkLogin.token);
console.log("Refresh token: " + winkLogin.refreshToken);
console.log("ID token: " + winkLogin.idToken);
console.log("Refresh token (parsed)");
console.log(winkLogin.refreshTokenParsed);
console.log(
"Refresh token expiration date: " +
winkLogin.getFormattedTime(winkLogin.refreshTokenParsed.exp)
);
console.log(
"ID token (parsed): " + JSON.stringify(winkLogin.idTokenParsed)
);
console.log(winkLogin.idTokenParsed);
console.log(
"ID token expiration date: " +
winkLogin.getFormattedTime(winkLogin.idTokenParsed.exp)
);
}
User ID
As expected, the "sub" claim portion of winkLogin.token and winkLogin.idToken will contain the wink Token which can be used internally by the client as the unique user ID
Refresh Token
The token can be extended beyond the initial time. To refresh the token for a user's session, call the refreshToken() method. The value inside updateToken is in seconds.
function refreshToken() {
winkLogin
.updateToken(0)
.then(function (refreshed) {
if (refreshed) {
console.log("Token was successfully refreshed");
} else {
console.log("Token is still valid");
}
})
.catch(function () {
console.log(
"Failed to refresh the token, or the session has expired"
);
});
}
</script>
Token Expiry
Default value for the Access Token is 5 minutes and 30 minutes for the Refresh Token
Sign out a user
You can enable users to sign out of your app by adding a sign-out button or link to your site. To create a sign-out link, attach a function that calls the signOut() method to the link's onclick event.
function signOut() {
winkLogin && winkLogin.logout();
}
Updated 4 months ago