Google+ Sign-In Localisation

Had a couple of questions recently about Google+ Sign-In in different languages. While its rather common to want to use custom graphics instead of the supplied sign-in button, one of the nice benefits of using the supplied buttons on Android, iOS and the web is that they automatically adapt to the language of the user. Pretty much this post could end there, but there are a few interesting edge cases that are worth mentioning.

Javascript

On the web the Javascript Google+ buttons will attempt to choose the language based on the browser settings. This should be (mostly) fine, but if you have a specific user setting for language you can output some configuration to force the language for all buttons (including the sign-in, +1 and so on).

These kind of global parameters are generally configured in the ___gfg property of the window, which the Google Javascript API checks when it loads. You'll need to put the following before (or in the same script tag where you load the Javascript:

Which looks like this (assuming your browser language wasn't already set to arabic, in which case there will be no change!):

Android

On Android, the language is chosen by the Locale, which you can force by updating the Configuration.locale parameter (h/t to +Lee Denison for this):

All of the strings for the translation are actually part of the resources supplied with the client library (as mentioned in the docs), which means you can actually retrieve the text directly if you'd like. This gives you the ability to have a custom button, and still pick up the localised text. There are entries for the wide and short versions of the button, for example:

iOS

On iOS, its important to make sure that your app is configured for the languages you support. In the project settings, make sure you have added each language your app supports:

In general, its a bit of a pain to force the language on iOS - you could update the UserDefaults configuration, but you'll generally need to do that very early in the execution for it to work. The easiest way during testing is just to change your language in the Settings on your device or simulator. However, if you are creating your own button and just want to get the string, that's a bit easier, using the GooglePlusPlatform bundle. Note that this isn't an official part of the API, so the name or the translation string could always change - make sure to test when upgrading between SDK versions!

It is a bit easier to hint the language to be used in the consent screen, using the [GPPSignIn sharedInstance].language property - you can pass language code there, e.g "es", or "en-US".

One additional thing you might notice though is that different languages actually cause the button to render at slightly different sizes. Particularly if you're not using constraint based layouts, this could cause some unexpected results.

There is actually a bit of help in the comments of the header, where you are given the maximum dimensions for each variant of the button:

// kGPPSignInButtonStyleStandard: 226 x 48
// kGPPSignInButtonStyleWide:     308 x 48
// kGPPSignInButtonStyleIconOnly:  46 x 48 (no text, fixed size)

Make sure your app accounts for these, or inspect the frame size of the GPPSignInButton after setting the style, and you shouldn't have a problem.

Popular posts from this blog

Client-Server Authentication with ID tokens

Image
These days there are few purely client-side applications - even traditionally unconnected software like casual games make use of servers and services to provide a better, richer experience - and importantly one that can follow the user across devices. We are in a world where we need to authenticate a user of many clients to a set of back-end services. There are a few ways of doing that when using a identity provider, like Google, but in this post I want to talk about a specific method that makes use of ID tokens. This approach has been well covered by Tim Bray for Android, but with the release a couple of months ago of the iOS 1.4.0 SDK for Google+, it is now available across Android, iOS and the Web. This makes it a particularly powerful way of signing in a user, and asserting the identity of that user securely to your application servers. Why ID TokensThis whole architecture relies on a point of view which I suspect is still not particularly common amongst developers implementing au…
Read more

Common problems with Google+ Sign-In on Android

Image
It has been fantastic to see so many people trying out Google+ Sign-In, and through the bootcamps and other events I've had a chance to talk to some people who are actually implementing it in their apps. The Android integration is pretty straightforward, thanks to Google Play Services, but there are still some issues I've seem come up a couple of times.

tl;dr: make sure your app is set up in the API console, and make sure you can handle multiple onStart events coming in during sign-in.

1. Consent screen appears more than once. 

The basic life cycle of the PlusClient looks a bit like this:


When we call the onStart, we immediately call mPlusClient.connect(). Google Play Services checks whether the user is already signed in to the application, and, if so the onConnected method is instantly called and the user seamlessly signed in.

If the connect() call fails, then onConnectionFailed() is called with a ConnectionResult object, which represents the error. The error is probably RESOLU…
Read more

Upgrading Firebase.com & Using Google Sign In on Android

Image
Very quick post on a problem I've seen a few people hit where they are upgrading a Firebase.com project which uses Google Sign In on Android.
Just Tell Me What To Do Already 1. Upgrade your Firebase.com project

2. Connect your Android app, but do not enter a SHA1

3. Go to the old Google Developers/Google Cloud project you were using and copy each client ID used for an Android app (e.g. the debug and release versions at least). 

4. In the Auth > Sign In Method > Google panel, enter the client IDs you copied before. 

This ensures your existing app keeps working, and sets you up for transitioning to the new SDK.  Why Am I Doing This? There are a couple of things to know:  The specific combination of Android package name and SHA1 is unique across Google. It can only exist in a single Google project, and is associated with a single client ID. An upgraded Firebase project is a Google project underneath.  This means if you go through the upgrade flow, attempt to connect your Android…
Read more