How to get authorization token from host app to web part, office365Video call

Question

I’m new to sharepoint and right now I’m stuck with some specific issue, which I can't find any solution on web. So, the point is that I have two apps: first one is sharepoint hosted app with domain like:

"mycompanyname.sharepoint.com/site..."

And web part app inside of it with domain like:

"mycompanyname-asdf234asdas45.sharepoint.com/site..."

Which is implemented like normal html page, using standard languages like: html, css, js + angularJs framework.

The point is that I have to consume office365Video api from web part app level, for pulling videos for actual logged in user. And there is the complicated part which I can’t figure out how to do it.

The endpoint to get movies should look like that:

VideoService/Channels(guid'{channelGuid}’)/Videos

And when I fire something like this:

"mycompanyname.sharepoint.com/portals/hub/_api/VideoService/Channels(guid'352f55e5-1ed5-473f-b3c9-fcaff7cbb2e8')/Videos"

Its working well but when I try to do something like:

mycompanyname-asdf234asdas45.sharepoint.com /portals/hub/_api/VideoService/Channels(guid'352f55e5-1ed5-473f-b3c9-fcaff7cbb2e8')/Videos

I got of course 403: Forbidden “-2147024891, System.UnauthorizedAccessException”

So I predict the problem is that my host domain store authorization cookies and web part domain can’t see it. And consider to this link :

Host Web vs APP Web

• I’m right:

I already know that the App is registered on Azure Active Directory App, and there is something like Client ID and subscription ID. But I don’t want to use it. I want to use already logged in user credentials.

How can I obtain these tokens? Credentials? To be authorized.

Here is image to better understand issue.

PS. Sorry for my english - it is not my primary language :)

Answer 1

The Access Token to access the Video stored in the Azure media for streaming.

Your request should look like :

"http://<tenant>/portals/hub/_api/videoservice/Channels(guid’b6c48249-cd8a-43e9-bb94-7df7e8303033′)/Videos(guid’bd9e2f2a-10b6-49fb-b6c0-774731f0bb7e’)/GetStreamingKeyAccessToken"

So in the code, it would look like below:

function GetAzureMediaAccessToken(spVideoUrl) {

    var deferred = $.Deferred();
    var executor = new SP.RequestExecutor(_spPageContextInfo.webAbsoluteUrl);
    executor.executeAsync({
        url: "https://tenant.sharepoint.com/portals/hub/_api/VideoService/GetVideoByUrl('" + spVideoUrl + "')/GetStreamingKeyAccessToken",
        method: "GET",
        headers: {
            "Accept": "application/json; odata=nometadata"
        },
        success: function(data) {
            deferred.resolve(data);
        },
        error: function(data, errorCode, errorMessage) {
            deferred.reject(data, errorCode, errorMessage);
        }
    });

    return deferred.promise();
}

Full code to stream a video would be as below:

function InitializeVideo() {
    var spVideoUrl = "/portals/BannerVideo/banner.mp4";
    GetAzureMediaUrl(spVideoUrl).then(
        function(responseMediaUrl) {

            return GetAzureMediaAccessToken(spVideoUrl).then(
                function(responseAccessToken) {
                    var azureMediaUrl = JSON.parse(responseMediaUrl.body).value;
                    var azureMediaAccessToken = JSON.parse(responseAccessToken.body).value;
                    SetAzureMediaPlayer(azureMediaUrl, azureMediaAccessToken);
                }
            );
        }
    );
}

function GetAzureMediaUrl(spVideoUrl) {

    var deferred = $.Deferred();
    var executor = new SP.RequestExecutor(_spPageContextInfo.webAbsoluteUrl);
    executor.executeAsync({
        url: "https://tenant.sharepoint.com/portals/hub/_api/VideoService/GetVideoByUrl('" + spVideoUrl + "')/getplaybackurl(1)",
        method: "GET",
        headers: {
            "Accept": "application/json; odata=nometadata"
        },
        success: function(data) {
            deferred.resolve(data);
        },
        error: function(data, errorCode, errorMessage) {
            deferred.reject(data, errorCode, errorMessage);
        }
    });

    return deferred.promise();
}

function GetAzureMediaAccessToken(spVideoUrl) {

    var deferred = $.Deferred();
    var executor = new SP.RequestExecutor(_spPageContextInfo.webAbsoluteUrl);
    executor.executeAsync({
        url: "https://tenant.sharepoint.com/portals/hub/_api/VideoService/GetVideoByUrl('" + spVideoUrl + "')/GetStreamingKeyAccessToken",
        method: "GET",
        headers: {
            "Accept": "application/json; odata=nometadata"
        },
        success: function(data) {
            deferred.resolve(data);
        },
        error: function(data, errorCode, errorMessage) {
            deferred.reject(data, errorCode, errorMessage);
        }
    });

    return deferred.promise();
}

function SetAzureMediaPlayer(azureMediaUrl, azureMediaAccessToken) {
    var myOptions = {
        "nativeControlsForTouch": false,
        autoplay: false,
        controls: true,
        width: "640",
        height: "400",
        poster: ""
    };
    var myPlayer = amp("azuremediaplayer", myOptions);

    myPlayer.src[{
        src: azureMediaUrl,
        type: "application/vnd.ms-sstr+xml",
        protectionInfo: [{
            type: "AES",
            authenticationToken: azureMediaAccessToken
        }]
    }]);
}

var scriptbase = _spPageContextInfo.webAbsoluteUrl + "/_layouts/15/";
$.getScript(scriptbase + "SP.Runtime.js",
    function() {
        $.getScript(scriptbase + "SP.js",
            function() {
                $.getScript(scriptbase + "SP.RequestExecutor.js", InitializeVideo);

            }
        );
    }
);

Reference - How to play an Office 365 Video using Azure Media Player and Javascript