Узнайте, как выполнить интеграцию (внедрение) панели мониторинга в веб-приложение с помощью C#, API Power BI и кода JavaScript.

Для работы с руководством вам потребуется учетная запись Power BI. Если у вас нет учетной записи, вы можете зарегистрироваться для получения бесплатной учетной записи Power BI или создать собственный клиент Azure Active Directory для тестирования.

Чтобы интегрировать панель мониторинга в веб-приложение, используйте API Power BI и токен доступа авторизации Azure Active Directory (AD) для получения панели мониторинга. Затем загрузите панель мониторинга в элемент div, используя тот же токен доступа. API Power BI обеспечивает программный доступ к определенным ресурсам Power BI. Дополнительные сведения см. в обзоре интерфейса REST API Power BI и документации API JavaScript Power BI.

Скачивание примера

В этой статье показан код, используемый в примере интеграции информационной панели на сайте GitHub. Для работы с этим пошаговым руководством необходимо загрузить пример кода.

Если вы ищете пример, который включает в себя внедрение элементов для пользователей, не использующих Power BI, ознакомьтесь с этой статьей.

Шаг 1. Регистрация приложения в Azure AD

Чтобы использовать API Power BI, необходимо зарегистрировать приложение в клиенте Azure Active Directory. Эта процедура необходима для последующего получения идентификатора и секрета клиента, определяющих ваше веб-приложение в Azure AD. Без идентификатора и секрета клиента Azure AD не сможет проверить подлинность веб-приложения. Если вы скачали пример интеграции информационной панели, можно использовать идентификатор клиента и секрет клиента, полученные после регистрации, чтобы настроить этот пример для проверки подлинности в Azure AD.

Мы создали страницу, которая поможет вам в регистрации. Чтобы выполнить этот шаг, можно перейти по адресу dev.powerbi.com/apps.

  1. Перейдите по адресу dev.powerbi.com/apps.

  2. Выберите Войти с использованием существующей учетной записи и войдите в учетную запись Power BI.

  3. Введите Имя приложения. В рамках этого пошагового руководства введите пример интеграции информационной панели.

  4. В области Тип приложения в раскрывающемся списке выберите Server-side Web app (Серверное веб-приложение).

  5. В поле URL-адрес перенаправленияукажите URL-адрес. В этом пошаговом руководстве Azure AD выполняет перенаправление на страницу по умолчанию, поэтому введите http://localhost:13526. Azure Active Directory (AD) будет выполнять перенаправление на эту страницу с использованием кода авторизации. Сведения о том, как получить маркер доступа для обращения к информационным панелям Power BI с помощью кода авторизации, см. в разделе Получение токена доступа для проверки подлинности.

  6. Введите значение Домашняя страница. В этом пошаговом руководстве введите адрес http://localhost:13526, который является домашней страницей для примера.

  7. В области Choose APIs to access (Выбор API для доступа) установите флажок Read All Dashboards (Чтение всех информационных панелей). Перечень всех разрешений для приложений Power BI см. в статье Разрешения приложений.

  8. Щелкните Регистрация приложения и сохраните созданный идентификатор клиента и секрет клиента. Идентификатор и секрет клиента идентифицируют приложение в Azure AD.

Настройка примера приложения

Если вы скачали пример интеграции информационной панели, можно использовать идентификатор клиента и секрет клиента, полученные после регистрации, чтобы настроить этот пример для проверки подлинности в Azure AD. Для настройки примера измените идентификатор и секрет клиента в файле web.config.

Шаг 2. Получение информационной панели

Для получения панели мониторинга Power BI используется операция Получение панелей мониторинга, возвращающая список панелей мониторинга Power BI. В списке панелей мониторинга можно получить идентификатор панели мониторинга.

Маркер доступа Azure Active Directory

