Google Analytics - 嵌入 API - 出现 OAuth 错误

Question

我正在尝试按照示例 here 在我的网络应用程序中嵌入一些 Google 分析统计信息。

我的HTML看起来如下：

<div class="page-header">
    <h3 class="text-center">WAND Sessions</h3>
</div>

<br/>
<br/>

<div id="embed-api-auth-container"></div>
<div id="chart-container"></div>
<div id="view-selector-container"></div>

@section Scripts {
    <script>
        (function(w, d, s, g, js, fs) {
            g = w.gapi || (w.gapi = {});
            g.analytics = { q: [], ready: function(f) { this.q.push(f); } };
            js = d.createElement(s);
            fs = d.getElementsByTagName(s)[0];
            js.src = 'https://apis.google.com/js/platform.js';
            fs.parentNode.insertBefore(js, fs);
            js.onload = function() { g.load('analytics'); };
        }(window, document, 'script'));
    </script>

    <script src="~/Scripts/GoogleAnalytics/viewSessions.js"></script>
}

我的 viewSessions.js 文件如下所示：

$(document).ready(function () {
    gapi.analytics.ready(function () {

        /**
         * Authorize the user immediately if the user has already granted access.
         * If no access has been created, render an authorize button inside the
         * element with the ID "embed-api-auth-container".
         */
        gapi.analytics.auth.authorize({
            container: 'embed-api-auth-container',
            clientid: 'xxxxxxxxx'
        });

        /**
         * Create a new ViewSelector instance to be rendered inside of an
         * element with the id "view-selector-container".
         */
        var viewSelector = new gapi.analytics.ViewSelector({
            container: 'view-selector-container'
        });

        // Render the view selector to the page.
        viewSelector.execute();


        /**
         * Create a new DataChart instance with the given query parameters
         * and Google chart options. It will be rendered inside an element
         * with the id "chart-container".
         */
        var dataChart = new gapi.analytics.googleCharts.DataChart({
            query: {
                metrics: 'ga:sessions',
                dimensions: 'ga:date',
                'start-date': '30daysAgo',
                'end-date': 'yesterday'
            },
            chart: {
                container: 'chart-container',
                type: 'LINE',
                options: {
                    width: '100%'
                }
            }
        });


        /**
         * Render the dataChart on the page whenever a new view is selected.
         */
        viewSelector.on('change', function (ids) {
            dataChart.set({ query: { ids: ids } }).execute();
        });

    });
});

当我加载页面时，我看到的是：

如果我点击它，我会看到一个 Google 错误对话框，上面写着

401 Error: invalid_client

The OAuth client was not found.

知道哪里出了问题吗？

Answer 1

那个页面上的文档不是很好。我过去曾向 Google 提到过。

您需要转到 Google 开发人员控制台并使用 OAuth 凭据创建您自己的客户端 ID。

Google Analytics Embeded API getting started 页面告诉您如何操作。

Create a New Client ID

The Embed API handles almost all of the authorization process for you by providing a one-click sign-in component that uses the familiar OAuth 2.0 flow. In order to get this button working on your page you'll need a client ID.

If you've never created a client ID, you can do so by following these instructions.

As you go through the instructions, it's important that you not overlook these two critical steps: • Enable the Analytics API
• Set the correct origins

The origins control what domains are allowed to use this code to authorize users. This prevents other people from copying your code and running it on their site.

For example, if your website is hosted on the domain example.com, make sure to set the following origin for your client ID http://example.com. If you want to test your code locally, you'll need to add the origin for your local server as well, for example: http://localhost:8080.

Google Analytics - 嵌入 API - 出现 OAuth 错误

Google Analytics - Embed API - Getting an OAuth Error

google-api

google-apps