Iframe Login Issue not Loading anything

[Stacey940]

Description:

I am trying to login to Iframe using the token. I generated the token at the login page using the username and password. Now on the page where I am trying to load the instance nothing is loading . I am not getting any error message on the Console.

The Rocket Chat is installed on Google Cloud Server.
The Dashboard where I want to Show Chat is on Other server

Here is the code I used to generate the token :

$data =  array (
"username" => "stacy", 
"password" => "password@12345"
);

$dats = json_encode($data);

$ch = curl_init();

curl_setopt($ch, CURLOPT_URL,"http://myserverurl/api/v1/login");
curl_setopt($ch, CURLOPT_POST, 1);
curl_setopt($ch, CURLOPT_POSTFIELDS, $dats);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
curl_setopt($ch, CURLOPT_HTTPHEADER, array(
'Content-Type: application/json',
)
);
$server_output = curl_exec ($ch);
curl_close ($ch);

$json = json_decode($server_output);

$authtok = $json->data->authToken;

Here is the Chat page where I need to show the rocket chat. Below is the JS code :

$(document).ready(function(){
var y = document.getElementById("myframe");

y.contentWindow.postMessage({
externalCommand: 'login-with-token',
token: 'fChpekpRjHrY3cGAp7D3XLxMBFSCDkzOuJVNeJJRKBR'
}, "*")

});

Here is the HTML body with the iframe and src

<iframe src="http://myserverurl/home" name="myframe" style="width:100%;" id="myframe"></iframe>

Server Setup Information:

• Version of Rocket.Chat Server: 0.57.2
• Operating System: Linux
• Deployment Method(snap/docker/tar/etc): docker
• Number of Running Instances: 1
• DB Replicaset Oplog: Disabled
• Node Version: v4.8.2

Steps to Reproduce:

Expected behavior:

Should have loaded the Rocket Chat

Actual behavior:

Not loading anything on the page

Relevant logs:

Whenever I generate a token I have this Logs on server : [Method] registerLoginHandler
Log on Browser. I do not have any error

[Stacey940]

Resolved. Thank you for this great product!!

[albanafmeti]

@stacybot123 How did u resolved? Why don't you post your solution? It might be helpful for somebody.

[Stacey940]

@albanafmeti Sorry , I didn't posted the solution. The documentation on the website needs to be a bit clear. It needs three files. What I was doing was I created two files one main and the other to get the login token.

Here is a good tutorial for this.

http://webdevllc.biz/index.php?/blog/2016/12/how-to-iframe-rocket-chat

[Stacey940]

@albanafmeti I again have a new issue is how I can use two domains for same same instance of rocket chat while using iframe login

[joeyloranzo]

@stacybot123 Can you provide your solution to us?? we still have problem about Iframe login...

[Stacey940]

@defend0827 You need to create three files. One which will have the iframe. Second which you will enter in the "Iframe Url" and third to be updated on API URL.

Let is suppose you have rocketchat installed on www.mychatrocket.com
And you want to show the Chat window on www.mydashboard.com

Creating Files:

#1 : This will be the actutal URL where you have to Show Chat. Let us name the file as chat.php. So my url will be www.mydashboard.com/chat.php

Below is the code on Chat.php

<iframe src="www.mychatrocket.com/home" name="myframe" style="width: 100vw;height: 100vh;position: relative; overflow-y: hidden; display:block; line-height: 0;" id="myframe" frameBorder="0" scrolling="no"></iframe>

#2. The second file will be the one you need to update on RocketChat " Iframe Url " on your Chat installation:

Let us suppose the name of the file is get_user_token.php. So the url you will update on " Iframe Url " will be www.mydashboard.com/get_user_token.php

Now based on the session of the user retrieve the username and password for the user and make a call to your /api/v1/login endpoint. In our Example it will be www.mychatrocket.com/api/v1/login to get the token
Once you have the token save it in the database , you need to return this token on the Next file we will be creating.
Here is the Code for get_user_token.php

// login known rocket.chat user using REST API

$data = array (
"username" => $chat_user,
"password" => $chat_pass
);

$dats = json_encode($data);
$ch = curl_init();

curl_setopt($ch, CURLOPT_URL,"http://www.mychatrocket.com/api/v1/login");
curl_setopt($ch, CURLOPT_POST, 1);
curl_setopt($ch, CURLOPT_POSTFIELDS, $dats);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
curl_setopt($ch, CURLOPT_HTTPHEADER, array(
'Content-Type: application/json',
)
);
$server_output = curl_exec ($ch);
curl_close ($ch);
$json = json_decode($server_output);

