Widgets SSO

How can I use SSO with widgets?

What is Single Sign-On

If you have accounts of your users in your system - you can effectively provide this data to the widget using a JSON Web Token generated on your server to authenticate widget users. This mechanism is called Single Sign-On.

This is the preferred way of securing your widgets from unauthorized access and irrelevant feedback. You should turn on the "Allow only protected requests" option in the Products -> %Productname% -> Widgets tab in your ProdCamp workspace. This will ensure that only token-authorized requests will be allowed from your widgets and won't give you a chance to send any spam or irrelevant feedback.

How do I set it up?

The process of generation of a token is the same as described in this article. For instance - the same token can be used to authenticate a user on your public roadmap automatically by providing him a link to your public roadmap with a pre-filled "token" query parameter (this way user will be automatically authenticated on your public roadmap and won't have to sign up himself).

How do I pass the generated token inside widgets?

There is a bunch of ways of how you can do it:

1. Set up initialization parameters before the widget SDK generated script code.

<script>
    window.ProdCampSettings = {
        token: '{your_generated_token}' 
    };
</script>

<!-- Widgets SDK code -->
<script>!function(t,e,a,n){function o(){if(!e.getElementById(a)){var t=e.getElementsByTagName(n)[0],o=e.createElement(n);o.type="text/javascript",o.async=!0,o.src="https://cdn.prodcamp.com/js/prdcmp-sdk.js",t.parentNode.insertBefore(o,t)}}if("function"!=typeof t.ProdCamp){var c=function(){c.args.push(arguments)};c.p="{product_id}",c.args=[],c.t=t.ProdCampSettings&&t.ProdCampSettings.token,c.f=true,t.ProdCamp=c,"complete"===e.readyState?o():t.attachEvent?t.attachEvent("onload",o):t.addEventListener("load",o,!1)}}(window,document,"prodcamp-js","script");</script>
<!-- /Widgets SDK code -->

2. Use the ProdCamp SDK function

You can provide the token whenever you want using a special ProdCamp SDK function like this:

ProdCamp('setToken', '{your_generated_token}');

3. Async token generation function

When a user performs some action that requires to be authenticated (for example - send feedback), a special SDK method ProdCamp.getToken is being called. You should override this function by assigning one that requests a new token from your server each time the user performs an action. This function should have a callback argument that must be called when the new token is received from a server.

ProdCamp.getToken = function( callback ) {
fetch('https://yourserver.com/get-sso-token/')
.then(response => response.json())
.then((data) => {
// get the token
let userToken = data.token;
// return the generated token to the widget
callback(user.Token);
});
};