login with google stopped working cookiepolicy is a required field - javascript

I'm using google sign in js in my web application, I was using these 3 statements in meta data
<meta name="google-signin-clientid" content="1111111111111111111.apps.googleusercontent.com" />
<meta name="google-signin-scope" content=https://www.googleapis.com/auth/plus.login https://www.googleapis.com/auth/plus.profile.emails.read" />
<meta name="google-signin-cookiepolicy" content="single_host_origin" />
suddenly It stopped working and give me this error cookiepolicy is a required field
The idea that the site was working without problems!

The solution that google no more recognize cookiepolicy in meta data. you must put it in the params of the gapi.auth.signIn
var additionalParams = {
'callback': signinCallback,
'cookiepolicy' : 'single_host_origin'
};
gapi.auth.signIn(additionalParams);

Related

using google place API for autocomplete without callback function in vuejs

I'm implementing an autocomplete input box using the Google place API. I understand that the API URL requires a callback function for initializing the map.
I'm referencing the place API URL in index.html header:
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />>
<script async src="https://maps.googleapis.com/maps/api/js?key=[KEY]&libraries=places"></script>
<title>DocBay</title>
</head>
and initializing the API in the component onMount Hook
onMounted(() => {
autocomplete.value = new google.maps.places.Autocomplete(document.getElementById('autocomplete'), {
componentRestrictions: { country: ['us'] },
fields: ['address_components'],
types: ['address']
})
autocomplete.value.addListener('place_changed', fillInAddress)
})
This results in this error:
Loading the Google Maps JavaScript API without a callback is not supported
since I've to include the Google Maps Places API in the of my HTML and can't define the callback function in there, how do I get rid of this error?
According to the docs including a callback is mandatory - you can change your script tag to have the global function name like this:
<script>
window.initMap = function () {
...
};
</script>
<script async src=".../api/js?key=[KEY]&libraries=places&callback=initMap"></script> –

nopcommerce 3.80 ender-blocking JavaScript and CSS in above-the-fold content

I'm using the "async" property of Html.AppendScriptParts method in nopcommerce 3.80 like that Html.AppendScriptParts("~/Scripts/jquery-1.10.2.min.js",false,true);
The google PageSpeed Tools give it a high score which is i expected:
But it seems effect to the other functionalities of website (nivo slider, ajax filter which comes from Seven Spikes plugin,... )
I'm not using js and css bundling feature in nopcommerce.
Can you guys please tell me what is the best solution in my scenarior now ?
Any helps are very appriciated.
Thank you so much.
Here is my code of _Root.head.cshtml:
#using Nop.Core.Domain.Common;
#using Nop.Core.Domain.Seo
#using Nop.Core.Infrastructure;
#{
var displayMiniProfiler = EngineContext.Current.Resolve<Nop.Core.Domain.StoreInformationSettings>().DisplayMiniProfilerInPublicStore;
Html.AppendScriptParts("~/Scripts/public.ajaxcart.js");
Html.AppendScriptParts("~/Scripts/public.common.js");
Html.AppendScriptParts("~/Scripts/jquery-migrate-1.2.1.min.js");
Html.AppendScriptParts("~/Scripts/jquery-ui-1.10.3.custom.min.js");
Html.AppendScriptParts("~/Scripts/jquery.validate.unobtrusive.min.js");
Html.AppendScriptParts("~/Scripts/jquery.validate.min.js");
Html.AppendScriptParts("~/Scripts/jquery-1.10.2.min.js",false,true);
var commonSettings = EngineContext.Current.Resolve<CommonSettings>();
if (commonSettings.RenderXuaCompatible)
{
Html.AppendHeadCustomParts(string.Format("<meta http-equiv=\"X-UA-Compatible\" content=\"{0}\"/>", commonSettings.XuaCompatibleValue));
}
var seoSettings = EngineContext.Current.Resolve<SeoSettings>();
if (!string.IsNullOrEmpty(seoSettings.CustomHeadTags))
{
Html.AppendHeadCustomParts(seoSettings.CustomHeadTags);
}
}
<!DOCTYPE html>
<html#(this.ShouldUseRtlTheme() ? Html.Raw(" dir=\"rtl\"") : null) #Html.NopPageCssClasses()>
<head>
<title>#Html.NopTitle()</title>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8" />
<meta name="description" content="#(Html.NopMetaDescription())" />
<meta name="keywords" content="#(Html.NopMetaKeywords())" />
<meta name="generator" content="nopCommerce" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
#Html.NopHeadCustom()
#Html.Partial("Head")
#Html.Widget("head_html_tag")
#Html.NopCssFiles(this.Url, ResourceLocation.Head)
#Html.NopScripts(this.Url, ResourceLocation.Head)
#Html.NopCanonicalUrls()
#Html.Action("RssHeaderLink", "News")
#Html.Action("RssHeaderLink", "Blog")
#Html.Action("Favicon", "Common")
#if (displayMiniProfiler)
{
#StackExchange.Profiling.MiniProfiler.RenderIncludes()
}
</head>
<body>
#RenderBody()
#Html.NopCssFiles(this.Url, ResourceLocation.Foot)
#Html.NopScripts(this.Url, ResourceLocation.Foot)
</body>
</html>
First, it's not related to Seven Spikes plugins. This issue is because of async behavior. When you make jquery file to an async, it means application will not wait to load that file and going to load next js file. But other js file are depended on first main file, and that's way you're getting errors.
Let's understand it with current scenario, the default code is:
Html.AppendScriptParts("~/Scripts/public.ajaxcart.js");
Html.AppendScriptParts("~/Scripts/public.common.js");
Html.AppendScriptParts("~/Scripts/jquery-migrate-1.2.1.min.js");
Html.AppendScriptParts("~/Scripts/jquery-ui-1.10.3.custom.min.js");
Html.AppendScriptParts("~/Scripts/jquery.validate.unobtrusive.min.js");
Html.AppendScriptParts("~/Scripts/jquery.validate.min.js");
Html.AppendScriptParts("~/Scripts/jquery-1.10.2.min.js");
In this case the order of js files are:
Now load jquery min js file asynchronously.
Html.AppendScriptParts("~/Scripts/jquery-1.10.2.min.js", false, true);
And check console:
With this change you will get an error(s).
To resolve this issue, you have to load js min file in one particular order on basis of dependency.
Side Note: this issue is with default code too!! I've tested with nopCommerce 3.80 and 3.90

