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 Product settings -> 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.

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.

1
<script>
2
window.ProdCampSettings = {
3
token: '{your_generated_token}'
4
};
5
</script>
6
7
<!-- Widgets SDK code -->
8
<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>
9
<!-- /Widgets SDK code -->
Copied!

2. Use ProdCamp SDK function

You can provide the token whenever you want using a special ProdCamp SDK function like this:
1
ProdCamp('setToken', '{your_generated_token}');
Copied!

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 user performs an action. This function should have a callback argument that must be called when the new token is received from a server.
1
ProdCamp.getToken = function( callback ) {
2
fetch('https://yourserver.com/get-sso-token/')
3
.then(response => response.json())
4
.then((data) => {
5
// get the token
6
let userToken = data.token;
7
// return the generated token to the widget
8
callback( {token: token} );
9
});
10
};
Copied!
Last modified 23d ago