I am very new to google sign in and google analytics. I am creating a project where the user (client-side) can sign in with google and give permission to me to access his google analytics account. Then I will show him some charts and graphs based on the analytics data.
So far I have done this for my account only. I created a new account on google console, downloaded the cred.json file give permission to that account on my google analytics dashboard, and now I am using @google-analytics/data library from npm to get the data and send it to the front-end.
What I want is for the user can just sign-in on the client-side, give me access to his analytics (when the google sign in prompt comes), and then I will use that access token to make API call on the backend and then send him his data.
I tried googling but couldn't find any relevant results. I know something like this already exists because I have seen websites use this. So please guide me on how can I implement this. I am using MERN Stack.
CodePudding user response：
I am creating a project where the user (client-side) can sign in with google and give permission to me to access his google analytics account.
You are confusing the terms, Sign in is login, what you want is the user to grant your application permission to access their data this is Oauth2.
Then I will show him some charts and graphs based on the analytics data.
Remember that the data returned from the api is in the form of Json, if you want to show them chars and graphs then you will need to create these yourself.
So far I have done this for my account only. I created a new account on google console, downloaded the cred.json file give permission to that account on my google analytics dashboard.
The cred.json file only gives your application the ability for a user to consent to accessing your application. It is not linked to any google analytics account. A user will still need to grant your application access to their data.
What I want is for the user can just sign-in on the client-side, give me access to his analytics (when the google sign in prompt comes), and then I will use that access token to make API call on the backend and then send him his data.
This is called Oauth2, the user is consenting to you accessing their data.
There is no offical sample for Node.js with the google analytics api. I created a tutorial a few years ago that may help you get started. Google analytics Node.js
const fs = require('fs');
const readline = require('readline');
const {google} = require('googleapis');
const dotenv = require('dotenv');
dotenv.config();
const CRED_FILE_PATH = process.env.API_CREDS;
console.log(`Your cred path is ${CRED_FILE_PATH}`); // ../creds.json
const VIEW_ID = process.env.VIEW_ID;
console.log(`Your view id is ${VIEW_ID}`);
// If modifying these scopes, delete token.json.
const SCOPES = ['https://www.googleapis.com/auth/analytics.readonly'];
// The file token.json stores the user's access and refresh tokens, and is
// created automatically when the authorization flow completes for the first
// time.
const TOKEN_PATH = 'token.json';
// Load client secrets from a local file.
fs.readFile(CRED_FILE_PATH, (err, content) => {
if (err) return console.log('Error loading client secret file:', err);
// Authorize a client with credentials, then call the Google Drive API.
authorize(JSON.parse(content), getUserReport);
});
/**
* Create an OAuth2 client with the given credentials, and then execute the
* given callback function.
* @param {Object} credentials The authorization client credentials.
* @param {function} callback The callback to call with the authorized client.
*/
function authorize(credentials, callback) {
const {client_secret, client_id, redirect_uris} = credentials.installed;
const oAuth2Client = new google.auth.OAuth2(
client_id, client_secret, redirect_uris[0]);
// Check if we have previously stored a token.
fs.readFile(TOKEN_PATH, (err, token) => {
if (err) return getAccessToken(oAuth2Client, callback);
oAuth2Client.setCredentials(JSON.parse(token));
callback(oAuth2Client);
});
}
/**
* Get and store new token after prompting for user authorization, and then
* execute the given callback with the authorized OAuth2 client.
* @param {google.auth.OAuth2} oAuth2Client The OAuth2 client to get token for.
* @param {getEventsCallback} callback The callback for the authorized client.
*/
function getAccessToken(oAuth2Client, callback) {
const authUrl = oAuth2Client.generateAuthUrl({
access_type: 'offline',
scope: SCOPES,
});
console.log('Authorize this app by visiting this url:', authUrl);
const rl = readline.createInterface({
input: process.stdin,
output: process.stdout,
});
rl.question('Enter the code from that page here: ', (code) => {
rl.close();
oAuth2Client.getToken(code, (err, token) => {
if (err) return console.error('Error retrieving access token', err);
oAuth2Client.setCredentials(token);
// Store the token to disk for later program executions
fs.writeFile(TOKEN_PATH, JSON.stringify(token), (err) => {
if (err) return console.error(err);
console.log('Token stored to', TOKEN_PATH);
});
callback(oAuth2Client);
});
});
}
/**
* Number of users between last week and two weeks ago.
* @param {google.auth.OAuth2} auth An authorized OAuth2 client.
*/
function getUserReport(auth) {
const service = google.analyticsreporting({version: 'v4', auth});
const googleAnalyticsReports = {
resource: {
reportRequests: [{
viewId: VIEW_ID,
dateRanges: [
{
startDate: '14daysAgo',
endDate: '7daysAgo'
}
],
metrics: [
{
expression: 'ga:users'
}
]
}]
}
};
service.reports.batchGet(googleAnalyticsReports, (err, res) => {
if (err) return console.log('The API returned an error: ' err);
const reports = res.data.reports;
if (reports.length) {
console.log('Reports:');
reports.forEach(report => {
console.log('\tMetrics:');
report.columnHeader.metricHeader.metricHeaderEntries.forEach(metricHeader => console.log('\t\t', metricHeader.name))
report.data.rows.forEach(row => console.log('\t\t', row.metrics))
}
);
} else {
console.log('No data found.');
}
});
}