An SSO redirect allows you to send a user to your site for authentication before being routed back to Canny to participate after you identify them!

If a user isn't identified in your application, we'll ask them to sign up for a free Canny user account. You can disable this functionality to force Canny to always use your app's user accounts by setting up an SSO redirect.

It's slightly more work but can provide better context to your team and a better experience for your users.

Prerequisites ⚠️

Your application has user accounts
Your server is set up to generate single sign-on tokens

The process

Instead of asking users to sign up for a free Canny user profile, Canny will send them to your website to log in to your application.

Once they're logged in, you send a request to your server to generate a single sign-on token for them, and then redirect them back to Canny.

Instructions

Make a login redirect page on your website
This could be your normal login page or a custom single sign-on page. This is the page where we will send your users to log in.
Add a form to let the user log in to their account
If the user is already logged in, you can skip this step.
Send a request to your server to generate a single sign-on token
Once the user is logged in, fetch an SSO token to authenticate them in Canny.
Parse query parameters we provide
When we send users to your website, we'll include redirect and companyID query parameters. The redirect tells us where to send users after they've been logged in, and the companyID allows us to verify your SSO token.
Redirect them back to Canny
Send your users to https://canny.io/api/redirects/sso making sure to include ssoToken, companyID, and redirect query parameters. (See below)

After building this page, add its URL in your admin settings. Use our tool to test that the redirect works, and then push it live to your users.

Snippet

The following JavaScript snippet will achieve step 4. You will have to write the part that requests the single sign-on token from your server.

function getQueryParameterByName(name) {
  var pairStrings = window.location.search.slice(1).split('&');
  var pairs = pairStrings.map(function(pair) {
    return pair.split('=');
  });
  return pairs.reduce(function(value, pair) {
    if (value) return value;
    return pair[0] === name ? decodeURIComponent(pair[1]) : null;
  }, null);
}

function getRedirectURL(ssoToken) {
  var redirectURL = getQueryParameterByName('redirect');
  var companyID = getQueryParameterByName('companyID');
  if (redirectURL.indexOf('https://') !== 0 || !companyID) {
    return null;
  }

  return 'https://canny.io/api/redirects/sso?companyID=' + companyID + '&ssoToken=' + ssoToken + '&redirect=' + redirectURL;
}

var redirectURL = getRedirectURL(ssoToken);
if (redirectURL) {
  window.location.assign(redirectURL);
}

If you have any questions or issues while setting this up, don't hesitate to reach out.

Prerequisites ⚠️

The process

Instructions

Snippet

Related Articles: