I followed the steps from the webite below: https://developers.google.com/analytics/devguides/reporting/embed/v1/devguide#client-id
when I execute the code below I get the error message in my console
I have maintained "localhost" in my Javascript domain when I created my client id.
Can you pls advise? thanks
<!DOCTYPE html>
<html>
<head>
<title>Embed API Demo</title>
</head>
<body>
<!-- Step 1: Create the containing elements. -->
<section id="auth-button"></section>
<section id="view-selector"></section>
<section id="timeline"></section>
<!-- Step 2: Load the library. -->
<script>
(function(w,d,s,g,js,fjs){
g=w.gapi||(w.gapi={});g.analytics={q:[],ready:function(cb){this.q.push(cb)}};
js=d.createElement(s);fjs=d.getElementsByTagName(s)[0];
js.src='https://apis.google.com/js/platform.js';
fjs.parentNode.insertBefore(js,fjs);js.onload=function(){g.load('analytics')};
}(window,document,'script'));
</script>
<script>
gapi.analytics.ready(function() {
// Step 3: Authorize the user.
var CLIENT_ID = 'XXXXXXXX';
gapi.analytics.auth.authorize({
container: 'auth-button',
clientid: CLIENT_ID,
});
// Step 4: Create the view selector.
var viewSelector = new gapi.analytics.ViewSelector({
container: 'view-selector'
});
// Step 5: Create the timeline chart.
var timeline = new gapi.analytics.googleCharts.DataChart({
reportType: 'ga',
query: {
'dimensions': 'ga:date',
'metrics': 'ga:sessions',
'start-date': '30daysAgo',
'end-date': 'yesterday',
},
chart: {
type: 'LINE',
container: 'timeline'
}
});
// Step 6: Hook up the components to work together.
gapi.analytics.auth.on('success', function(response) {
viewSelector.execute();
});
viewSelector.on('change', function(ids) {
var newIds = {
query: {
ids: ids
}
}
timeline.set(newIds).execute();
});
});
</script>
</body>
</html>
Object {error: Object}
error: Object
errors: Array[1]
0: Object
message: "immediate_failed"
reason: "invalidParameter"
__proto__: Object
length: 1
__proto__: Array[0]
message: "immediate_failed"
__proto__: Object
__proto__: Object
cb=gapi.loaded_0:433
_.nH cb=gapi.loaded_0:433
_.du.Vh cb=gapi.loaded_0:459
YP.Ka cb=gapi.loaded_0:466
_.k.iu cb=gapi.loaded_0:291
ix cb=gapi.loaded_0:431
(anonymous function) cb=gapi.loaded_0:433
h.BE cb=gapi.loaded_0:137
Wq cb=gapi.loaded_0:140
_.C.ye cb=gapi.loaded_0:140
Ap
Something must be wrong with your server or your client ID origins.
Copying and pasting that code exactly into jsbin.com (changing only the client ID) I'm able to get this working. All I had to do was add http://run.jsbin.com to the list of approved origins for the client ID I provided.
Here's a working example:
http://jsbin.com/batexelohuve/1/edit
If you add http://run.jsbin.com to your client ID's origins list and it works in jsbin, then it means something is wrong with your setup and not the code you provided.
Once your Client ID is generated, copy and paste it into your code and save your code as an .html instead of .php. For localhost, usually it is enough to just write it as http://localhost. Unless you specified a certain port so you might want to change it. Otherwise the usual one will do. To know which port your computer is listening to, access your httpd.conf file and find the listen command.
To add on, please don't forget to put the `` sign when you write the ID.
Hope that helps to solve your problem!
I think you need to import JavaScript API in your code. Try this:
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
you have to specify Origin uri and Authorized uri properly, for example if your running demo in http://localhost:8080 then you have add this url in both Origin URI and Authorized URI then you will get an access button in browser.
Related
Since today, our application that uses the linkedin javascript SDK to authenticate users stopped working.
We realized that the call to https://platform.linkedin.com/in.js now redirects to https://platform.linkedin.com/xdoor/scripts/in.js.
Consequently, calls to IN.User.Authorize(callbackFunction) successfully opens the authentication dialog window but the callback is never fired anymore.
Also, in another part of our application we are using the IN.UI.Authorize.place().onWindowRemove.subscribe(callbackFunction) to track dialog closes. This feature has also stopped wording and now opens a new window with the url invalid:// and the console throws this error:
jSecure Error: URL should be absolute with allowed schemas, relative, a hash fragment or query string. TODO?client_id=XXXX&type=user-agent in.js:7
jSecure Error: URL should be absolute with allowed schemas, relative, a hash fragment or query string. invalid://?xdOrigin=https%3A%2F%2FXXX-XXX&xdChannel=XXXX&xd_origin_host=https%3A%2F%2FXXXX.XXXX in.js:7
jSecure Error: URL should be absolute with allowed schemas, relative, a hash fragment or query string. TODO?client_id=XXXX&type=user-agent
Do you have an idea on why this stopped working ?
EDIT: Bug reappeared as of 2019 01 28.
Try replacing window.IN.User.authorize with window.IN.user.authorize
window.IN.user.authorize is returning a promise and success callback is executed post login success. Its weird but working if we replace User with user
window.IN.user.authorize().then(function(data){
console.log("Logged in successfully .");
window.IN.API.Raw("/people/~:(id,first-name,last-name,formatted-name,headline,location,industry,current-share,num-connections,num-connections-capped,summary,specialties,positions,picture-url,site-standard-profile-request,api-standard-profile-request,public-profile-url,email-address)").method("GET").body().result(function (oData) {
that.props.dispatch(userCreation(linkedInProfileFormat(oData)));
});
},function(error){
alert("Linkedin failed because of harshita !");
});
Try this code. I did some changes and working fine for me. need to replace window.IN.User.authorize() TO window.IN.user.authorize()
<script type="text/javascript" src="//platform.linkedin.com/in.js">
api_key: XXXXXXXXX
authorize: true
</script>
<script type="text/javascript">
function liAuth(){
window.IN.user.authorize().then(function(){
getProfileData();
});
}
function setLoginBadge(profile) {
if (!profile) {
profHTML = "<p>You are not logged in</p>";
}
document.getElementById("given_name").value = profile.firstName;
document.getElementById("family_name").value = profile.lastName;
document.getElementById("email").value = profile.emailAddress;
document.getElementById("verifyOauthRequestLinkedIn").submit();
}
function onError(error) {
console.log(error);
}
function getProfileData() {
IN.API.Profile("me")
.fields(["id", "firstName", "lastName", "pictureUrl", "publicProfileUrl","email-address","headline"])
.result(function(result) {
setLoginBadge(result.values[0]);
})
.error(onError);
}
</script>
<img onclick="liAuth()" src="/images/linkedIn.png">
Since today, our application that uses the linkedin javascript SDK to authenticate users stopped working.
We realized that the call to https://platform.linkedin.com/in.js now redirects to https://platform.linkedin.com/xdoor/scripts/in.js.
Consequently, calls to IN.User.Authorize(callbackFunction) successfully opens the authentication dialog window but the callback is never fired anymore.
Also, in another part of our application we are using the IN.UI.Authorize.place().onWindowRemove.subscribe(callbackFunction) to track dialog closes. This feature has also stopped wording and now opens a new window with the url invalid:// and the console throws this error:
jSecure Error: URL should be absolute with allowed schemas, relative, a hash fragment or query string. TODO?client_id=XXXX&type=user-agent in.js:7
jSecure Error: URL should be absolute with allowed schemas, relative, a hash fragment or query string. invalid://?xdOrigin=https%3A%2F%2FXXX-XXX&xdChannel=XXXX&xd_origin_host=https%3A%2F%2FXXXX.XXXX in.js:7
jSecure Error: URL should be absolute with allowed schemas, relative, a hash fragment or query string. TODO?client_id=XXXX&type=user-agent
Do you have an idea on why this stopped working ?
EDIT: Bug reappeared as of 2019 01 28.
Try replacing window.IN.User.authorize with window.IN.user.authorize
window.IN.user.authorize is returning a promise and success callback is executed post login success. Its weird but working if we replace User with user
window.IN.user.authorize().then(function(data){
console.log("Logged in successfully .");
window.IN.API.Raw("/people/~:(id,first-name,last-name,formatted-name,headline,location,industry,current-share,num-connections,num-connections-capped,summary,specialties,positions,picture-url,site-standard-profile-request,api-standard-profile-request,public-profile-url,email-address)").method("GET").body().result(function (oData) {
that.props.dispatch(userCreation(linkedInProfileFormat(oData)));
});
},function(error){
alert("Linkedin failed because of harshita !");
});
Try this code. I did some changes and working fine for me. need to replace window.IN.User.authorize() TO window.IN.user.authorize()
<script type="text/javascript" src="//platform.linkedin.com/in.js">
api_key: XXXXXXXXX
authorize: true
</script>
<script type="text/javascript">
function liAuth(){
window.IN.user.authorize().then(function(){
getProfileData();
});
}
function setLoginBadge(profile) {
if (!profile) {
profHTML = "<p>You are not logged in</p>";
}
document.getElementById("given_name").value = profile.firstName;
document.getElementById("family_name").value = profile.lastName;
document.getElementById("email").value = profile.emailAddress;
document.getElementById("verifyOauthRequestLinkedIn").submit();
}
function onError(error) {
console.log(error);
}
function getProfileData() {
IN.API.Profile("me")
.fields(["id", "firstName", "lastName", "pictureUrl", "publicProfileUrl","email-address","headline"])
.result(function(result) {
setLoginBadge(result.values[0]);
})
.error(onError);
}
</script>
<img onclick="liAuth()" src="/images/linkedIn.png">
I'm trying to obtain an access token for Google Analytics API.
After creating a project in the developers console and granting acess to the Analytics API I reached the "create credentials" step and created new credentials for a web application.
On these credentials I set the Javascript origins to http://localhost:8080 and also http://localhost:5000. Then I set authorized redirect URIs to http://localhost:8080/oauth2callback as well as http://localhost:5000/oauth2callback.
Then, when I attempt to authorize I'm asked to enter my clientId and secret, which I do, then new browser tab opens and I'm asked to choose an account and then after that select "Allow".
Then, when I click "Allow" I'm taken to this page:
I also tried creating credentials for an application type of "other" but the exact same thing happened.
I've found numerous posts on stack overflow about this but none of the answers were able to solve my problem. Not sure which other info to provide. I even tried clearing history and using different browsers but with no success.
How can I give my application authorization to Google Analytics using OAuth?
This issue has nothing to do with localhost or your redirect uris or JavaScript origins. The issue is that your code is not set up to handle the call back from the authentication server. It would have helped if you had posted your code so it will be hard to know what the problem might be.
You should check the official example here Hello analytics js tutorial
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello Analytics Reporting API V4</title>
<meta name="google-signin-client_id" content="<REPLACE_WITH_CLIENT_ID>">
<meta name="google-signin-scope" content="https://www.googleapis.com/auth/analytics.readonly">
</head>
<body>
<h1>Hello Analytics Reporting API V4</h1>
<!-- The Sign-in button. This will run `queryReports()` on success. -->
<p class="g-signin2" data-onsuccess="queryReports"></p>
<!-- The API response will be printed here. -->
<textarea cols="80" rows="20" id="query-output"></textarea>
<script>
// Replace with your view ID.
var VIEW_ID = '<REPLACE_WITH_VIEW_ID>';
// Query the API and print the results to the page.
function queryReports() {
gapi.client.request({
path: '/v4/reports:batchGet',
root: 'https://analyticsreporting.googleapis.com/',
method: 'POST',
body: {
reportRequests: [
{
viewId: VIEW_ID,
dateRanges: [
{
startDate: '7daysAgo',
endDate: 'today'
}
],
metrics: [
{
expression: 'ga:sessions'
}
]
}
]
}
}).then(displayResults, console.error.bind(console));
}
function displayResults(response) {
var formattedJson = JSON.stringify(response.result, null, 2);
document.getElementById('query-output').value = formattedJson;
}
</script>
<!-- Load the JavaScript API client and Sign-in library. -->
<script src="https://apis.google.com/js/client:platform.js"></script>
</body>
</html>
This is how i construct it:
var fs = require("fs");
var jsdom = require("jsdom");
var htmlSource = fs.readFileSync("./test.html", "utf8");
var doc = jsdom.jsdom(htmlSource, {
features: {
FetchExternalResources : ['script'],
ProcessExternalResources : ['script'],
MutationEvents : '2.0'
},
parsingMode: "auto",
created: function (error, window) {
console.log(window.b); // always undefined
}
});
jsdom.jQueryify(doc.defaultView, 'https://code.jquery.com/jquery-2.1.3.min.js', function() {
console.log( doc.defaultView.b ); // undefined with local jquery in html
});
the html:
<!DOCTYPE HTML>
<html>
<head></head>
<body>
<script src="./js/lib/vendor/jquery.js"></script>
<!-- <script src="http://code.jquery.com/jquery.js"></script> -->
<script type="text/javascript">
var a = $("body"); // script crashes here
var b = "b";
</script>
</body>
</html>
As soon as i replace the jquery path in the html with a http source it works. The local path is perfectly relative to the working dir of the shell / actual node script. To be honest i don't even know why i need jQueryify, but without it the window never has jQuery and even with it, it still needs the http source inside the html document.
You're not telling jsdom where the base of your website lies. It has no idea how to resolve the (relative) path you give it (and tries to resolve from the default about:blank, which just doesn't work). This also the reason why it works with an absolute (http) URL, it doesn't need to know where to resolve from since it's absolute.
You'll need to provide the url option in your initialization to give it the base url (which should look like file:///path/to/your/file).
jQuerify just inserts a script tag with the path you give it - when you get the reference in the html working, you don't need it.
I found out. I'll mark Sebmasters answer as accepted because it solved one of two problems. The other cause was that I didn't properly wait for the load event, thus the code beyond the external scripts wasn't parsed yet.
What i needed to do was after the jsdom() call add a load listener to doc.defaultView.
The reason it worked when using jQuerify was simply because it created enough of a timeout for the embedded script to load.
I had the same issue when full relative path of the jquery library to the jQueryify function. and I solved this problem by providing the full path instead.
const jsdom = require('node-jsdom')
const jqueryPath = __dirname + '/node_modules/jquery/dist/jquery.js'
window = jsdom.jsdom().parentWindow
jsdom.jQueryify(window, jqueryPath, function() {
window.$('body').append('<div class="testing">Hello World, It works')
console.log(window.$('.testing').text())
})
I have run into an issue recently where we have been told to remove the hash symbols from our Backbone applications. This presents two problems: (a) the ASP.NET routes need to handle any remotely linked URL (currently this is no problem with the hash symbols) so that we're not hitting a 404 error and (b) the proper route needs to be preserved and passed on to the client side (Backbone) application. We're currently using ASP.NET MVC5 and Web API 2 for our backend.
The setup
For an example (and test project), I've created a test project with Backbone - a simple C# ASP.NET MVC5 Web Application. It is pretty simple (here is a copy of the index.cshtml file, please ignore what is commented out as they'll be explained next):
<script type="text/javascript">
$(document).ready(function(event) {
Backbone.history.start({
//pushState: true,
//root: "/Home/Index/"
});
var Route = Backbone.Router.extend({
routes: {
"test/:id": function (event) {
$(".row").html("Hello, " + event);
},
"help": function () {
alert("help!");
}
}
});
var appRouter = new Route();
//appRouter.navigate("/test/sometext", { trigger: true });
//appRouter.navigate("/help", { trigger: true });
});
</script>
<div class="jumbotron">
<h3>Backbone PushState Test</h3>
</div>
<div class="row"></div>
Now, without pushState enabled I have no issue remote linking to this route, ie http://localhost/Home/Index#test/sometext
The result of which is that the div with a class of .row is now "Hello, sometext".
The problem
Enabling pushState will allow us to replace that pesky # in the URL with a /, ie: http://localhost/Home/Index/test/sometext. We can use the Backbone method of router.navigate("url", true); (as well as other methods) to use adjust the URL manually. However, this does not solve the problem of remote linking. So, when trying to access http://localhost/Home/Index/test/sample you just end up with the typical 404.0 error served by IIS. so, I assume that it is handled in in the RouteConfig.cs file - inside, I add a "CatchAll" route:
routes.MapRoute(
name: "CatchAll",
url: "{*clientRoute}",
defaults: new { controller = "Home", action = "Index" }
);
I also uncomment out the pushState and root attributes in the Backbone.history.start(); method:
Backbone.history.start({
pushState: true,
root: "/Home/Index/"
});
var Route = Backbone.Router.extend({
routes: {
"test/:id": function (event) {
$(".row").html("Hello, " + event);
},
"help": function () {
alert("help!");
}
}
});
var appRouter = new Route();
//appRouter.navigate("/test/sometext", { trigger: true });
//appRouter.navigate("/help", { trigger: true });
This allows me to at least let get past the 404.0 page when linking to these routes - which is good. However, none of the routes actually "trigger" when I head to them. After attempting to debug them in Chrome, Firefox, and IE11 I notice that none of the events fire. However, if I manually navigate to them using appRouter.navigate("/help", { trigger: true }); the routes are caught and events fired.
I'm at a loss at this point as to where I should start troubleshooting next. I've placed my Javascript inside of the $(document).ready() event as well as the window.onload event also (as well as not inside of an event); none of these correct the issue. Can anyone offer advice on where to look next?
You simply have to move Backbone.history.start after the "new Route" line.
var Route = Backbone.Router.extend({
routes: {
"test/:id": function (event) {
$(".row").html("Hello, " + event);
},
"help": function () {
alert("help!");
}
}
});
var appRouter = new Route();
Backbone.history.start({
pushState: true,
root: "/Home/Index/"
});
Make sure you go to ".../Home/Index/help". If it doesn't work, try temporarily removing the root and go to ".../help" to see if the root is the problem.
If you still have troubles, set a js breakpoint in Backbone.History.loadUrl on the "return" line. It is called from the final line of History.start to execute the current browser url on page load. "this.matchRoot()" must pass then, "fragment" is matched against each "route" or regexp string in "this.handlers". You can see why or why not the browser url matches the route regexps.
To set to the js breakpoint, press F12 in the browser to open the dev console, press Ctrl-O or Ctrl-P to open a js file, then type the name of the backbone js file. Then search for "loadUrl:". You can also search for "Router =" to find the start of the router class definition (same as for "View =" and "Model =" to find the backbone view/model implementation code). I find it quite useful to look at the backbone code when I have a question like this. It is surprisingly readable and what better place to get answers?
If your js files happen to be minified/compressed, preferably turn this off. Alternately you can try the browser unminify option. In Chrome this is the "{}" button or "pretty print". Then the js code is not all on 1 line and you can set breakpoints. But the function and variable names may still be mangled.
I have solved my own problem using what feels to be "hackish", via the following. If anyone can submit a better response it would be appreciated!
My Solution:
I globally override the default Backbone.Router.intilaize method (it is empty) with the following:
$(document).ready(function (event) {
var _root = "/Home/Index/";
_.extend(Backbone.Router.prototype, {
initialize: function () {
/* check for route & navigate to it */
var pathName = window.location.pathname;
var route = pathName.split(_root)[1];
if (route != undefined && route != "") {
route = "/" + route;
this.navigate("", { trigger: false });
this.navigate(route, { trigger: true });
}
}
});
});