I've implemented the Google one tap signin for web using the documentation here, and it works fine on desktop Chrome. However, it doesn't show up at all on iOS Chrome (verison 87) even though I'm signed into Google and the domain is whitelisted.
How do I fix this?
function initialize_google()
{
google.accounts.id.initialize({
client_id: "255011972792-vfp8t4dc4js9perda7aq3f2s6ckjr4p8.apps.googleusercontent.com",
callback: function(credentials) { console.log(credentials) },
context: 'signin',
prompt_parent_id: "g_id_onload"
});
}
function loadScript(url, callback)
{
console.log('in loadScript with url:' + url);
// Adding the script tag to the head as suggested before
var head = document.getElementsByTagName('head')[0];
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = url;
// Then bind the event to the callback function.
// There are several events for cross browser compatibility.
script.onreadystatechange = callback;
script.onload = callback;
// Fire the loading
head.appendChild(script);
}
loadScript("https://accounts.google.com/gsi/client", initialize_google);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1>Demo</h1>
<div id='g_id_onload'></div>
Related
Is there a way I can read the content of webview after the page is loaded ?
The reason is redirect (like window.location.replace or window.location.href ) is not working in IOS in my case, works fine in Android.
https://docs.nativescript.org/cookbook/ui/web-view
I can access url, error. but how to access content ?
Narayan
I was only looking for IOS. I found the answer and sharing it here. For Android I would like to point some leads.
if (webView.ios) {
var webHeader = webView.ios.stringByEvaluatingJavaScriptFromString("document.head.innerHTML").trim();
console.log(webHeader);
var webBody = webView.ios.stringByEvaluatingJavaScriptFromString("document.body.innerHTML").trim();
console.log(webBody);
} else if (webView.android) {
webTitle = webView.android.getTitle(); //getting the title title
console.log(webTitle)
}
Some stack overflow lead for Android
You could look at this post. installs a library that allows communication with the webview through observables. Right now I'm using it myself and it's great for both iOS and Android
1- install:
tns plugin add nativescript-webview-interface
2- in web project copy plugin file
cp node_modules/nativescript-webview-interface/www/nativescript-webview-interface.js app/www/lib/
3- code:
xml:
<Page xmlns="http://schemas.nativescript.org/tns.xsd"
loaded="pageLoaded">
<web-view id="webView"></web-view>
</Page>
var webViewInterfaceModule = require('nativescript-webview-
interface');
var oWebViewInterface;
function pageLoaded(args){
page = args.object;
setupWebViewInterface(page)
}
function setupWebViewInterface(page){
var webView = page.getViewById('webView');
oWebViewInterface = new
webViewInterfaceModule.WebViewInterface(webView, '~/www/index.html');
}
function handleEventFromWebView(){
oWebViewInterface.on('anyEvent', function(eventData){
// perform action on event
});
}
function emitEventToWebView(){
oWebViewInterface.emit('anyEvent', eventData);
}
function callJSFunction(){
oWebViewInterface.callJSFunction('functionName', args, function(result){
});
}
web-view:
<html>
<head></head>
<body>
<script src="path/to/nativescript-webview-interface.js"></script>
<script src="path/to/your-custom-script.js"></script>
</body>
web-view js:
var oWebViewInterface = window.nsWebViewInterface;
// register listener for any event from native app
oWebViewInterface.on('anyEvent', function(eventData){
});
// emit event to native app
oWebViewInterface.emit('anyEvent', eventData);
// function which can be called by native app
window.functionCalledByNative = function(arg1, arg2){
// do any processing
return dataOrPromise;
}
More Info:
https://www.npmjs.com/package/nativescript-webview-interface
http://shripalsoni.com/blog/nativescript-webview-native-bi-directional-communication/
This will work for IOS
if (webview.ios){
url = args.url;
}
I would like to intercept location.reload(); via a Firefox API or by reading the JS on the page (remote & embedded) before it is loaded/executed or by any other means possible.
Example:
<head>
<script>
window.setTimeout(function() { location.reload(); }, 10000);
</script>
</head>
I have tried beforescriptexecute event listener (via GreaseMonkey & // #run-at document-start) but it is fired AFTER above is executed.
Update:
beforescriptexecute works nicely on REMOTE scripts since the event beforescriptexecute is fired before making the request (but then on the script src and not script content). It is different if the script is within normal script tag (and not remote), as per the example given. The beforescriptexecute fires and the script content can be rewritten but by then the window.setTimeout() has already fired and it is executing.
The beforescriptexecute should work. Its a non-greasemonkey event:
https://developer.mozilla.org/en-US/docs/Web/Events/beforescriptexecute
You can do stuff like this:
document.addEventListener("beforescriptexecute", function(e) {
src = e.target.src;
content = e.target.text;
if (src.search("i18n.js") > -1) {
// Stop original script
e.preventDefault();
e.stopPropagation();
window.jQuery(e.target).remove();
var script = document.createElement('script');
script.textContent = 'script you want';
(document.head || document.documentElement).appendChild(script);
script.onload = function() {
this.parentNode.removeChild(this);
}
}
I need to change language in yandex maps, but I don't know how do it!
Language in yandex maps can be changed static in script tag.
<script src="http://api-maps.yandex.ru/2.1/?lang=ru_RU&load=package.full"></script>
But I need to change language in running application.
For example, google maps have loader:
HTML Code
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
JavaScript Code
google.load('maps', '3.7', {
'other_params' : 'sensor=true&language=' + langCode,
'callback' : deviceReadyFunc
});
In yandex maps I have not found.
Solve this problem with localStorage and dynamic adding script-tag.
JavaScript Code
var script=document.createElement('script');
if (GLOBAL_LANGUAGE === 'en') {
script.src = 'http://api-maps.yandex.ru/2.1/?lang=en-US&load=package.full';
} else {
script.src = 'http://api-maps.yandex.ru/2.1/?lang=ru-RU&load=package.full';
}
document.getElementsByTagName('body')[0].appendChild(script);
script.onload = function() {
ymaps.ready(init);
};
In running application after change localStorage variable GLOBAL_LANGUAGE I call reloadApp() method:
reloadApp: function() {
location.href = '#home';
location.reload();
}
After this actions yandex maps change language in running application.
When I use the built-in Google+ sign-in button, everything works as expected. The OAuth call to Google is made in the popup, the user accepts or cancels, then the callback is called.
When I try to customize my button using the example gapi.signin.render method, the Google call is made but the callback is called immediately.
I am a server-side developer trying to provide a POC for the front-end developers. I only know enough Javascript to be dangerous. Can someone tell me why the gapi.signin.render method is making an asynchronous call to the authorization, which makes the callback get called before the user has clicked anything in the popup? In the alternative, please help me correct the code in the 2nd example below to effect the callback being called only after the user clicks Accept/Cancel in the OAuth Google window. In the second alternative, please tell me how I can change the text of the built-in Google+ sign-in button.
The code that works (built-in, non-customizable Google+ sign-in button):
<SCRIPT TYPE="text/javascript">
/**
* Asynchronously load the Google Javascript file.
*/
(
function() {
var po = document.createElement( 'script' );
po.type = 'text/javascript';
po.async = true;
po.src = 'https://apis.google.com/js/client:plusone.js?onload=googleLoginCallback';
var s = document.getElementsByTagName('script')[ 0 ];
s.parentNode.insertBefore( po, s );
}
)();
function googleLoginCallback( authResult ) {
alert( "googleLoginCallback(authResult): Inside." );
}
</SCRIPT>
<DIV ID="googleLoginButton" CLASS="show">
<DIV
CLASS="g-signin"
data-accesstype="online"
data-approvalprompt="auto"
data-callback="googleLoginCallback"
data-clientid="[Google Client Id].apps.googleusercontent.com"
data-cookiepolicy="single_host_origin"
data-height="tall"
data-requestvisibleactions="http://schemas.google.com/AddActivity"
data-scope="https://www.googleapis.com/auth/userinfo.email"
data-theme="dark"
data-width="standard">
</DIV>
</DIV>
The gapi.signin.render code that does not work:
<SCRIPT TYPE="text/javascript">
/**
* Asynchronously load the Google Javascript file.
*/
(
function() {
var po = document.createElement( 'script' );
po.type = 'text/javascript';
po.async = true;
po.src = 'https://apis.google.com/js/client:plusone.js?onload=myGoogleButtonRender';
var s = document.getElementsByTagName('script')[ 0 ];
s.parentNode.insertBefore( po, s );
}
)();
function myGoogleButtonRender( authResult ) {
gapi.signin.render( 'myGoogleButton', {
'accesstype': 'online',
'approvalprompt': 'auto',
'callback': 'googleLoginCallback',
'clientid': '[Google Client Id].apps.googleusercontent.com',
'cookiepolicy': 'single_host_origin',
'height': 'tall',
'requestvisibleactions': 'http://schemas.google.com/AddActivity',
'scope': 'https://www.googleapis.com/auth/userinfo.email',
'theme': 'dark',
'width': 'standard'
});
}
function googleLoginCallback( authResult ) {
alert( "googleLoginCallback(authResult): Inside." );
}
</SCRIPT>
<button id="myGoogleButton">Register with Google+</button>
I figured out why the code was not working for a custom button. I had the button defined within a Struts 2 form. Apparently, in lieu of the traditional Chain of Responsibility pattern, where the click event is handled by one processor, both the Struts form and the Google API were processing the click. So, what I thought was a failure of the Google gapi.signin.render call making an asynchronous call to the callback, it was the Struts form trying to submit.
To fix it, you can:
Move the button outside of the Struts form (not very elegant)
Add "onclick="return false;" clause to the button
<button id="myGoogleButton" onclick="return false;">Register with Google+</button>
Wrap the "button" in a DIV like:
<DIV ID="myGoogleButton">
<SPAN CLASS="zocial googleplus">Register with Google+</SPAN>
</DIV>
I hope this fixes someone else's problem. I spent 9 days trying to figure this out.
I'm trying to create a facebook service for Angular so I can more easily test code that needs to use the Facebook JS SDK and Graph API for stuff.
Here's what I have so far:
app.factory('facebook', function() {
return FB;
});
window.fbAsyncInit = function () {
FB.init({
appId: 'SOME_APP_ID_HERE', // App ID
status: true, // check login status
cookie: true, // enable cookies to allow the server to access the session
xfbml: true, // parse XFBML
oauth: true
});
};
// Load the SDK Asynchronously
(function (d) {
var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0];
if (d.getElementById(id)) { return; }
js = d.createElement('script'); js.id = id; js.async = true;
js.src = "//connect.facebook.net/en_US/all.js";
ref.parentNode.insertBefore(js, ref);
})(document);
Now, I know that the actual Facebook SDK part is working... but in my controller the reference is always null.
in my controller I just have something like this:
function FooCtrl($scope, facebook) {
facebook.getLoginStatus(function(response) {
if (response.status === 'connected') {
var uid = response.authResponse.userID;
var accessToken = response.authResponse.accessToken;
// do something
} else if (response.status === 'not_authorized') {
// the user is logged in to Facebook,
// but has not authenticated your app
} else {
// the user isn't logged in to Facebook.
}
});
}
Angular then gripes that it can't find a facebookProvider. Any ideas on how I can accomplish this?
Enclose your factory function with array brackets like below
app.factory('facebook', [function() {
return FB;
}]);
API docs are not clear enough. Point of having array brackets is that you can specify dependencies. It will be injected on creation of your service with AUTO.$inject. But since you don't have dependencies it will skip that task :)
Anyway, if you need dependencies you can request them like this
app.factory('facebook', ["$log", function($someCrazyLoggerService){
$someCrazyLoggerService.log("I'm Auto Injected crazy Logger");
}]);
you should take a look at this Facebook module I wrote.
First use the FacebookProvider on your app config call, something as FacebookProvider.init('yourFacebookAppIdHere');, you could also configure other settings too, and then on your controllers use the Facebook service and register to events and call methods asyncrhonously ;)
https://github.com/ciul/angularjs-facebook