Widgets SSO
How can I use SSO with widgets?
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 a chance to send any spam or irrelevant feedback.
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).
There is a bunch of ways of how you can do it:
<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 -->
You can provide the token whenever you want using a special ProdCamp SDK function like this:
ProdCamp('setToken', '{your_generated_token}');
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 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( {token: token} );
});
};