我正在使用 Google Analytics Embed API 在自定义仪表板上嵌入一些 GA 数据。我正在使用演示站点中的方法：
https://ga-dev-tools.appspot.com/embed-api/
gapi.analytics.auth.authorize({
container: 'embed-api-auth-container',
clientid: 'MY CLIENT ID',
});
工作正常。但它要求用户在查看数据之前进行身份验证。如何解决此问题或使用此方法进行自动身份验证（因此可以访问该页面的任何人都不必登录）？
此时，一个代码示例将是理想的选择。感谢您提供的任何帮助。
【问题讨论】：
标签： google-analytics
我想在我的管理仪表板中使用 Google Analytics Embed。几个小时后，在 stackoverflow 上搜索类似的帖子，以及通过谷歌搜索找到的任何其他网站，我已经解决了我的身份验证问题。那我想分享一下。
首先，您知道，您需要一些凭据。从https://console.developers.google.com 获取您的 client_id 和 client_secret 密钥。将您的站点（example.com）添加到经过身份验证的 js 源...并按照说明进行操作...
其次，转到https://developers.google.com/oauthplayground/并选择api（Google Analytics Reporting API v4）检查https://www.googleapis.com/auth/analytics和https://www.googleapis.com/auth/analytics.readonly 这很重要：在按下授权 API 按钮之前，您应该按下页面右上角的设置按钮。然后在设置弹出窗口中选中“使用您自己的 OAuth 凭据”并编写您自己的 client_id client_secret 现在您可以按 Authorize APIs 按钮。 然后按“交换令牌授权码”按钮并复制刷新令牌代码。好像是 1/gwPrtXcdqpC_pDXXXXXXXXXXXXXXXXXzvVA。
所以你有 client_id、client_secret 和 refresh_token（由你自己的身份验证通过设置弹出窗口获取）
让我们看看javascript代码：
当然，添加
<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>
//CX Google Auth Process
var client_id = "111XXXXXXXXXXXXXXXXson.apps.googleusercontent.com";
var client_secret = "edXXXXXXXXXXXXXXXXabW";
function CXAuth(parameters) {
var credits= { client_secret: client_secret, grant_type: 'refresh_token', refresh_token: '1/AXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXi7', client_id: client_id };
$.ajax({
type: "POST",
url: "https://www.googleapis.com/oauth2/v4/token",
contentType: "application/x-www-form-urlencoded",
data: credits,
dataType: "json",
success: function (credits) {
//console.log("CX Auth success");
gapi.analytics.auth.authorize({
serverAuth: {
"access_token": credits.access_token,
"expires_in": credits.expires_in,
"token_type": credits.token_type
},
container: 'embed-api-auth-container', //Your auth div id in html
clientid: client_id,
clientsecret: client_secret
});
}, error: function (xhr, textStatus, errorThrown) {
console.log("cx ajax post error:" + xhr.statusText);
}
});
}
gapi.analytics.ready(function () {
CXAuth();
//CX Get your ids no from https://ga-dev-tools.appspot.com/query-explorer/
var report = new gapi.analytics.report.Data({
query: {
ids: 'ga:18XXXXX', //Your ids no
//CX ga:visits,ga:sessions,ga:users for Tekil kullanıcı Sayısı-Unique user count
metrics: 'ga:pageviews', // Not unique user count
dimensions: 'ga:date',
'start-date': '2018-01-01',
'end-date': 'today'
}
});
var total = 0;
report.on('success', function handleCoreAPIResponse(resultsAsObject) {
if (resultsAsObject.rows.length > 0) {
resultsAsObject.rows.forEach(function pushNumericColumn(row) {
total = Number(total) + Number(row[1]);
});
document.getElementById("totalCounter").textContent = total;
}
});
report.execute();
var dataChart = new gapi.analytics.googleCharts.DataChart({
query: {
'ids': 'ga:18XXXXX', // <-- Replace with the ids value for your view.
'start-date': '30daysAgo',
'end-date': 'today',
'metrics': 'ga:sessions,ga:users',
'dimensions': 'ga:date'
},
chart: {
'container': 'site_statistics', //Your div id
'type': 'LINE',
'options': {
'width': '100%'
}
}
});
//CX Responsive Google Charts
window.addEventListener('resize', function () {
dataChart.execute();
});
$(document).ready(function () {
dataChart.execute();
});
});
</script>
最后在你的 html 中是这样的：
<div id="embed-api-auth-container"></div>
<div id="site_statistics" class="chart"> </div>
<div id="totalCounter">0</div >
如果所有步骤都正确，您可以通过管理仪表板上的 js 获取自动刷新令牌，而无需每次都手动按下登录按钮。
【讨论】：
本质上，您是在询问代表访问者授权服务器端的问题。
这个问题的各种形式以前被问过，所以我不会重新回答，我只是给你一些链接：
这里是auth 方法的文档，其中讨论了serverAuth 选项：
https://developers.google.com/analytics/devguides/reporting/embed/v1/component-reference#auth
【讨论】：
我建议你遵循这个：
【讨论】：