Перед вызовом операции Получение панелей мониторинга или любой другой операции Power BI следует получить токен доступа для проверки подлинности (токен доступа) Azure Active Directory. Маркер доступа позволяет вашему приложению обратиться к информационным панелям, плиткам и отчетам Power BI. Дополнительные сведения об использовании токена доступа Azure Active Directory см. в статье Поток предоставления кода авторизации Azure AD. В следующем разделе описано получение токена доступа в веб-приложении.

Получение кода авторизации из Azure AD

Первый шаг при получении токена доступа заключается в получении кода авторизации из Azure AD. Для этого создайте строку запроса со следующими свойствами и выполните перенаправление в Azure AD.

Строка запроса для кода авторизации

var @params = new NameValueCollection
{
    //Azure AD will return an authorization code.
    {"response_type", "code"},

    //Client ID is used by the application to identify themselves to the users that they are requesting permissions from.
    //You get the client id when you register your Azure app.
    {"client_id", Settings.Default.ClientID},

    //Resource uri to the Power BI resource to be authorized
    //The resource uri is hard-coded for sample purposes
    {"resource", "https://analysis.windows.net/powerbi/api"},

    //After app authenticates, Azure AD will redirect back to the web app. In this sample, Azure AD redirects back
    //to Default page (Default.aspx).
    { "redirect_uri", Settings.Default.RedirectUri}
};

После создания строки запроса выполните перенаправление в Azure AD для получения кода авторизации. Ниже приведен полный метод C# для создания строки запроса кода авторизации и перенаправления в Azure AD. С помощью полученного кода авторизации вы получаете маркер доступа.

Получение кода авторизации

protected void signInButton_Click(object sender, EventArgs e)
{
    //Create a query string
    //Create a sign-in NameValueCollection for query string
    var @params = new NameValueCollection
    {
        //Azure AD will return an authorization code. 
        //See the Redirect class to see how "code" is used to AcquireTokenByAuthorizationCode
        {"response_type", "code"},

        //Client ID is used by the application to identify themselves to the users that they are requesting permissions from. 
        //You get the client id when you register your Azure app.
        {"client_id", Properties.Settings.Default.ClientID},

        //Resource uri to the Power BI resource to be authorized
        {"resource", Properties.Settings.Default.PowerBiAPI},

        //After user authenticates, Azure AD will redirect back to the web app
        {"redirect_uri", "http://localhost:13526/Redirect"}
    };

    //Create sign-in query string
    var queryString = HttpUtility.ParseQueryString(string.Empty);
    queryString.Add(@params);

    //Redirect authority
    //Authority Uri is an Azure resource that takes a client id to get an Access token
    string authorityUri = Properties.Settings.Default.AADAuthorityUri;
    var authUri = String.Format("{0}?{1}", authorityUri, queryString);
    Response.Redirect(authUri);
}

Получение маркера доступа из кода авторизации

Теперь у вас должен быть код авторизации из Azure AD. Когда Azure AD выполняет перенаправление обратно в веб-приложение с использованием кода авторизации, можно воспользоваться кодом авторизации для получения токена доступа. Ниже приведен пример на C#, который можно использовать в событии Page_Load.

protected void Page_Load(object sender, EventArgs e)
{

    //Test for AuthenticationResult
    if (Session[authResultString] != null)
    {
        //Get the authentication result from the session
        authResult = (AuthenticationResult)Session[authResultString];

        //Show Power BI Panel
        signInStatus.Visible = true;
        signInButton.Visible = false;

        //Set user and token from authentication result
        userLabel.Text = authResult.UserInfo.DisplayableId;
        accessTokenTextbox.Text = authResult.AccessToken;
    }
}

Получение панели мониторинга с помощью токена доступа

После получения токена доступа можно вызвать операцию Получение панелей мониторинга. Операция Получение панелей мониторинга возвращает список панелей мониторинга. В списке панелей мониторинга можно получить панель мониторинга. Ниже приведен полный метод C# для получения панели мониторинга. Примеры использования REST API Power BI см. в документации Power BI REST API on APIARY (Справочник по REST API Power BI на APIARY).

Получение панели мониторинга

