Rocket.Chat SSO + embed plugin

[RGJ (Richard - Communiteq)]

Summary: This plugin integrates Rocket.Chat with Discourse.

You need to get a separate hosted instance of Rocket.Chat for instance with Communiteq, Digital Ocean or another provider. This plugin integrates that with your forum.

The integration consists of two parts:

• Embedding of the chat within the Discourse user interface
• Single sign on between Discourse and Rocket.Chat, where Discourse acts as an authentication provider to authenticate, create and update users in Rocket.Chat.

GitHub: GitHub - communiteq/discourse-rocketchat
Install: Follow the plugin installation guide.
Credits: @jrgong came up with the great idea of integrating Rocket.Chat with Discourse and also had a first version of the user interface developed.

Screenshots

The chat is embedded in the bottom right of the Discourse interface. It can be collapsed and expanded by clicking the title bar. The chat stays open when you navigate the forum.

On mobile, the chat is full screen and accessible by the Rocket.Chat icon in the top bar:

Configuration

The integration needs to be configured on both systems. Discourse needs to know where to find the chat in order to integrate it in its user interface, and Rocket.Chat needs to know where to find Discourse in order to be able to authenticate.

Discourse side

Admin - Plugins - Discourse RocketChat - Settings

discourse_rocketchat_enabled
Enable or disable the plugin.

discourse rocketchat title
Configure the title of the chat window here, e.g. Chat

discourse rocketchat host
Configure the host name of your RocketChat instance, e.g. chat.example.com.
Do not prefix this with https:// or so.

discourse rocketchat default channel
Configure the default channel here, e.g. General.

discourse rocketchat min trust level
Configure the minimum trust level for your users in order to be able to use Rocket.Chat, e.g. 2: member.

discourse rocketchat click entire bar
Enable this if you want the entire title bar to be clickable to expand or hide the chat. Disable this if you only want the ‘Open’ and ‘Close’ text to be clickable.

discourse rocketchat show menu for groups
Configure the groups for which you want Rocket.Chat to show its menu, e.g. staff

Rocket.Chat side

Administration - Settings - CAS

The integration uses the CAS 2.0 protocol for authentication and authorization.

Replace forum.example.com with the name of your forum.

• SSO Base URL: https://forum.example.com/rocketchat
• SSO Login URL: https://forum.example.com/rocketchat/login
• CAS Version: 2.0
• Trust CAS username: enabled
• Allow user creation: enabled
• Enabled: enabled

Administration - Settings - CAS - Attribute Handling

In order to be able to synchronize the email address and full name, we need to configure where those attributes can be found.

• Always Sync User Data: enabled
• Attribute Map: {"email":"%email%", "name":"%name%"}

Administration - Settings - General

We need to be able to run Rocket.Chat in an iFrame.

• Restrict access inside any Iframe: disabled

Administration - Settings - Accounts

In order to integrate the two platforms, Discourse must have control over the login and registration and the full name, name and email address of the account. You need to disable the following settings on Rocket.Chat side:

• Allow User Avatar Change: disabled
• Allow Name Change: disabled
• Allow Username Change: disabled
• Allow Email Change: disabled
• Show Default Login Form: disabled

Administration - Settings - Accounts - Registration

• Registration Form: disabled
• Registration Form Secret URL: (some random string)

Administration - Settings - Accounts - Avatar

Rocket.Chat can use Discourse’s avatars.
Make sure to replace forum.example.com with the name of your forum.

• Avatar External Provider URL: https://forum.example.com/rocketchat/avatar/{username}.png

[jrgong]

I am one of the customers who has had the plugin running for a while and it’s amazing!!!

BTW @RGJ Maybe add to the topic title that it’s an SSO + Embed Solution to integrate RC into your existing Discourse instance.

Anyone looking for a viable Babble Chat replacement, this is your holy grail!

[DiscourseMetrics]

Very cool!

One note about the avatar URL, using this won’t show images for users with the default avatars (letters on colored background), only custom images or gravatars. Maybe someone knows a different URL that can be used that includes all avatars?

[RGJ (Richard - Communiteq)]

That is a good point @DiscourseMetrics, thank you.
I am not aware of such a URL so I built one into the plugin. You can get any avatar now using https://forum.example.com/rocketchat/avatar/{username}.png, regardless if it is a Gravatar, uploaded image or a letter.

[davidkingham]

This looks great! Unfortunately my d-header disappears when I enable this, any idea why?

[RGJ (Richard - Communiteq)]

Hmmm… you’re using a gazillion theme components so that is hard to debug without hands-on access.

I see I was using a non-prefixed class (.collapsible) that is likely to cause a conflict, so I have prefixed that one now.

[davidkingham]

Thanks Richard, unfortunately that did not work. I also tried installing on one of my other sites and disabled all plugins and TC’s and it still happens as you can see here Exploring Exposure - Exploring Exposure Discussions

[RGJ (Richard - Communiteq)]

I just realized I have only developed and tested this plugin against the stable branch. The plugin is throwing an error and crashing on 2.8.x. I’m going to investigate and fix this. Thank you for your report!

