chrome – Sean Shadmand

Facebook JS login on Chrome iOS workaround

I was putting together a Facebook JS SDK based login on a site I’m working on – only to find that Chrome on iOS does not support the action.

What was even more surprising was the lack of documentation or support online (with Chrome or Facebook) to help work around the issue.

I saw a few suggestion that had solutions based on using Parse or where others suggested using a backend based login API. I didn’t want to install another framework just to solve this problem, and my objective for the interface was to offer a seamless login process that doesn’t interrupt the user’s current modal based workflow.

To make matters worst, and I am really disappointed in Google for this (which is rare,) popping out windows on Google Chrome iOS makes a null reference to the “opener” in certain situations. This makes it hard to complete a seamless login between two windows once the FB auth page is verified.

Below is a solution that checks if FB is authed, if not, manually opens an FB auth window that forwards the user to an Opener Handler page. That page forces a refresh of the openers auth tokens and closes the window. Once completed the user is sent back to the original page (with no page refresh) and can now proceed with a validated FB auth.


	var ABSOLUTE_URI = "http://yourpage.com/openerhandler.html";
	var FB_ID = "123456778";
	function openFBLoginDialogManually(){
	// Open your auth window containing FB auth page
	// with forward URL to your Opened Window handler page (below)

	var redirect_uri = "&redirect_uri=" + ABSOLUTE_URI + "fbjscomplete";
	var scope = "&scope=public_profile,email,user_friends";
	var url = "https://www.facebook.com/dialog/oauth?client_id=" + FB_ID + redirect_uri + scope;

	// notice the lack of other param in window.open
	// for some reason the opener is set to null
	// and the opened window can NOT reference it
	// if params are passed. #Chrome iOS Bug
	window.open(url);

	}

	function fbCompleteLogin(){

	FB.getLoginStatus(function(response) {
	// Calling this with the extra setting "true" forces
	// a non-cached request and updates the FB cache.
	// Since the auth login elsewhere validated the user
	// this update will now asyncronously mark the user as authed
	}, true);

	}

	function requireLogin(callback){

	FB.getLoginStatus(function(response) {
	if (response.status != "connected"){
	showLogin();
	}else{
	checkAuth(response.authResponse.accessToken, response.authResponse.userID, function(success){
	// Check FB tokens against your API to make sure user is valid
	});
	}
	});

	}

view raw FB JS Auth hosted with ❤ by GitHub

	<html>
	<head>
	<script type="text/javascript">
	function handleAuth(){
	// once the window is open
	window.opener.fbCompleteLogin();
	window.close();
	}
	</script>
	<body onload="handleAuth();">
	<p>. . . </p>
	</body>
	</head>
	</html>

view raw Opened Window hosted with ❤ by GitHub

3 reasons why I’m bullish on extensions, plus a better scheduling app.

Scheduling time to meet with someone is one of those things that’s just hard enough to be annoying, but probably not complex enough to need a whole new tool to simplify it. It’s one of those problems that makes for a perfect example of how-to, or how-not-to, create a great product.

Often in the product world we find a problem we want to solve and end up creating a far more complex system to solve it; one in which the user has to change usage patterns or require ramp up time. As a result, minor problems and annoyances (like scheduling meetings) don’t get dramatic improvements because the cost v. benefit v. ramp-up never quite get to a point in which the user is willing to change their habits to gain the benefits from a new tool. “I’ll just send an email” or “I’ll just use a spreadsheet” can kill the potential for “robust” products. And rightly so, email and spreadsheets are comfortable, versatile and already understood between groups.

That’s why I have been bullish on extensions, especially the Google Chrome ones.

The good ones are able to find a balance between:

A lack of ramp-up time.
An integration into the tools and workflows I already use.
No requirement for other parties to have the platform in order to use it.

An example of a great extension I was introduced to recently is Assistant.to. Assistant.to is a Chrome extension that links to your Google Calendar and extends your Google Email composer so you can easily drop-in potential appointment/meeting times as text and links in your email. There was no setup, all the interaction happens within the GMail composer, and the form factor works in a way that needs no additional explanation or signups for the receiver.

It is a must have tool for sure! Here are some screenshots of the workflow:

Checking_in____-_sean_shadmand_gmail_com_-_Gmail — Extension overlay

Checking_in____-_sean_shadmand_gmail_com_-_Gmail 2 — Expanded overlay

