Embed Microsoft Stream to Task Module Microsoft Teams

Question

Previously I'm able to embed youtube on Microsoft teams Adaptive Card, using a Task Module and an Iframe, I know Microsoft Stream doesn't have the functionality to share video to the public. So when the URL video is set to Microsoft Stream Video the Iframe is shown Sign and Sign in Page and when the sign is clicked it opens a new browser. I want to play video inside the Microsoft teams task module I thought it already using SSO and it doesn't need any Sign. Here is the Screenshot of the task module

Here is my Iframe Page Source Code

import React, { Component } from 'react';
import './SeeDetail.css';
import * as microsoftTeams from "@microsoft/teams-js";
import i18n from '../../i18n';
import { getUrlVideo } from '../../apis/messageListApi';
import axios, { AxiosResponse, AxiosRequestConfig } from "axios";

export default class SeeDetail extends Component {

    constructor(props) {
        super(props);
        this.state = {
            video: ""
        }
    }

    async componentDidMount() {
        microsoftTeams.initialize();

        const video = this.getQueryVariable('video');





        const authTokenRequest = {
            url: window.location.origin + "/signin-simple-start",
            successCallback: (token) => {

                this.setState({ video: video });

            },
            failureCallback: (error) => {
                // When the getAuthToken function returns a "resourceRequiresConsent" error, 
                // it means Azure AD needs the user's consent before issuing a token to the app. 
                // The following code redirects the user to the "Sign in" page where the user can grant the consent. 
                // Right now, the app redirects to the consent page for any error.

                microsoftTeams.authentication.authenticate({
                    url: window.location.origin + "/signin-simple-start",
                    successCallback: () => {
                        console.log("Login succeeded!");

                        this.setState({ video: video });
                    },
                    failureCallback: (reason) => {
                        console.log("Login failed: " + reason);
                        window.location.href = `/errorpage?locale=${i18n.language}`;
                    }
                });
            },
            resources: []

        };

        microsoftTeams.authentication.getAuthToken(authTokenRequest);




    }


    getQueryVariable(variable) {
        var query = window.location.search.substring(1);
        console.log(query)//"app=article&act=news_content&aid=160990"
        var vars = query.split("&");
        console.log(vars) //[ 'app=article', 'act=news_content', 'aid=160990' ]
        for (var i = 0; i < vars.length; i++) {
            var pair = vars[i].split("=");
            console.log(pair)//[ 'app', 'article' ][ 'act', 'news_content' ][ 'aid', '160990' ] 
            if (pair[0] == variable) { return pair[1]; }
        }
        return (false);
    }

    render() {
        return (
            <div className="container" >

                <iframe id="my_iframe" src={this.state.video} className="responsive-iframe" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen="allowfullscreen"></iframe>
            </div>


        )
    }
}

I don't know if it is possible to watch the Microsoft Stream inside the Task Module. Maybe I'm missing the sign-in method? I thought the Sign-in method is only for Axios call.

Have you added Microsoft stream url in valid domains in manifest? — Mamatha-MSFT
Okay let me add it first, but it should shows up right do you ever use Microsoft stream as the iframe content of task module. I'm still not sure if this is can be done because I can't find any document here. Even the default stream feature on teams is redirect to a new browser — Theodorus Agum Gumilang
@Mamatha-MSFT I already this two domain companycommunicatorkre.azurefd.net, microsoftstream.com but still no different. The Microsoft Stream still need authentication — Theodorus Agum Gumilang
@Mamatha-MSFT Hi update my question with updated code, do you know why I get the "Definition Not Found" error what is the mean of the error? — Theodorus Agum Gumilang

Mamatha-MSFT Mamatha-MSFT · Accepted Answer · 2021-05-04T10:54:14

You cannot make SSO work for an app that you do not own. If your bot has SSO credentials for app A then you can't open app B and expect SSO to work. We have restriction on one SSO credentials per app manifest. You can add Microsoft stream videos in a tab but if you add stream videos in task module it will show sign in option, it is by design.

Embed Microsoft Stream to Task Module Microsoft Teams

1 Answers