@davidkingham I’ve fixed the issue, can you please rebuild and test again?

[mangojumbo (Luca)]

Thank you very much for this plugin, it’s incredibly useful!

Just 2 things:

• For now I’m just testing the chat embedding part of the integration.
  Does the SSO function of the plugin allows a seamless integration with autologin or the user still needs to click on the SSO login button in order to login (without having to fill in any password) to rocketchat?
  At the moment I’m experiencing this problem with SSO integration between rocketchat and nextcloud and, until now, I couldn’t find a way to autologin to recketchat without having to click on the SSO button.

• Would it be possible to set the embedded chat to open on the home rocketchat page and not on a default channel?
  At the moment the only option is to set a default channel but having the embedded chat to open as well on the rocketchat customizable home page would also be very useful.
  (I just opened an issue about that on the github repo here, I hope that it will not bother anyone).

Thank you very much again for your precious contribution!

[volanar]

This solution is used in phpfox, called ChatPlus. There you can transfer all the messages of the old chat to rocket chat. Are you planning to add such a feature?
https://docs.phpfox.com/display/FOX4MAN/ChatPlus+solution

[RGJ (Richard - Communiteq)]

@volanar

transfer all the messages of the old chat to rocket chat

Which “old chat” are you referring to? This sounds more like a Rocket.Chat feature than a Discourse feature? Or am I misunderstanding you?

@mangojumbo

Does the SSO function of the plugin allows a seamless integration with autologin or the user still needs to click on the SSO login button in order to login (without having to fill in any password) to rocketchat?

Set this script as “Custom Script for Logged Out Users” in Rocket.Chat (make sure to replace the hostname with the name of your forum on the second line). Note: I have not tested this recently. I’m not sure if I can help you if it does not work.

const credentialToken = Random.id();
const login_url = "https://discourse.example.com/rocketchat/login";

const appUrl = Meteor.absoluteUrl().replace(/\/$/, '') + __meteor_runtime_config__.ROOT_URL_PATH_PREFIX;
const delim = (login_url.split('?').length > 1) ? '&' : '?';

var i = document.createElement('iframe');
i.style.display = 'none';
i.onload = function() { 
    Accounts.callLoginMethod({
        methodArguments: [{ cas: { credentialToken } }],
    });
};
i.src = `${ login_url }${ delim }service=${ appUrl }`;
document.body.appendChild(i);

@mangojumbo

Would it be possible to set the embedded chat to open on the home rocketchat page and not on a default channel?

I am going to look into that in a few weeks. I will keep the Github issue open to remind myself.

[volanar]

@RGJ

Which “old chat” are you referring to? This sounds more like a Rocket.Chat feature than a Discourse feature? Or am I misunderstanding you?

phpfox has a function for transferring all old messages from the native chat to rocket.chat (ChatPlus). Is it possible to do this in discourse so that only rocket.chat can be used as a chat? Then all the old messages will not be lost and this plugin can be used on old forums where there are already many messages

[RGJ (Richard - Communiteq)]

Discourse does not have a native chat, so where would these messages be coming from?
Also, the idea behind a chat (vs a forum) is that chat messages are more volatile.

[volanar]

I mean private messages.

[RGJ (Richard - Communiteq)]

Ah, I see. In that case, no.
I’m not sure if this is really an issue, since enabling the Rocket.Chat plugin still allows this, even when disabling PM’s:

all the old messages will not be lost and this plugin can be used on old forums where there are already many messages

[mangojumbo (Luca)]

@RGJ

Set this script as “Custom Script for Logged Out Users” in Rocket.Chat (make sure to replace the hostname with the name of your forum on the second line). Note: I have not tested this recently. I’m not sure if I can help you if it does not work.

Thank you very much for your very informative reply.
I have previously seen the script that you posted here, but I thought that it was valid just for the CAS authentication and not for the SSO one. I will try that and check if the browser will not kill the hidden window is not blocked by the browser.

@RGJ

I am going to look into that in a few weeks. I will keep the Github issue open to remind myself.

Thank you so much! In my opinion being able to default on the home page also on the embedded chat window would be a very interesting addition. I’m looking forward do seeing it eventually implemented, in case you will find the resources to spend some time on it. Thank you for considering to add this option.

[volanar]

Thanks for the reply. Will it be possible to use mattermost or MongooseIM for the chat instead of rocket.chat? Mattermost is written in golang and consumes less resources and is more scalable. Or is this possible only with rocket.chat?

[RGJ (Richard - Communiteq)]

@volanar

Will it be possible to use mattermost or MongooseIM for the chat instead of rocket.chat?

No, this is a Rocket.Chat plugin for Discourse…

@mangojumbo

CAS authentication and not for the SSO one

The plugin uses the CAS 2.0 protocol to establish SSO functionality.

[valsha (KingPin)]

Is it possible to redesign the chat to fit the forum? Is it possible to do this with CSS? Thanks.

[RGJ (Richard - Communiteq)]

Does this answer your question? UI and Theming - Rocket.Chat Developer