Post on 06-May-2015
description
Cross-Platform Auth with Google+ Sign-InGoogle+ Platform
Peter Friese - Developer Advocate
Peter Friese - Developer Advocate +PeterFriese @peterfriese http://www.peterfriese.de
What is Google+ ?
https://www.flickr.com/photos/dainbinder/10538549606/
http://openclipart.org/detail/26329/aiga-immigration-bg-by-anonymous
What is Authentication?
What is Authentication?
αὐθεντικός (greek): !
“that comes from the author” /authentic /original /genuine
Authentication:
!
The act of confirming the truth of
an attribute of a datum or an
entity.
datum or an entity.
Authentication Factors
Ownership Knowledge Inherence
https://www.flickr.com/photos/europealacarte/9152848988/ https://www.flickr.com/photos/gcfairch/3595771919/https://www.flickr.com/photos/z0/5055081370/
Authentication - How hard can it be?
https://www.flickr.com/photos/isherwoodchris/7018779395/
Quite hard, actually!
https://www.flickr.com/photos/govwin/5609940697/
Things to consider
• Encrypt traffic
• Hash + salt passwords
• Two-factor auth
• Account recoveryhttp://upload.wikimedia.org/wikipedia/commons/4/41/Space_Shuttle_Columbia_launching.jpg
You might end up in the News
On the shoulders of Giants…
https://www.flickr.com/photos/govwin/5609940697/
Use an identity provider
• Easier for you
• Easier for the user
• Established, trusted brand
• Focus on your business model (rather than re-inventing the wheel)
http://www.nasa.gov/centers/dryden/images/content/690557main_SCA_Endeavour_over_Ventura.jpg
±KEEP CALM
ANDSIGN INWITH
GOOGLE+
Google+ Sign-in Features
Google: trusted brand2-factor verification, using your phoneWorks alongside existing sign-in systems
Secure AuthenticationGoogle+ Sign-in Features
Learn more about your users (with their consent)
Sign-in to web site
Cross-Device Single Sign-on and Over-the-Air Install (OTA)Google+ Sign-in Features
Sign-in to web site
Cross-Device Single Sign-on and Over-the-Air Install (OTA)Google+ Sign-in Features
Sign-in to web site
Cross-Device Single Sign-on and Over-the-Air Install (OTA)Google+ Sign-in Features
Sign-in to web site
Cross-Device Single Sign-on and Over-the-Air Install (OTA)Google+ Sign-in Features
OTA consent dialog
Sign-in to web site
Cross-Device Single Sign-on and Over-the-Air Install (OTA)Google+ Sign-in Features
OTA consent dialogOTA installation
Sign-in to web site
Cross-Device Single Sign-on and Over-the-Air Install (OTA)Google+ Sign-in Features
OTA consent dialogOTA installation
Sign-in to web site
Cross-Device Single Sign-on and Over-the-Air Install (OTA)Google+ Sign-in Features
OTA consent dialogOTA installationAuto signed in on other device
Sign-in to web site
Cross-Device Single Sign-on and Over-the-Air Install (OTA)Google+ Sign-in Features
OTA consent dialogOTA installationAuto signed in on other device
How does Google+ Sign-in work?
AppUser
Based on OAuth 2.0How does Google+ Sign-in work?
Consent Permission
AppUser
Based on OAuth 2.0How does Google+ Sign-in work?
Consent Permission
No password sharing
Scoped access
Revocable
Implementing Google+ Sign-in
Developer Console Project
Setting up
https://developers.google.com/console
APIs
Credentials
iOS Client ID
Android Client ID
Web Client ID
Branding
Permissions
Management
Developer Console Project
Setting up
https://developers.google.com/console
APIs
Credentials
iOS Client ID
Android Client ID
Web Client ID
Branding
Permissions
Management
One project, multiple clients
Developer Console Project
Setting up
https://developers.google.com/console
APIs
Credentials
iOS Client ID
Android Client ID
Web Client ID
Branding
Permissions
Management
One project, multiple clients
Authorization is granted to your application, not a specific client!
* Single user consent across devices
* Cross-Device Single Sign-on * Available for Web &
Android
You Google
The Auth Triangle
Connecting lines need authentication
Client
Server
Google APIs
You Google
Client
Server
Google APIs
Client Authentication
Client Authentication
Create OAuth 2.0 client ID
Link with Google Play Services API
Setup Sign-In
OverviewClient Authentication: Android
SDK ArchitectureClient Authentication: Android
iOS
Your App
Google APIs
Google Play Client Library
Google Play Services APK
Authorize using existing accounts on Android device
mApiClient = new GoogleApiClient.Builder(this) .addConnectionCallbacks(this) .addOnConnectionFailedListener(this) .addApi(Plus.API, null) .addScope(Plus.SCOPE_PLUS_LOGIN) .build();
Java
GoogleApiClient LifecycleClient Authentication: Android
onCreate()
onStart() mApiClient.connect(); Java
onStop()if (mApiClient.isConnected()) { mApiClient.disconnect();}
Java
<com.google.android.gms.common.SignInButton android:id="@+id/sign_in_button" android:layout_width="wrap_content" android:layout_height="wrap_content"/>
XML
running
Handle connection failureClient Authentication: Android
public void onConnectionFailed(ConnectionResult result) { if (!mIntentInProgress && result.hasResolution()) { try { mIntentInProgress = true; startIntentSenderForResult(result.getResolution().getIntentSender(), RC_SIGN_IN, null, 0, 0, 0); } catch (SendIntentException e) { // The intent was canceled before it was sent. Return to the default // state and attempt to connect to get an updated ConnectionResult. mIntentInProgress = false; mApiClient.connect(); } }}
Java
Handle connection failureClient Authentication: Android
public void onConnectionFailed(ConnectionResult result) { if (!mIntentInProgress && result.hasResolution()) { try { mIntentInProgress = true; startIntentSenderForResult(result.getResolution().getIntentSender(), RC_SIGN_IN, null, 0, 0, 0); } catch (SendIntentException e) { // The intent was canceled before it was sent. Return to the default // state and attempt to connect to get an updated ConnectionResult. mIntentInProgress = false; mApiClient.connect(); } }}
Java
User needs to select account, consent to permissions, ensure network connectivity, etc. to connect
Connection successfulClient Authentication: Android
public void onConnected(Bundle connectionHint) { // Retrieve some profile information to personalize our app for the user. Person currentUser = Plus.PeopleApi.getCurrentPerson(mApiClient); // Indicate that the sign in process is complete. mSignInProgress = STATE_DEFAULT;}
Java
Create OAuth 2.0 client ID
Integrate SDK
Setup Sign-In
OverviewClient Authentication: iOS
iOS
Your App
Google APIsGoogle+ iOS SDK
SDK ArchitectureClient Authentication: iOS
Statically linked library
#import <GooglePlus/GooglePlus.h> #import <GoogleOpenSource/GoogleOpenSource.h> !... !!GPPSignIn *signIn = [GPPSignIn sharedInstance]; signIn.shouldFetchGoogleUserEmail = YES; !signIn.clientID = @“YOUR_CLIENT_ID”; signIn.scopes = @[@"profile"]; signIn.delegate = self;
Objective-C
Configure Sign-InClient Authentication: iOS
Perform Sign-In, Option 1 (use our button)Client Authentication: iOS
Create own button / use action sheet / …
// trigger sign-in [[GPPSignIn sharedInstance] authenticate];
Objective-C
Silent sign-in if user has signed in before:
// silently sign in [[GPPSignIn sharedInstance] trySilentAuthentication];
Objective-C
Perform Sign-In, Option 2 (create your own button)Client Authentication: iOS
Receiving the authorisationClient Authentication: iOS
// In ApplicationDelegate - (BOOL)application:(UIApplication *)application openURL:(NSURL *)url sourceApplication:(NSString *)sourceApplication annotation:(id)annotation { return [GPPURLHandler handleURL:url sourceApplication:sourceApplication annotation:annotation]; } !!// GPPSignInDelegate - (void)finishedWithAuth:(GTMOAuth2Authentication *)auth error:(NSError *)error { if (!error) { NSString *gplusId = [GPPSignIn sharedInstance].userID; } }
Objective-C
Create OAuth 2.0 client ID
Include JavaScript client on your web page
Add Google+ Sign-in button
Handle callback
OverviewClient Authentication: Web
Browser
Your site
Google APIsplusone.js
ArchitectureClient Authentication: Web
<div id="gConnect"> <button class="g-signin" data-scope="https://www.googleapis.com/auth/plus.login" data-requestvisibleactions="http://schemas.google.com/AddActivity" data-clientId="YOUR_CLIENT_ID" data-callback="onSignInCallback" data-cookiepolicy="single_host_origin"> </button> </div> !<!-- Place plusone.js asynchronous JavaScript just before your </body> tag —>
HTML
Integrate sign-in buttonClient Authentication: Web
function onSignInCallback(authResult) { if (authResult['access_token']) { // Successfully authorized } else if (authResult['error']) { // User is not signed in. } }
JavaScript
Handle authorization callbackClient Authentication: Web
Server Authentication
You Google
Client
Server
Google APIs
One-Time-Code Flow
Client
Server
Google APIs
1: Client-side auth request
2: OAuth dialog
triggeredOAuth
2.0 Dialog
3: access_token, one-time code, id_token
4: one-time code 5: exchange one-time code for access_token and refresh_token
6: access_token,
refresh_token
7: “fully logged in”
<div id="gConnect"> <button class="g-signin" data-scope="https://www.googleapis.com/auth/plus.login" data-requestvisibleactions="http://schemas.google.com/AddActivity" data-clientId="YOUR_CLIENT_ID" data-callback="onSignInCallback" data-cookiepolicy=“single_host_origin"> data-callback="signInCallback"> </button> </div> !<!-- Place plusone.js asynchronous JavaScript just before your </body> tag —>
HTML
Integrate sign-in buttonServer Auth: One-Time Code
function signInCallback(authResult) { if (authResult['code']) { // Send the code to the server $.ajax({ type: 'POST', url: 'plus.php?storeToken', contentType: 'application/octet-stream; charset=utf-8', success: function(result) { // Handle or verify the server response if necessary. console.log(result); } else { $('#results').html('Failed to make a server-side call.'); } }, processData: false, data: authResult['code'] }); } else if (authResult['error']) { console.log('There was an error: ' + authResult['error']); } }
JavaScript
Handle authorization callbackServer Auth: One-Time Code
$code = $request->getContent(); !// Exchange the OAuth 2.0 authorization code for user credentials. $client->authenticate($code); !$token = json_decode($client->getAccessToken()); !// Verify the token ... !// Store the token in the session for later use. $app['session']->set('token', $client->getAccessToken()); $response = 'Successfully connected with token: ' . print_r($token, true);
PHP
Exchange one-time codeServer Auth: One-Time Code
Best practices and Common Pitfalls
Best practices and Common Pitfalls
Common PitfallsGuidelinesBest practicesUseful resources
Guidelines
• Use our client libraries (they’re well debugged) instead of rolling your own HTTP requests
• Provide a way for the user to sign out / disconnect your app
• Use “Sign in with Google” when labelling your sign in buttons. Don’t use “Sign in with Google+”
• Equal rights to everyone: sign-in buttons should be equally sized for all networks you support
• Ask only for permissions you really need. Also, consider using incremental auth - this will likely increase sign-up rates.
Pitfalls: iOS
• Not providing a URL type for callback
• Not providing the ApplicationDelegate application:openURL:sourceApplication:annotation: callback or failing to call GPPURLHandler handleURL:sourceApplication:annotation
Best practices and Common Pitfalls
deprecated)
Use Stop usingprofile(for basic login)
https://www.googleapis.com/auth/userinfo.profile
plus.login(if you need more info about a user. Includes profile)
email(the user’s email address)
https://www.googleapis.com/auth/userinfo.email
Useful resources
• Scopeshttps://developers.google.com/+/api/oauth#scopes
• Developer Console https://console.developers.google.com/project
• OAuth 2.0 Playgroundhttps://developers.google.com/oauthplayground/
• Tokeninfohttps://www.googleapis.com/oauth2/v1/tokeninfo?access_token=
Review
• Do not build your own authentication system
• Google+ makes authentication easy
• Authentication models depends on architecture
• Learn more: check out our Quickstarts at https://developers.google.com/+/ and https://github.com/googleplus
Cross-Platform Auth With Google+ Sign-inReview
<Thank You!>developers.google.com/+
Peter Friese - Developer Advocate +PeterFriese @peterfriese http://www.peterfriese.de