嵌入6号角组件的iframe中的火箭聊天用户的自动登录 [英] automated login for rocketchat user within iframe embedded in an angular 6 component

问题描述

我正在尝试通过我的angular 6应用程序/组件(已经要求用户登录)自动将用户登录到我的火箭聊天服务器.

I am attempting to login users automatically into my rocketchat server via my angular 6 application/component ( where users are already required to login).

有人有直接操纵mongodb进行火箭聊天登录用户的经验吗?我可以使用生成的令牌更新数据库，但是无法让iframe读取/接受生成的令牌.

Does anyone have any experience directly manipulating the mongodb to login a user with rocket chat? I can update the database with a generated token, but cannot get iframe to read/accept the generated token.

我可以直接访问mongodb/rocketchat数据库，该数据库正在尝试操作以存储用于登录访问的令牌.我将生成的令牌(我正在使用UUID)存储到用户文档中的字段下 服务:{iframe:生成令牌"} 将生成令牌替换为我的uuid.

I have direct access to the mongodb/rocketchat database which I am attempting to manipulate to store a token for login access. I am storing a generated token (I am using a UUID) onto the user document under the fields services: { iframe: "generated-token" } where generated-token is replaced with my uuid.

我在window.localstorage下设置了相同的令牌，并按此处文档中的要求发布消息:

I set the same token under window.localstorage and post a message as requested in the documentation here: https://rocket.chat/docs/developer-guides/iframe-integration/authentication/#managing-mongodb-directly

在我的一生中，我无法使它正常工作.我在控制台中没有收到任何错误-因此这似乎不是CORS问题.

For the life of me I cannot get this to work. I am not getting any errors in the console - so it doesnt appear to be a CORS issue.

正在开发中的rocketchat服务器托管在我网络上的另一台计算机上( http://project-mgr:3000 ).

The rocketchat server whilst in development is hosted on a separate machine on my network (http://project-mgr:3000).

我正在使用本地计算机进行开发( http://localhost:4000 ).

I am using my local machine for development (http://localhost:4000).

//component
login() {
      //retrieve a list of rocketchat users from mdb
      this.rocketService.allUsers().subscribe((au) => {
          //retrieve current user from mdb
          let user = au[this.user.mail]; // 

          //generate token
          let token = API.UUID();

          //manipulate rocketchat mdb entry with token info
          user.services = { iframe: token }

          //update mdb entry for user
          this.rocketService.login(user).subscribe(() => {

            //set local storage with token info
            window.localStorage.setItem("Meteor.userId", user._id);
            window.localStorage.setItem("Meteor.loginToken", token);

            //post message
            window.parent.postMessage({
            event: 'try-iframe-login'
          }, 'http://localhost:4000');
        });
      })
  }

ngOnInit() {
    window.addEventListener('message', (event:any) =>
          console.log(event)
     );

    this.subscriptions.push(
      //retrieve currently logged in user
      this.authService.user.subscribe((u) => {
        this.user = new User(u);

        //login to rocket chat
        this.login();
        }))
  }

//html - not safe, but for development only

<div fxLayout="column" fxLayoutAlign="stretch"
style="height:calc(100vh - 80px);width:100%;">

  <iframe #rocketChat frameborder="0" width="100%" height="100%"
  sandbox="allow-same-origin allow-scripts allow-forms allow-top-navigation allow-popups
          allow-popups-to-escape-sandbox" [src]="'http://project-mgr:3000' | safe: 'resourceUrl'">
  </iframe>
</div>

rocketchat的登录界面未更改(或login)，但事件订阅生成了两条消息.

The login interface for rocketchat does not change ( or login ) but there are two messages generated from the event subscription.

它们具有事件数据:

数据:" eventName:未更改的"

data: "" eventName: "unread-changed"

和

数据:true eventName:启动"

data: true eventName: "startup"

我无法弄清楚这是有用还是无关紧要.

I have not been able to figure out if that is useful or irrelevant.

推荐答案

这样做很简单，Rocket Chat iframe集成使向iframe发送命令变得容易，这些命令之一就是用令牌登录" '.

To do so is a straight forward, Rocket Chat iframe integration made it easy to send commands to an iframe, one of those commands is 'login-with-token'.

首先，您需要配置火箭聊天服务器以接受iframe集成:

First, you need to configure rocket chat server to accept iframe integration:

Administration -> General -> iframe integration

，然后根据您使用的Web/ui技术，将以下代码添加到html页面:

and based on the web/ui technology that you are using, add the following code to your html page:

//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

    string authToken = "####"; //after you sign in the user
    string groupName = "GGGG"; //after you create a group (if not)
    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>

希望这会有所帮助.

这篇关于嵌入6号角组件的iframe中的火箭聊天用户的自动登录的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！