$authtok = $json->data->authToken;
$uid = $json->data->userId;

$sql ="Update chat_users set chat_token= '". $authtok ."' WHERE user='example_session_user'";
$res = mysqli_query($dbhandle,$sql);

#3. Now the Next file will be one you need to update in "API URL" on rocketchat installation. This will return the token you have generated in the previous call/file
Let us name this as return_token.php , the url you will update on iframe login on your rocket cht installation will be www.mydashboard.com/return_token.php

Again based on the session of the user return the token. The code will be .

$sql ="SELECT chat_token FROM chat_users WHERE chat_users ='example_session_user'";
if($query=mysqli_query($dbhandle,$sql)){
$rs=mysqli_fetch_assoc($query);
$token =$rs['chat_token'];
}

echo '{ "loginToken":"'. $token .'"}';

Thats it. You will be able to load RocketChat. Let me know if you need help.

Everytime Rocketchat will load on any url, we need to generate and return the token. The problem starts when we start trying it to load it on the url we provided in "iframe URL"

[joeyloranzo]

@stacybot123 Thanks for your assis it's working now,
But last part about "eturn_token.php" header must need to "header('Content-Type: application/json');" return to json rocket chat can be got it.

Thanks again.

[sunilrawat123]

Hi @stacybot123

I am trying to integrated the rocket chat in ionic app. And I am able to generate token according to your #2 setp and stored that token as Local storage to my app.

But while in #3 step I have a web service which need to return the token which we already generated in step #2 as you said.

So as you used table chat_token

$sql ="SELECT chat_token FROM chat_users WHERE chat_users ='example_session_user'";

Here I did not find any tables in rocket chat db, which store the token which we generate in step #216
Can you please help I am stuck in step #3061 .

I am using rest services for step #1 and #2 and #3 as well.

Please assist me Its urgent for me. I will be great-full to you.

Step #1:

<iframe src="http://192.168.10.137:3000/home" name="myframe" style="width: 100vw;height: 100vh;position: relative; overflow-y: hidden; display:block; line-height: 0;" id="myframe" frameBorder="0" scrolling="no"></iframe>

Step #2:

http://192.168.10.137:8080/api/get_user_token

And the loginToken return from.

http://192.168.10.137:3000/api/v1/login
Is
'rocketChatAuthToken' =>$me->data->authToken

and I have stored this token to local storage.As

sessionService.store('loginToken', response.data.rocketChatAuthToken);

Now in step #3

According to your point we need to return the token again which is generated in #2

Here can you please assist me I am confuse here. I have rocket chat db but there I did not find any table as you said in step #3

Thanks in advance..

[sunilrawat123]

I have also implemented it in Ionicv1.

Thanks all

[sampaiodiego]

there is a proper doc page explaining how that works https://rocket.chat/docs/developer-guides/iframe-integration/authentication/

I guess this is not the final solution, cause after you set the IFrame URL and API URL, you will not be able to access your RC deployed site :(.

Adding to that, this will limit access to a single user, cause your web site will just call the IFrame URL and API URL without being able to specify the user.

I spent a very good time to integrate RC IFrame within my web application, with no luck, then I have reached the solution, which is not documented very well by RC :(.

This is my solution where you can have IFrame within your website by dynamically specifying the channel and user dynamically:

//Read the following values based on the web site development technology you are using
//You might need also to create the group/user if not exist, and then add user to the group
//before reaching this HTML page

    string authToken = "####"; //after you create and sign in the user
    string groupName = "GGGG"; //after you create a group (if not exist)
    string channelLink = "https://your.rchat.url.com/channel/" + groupName + "?layout=embedded";

//now use the channelLink in the iFrame
<iframe id="rcChannel" name="rcChannel" src="@channelLink" width="400" height="700"></iframe>

//And here you can authenticate the IFrame
<script>
    function authenticateIFrame() {
        document.getElementById('rcChannel').contentWindow.postMessage({
            externalCommand: 'login-with-token',
            token: '@authToken'
        }, '*');
    }

    window.onload = function () {
        authenticateIFrame();
    };
</script>

I hope this would help someone :).

[ecfghjp]

can you suggest if you had to do extra settings to make ifame integration work. I am using
function authenticateIFrame() {
document.getElementById('rcChannel').contentWindow.postMessage({
externalCommand: 'login-with-token',
token: '@authtoken'
}, '*');
}
but the iframe does not load - and gets stuck
I have iframe integration enabled and nothing in the URLs