Auto login in embedded chat

Hi!
I’m using RocketChat engine to create 1 to 1 chats for my community users, without the need to go to the rocket chat interface, using the “embedded” feature, so, I create the room, add the 2 users, and show both the URL in an iframe (like mychatserver/channel/channel_name?layout=embedded)

The problem is that I need to auto login each user before showing the iFrame, if not, Rocket Chat goes to the login window.

I have the username, id, password, … of each one since I create them with the RocketChat API Rest.

I have tried the documentation explained here (https://rocket.chat/docs/developer-guides/iframe-integration/authentication/):

and I did a test:

<script>
window.parent.postMessage({
  event: 'login-with-token',
  loginToken: 'your-token'
}, 'http://your.rocket.chat.url');
</script>

But the browser says:

Failed to execute ‘postMessage’ on ‘DOMWindow’: The target origin provided (‘chatservercom’) does not match the recipient window’s origin (‘mywebpagecom’).

How can I load the channel with the user logged?

Thank you !

2 Likes

CORS issues are very common in this type of integration. This post was referenced in other posts of the forum and have a more friendly explanation on how to integrate Rocket.Chat in an embedded Iframe https://mohammedlakkadshaw.com/blog/embedding-rocket-chat-using-iframe-auth.html/. The post explains how to make an additional setup in the administration panel of the Rocket.Chat server.

Basically, you have to define there an API URL and Iframe URL of your app (mywebpagecom) that are gonna deal with the message sending and previous login of your user in your backend. After that, it is possible to send messages from the iframe to the window, to the Rocket.Chat server to log in to the user.