automated login for rocketchat user within iframe embedded in an angular 6 component

问题

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

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.

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.

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

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.

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

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>

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

They have event data:

data: "" eventName: "unread-changed"

and

data: true eventName: "startup"

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

回答1:

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'.

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

Administration -> General -> iframe integration

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>

Hope this would help.

来源：https://stackoverflow.com/questions/55607948/automated-login-for-rocketchat-user-within-iframe-embedded-in-an-angular-6-compo