Cross-Platform Authentication with Google+ Sign-In
4 likes3,836 views
The document discusses cross-platform authentication using Google+ Sign-In. It covers how Google+ Sign-In provides a trusted authentication solution that works across devices and platforms. It also outlines the key features of Google+ Sign-In including secure authentication, learning about users with consent, and single sign-on across devices. The document then details how Google+ Sign-In can be implemented on web, Android, and iOS platforms including setting up projects, integrating authentication libraries, and handling the sign-in process. It concludes with best practices, common pitfalls to avoid, and resources for learning more.
![#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](https://image.slidesharecdn.com/googlesignin-140603090915-phpapp02/85/Cross-Platform-Authentication-with-Google-Sign-In-42-320.jpg)
![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](https://image.slidesharecdn.com/googlesignin-140603090915-phpapp02/85/Cross-Platform-Authentication-with-Google-Sign-In-44-320.jpg)
![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](https://image.slidesharecdn.com/googlesignin-140603090915-phpapp02/85/Cross-Platform-Authentication-with-Google-Sign-In-45-320.jpg)
![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](https://image.slidesharecdn.com/googlesignin-140603090915-phpapp02/85/Cross-Platform-Authentication-with-Google-Sign-In-49-320.jpg)
![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](https://image.slidesharecdn.com/googlesignin-140603090915-phpapp02/85/Cross-Platform-Authentication-with-Google-Sign-In-53-320.jpg)
![$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](https://image.slidesharecdn.com/googlesignin-140603090915-phpapp02/85/Cross-Platform-Authentication-with-Google-Sign-In-54-320.jpg)
Cross-Platform Authentication with Google+ Sign-In
- 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+ ?
- 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
- 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
- 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
- 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
- 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