protected void getDashboardsButton_Click(object sender, EventArgs e)
{
    string responseContent = string.Empty;

    //Configure dashboards request
    System.Net.WebRequest request = System.Net.WebRequest.Create(String.Format("{0}dashboards", baseUri)) as System.Net.HttpWebRequest;
    request.Method = "GET";
    request.ContentLength = 0;
    request.Headers.Add("Authorization", String.Format("Bearer {0}", authResult.AccessToken));

    //Get dashboards response from request.GetResponse()
    using (var response = request.GetResponse() as System.Net.HttpWebResponse)
    {
        //Get reader from response stream
        using (var reader = new System.IO.StreamReader(response.GetResponseStream()))
        {
            responseContent = reader.ReadToEnd();

            //Deserialize JSON string
            PBIDashboards PBIDashboards = JsonConvert.DeserializeObject<PBIDashboards>(responseContent);

            if (PBIDashboards != null)
            {
                var gridViewDashboards = PBIDashboards.value.Select(dashboard => new {
                    Id = dashboard.id,
                    DisplayName = dashboard.displayName,
                    EmbedUrl = dashboard.embedUrl
                });

                this.GridView1.DataSource = gridViewDashboards;
                this.GridView1.DataBind();
            }
        }
    }
}

//Power BI Dashboards used to deserialize the Get Dashboards response.
public class PBIDashboards
{
    public PBIDashboard[] value { get; set; }
}
public class PBIDashboard
{
    public string id { get; set; }
    public string displayName { get; set; }
    public string embedUrl { get; set; }
    public bool isReadOnly { get; set; }
}

Шаг 3. Загрузка панели мониторинга с помощью JavaScript

Чтобы загрузить панель мониторинга в элемент div веб-страницы, вы можете использовать JavaScript.

<input type="text" id="tb_EmbedURL" style="width: 1024px;" />
<input type="button" id="bEmbedDashboardAction" value="Embed Dashboard" />
<div id="dashboardContainer"></div>


window.onload = function () {
    // client side click to embed a selected dashboard.
    var el = document.getElementById("bEmbedDashboardAction");
    if (el.addEventListener) {
        el.addEventListener("click", updateEmbedDashboard, false);
    } else {
        el.attachEvent('onclick', updateEmbedDashboard);
    }

    // handle server side post backs, optimize for reload scenarios
    // show embedded dashboard if all fields were filled in.
    var accessTokenElement = document.getElementById('MainContent_accessTokenTextbox');
    if (accessTokenElement !== null) {
        var accessToken = accessTokenElement.value;
        if (accessToken !== "")
            updateEmbedDashboard();
    }
};

// update embed dashboard
function updateEmbedDashboard() {

    // check if the embed url was selected
    var embedUrl = document.getElementById('tb_EmbedURL').value;
    if (embedUrl === "")
        return;

    // get the access token.
    accessToken = document.getElementById('MainContent_accessTokenTextbox').value;

    // Embed configuration used to describe the what and how to embed.
    // This object is used when calling powerbi.embed.
    // You can find more information at https://github.com/Microsoft/PowerBI-JavaScript/wiki/Embed-Configuration-Details.
    var config = {
        type: 'dashboard',
        accessToken: accessToken,
        embedUrl: embedUrl
    };

    // Grab the reference to the div HTML element that will host the dashboard.
    var dashboardContainer = document.getElementById('dashboardContainer');

    // Embed the dashboard and display it within the div container.
    var dashboard = powerbi.embed(dashboardContainer, config);

    // dashboard.on will add an event handler which prints to Log window.
    dashboard.on("tileClicked", function (event) {
        var logView = document.getElementById('logView');
        logView.innerHTML = logView.innerHTML + "Tile Clicked<br/>";
        logView.innerHTML = logView.innerHTML + JSON.stringify(event.detail, null, "  ") + "<br/>";
        logView.innerHTML = logView.innerHTML + "---------<br/>";
    });

    // dashboard.on will add an event handler which prints to Log window.
    dashboard.on("error", function (event) {
        var logView = document.getElementById('logView');
        logView.innerHTML = logView.innerHTML + "Error<br/>";
        logView.innerHTML = logView.innerHTML + JSON.stringify(event.detail, null, "  ") + "<br/>";
        logView.innerHTML = logView.innerHTML + "---------<br/>";
    });
}