esri new Portal(myUrl) returns a dojo error: CancelError "All requests canceled"

Esri ArcGis Javascript API 3.18
I'm issuing a new Portal("myUrl") command and getting back an error.
It's a dojo error, "CancelError" "All requests canceled."
It's a new https installation of the api on a new federated portal.
I have code that works when calling the esri portal so I think my code is probably correct. That would leave a installation configuration problem.
So far, I'm stumped.
My test web site is on the same webserver as the portal.
Here's a link to the plunkr with working code:
https://plnkr.co/edit/RFlStZbHA5axAD3J2KQt?p=preview
Any ideas?
Here's the code:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
<title>New Portal</title>
<link rel="stylesheet" href="http://js.arcgis.com/3.18/esri/css/esri.css">
</head>
<body>
<div id='mainContent'>
<input id='message' value='initial value' />
</div>
<script>var dojoConfig = { parseOnLoad: true };</script>
<script src="https://js.arcgis.com/3.18/"></script>
<script>
dojo.require('esri.arcgis.Portal');
dojo.require("esri.IdentityManager");
dojo.require("dojox.lang.aspect");
var portalUrl = 'https://www.arcgis.com';
var portal = null;
var message = document.getElementById('message');
var init = function() {
message.setAttribute('value', 'pre new portal');
portal = new esri.arcgis.Portal(portalUrl);
message.setAttribute('value', 'past new portal');
portal.on("error", function(errorMsg) {
message.setAttribute('value', 'error=' | errorMsg.message);
});
portal.on("load", function (data) {
message.setAttribute('value', 'success');
});
};
message.setAttribute('value', 'pre init');
dojo.ready(init);
</script>
</body>
</html>
Changing the portal settings per this document made the api work for maps.
All the examples online show using this:
var portal = new Portal('www.myurl.com');
I found that using this worked:
var portal = new Portal('www.myurl.com/arcgis');
Basically, since some of this may be due to configuration settings I haven't seen, I would recommend determining what url gets called by the Portal object's internal code, and then trying increasingly long fragments of the initial url until you get success.

Can I pass some parameters with fb.api call in open graph

