talk/docs/source/version-5-integrating.md

title, permalink

title	permalink
Integrating on your site	/v5/integrating/

Embed On Your Site

With Coral setup and running locally you can test embeding the comment stream with this sample embed script:

<div id="coral_thread"></div>
<script type="text/javascript">
(function() {
    var talk = document.createElement('script'); talk.type = 'text/javascript'; talk.async = true;
    var url = '{{ CORAL_DOMAIN_NAME }}';
    talk.src = '//' + url + '/assets/js/embed.js';
    talk.onload = function() {
        Coral.createStreamEmbed({
            id: "coral_thread",
            autoRender: true,
            rootURL: '//' + url,
        });
    };
    (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(talk);
})();
</script>

NOTE: Replace the value of {{ CORAL_DOMAIN_NAME }} with the location of your running instance of Coral.

Single Sign On

In order to allow seamless connection to an existing authentication system, Coral utilizes the industry standard JWT Token to connect. To learn more about how to create a JWT token, see this introduction.

1. Visit: https://{{ CORAL_DOMAIN_NAME }}/admin/configure/auth
2. Scroll to the Login with Single Sign On section
3. Enable the Single Sign On Authentication Integration
4. Enable Allow Registration
5. Copy the string in the Key box
6. Click Save

NOTE: Replace the value of {{ CORAL_DOMAIN_NAME }} with the location of your running instance of Coral.

You will then have to generate a JWT with the following claims:

• jti (optional) - A unique ID for this particular JWT token. We recommend using a UUID for this value. Without this parameter, the logout functionality inside the embed stream will not work and you will need to call logout on the embed itself.
• exp (optional) - When the given SSO token should expire. This is specified as a unix time stamp in seconds. Once the token has expired, a new token should be generated and passed into Coral. Without this parameter, the logout functionality inside the embed stream will not work and you will need to call logout on the embed itself.
• iat (optional) - When the given SSO token was issued. This is required to utilize the automatic user detail update system. If this time is newer than the time we received the last update, the contents of the token will be used to update the user.
• user.id (required) - the ID of the user from your authentication system. This is required to connect the user in your system to allow a seamless connection to Coral.
• user.email (required) - the email address of the user from your authentication system. This is required to facilitate notification email's about status changes on a user account such as bans or suspensions.
• user.username (required) - the username that should be used when being presented inside Coral to moderators and other users.
• user.badges (optional) - array of strings to be displayed as badges beside username inside Coral, visible to other users and moderators. For example, to indicate a user's subscription status.
• user.role (optional) - one of "COMMENTER", "STAFF", "MODERATOR", "ADMIN". Will create/update Coral user with this role.

An example of the claims for this token would be:

{
  "jti": "151c19fc-ad15-4f80-a49c-09f137789fbb",
  "exp": 1572172094,
  "iat": 1562172094,
  "user": {
    "id": "628bdc61-6616-4add-bfec-dd79156715d4",
    "email": "bob@example.com",
    "username": "bob"
  }
}

With the claims provided, you can sign them with the Key obtained from the Coral administration panel in the previous steps with a HS256 algorithm. This token can be provided in the above mentioned embed code by adding it to the createStreamEmbed function:

Coral.createStreamEmbed({
  // Don't forget to include the parameters from the
  // "Embed On Your Site" section.
  accessToken: "{{ SSO_TOKEN }}"
});

Or by calling the login/logout method on the embed object:

var embed = Coral.createStreamEmbed({
  // Don't forget to include the parameters from the
  // "Embed On Your Site" section.
});

// Login the current embed with the generated SSO token.
embed.login("{{ SSO_TOKEN }}");

// Logout the user.
embed.logout();

SSO Login Prompts

In order to handle login prompts (e.g. a user clicks on the sign in button) you can listen to the loginPrompt event.

var embed = Coral.createStreamEmbed({
  // Don't forget to include the parameters from the
  // "Embed On Your Site" section.
  events: function(events) {
    events.on("loginPrompt", function() {
      // Redirect user to a login page.
      location.href = "http://example.com/login";
    });
  }
});