I have set up Google Drive UI integration with my web app. When a user chooses to create a new file in Drive using my app, they are sent to
https://[mysite]?state={"folderId": "...", "action": "create", "userId":"..."}
I am signed in to multiple Google accounts (A and B) in my browser.
Account A opts to create a file, and is sent to my app with "userId": "[A's user id]" in the url.
However, with the gapi.auth2 JS library:
authInstance.signIn()
// Listen for sign in, and then:
authInstance.currentUser.get().getAuthResponse().access_token
Returns an access token for Account B.
This causes 404 errors when I try to create a file in folderId, which is only accessible to Account A.
How can my app authenticate with Google as the specific userId that opted to create a file?
The docs for Drive UI Integration do not seem to cover this issue, and the docs for Google Sign-In for Websites do not (as far as I can tell) provide a way to specify which account I want to sign in with (except through broad filters like "use a specific G Suite domain").
Update: The HTTP Google OAuth docs allow the client to specify a login_hint, which is an "email address or sub identifier" – it is not entirely clear what a "sub identifier" is. And, strangely, the Javascript API docs imply that login_hint is a response parameter, not something I can set.
Update 2 userId is an opaque Google-provoded integer value that I don't recognise. My app, Including the Drive upload, is fully client-side in JS and has no long-term data storage.
Related
I have written a webapp with the ArcGIS JavaScript API and all is working fine. Now I am trying to add secured layers to the web app and the app starts asking for credentials via a default login screen. I could use that, just entering username and password, but most users don't know their user name and password for ArcGIS.
The company has implemented SSO with ArcGIS so users don't have to fill in their credentials. Users typically go to the main company.maps.arcgis.com site and get to a company specific login screen where they have the option to click this SSO button.
My question; how can I make the JavaScript API show this company specific login page with SSO button instead of the default one?
I tried registering oauthInfo and serverInfo setting but without success.
Did anybody else ever built this?
The SSO sign in prompt should occur as long as you're using OAuthInfo and registering it with the IdentityManager. You'll have to make sure that you:
Add and register an application in the organization where
the data is coming from. The redirect URI should point to the server
that's hosting the application URL.
Get the Client ID from the registered application and add it to the appId in OAuthInfo along with the portalUrl property (which should be https://company.maps.arcgis.com)
Set the popup property to false.
Verify all the data is coming from the same organization. If it's not, then you may get another prompt since it's not registered with the IdentityManager.
Here's an example of what the OAuthInfo should look like:
const info = new OAuthInfo({
// Swap this ID out with registered application ID
appId: "APPID",
portalUrl: "https://company.maps.arcgis.com/",
flowType: "auto", // default that uses two-step flow
popup: false,
});
esriId.registerOAuthInfos([info]);
I'm getting a hard time making Maxmind's geolite2 geolocation work on client side.
First I found this page: https://dev.maxmind.com/geoip/geolocate-an-ip/web-services?lang=en
And tried to use the urls in the curl command with authentication with my generated license key:
let geoData = axios.get('https:///geolite.info/geoip/v2.1/country/me?pretty', {
auth: {
username: <myuser>,
password: <mylicensekey>
}
});
this works in node but in client-side I get a CORS error.
then I found this other page: https://dev.maxmind.com/geoip/geolocate-an-ip/client-side-javascript?lang=en
It worked but I didn't want to use a non-npm packaged lib, so I inspected the lib's source-code and saw it call a different url from above:
https://geoip-js.com/geoip/v2.1/country/me?
trying this new url I saw it worked only WITHOUT authentication. I didn't understand why but anyway... it worked. Until I send the code to production at least.
With localhost it worked ok, but in production I get an error saying I have to register my domain.
The link provides in "register your domain" in this page: https://dev.maxmind.com/geoip/geolocate-an-ip/client-side-javascript?lang=en
leads to https://www.maxmind.com/en/accounts/790937/geoip/javascript/domains which asks me to enter the paid service registration page: https://www.maxmind.com/en/accounts/790937/geoip/javascript/domains
Is that it ? Client-side geolocation is only available as a paid service ?
So I want to know:
If there is a way to register domains for the free service, where do I register my domain?
If I can use https://geolite.info/geoip/v2.1/country/me?pretty url with id and license key in client-side, how to I get rid of the CORS message ?
I want to get the data without sending the user's IP, like when we access https://geolite.info/geoip/v2.1/country/me?pretty with id and license key.
Currently I want to use MaxMind's free data.
Have been looking for a way to programmatically update our agent's entity entries for a certain entity type through the DialogFlow API. The purpose is to automate the updating of our entity entries on a scheduled basis (as our entries will be changing daily).
Came across this documentation page by Google on batch updating entity entries but have not been able to get anything better than a 404 when testing.
Have tried sending POST's via Postman using the supplied path and inserting my project name in URL but I believe I may be making naive mistakes as I am new to this area (specifically REST-stuff)
Below is an example of the current 404 response & path used.
We are just looking to get past the 404 error, once we have the contact setup, should be able to figure out auth & the rest.
There are several things you need to take into account.
The URL should look like this:
https://dialogflow.googleapis.com/v2/projects/julia-development-2/agent/entityTypes/actual_id/entities:batchUpdate
the "parent" you used in the URL is just the name of the path param
make sure "julia-development-2" is the id of your GCP project and not just the name
(Hint: when you click the drop-down for selecting a certain GCP project in the google cloud console, both the name and the ID of the project will be visibile in the list)
replace "actual_id" with the entity type id
Related to auth:
you need a bearer token in the Authorization header
to get this token you first need to download a JSON key from your projects service account and set the GOOGLE_APPLICATION_CREDENTIALS environment variable to point to your JSON file. More details about setting up the service account and downloading the JSON key, you can find here: https://cloud.google.com/dialogflow/docs/setup
to get the token from the command line you can use
gcloud auth application-default print-access-token
I'm wondering if it's possible to, say, open up a jsfiddle on a random computer and log in and authenticate and use the drive API, without having to have a local server running all the time? And how exactly does one go about setting this up? I'm sorry if this is a simple question but I'm just sorta lost because the instructions that I've found so far are unclear.
Edit:
So far I have, following from here and here:
Created a project via the Google Developers Console.
Opened up that project there, navigated to APIs under APIs & auth, and ensured that Drive API was enabled
Went into credentials, and clicked on "Create a new Client ID"
Selected "Web Application"
Set authorized javascript origins to http://localhost:4567
Deleted any contents in Redirect URI's and left it blank, then pressed "Create Client ID."
Took a sample like this, this, or this, and stored it in a local file named named index.html.
This wouldn't run by simply opening in a brower, so I had to host a local server
I navigated into that directory in the command line and then typed "python -m SimpleHTTPServer 4567" (without the quotes) and this hosted a local server
Opened http://localhost:4567 in my web brower, and all of these samples work fine, after copying the newly created client ID into these files where they ask for it.
I also have made a python application, to use pydrive I:
Clicked on "Create a new Client ID", then "Installed Application" and "Other", then "Create Client ID."
Next I went to the Old Google APIs Console, clicked on API Access, found that client ID, and clicked Download JSON.
I placed this client_secrets.json next to my python application, and this allowed pydrive to authenticate successfully and I could access and modify my google drive files anywhere using that client ID. Though of course I deleted this client_secrets.json before giving the application to another person, and showed them how to do this process as well.
However, beyond this, I'm a little unsure about, specifically:
How one can use the drive api in web applications without having to set up a local server, say simply by running code in jsfiddle and having requests sent through my project via using a Client ID, and
If a local server is set up that can be accessed by anyone on the web, how one can modify the above steps to allow any client to open that server's webpage to use the google drive API?
I know that I most likely need to set up a Public API access in the developers console, but am not entirely sure what Referers I should use as well. So is there a simple way to do any of this?
I also know that gspread can open google excell spreadsheets only using the client's username and password, so I'm suspecting that what I'm looking for is possible, but I'm not sure.
Okay, so I found a solution that works pretty well:
Make an OAuth.io account (It's free).
Once you're logged in, go to your oauth.io dashboard.
You should be looking at a Default App, or you can make another one it doesn't really matter.
Under "Domains & URLs whitelist", you'll see a little box that says "localhost." Type in "
http://fiddle.jshell.net/" (without the quotes) and press enter. This allows any jsfiddle to authenticate with your application
Next, we need to enable Google Drive support
Go to the Google Developers Console
Like before, navigate to Credentials under APIs and Auth.
Click "Create new Client ID"
Select Web Application
Under "Redirect URIs" put "https://oauth.io/auth" and "http://oauth.io/auth" (without quotes, on separate lines)
Under "Javascript Origins" put "https://oauth.io" and "http://oauth.io"
Press "Create Client ID"
Now go to your Oauth.io key manager. Click on Google Drive in the list to the left. Press next, and enter your client_id and client_secret that you created in the previous step (via the Google Developers Console)
Select online (at least online is preferred since offline should be for server side only)
Click on the Scope text book, and select "https://www.googleapis.com/auth/drive (View and manage the files in your google Drive)."
Press finish. Now click on the Try Auth button, and hopefully you should get some output like
{
"access_token": "ya29.AwH-1N_gnstLBuZfOR4W9CCcggKrQpMyKYV4QVEtCiIzHozNU5AfUJoYQzukALfjdiw2iOCUve7JbQ",
"token_type": "Bearer",
"expires_in": 3600,
"provider": "google_drive"
}
To use this, you can do something like:
// This only works because we're set to "No wrap - in <head>"
function ShowDriveFileList() {
var accessToken;
// Initialize OAuth with our key
OAuth.initialize('lmGlb8BaftfF4Y5en_c8XYOSq2A');
// Connect to google drive, and print out file list
OAuth.popup('google_drive').done(function (result) {
var xmlHttp = null;
xmlHttp = new XMLHttpRequest();
xmlHttp.open("GET", "https://www.googleapis.com/drive/v2/files", false);
xmlHttp.setRequestHeader("Authorization", "Bearer " + result.access_token);
xmlHttp.send(null);
alert(xmlHttp.responseText);
}).fail(function (err) {
alert(err);
});;
}
Which you can find at http://jsfiddle.net/JMTVz/41/. This uses my oauth.io client id, but you can replace it with yours and it should work as well.
You can do the same thing using the OAuth Playground.
See How do I authorise an app (web or installed) without user intervention? (canonical ?)
Step 11 will be different. Instead of pasting the refresh token into your server app (which you don't have), you'll paste the access token into your JS in the same way as you are doing in your answer.
I'm trying to figure out a way to display data collected from Google Analytics on my web site. I'm using NopCommerce, and I want to display this information/statistics in a view in the Admin Section.
There might be many ways to achieve this, and after searching the web I found some examples using JavaScript, but I couldn't find a good tutorial for this.
I have also looked into integrating Google Analytics with C#, and I found this example: http://biasecurities.com/2012/02/using-the-google-analytics-api-with-asp-net-mvc/#comment-1310
A demo project can be downloaded from GitHub here: https://github.com/jgeurts/Analytics-Example
However the demo project doesn't seem to work as the google URL (https://www.google.com/analytics/feeds/accounts/default) is no longer in use.
As I'm using a MVC application it would be preferable to make this happen by applying the Google Analytics logic within a Controller and displaying it in a view. Or something like that.
Google provides a query tool to experiment with here, so it shouldn't be to hard extracting data from Google Analytics and display the data on the website: https://ga-dev-tools.appspot.com/explorer/
Has anyone been able to successfully display Google Analytics data on their website?
In case some one else is having the same problem here's what I did and it pretty much answers the question.
1.
Here is the basic code for a API client that access data from Google Analytics via your Google Service Account. https://developers.google.com/api-client-library/dotnet/guide/aaa_oauth#service_account
In order to make this application work you need to have several things ready before you start coding.
*Google Analytics Account - once registered a "tracker" code is generated for you to put on each webpage you want to track. You may not see any statistics right away and it can take up to 24h before any statistics are shown in the Google Analytics Dashboard.
An OAuth Authorisation (API-Key) with CLIENT_ID, CLIENT SECRET and EMAIL ADRESS (This is not your normal email but a service account email that is created for you when you make an OAuth Authorisation).
console.developers.google.com/
A serverkey, can also be created here: console.developers.google.com/.
You can also create a browser key, haven't bothered with that though and don't know what it does.
Finally you need a certificate key. Your application will only be able to access your Google Analytics account by using the key and credentials. The key is an encrypted p.12 file. You can find the key in https://code.google.com/apis/console/.
Here is a guide for the key: http://www.pimcore.org/wiki/display/PIMCORE/Setup+Google+Analytics+Reporting+with+OAuth2+Service+Accounts+(since+1.4.6)
2.
Now that you have all keys and credentials you need it is time to start looking at the code I linked in "1". Here is the basic for it again: https://developers.google.com/api-client-library/dotnet/guide/aaa_oauth#service_account
Create a console application and implement the code above.
Note: your not making a "Google Plus service" so you have to change those parts for "AnalyticsService". Go to manage nuget and install packages:
Google Apis Core Library
Google Apis Client Library
Google Apis Auth Client Library
Google Apis Analytics.v3 Library
Google GData Client (This provides properties used to query data, metrics, demensions etc)
Google GData Extensions Library
Analytics
Might forgot something but here are the namespaces I use:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Security.Cryptography.X509Certificates;
using Google.Apis.Auth.OAuth2;
using Google.Apis.Services;
using Google.Apis.Analytics.v3;
3
Finally, here's is some of my code. Note I'm creating a new Analytics as supposed to "new ServiceAccountCredentials" as in the code from Google. That's the main difference:
Retrieve data from Google Analytics API with .NET, multiple metrics?
With this I'm able to access and query data from Google Analytics account. The best part is that you don't have to log in to Google for this as the key and credentials gives you access to the account data directly.
I will migrate this code to MVC now I might make an update later on for how to implement this Analytics client in Mvc.
This document explains how to get Google Access tokens and use them to get Google Analytics data to be displayed in our websites.
Example: A live example is available in
https://newtonjoshua.com
Note: Use the same Gmail account for all the below steps.
STEP 1: Set Up Google Analytics
Follow the below steps to set up Google Analytics on your website
Sign in to your Analytics account.
Select the Admin tab.
Select an account from the drop-down menu in the ACCOUNT column.
Select a property from the drop-down menu in the PROPERTY column.
Under PROPERTY, click Tracking Info -> Tracking Code.
To collect data, you must copy and paste the Analytics tracking code
into the source code on every web page you wish to track.
Once you have the JavaScript tracking code snippet for your
property, copy the snippet exactly without editing it.
Paste your tracking code snippet (unaltered, in its entirety) before
the closing </head> tag on every web page on your site you wish to
track.
Once you have successfully installed Analytics tracking, it may take
up to 24 hours for data such as traffic referral information, user
characteristics, and browsing information to appear in your reports
Refer to:
https://support.google.com/analytics/answer/1008080?hl=en
https://analytics.google.com
STEP 2: Get Tokens
Google Project:
To create a Google Cloud Platform project, open the Google Developers Console (https://console.developers.google.com) and click Create Project.
Enable OAuth 2.0 API access:
Your application will need to access user data and contact other Google services on your behalf. Use OAuth 2.0 to grant your app API access.
To enable that, you need a client ID:
Open the Google API Console Credentials page (https://console.developers.google.com/apis/credentials).
From the project, drop-down and select your project.
Select Create credentials and choose OAuth client ID.
Under Application type, select Web application, enter a Name and
set the Restrictions by entering JavaScript origins, Redirect URIs to point the website where you are planning to display the data, and then click Create.
Make note of the OAuth 2.0 client_id and client_secret. You will need them to configure the UI.
Get Authorization code:
Enter in browser:
https://accounts.google.com/o/oauth2/auth?scope=https://www.googleapis.com/auth/analytics.readonly&response_type=code&client_id={{
client_id}}&redirect_uri={{redirect_uri }}
&approval_prompt=force&access_type=offline
You will get redirected to
{{redirect_uri }}?code=={{authorization_code}}#
Get Refresh Token:
Send a POST request, possibly via a REST console to
https://www.googleapis.com/oauth2/v3/token?code={{authorization_code}}
&client_id={{client_id}}&client_secret={{client_secret}}
&redirect_uri={{redirect_uri }}&grant_type=authorization_code
You will get a JSON response with
{"refresh_token": refresh_token}
You can use the refresh token to get access token to access to Google APIs.
Get the Access Token:
Send a POST request to,
https://www.googleapis.com/oauth2/v3/token?client_id={{client_id}}
&client_secret={{client_id}}
&grant_type=refresh_token&refresh_token={{refresh_token}}
You will get a JSON with access_token in the response.
{access_token: {{access_token}}}
Example:
var access_token = '';
function getAccessToken(){
$.post('https://www.googleapis.com/oauth2/v3/token', {
client_id: {{client_id}},
client_secret: {{client_secret}},
grant_type: 'refresh_token',
refresh_token: {{refresh_token}}
}, function (data, status) {
if (status === 'success') {
access_token = data.access_token;
// Do something eith the access_token
}
else {
console.error(status);
}
});
}
Check Token validity:
Send a POST request to,
https://www.googleapis.com/oauth2/v1/tokeninfo?access_token={{access_token}}
Example:
function checkValidity() {
$.post('https://www.googleapis.com/oauth2/v1/tokeninfo', {
access_token:{{access_token}}
}).done(function (data, status) {
if (status === 'success') {
console.debug(data.expires_in);
var check = false;
check = data.hasOwnProperty('expires_in');
if (check) {
// Token is valid
}
if (!check) {
getAccessToken();
}
}
else {
console.debug(status);
}
})
.fail(function (data) {
console.error(data);
getAccessToken();
});
}
Step 3: Fetch Data
Embed API:
The GA Embed API is a JavaScript library that allows you to easily create and embed your GA dashboard on your website in a matter of minutes.
Refer to https://developers.google.com/analytics/devguides/reporting/embed/v1/getting-started.
Query Explorer:
Visit Embed API Query Explorer and authorize
https://ga-dev-tools.appspot.com/query-explorer/
Select the view for which you want to fetch the data.
Select the required metrics and dimensions.
Example:
Get Country Data (I want to know the number of users accessing my website from each country).
To get that data, select the metrics as 'users' and the dimensions as 'country'.
Click on Run Query.
You will find the analytics data for the query displayed in a table.
Copy the API Query URI. And add access_token={{access_token}} to the URI.
Example:
https://www.googleapis.com/analytics/v3/data/ga?ids={{ids}}&start-date=2015-07-01&end-date=today&metrics=ga%3Ausers&dimensions=ga%3Acountry&access_token={{access_token}}
Send POST request to the URIs to get the data in your browser.
Example:
function gaGetCountry() {
$.get('https://www.googleapis.com/analytics/v3/data/ga?' +
'ids={{ids}}' +
'start-date=2015-07-01&' +
'end-date=today&' +
'metrics=ga%3Ausers&' +
'dimensions=ga%3Acountry&' +
'sort=ga%3Ausers&' +
'filters=ga%3Ausers%3E10&' +
'max-results=50' +
'&access_token=' + {{access_token}},
function (data, status) {
if (status === 'success') {
// Display the Data
drawRegionsMap(data.rows);
} else {
console.debug(status);
}
});
}
Step 4: Display Data
Now we have gathered the data. Finally we have to display them on our website.
"Display live data on your site" is the title of Google Charts. And that is what we are going to do.
Refer to https://developers.google.com/chart/.
The following example will draw a GeoChart in the div with id='countryChart'.
// Draw country chart
function drawRegionsMap(data) {
var head = data[0];
head[0] = 'Country';
head[1] = 'Users';
for (var i = 1; i < data.length; i++) {
var d = data[i];
d[1] = Number(d[1]);
}
var chartData = google.visualization.arrayToDataTable(data);
var options = {
title: 'My Website is viewed from,',
domain: '{{Country Code eg: IN for India}}',
tooltip: {
textStyle: {
color: 'navy'
},
showColorCode: true
},
legend: {
textStyle: {
color: 'navy',
fontSize: 12
}
},
colorAxis: {
colors: ['#00FFFF', '#0000FF']
}
};
var chart = new google.visualization.GeoChart(document.getElementById('countryChart'));
chart.draw(chartData, options);
}
Refer to https://newtonjoshua.com to view the above example in action.
I'd recommend to use the new Google APIs Client Library for .NET (currently in beta). Information about the Analytics API can be found here. Note that the Client Library for .NET (google-api-dotnet-client) supersedes the .NET library for the Google Data API (google-gdata).
Unfortunately, there is no sample code available yet from Google (see this issue) but this question on SO should help.
If you don't want to login every time you access Analytics data, you can use OAuth 2.0 authorization with offline access. You have to grant initial access to your web application, though. This requires you to login once but you can use a refresh token later on.
To date, the easiest solution is to create a report of your Google Analytics data in Google Data Studio (free, native connector to GA), and share that report to embed in an <iframe>
See details on https://support.google.com/datastudio/answer/7450249?hl=en
You get
flexible vizualisation
security and control on the data being shared
0 code nor maintenance
result is being cached for better performance
I spent a couple of days trawling the Internet to get some sample ASP.NET code with no luck. I used Koffe14's method for authentication, and also Linda Lawton's excellent ASP.NET analytics example.
I've posted the code on my website. It's not MVC, but it might help other people who need to get data from Google analytics into an ASP.NET web page using the v3 Google API.
Check out embeddedanalytics.com (disclaimer - I work with them).
This is a simple yet powerful solution geared for people that don't want deal with learning the GA API and then having to link it to visualization (e.g. charts/graphs).
Basically define your charts and embed a snippet of code where you want the chart to show. We also support mechanisms so that it is easy to integrate into a custom built CMS or other web portal.