I'm currently in the learning phase for how the Google JS Client SDK works, since my boss needs me to learn how to integrate a Sign In button to his site to enable people to Authenticate via Google. I am testing the code for the custom Sign In button, with a touch of added functionality (like a Sign Out button), and in the process I've practically copy/pasted the code from their website. Let me show you the code first and then explain the issue, so that you can understand where the code is failing:
<script src="https://apis.google.com/js/client.js?onload=init"></script>
<script type="text/javascript">
var clientId = '{my client id here}'; // for web
var apiKey = '{my api key here}';
var scopes = 'profile email';
function SignOut() {
// I know, sloppy, but the signOut method from Google doesn't work.
window.location = 'https://accounts.google.com/logout';
// Additional code if necessary.
};
function makeApiCall() {
gapi.client.load('plus', 'v1', function () {
var request = gapi.client.plus.people.get({ 'userId': 'me' });
request.execute(function (response) {
var heading = document.createElement('h4');
var image = document.createElement('img');
image.src = response.image.url;
heading.appendChild(image);
heading.appendChild(document.createTextNode(response.displayName));
document.getElementById('name').appendChild(heading);
alert('User logged in. makeApiCall() has executed.');
})
})
};
function init() {
gapi.client.setApiKey(this.apiKey);
window.setTimeout(checkAuth, 1);
console.log('Up and ready to go.');
};
function checkAuth() {
// Triggers when the page and the SDK loads.
gapi.auth.authorize({ client_id: clientId, scope: scopes, immediate: true }, handleAuthResult);
};
function handleAuthClick(event) {
// Triggers after a user click event to ensure no popup blockers interfere.
gapi.auth.authorize({ client_id: clientId, scope: scopes, immediate: false }, handleAuthResult);
return false;
};
function handleAuthResult(authResult) {
var authorizeButton = document.getElementById('SignInBtn');
var signoutButton = document.getElementById('SignOutBtn');
if (authResult && !authResult.error) {
var V = JSON.stringify(authResult);
localStorage.setItem('GoogleAuthResult', V);
console.log(V); // Just for testing...
var authTimeout = (authResult.expires_in - 5 * 60) * 1000; setTimeout(checkAuth, authTimeout); // As recommended by a Google employee in a video, so that the token refreshes.
authorizeButton.style.display = 'none'; // Switching between Sign In and Out buttons.
signoutButton.style.display = 'inline-block';
makeApiCall();
} else {
// Immediate:true failed so user is NOT signed in.
// Make the Sign In button the one visible and prep it
// so that it executes the Immediate:false after user click:
authorizeButton.style.visibility = 'inline-block';
authorizeButton.onclick = handleAuthClick;
signoutButton.style.visibility = 'none';
}
};
</script>
The handleAuthClick function does run on the button click, but after taking the user to the Google Sign In page, when that page brings me back, the browser kinda flickers and the handleAuthResult function does not execute. Therefore, nothing changes in the page after the successful sign in; the button displayed is the Sign In button (Sign Out button not visible) and no information is displayed on the 'name' textNode. This happens on Internet Explorer (11), Firefox (39) and Chrome (44). Also, it happens at home on my laptop (straight connection to the web via Cable broadband) and at work (on Windows 8.1 behind an Active Directory).
I began wondering so I started refreshing the browser page and after a couple of refreshes, since the script runs from the beginning, the immediate:true fires again and voilá: user is connected and API call triggers.
So, on my laptop, I changed the function being called back, in the immediate:false line's callback parameter, to the init() function and that fixed the problem: everything runs smoothly from beginning to end. Yet, this is not the way it is supposed to work. I still don't know what is going on with that line.
This morning, on my computer at work (behind Active Directory), that fix didn't work. I have to refresh the page a couple of times so that the script runs from the beginning and the immediate:true triggers recognizing the user's Signed In state and displaying the proper button on screen.
Any ideas on why does this callback fail?
You need to define your apiKey in the first section of your code
var clientId = '{my client id here}'; // for web
var apiKey = '{my api key here}'
Maybe thats the problem.
Google ApiKeys
Related
I am using FreshChat widget and I'm losing it when performing cached visit. The thing is that the destroy() function of the widget is async, so while I execute it on any event such as 'click' or 'before-visit', the widget is still persisted when the caching operation executes. So what I get is a cached page with an initialised widget, this breaks the widget and I can't re-initiate it.
If I manually destroy it in console(before every visit), then everything is fine.
The question is - how can I make sure that once I make a visit, the widget is destroyed BEFORE the current page is cached?
Notes:
The widget is executed from google tag manager, using dataLayer custom event
'before-cache' event would not help since again, it's an async operation.
I checked if the widget is still initialized, then I would destroy it using the below flush_freshchat method and reload the script to initialize window.fcWidget again
function initFreshChat() {
window.fcWidget.init({
token: "<%= Settings::FRESHCHAT_TOKEN %>",
host: "<%= Settings::FRESHCHAT_HOST %>"
});
function flush_freshchat(){
delete window.fcWidget;
delete window.history.pushState_fc_observer;
delete window.history.replaceState_fc_observer;
delete window.history.pushState;
delete window.history.replaceState;
}
(function(d, id) {
var fcJS;
freshchat_sdk = d.getElementById(id);
if (freshchat_sdk) {
freshchat_sdk.remove();
if(window.fcWidget.isInitialized()){
flush_freshchat();
}
}
fcJS = d.createElement('script');
fcJS.id = id;
fcJS.async = true;
fcJS.src = 'https://wchat.freshchat.com/js/widget.js';
fcJS.onload = initFreshChat;
d.head.appendChild(fcJS);
}(document, 'freshchat-js-sdk'));
Found a solution!
function beforeVisit( event ) {
if (!window.turbolinksVisitFlag) {
event.preventDefault();
if (window.fcWidget ) {
window.fcWidget.destroy();
}
window.turbolinksVisitFlag = true;
setTimeout(function(){Turbolinks.visit(event.data.url);}, 500);
}
So now I intercept every visit, do my stuff, and manually initiate next visit with a timeout.
I have a project that showing posts from a firebase realtime database. I use Vue, Vue-Router and Firebase Authentication. Firstly, when a user open the website, user see a login screen. In that screen page loads the posts from my database. Then when user login he/she routing to my Home.vue page. In here posts are showing there is no problem. But when user refresh the page, elements that are in the Home.vue are loading faster than my firebase data. I want to fix it.
That is my function that loads late from another javascript file:
function getData(data) {
var posts = data.val();
var keys = Object.keys(posts);
for(var i = 0; i < keys.length; i++) {
var id = keys[i];
var user = posts[id].user;
var text = posts[id].text;
var date = posts[id].date;
userPosts.push({
id: id,
user: user,
text: text,
date: date
});
}
userPosts.reverse();
}
export var userPosts = [ ];
You gotta look for lifecycle hooks in vue.js and use the one hook that triggers before/when the page is (re)loaded.. In it you set a Promise with your firebase function, that triggers getData() when resolved and go through with the chosen lifecycle hook.
I'm trying to work out how I can display a form to a user upon their first login to my app ( to fill in profile information) after which they can proceed to the regular site.
Could anyone point me in the right direction?
Thanks
You can make the trick using app startup script:
https://devsite.googleplex.com/appmaker/settings#app_start
Assuming that you have Profile model/datasource, code in your startup script will look similar to this:
loader.suspendLoad();
var profileDs = app.datasources.Profile;
// It would be more secure to move this filtering to the server side
profileDs.query.filters.UserEmail._equals = app.user.email;
profileDs.load({
success: function() {
if (profileDs.item === null) {
app.showPage(app.pages.CreateProfile);
} else {
app.showPage(app.pages.HomePage);
}
loader.resumeLoad();
},
failure: function() {
loader.resumeLoad();
// your fallback code goes here
}
});
If profile is absolute must, I would also recommend to enforce the check in onAttach event for every page but CreateProfile (to prevent navigation by direct link):
// Profile datasource should be already loaded by startup script
// when onAttach event is fired
if (app.datasources.Profile.item === null) {
throw new Error('Invalid operation!');
}
I suggest checking the user profile upon login. If the profile is not present, display the profile form, otherwise, proceed to the regular site.
I'm using both Google Analytics and branch.io in this website.
The website is designed for mobile.
The problem is that when clicking the banner with text "OPEN", the app cannot be opened.
Here is the code for the click:
$scope.openApp = () => {
let appOpened = false;
const open = () => {
if (!appOpened) {
appOpened = true;
branch.deepviewCta();
}
};
$timeout(open, 1000);
ga('send', 'event', 'homepage', 'download', {
hitCallback() {
open();
}
});
};
If I get rid of the GA code, it works fine:
$scope.openApp = () => {
let appOpened = false;
const open = () => {
if (!appOpened) {
appOpened = true;
branch.deepviewCta();
}
};
$timeout(open, 1000);
open();
};
The reason I put open() in hitCallback is to make sure GA sends out the hit because open() will redirect to another page.
Can you help me?
Alex from Branch.io here:
The Branch deepviewCta() function works on iOS 9+ by triggering an automatic redirect to a Universal Link URL (which opens the app) and then going to a fallback URL if that fails. But Apple is very specific about the situations in which a Universal Link is allowed to launch the app (including things like how long of a pause is allowed before redirection). Of course these restrictions are not public, so all we can do is guess. My suspicion is that putting the deepviewCta() function inside a GA callback is falling outside of Apple’s rules, so the app never opens and you are instead being sent to the fallback URL.
I can think of two options here:
You can build some way to trigger the GA and Branch functions separately so that they don’t conflict with Apple’s requirements.
We actually have a brand new, one-click integration with Google Analytics, which you can read about here and here. If you set that up, you’ll get all Branch-related events automatically instead of needing to manually collect link click data.
Hopefully that helps!
I am making a asynchronous request to different server for some data using jquery. It works fine in IE, but doesn't work in FireFox and Chrome, when it reaches the code where the request to other server is made, it freezes there and a blank page is shown. If I remove that piece of code, the ajax works fine.
Also, when I place a breakpoint at document.ready, the breakpoint is hit when debugging using IE, but it's not hit when debugging using FireFox.
Following is the JQuery I am using
jQuery(document).ready(function ($) {
$('.tabs a, .tabs span').livequery('click', function () {
var currentTab = $(this).parents('li:first');
if (!currentTab.is('.active')) {
var currentContent = $('.tab_container .' + currentTab.attr('class'));
$('.tabs li').removeClass("active");
currentTab.addClass("active");
var url = $(this).attr("href");
var newContent = "";
if (currentContent.length == 0) {
$.get(url, {}, function (result) {
$('#tabs.tab_container div:visible').fadeOut(100, function () {
$('#tabs.tab_container')
.html(result)
.fadeIn(100);
});
}, 'html');
}
else {
$('#tabs.tab_container div:visible').fadeOut(100, function () {
currentContent.fadeIn(100);
});
}
}
return false;
});
});
Any help will be highly appreciated.
According to the docs for jQuery.Get:
Due to browser security restrictions, most "Ajax" requests are subject to the same origin policy; the request can not successfully retrieve data from a different domain, subdomain, or protocol.
If you're after JSON responses, then you should consider using the JSONP option that has been rolled into the GetJSON method.
There are a couple of people out there who have however provided some workarounds for the Get limitation:
The jQuery Cross Domain Ajax Guide
Cross Domain Requests with jQuery