Please see these below code which I am using for Facebook Open Graph:
<meta property="fb:app_id" content="XXXXX" />
<meta property="og:type" content="collection" />
<meta property="og:url" content="http://XXXXXXXXXXXXX/" />
<meta property="og:title" content="" />
<meta property="og:image" content="http://XXXXXXXXXXXXXXXXXXXXXXXXXX.jpeg"/>
<script type="text/javascript">
function postCook() {
var parameters = new Array();
parameters["og:title"] = "some_text";
FB.api(
'me/<namespace>:<wwwww>',
'post', {
collection: 'http://XXXXXXXXXXXXXXXXX/'
},
function(response) {
//alert(response.responseText);
console.log(response);
if (!response || response.error) {
alert('Error occured');
} else {
alert('Other22 was successful! Action ID: ' + response.id);
}
});
}
</script>
Here I want to pass og:title and some other also as parameter instead of using in the meta tag. Is there any way to pass some more parameters in FB.api?
Thanks.
While I could be wrong about this (as Facebook shifts their API around mercilessly), they don't allow you to pass in any custom tag information, possibly as it could be used to misrepresent information.
Instead, once the publish action hits Facebook, Facebook will immediatelly scrape the url passed in, and grab all the meta data it can find, prioritising any open graph tags first before falling back to other traditional methods of meta information retrieval (title tags, scraping the body text, etc).
One possible "workaround" would be to pass an "echo" url to Facebook instead of the target url itself. This relies on you using a server-side solution, however, as I don't believe you can do this with the JS SDK.
i.e. Instead of passing http://www.foobar.com to facebook, pass http://www.barbaz.com/echo.php?title=your%20custom%2otitle&description=etcetc&url=myurl
Tailor the url parameters as necessary, and they will be readable in echo.php through $_GET. echo.php would then contain the open graph tags to be read by Facebook, and then redirect the user via javascript to the proper URL. Facebook's scraper won't follow the javascript redirect.
echo.php:
<html>
<head>
<meta property="og:title" value="<?=$_GET['title']?>">
</head>
<body>
<script>
window.location.href = '<?=$_GET['url']?>';
</script>
</body>
</html>
Alternatively, you could check for facebook's user-agent string at the top of echo.php and redirect any non-hits to the proper url using header();, and only render the bounce page for the facebook bot.
Here I want to pass og:title and some other also as parameter instead of using in the meta tag.
This is not how Open Graph objects work.
The URL identifies the object, and any data has to be in the HTML code that this URL delivers.

Facebook app submit action type

I've been reading about this on StackOverflow and facebook doc, yet I dont seem to be able to submit my action type.
I have the following code from the FB doc
<script type="text/javascript">
console.log("Function begins");
function postForm()
{
console.log(FB);
FB.api(
'/me/concoursvelirium:form',
'post',
{ recipe: 'http://concours.gestev.com/fbvel2012/form.php' },
function(response) {
console.log("Stay");
if (!response || response.error) {
console.log("error: " + response);
} else {
console.log('Cook was successful! Action ID: ' + response.id);
}
});
}
</script>
I have added my values from FB autogenerated values, it now looks like this:
<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# concoursvelirium: http://ogp.me/ns/fb/concoursvelirium#">
<meta property="fb:app_id" content="194081877384051" />
<meta property="og:type" content="concoursvelirium:form" />
<meta property="og:title" content="Concours Vélirium" />
<meta property="og:image" content="http://www.velirium.com/++resource++snowjamboree.theme.images/velirium-avatar-128x128.png" />
<meta property="og:description" content="Concours Vidéotron au Vélirium" />
<meta property="og:url" content="http://concours.gestev.com/fbvel2012/form.php" />
And yet I see no output in the console past the console.log(FB);
I have no idea what I'm doing wrong. I'm also getting the Unsafe JavaScript attempt to access frame with URL error, but I have read here that I should just ignore it.
Ty, Axel
I think you have two problems here:
og:url should have a valid url.
og:image can't refer to an image hosted on Facebook's servers.
I finally found the issue, and it's not that hard, provided you don't read too much facebook's doc. Even tough they give you a POST command and a JS code to validate your action, I wasn't able to validate mine. Tough there's an easier way to submit actions for approval:
Head to your app settings In the open graph section go to dashboard
Next to the action type you want to submit click the "get code"
link(remember.. action type, not the object type "get code" button)
Copy the code inside the "Create a new Complete action:" box in a
linux terminal If you got an output like: {"id":"[YOUR-ID-NUMBER]"}
congratulations, you can now submit your action!
GL HF everyone

Categories