• Like
Cross-Platform Authentication with Google+ Sign-In
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

Cross-Platform Authentication with Google+ Sign-In

  • 1,146 views
Published

This presentations outlines how Google+ Sign-In allows your users to sign in once and then be signed in seamlessly across all of your apps. The session takes a look at Google+ Sign-in authentication …

This presentations outlines how Google+ Sign-In allows your users to sign in once and then be signed in seamlessly across all of your apps. The session takes a look at Google+ Sign-in authentication models and highlights common pitfalls and best practices.

Published in Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
1,146
On SlideShare
0
From Embeds
0
Number of Embeds
4

Actions

Shares
Downloads
8
Comments
0
Likes
2

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Cross-Platform Auth with Google+ Sign-In Google+ Platform Peter Friese - Developer Advocate
  • 2. Peter Friese - Developer Advocate +PeterFriese @peterfriese http://www.peterfriese.de
  • 3. What is Google+ ?
  • 4. https://www.flickr.com/photos/dainbinder/10538549606/
  • 5. http://openclipart.org/detail/26329/aiga-immigration-bg-by-anonymous
  • 6. What is Authentication?
  • 7. 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.
  • 8. 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/
  • 9. Authentication - How hard can it be? https://www.flickr.com/photos/isherwoodchris/7018779395/
  • 10. Quite hard, actually! https://www.flickr.com/photos/govwin/5609940697/ Things to consider • Encrypt traffic • Hash + salt passwords • Two-factor auth • Account recovery http://upload.wikimedia.org/wikipedia/commons/4/41/Space_Shuttle_Columbia_launching.jpg
  • 11. You might end up in the News
  • 12. 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
  • 13. ± KEEP CALM AND SIGN IN WITH
 GOOGLE+
  • 14. Google+ Sign-in Features
  • 15. Google: trusted brand 2-factor verification, using your phone Works alongside existing sign-in systems Secure Authentication Google+ Sign-in Features Learn more about your users (with their consent)
  • 16. Sign-in to web site Cross-Device Single Sign-on and Over-the-Air Install (OTA) Google+ Sign-in Features
  • 17. Sign-in to web site Cross-Device Single Sign-on and Over-the-Air Install (OTA) Google+ Sign-in Features
  • 18. Sign-in to web site Cross-Device Single Sign-on and Over-the-Air Install (OTA) Google+ Sign-in Features
  • 19. Sign-in to web site Cross-Device Single Sign-on and Over-the-Air Install (OTA) Google+ Sign-in Features OTA consent dialog
  • 20. Sign-in to web site Cross-Device Single Sign-on and Over-the-Air Install (OTA) Google+ Sign-in Features OTA consent dialog OTA installation
  • 21. Sign-in to web site Cross-Device Single Sign-on and Over-the-Air Install (OTA) Google+ Sign-in Features OTA consent dialog OTA installation
  • 22. Sign-in to web site Cross-Device Single Sign-on and Over-the-Air Install (OTA) Google+ Sign-in Features OTA consent dialog OTA installation Auto signed in on other device
  • 23. Sign-in to web site Cross-Device Single Sign-on and Over-the-Air Install (OTA) Google+ Sign-in Features OTA consent dialog OTA installation Auto signed in on other device
  • 24. How does Google+ Sign-in work?
  • 25. AppUser Google Based on OAuth 2.0 How does Google+ Sign-in work? Consent Permission
  • 26. AppUser Google Based on OAuth 2.0 How does Google+ Sign-in work? Consent Permission No password sharing Scoped access Revocable
  • 27. Implementing Google+ Sign-in
  • 28. Developer Console Project Setting up https://developers.google.com/console APIs Credentials iOS Client ID Android Client ID Web Client ID Branding Permissions Management
  • 29. 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
  • 30. 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
  • 31. You Google The Auth Triangle Connecting lines need authentication Client Server Google APIs
  • 32. You Google Client Server Google APIs Client Authentication
  • 33. Client Authentication
  • 34. Create OAuth 2.0 client ID Link with Google Play Services API Setup Sign-In Overview Client Authentication: Android
  • 35. SDK Architecture Client Authentication: Android iOS Your App Google APIs Google Play Client Library Google Play Services APK Authorize using existing accounts on Android device
  • 36. mApiClient = new GoogleApiClient.Builder(this) .addConnectionCallbacks(this) .addOnConnectionFailedListener(this) .addApi(Plus.API, null) .addScope(Plus.SCOPE_PLUS_LOGIN) .build(); Java GoogleApiClient Lifecycle Client 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
  • 37. Handle connection failure Client 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
  • 38. Handle connection failure Client 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
  • 39. Connection successful Client 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
  • 40. Create OAuth 2.0 client ID Integrate SDK Setup Sign-In Overview Client Authentication: iOS
  • 41. iOS Your App Google APIs Google+ iOS SDK SDK Architecture Client Authentication: iOS Statically linked library
  • 42. #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-In Client Authentication: iOS
  • 43. Perform Sign-In, Option 1 (use our button) Client Authentication: iOS
  • 44. 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
  • 45. Receiving the authorisation Client 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
  • 46. Create OAuth 2.0 client ID Include JavaScript client on your web page Add Google+ Sign-in button Handle callback Overview Client Authentication: Web
  • 47. Browser Your site Google APIsplusone.js Architecture Client Authentication: Web
  • 48. <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 button Client Authentication: Web
  • 49. function onSignInCallback(authResult) { if (authResult['access_token']) { // Successfully authorized } else if (authResult['error']) { // User is not signed in. } } JavaScript Handle authorization callback Client Authentication: Web
  • 50. Server Authentication You Google Client Server Google APIs
  • 51. One-Time-Code Flow C li e n t S e r v e r 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 codefor access_token andrefresh_token 6: access_token, refresh_token 7: “fully logged in”
  • 52. <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 button Server Auth: One-Time Code
  • 53. 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 callback Server Auth: One-Time Code
  • 54. $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 code Server Auth: One-Time Code
  • 55. Best practices and Common Pitfalls
  • 56. Best practices and Common Pitfalls Common Pitfalls Guidelines Best practices Useful resources
  • 57. 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.
  • 58. 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
  • 59. Best practices and Common Pitfalls deprecated) Use Stop using profile (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
  • 60. Useful resources • Scopes
 https://developers.google.com/+/api/oauth#scopes • Developer Console
 https://console.developers.google.com/project • OAuth 2.0 Playground
 https://developers.google.com/oauthplayground/ • Tokeninfo
 https://www.googleapis.com/oauth2/v1/tokeninfo?access_token=
  • 61. Review
  • 62. • 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-in Review
  • 63. <Thank You!> developers.google.com/+ Peter Friese - Developer Advocate +PeterFriese @peterfriese http://www.peterfriese.de