Checking_in____-_sean_shadmand_gmail_com_-_Gmail 3 — Select availability

Checking_in____-_sean_shadmand_gmail_com_-_Gmail 4 — Available times copy and pasted

Assistant_to_-_Your_Personal_Scheduling_Assistant — Meeting confirmed

As a note, another great extensions I’ve been using lately is the one Grammerly.com that allows great inline writting corrections and tools.

Chrome Tip: Multi-profiles and Offline Docs

You may have already used the Chrome incognito profile, but what you may not know about is the fact that chrome now allows you to create and use multiple profiles on your computer. While incognito us used to specfically ensure that no data is stored or tracked on your system based on the sites and pages you visit, profiles allow you to better manage the various ways those pages are stored either online or off. Here is how to use them.

Incognito Mode:

Incognito mode ( i.e. the mode with the browser icon as a sunglass and hat wearing fellow in this blog’s screen shot ) prevents pages you visit from being tracked, stored in history and clears all cookies from your session once the window is closed, no matter what the site you are visiting has set. There are many reasons why you may want to do this. The cite version: You and your girlfriend use the same computer and you don’t want her to know about the surprise earrings you have been shopping for her online. The not so cute version, well, let’s just say you can avoid getting in trouble like Jim Levenstein does in American Reunion. (BTW, that movie is not worth seeing even if to only get the joke)

To enable incognito mode go to the menu ( ) option in the top right corner of your Chrome browser and select “New Incognito Window” or press Command+Shift+N . Also note: Chrome in your app on your mobile device has the same options and works the same way.

Signing in to Chrome

Chrome can connect to your GMail account, and doing so allows you to do things like sync bookmarks between devices, as well as allow you to edit your Google Drive documents stored on the cloud even while you have no internet connection available. This tool came in handy recently when I came up with some ideas for a document I was working on while at a hotel that didn’t have wifi available. I simply made the changes needed and when internet resumed the doc was synced and merged to my online version of the doc. By signing in to your Google account on chrome a default profile for your computer ( i.e. the mode with the browser icon as a head with no face in this blog’s screen shot ) will be automatically assigned to you and connected to the account you signed in with.

To login to your Google account in Chrome go to the menu ( ) option in the top right corner of your Chrome browser and select “Sign In”. You will then be given the Google login page. Sign in as you would with your GMail account and you are all set.

Enabling Your Chrome Profile to Work on Docs Offline

If you haven’t used your Google Drive already you should really take a second to get to know it. Not only can you store 5GB of files of any type for free in your Google Drive AND use them as a local drive on your computer and phone just like Dropbox, BUT you can use it to create and save documents of various types that you can use to collaborate on simultaneous with other users.

To explain the latter more clearly through example: We use Google Docs at Socialize at all our meetings. During the meeting we create a google doc and throughout the meeting anyone can add, append, change or update the way the notes are taken all at the same time. You can see one another typing as you type and often times most of the meeting will be completed in silence while everyone adds their notes to the doc. Collaboration is saved and shared in a document instantly.

But I digress…

To enable your Google docs to have offline access first go to your Google Drive (http://drive.google.com). On the left hand menu select the “more” drop down to reveal extra options. Finally click “offline docs” and enable. Your drive will sync your docs to your local Chrome profile. Note: If you do not see the “Offline Docs” in the “more” dropdown, and you are using Google App for work, you will need to either enable the feature in your Google App’s Admin portal, or get your sysadmin to do it for you. It is located in the Google Drive sectionof the Admin’s “Settings” tab.

Multiple Chrome Profiles

You are probably just fine getting your Google Drive working on your default Chrome profile to work on offline docs, just as I was for quite some time. The problem is that when I tried to enable offline docs for my personal Google Drive documents, as well as my work docs, the Google Drive system did not allow it. Chrome only allows one offline sync per Chrome profile. To fix this problem you will need to create an additional Chrome Profile on your browser ( i.e. create a mode with a different browser icon like the one with the Ninja in this blog’s screen shot ), and then enable Offline Docs in your Google Drive while in the correct profile.

To add additional profiles to Chrome go to the menu ( ) option in the top right corner of your Chrome browser and select “Settings”. Scroll down to the “Users” section and choose “Add new user.” Once you have added a profile correctly your Users section should look something like this:

Switching Between Profiles

To switch between profile simply click the icon for your current profile in the top right of the browser and choose the profile you wish to use. Once selected, a new browser window will open with that profile enabled.