Если вы скачали и запустили пример интеграции информационной панели, он будет выглядеть аналогично приведенному ниже.

События щелчка плитки

Из приведенного выше примера понятно, что вы можете обрабатывать события, когда кто-то щелкает плитку на панели мониторинга. Дополнительные сведения о событиях см. в статье об обработке событий в API JavaScript.

// dashboard.on will add an event handler which prints to Log window.
dashboard.on("tileClicked", function (event) {
    var logView = document.getElementById('logView');
    logView.innerHTML = logView.innerHTML + "Tile Clicked<br/>";
    logView.innerHTML = logView.innerHTML + JSON.stringify(event.detail, null, "  ") + "<br/>";
    logView.innerHTML = logView.innerHTML + "---------<br/>";
});

// dashboard.on will add an event handler which prints to Log window.
dashboard.on("error", function (event) {
    var logView = document.getElementById('logView');
    logView.innerHTML = logView.innerHTML + "Error<br/>";
    logView.innerHTML = logView.innerHTML + JSON.stringify(event.detail, null, "  ") + "<br/>";
    logView.innerHTML = logView.innerHTML + "---------<br/>";
});

Если вы скачали и запустили пример интеграции панели мониторинга, щелкните плитку, чтобы вывести текст под панелью мониторинга. Текст будет выглядеть примерно так. Этот код позволит вам регистрировать щелчок плитки и переходить к соответствующему пользователю.

Tile Clicked
{ "event": "TileClick", "reportEmbedUrl": "", "navigationUrl": "https://app.powerbi.com/dashboards/fcff76f9-15ff-4a8e-8242-275ac9c25b90/qna?q=count%20of%20new%20hires%20from%20July%202014%20to%20December%202014", "tileId": "0e99b45c-9b53-4920-b239-cee7d37d2369" }
---------
Tile Clicked
{ "event": "TileClick", "reportEmbedUrl": "https://app.powerbi.com/reportEmbed?reportId=ab199308-80b1-4626-9823-43a84623bd9c", "navigationUrl": "https://app.powerbi.com/reports/ab199308-80b1-4626-9823-43a84623bd9c/ReportSection1", "tileId": "ffc30447-674a-4511-944f-79e182d719de", "pageName": "ReportSection1" }
---------

Работа с группами

Чтобы внедрить информационную панель из группы, необходимо получить список всех доступных информационных панелей в группе, используя следующий вызов интерфейса REST API. Дополнительные сведения о вызове интерфейса REST API см. в статье Get Dashboards (Получение информационных панелей).

https://api.powerbi.com/v1.0/myorg/groups/{groupId}/dashboards

Приведенный выше API возвращает список доступных информационных панелей. У каждой информационной панели имеется свойство EmbedUrl, которое поддерживает внедрения группы по умолчанию.

https://app.powerbi.com/dashboardEmbed?dashboardId={dashboardId}&groupId={groupId}

Ограничения

  • Пользователи, обращающиеся к внедренным информационным панелям, должны иметь учетные записи Power BI, и им должен быть предоставлен общий доступ к этим информационным панелям.

  • В настоящее время внедренные информационные панели не поддерживают функцию "Вопросы и ответы".

  • При совместном использовании информационной панели с группой безопасности в качестве временного ограничения пользователь сначала должен получить доступ к информационным панелям на сайте PowerBI.com и только потом сможет увидеть ее внедренной.

См. также:

Пример интеграции информационной панели
Embed sample for non-Power BI users (Пример внедрения для пользователей, не использующих Power BI)
Разрешения Power BI
JavaScript API Power BI
Power BI REST API on APIARY (Справочник по REST API Power BI на APIARY)

Появились дополнительные вопросы? Попробуйте задать вопрос в сообществе Power BI.