Successfully reported this slideshow.
Google+ for Mobile
Apps on iOS & Android
Peter Friese
Developer Advocate, Google
google.com/+PeterFriese
@peterfriese
http://peterfriese.de
What is Google+ ?
Google+ is…!
a social network
Image credit: https://www.flickr.com/photos/dainbinder/10538549606/
An identity provider
Image credit: http://www.wlmht.nhs.uk/wp-content/uploads/2012/09/passport-photos.jpg
Sign-in with Google
αὐθεντικός (greek):!
!
• “that comes from the author”!
• authentic!
• original!
• genuine
Ownership Knowledge Inherence
Authentication -
How hard can it
be?
Image credit: https://www.flickr.com/photos/92269745@N00/3801617675
Quite hard,
actually…
Hard for developers…!
... Implementation!
... Infrastructure!
... Security!
... Multiple platforms
Hard for your users…
... more passwords
... more devices
... more trust
Image credit: https://flic.kr/p/frJ48
You might even be in the news!
… but not in a good way…
Image credit: https://kezialubanszky.files.wordpress.com/2013/03/don-t-panic-2568311.jpg
Image credit: https://kezialubanszky.files.wordpress.com/2013/03/don-t-panic-2568311.jpg
±

KEEP CALM

AND

SIGN IN

WITH

GOOGLE+
Easier for you

Easier for the user

Established, trusted brand

Focus on your business
model
Over-the-Air
Installs
Over-the-Air
Installs
Over-the-Air
Installs
Over-the-Air
Installs
Over-the-Air
Installs
Over-the-Air
Installs
Over-the-Air
Installs
Cross-Device
Single Sign-on
No tap required, log-in will happen automatically!
Cross-Device
Single Sign-on
Cross-Device
Single Sign-on
Implementing Google+ Sign-in
How does Google+ Sign-in work?
Based on OAuth 2.0
AppUser
Google
Consent Permission
No password sharing
Scoped access
Revo...
Setting up
Developer Console Project
https://developers.google.com/console
APIs
Credentials
iOS Client ID
Android Client I...
The Auth Triangle
You Google
Connecting lines
need authentication
Client
Server
Google APIs
Client Authentication
You Google
Client
Server
Google APIs
Client Authentication
Client Authentication: Android
Overview
Create OAuth 2.0 client ID
Link with Google Play Services API
Setup Sign-In
Client Authentication: Android
SDK Architecture
Android
Your App
Google APIs
Google Play
Client Library
Google Play
Servic...
Client Authentication: Android
GoogleApiClient Lifecycle
mApiClient = new GoogleApiClient.Builder(this)	
.addConnectionCal...
Client Authentication: Android
Handling Connection Failure
public void onConnectionFailed(ConnectionResult result) {	
	 if...
Client Authentication: Android
Handle connection failure
public void onConnectionFailed(ConnectionResult result) {	
	 if (...
Client Authentication: Android
Connection successful
public void onConnected(Bundle connectionHint) { 	
	 // Retrieve some...
Client Authentication: Android
Connection successful
public void onConnected(Bundle connectionHint) { 	
	 // Retrieve some...
Client Authentication: iOS
Overview
Create OAuth 2.0 client ID
Integrate SDK
Setup Sign-In
Client Authentication: iOS
SDK Architecture
iOS
Your App
Google APIs
Google+
iOS SDK
Statically linked library
Client Authentication: iOS
Configure Sign-In
#import <GooglePlus/GooglePlus.h>
#import <GoogleOpenSource/GoogleOpenSource.h...
Client Authentication: iOS
Perform Sign-In, Option 1 (use our button)
Client Authentication: iOS
Perform Sign-In, Option 2 (create your own button)
Create own button / use action sheet / …
// ...
Client Authentication: iOS
Receiving the authorisation
// In ApplicationDelegate
- (BOOL)application:(UIApplication *)appl...
Client Authentication: Web
Overview
Create OAuth 2.0 client ID
Include JavaScript client on your web page
Add Google+ Sign...
Client Authentication: Web
Architecture
Browser
Your site
Google APIsplusone.js
Client Authentication: Web
Integrate sign-in button
<div id="gConnect">
<button class="g-signin"
data-scope="https://www.g...
Client Authentication: Web
Handle authorization callback
function onSignInCallback(authResult) {
if (authResult['access_to...
Server Authentication
You Google
Client
Server
Google APIs
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
Dialo...
Server Auth: One-Time Code
Integrate sign-in button
<div id="gConnect">
<button class="g-signin"
data-scope="https://www.g...
Server Auth: One-Time Code
Handle authorization callback
function signInCallback(authResult) {
if (authResult['code']) {
/...
Server Auth: One-Time Code
Exchange one-time code
$code = $request->getContent();
!
// Exchange the OAuth 2.0 authorizatio...
Sharing with Google+
Use interactive
posts to engage
your users
Use interactive
posts to engage
your users
Use interactive
posts to engage
your users
Sharing: iOS
Interactive Posts
#import <GooglePlus/GooglePlus.h>
#import <GoogleOpenSource/GoogleOpenSource.h>
...
id <GPP...
Sharing: iOS
Interactive Posts
- (BOOL)application:(UIApplication *)application
didFinishLaunchingWithOptions:(NSDictionar...
Sharing: iOS
Interactive Posts
Sharing: Android
Interactive Posts
PlusShare.Builder builder = new PlusShare.Builder(this);
!
builder.addCallToAction(
"CR...
Summary
Summary
Do not build your own authentication system
Google+ makes authentication easy
Use interactive posts to engage your...
Peter Friese
Developer Advocate, Google
google.com/+PeterFriese
@peterfriese
http://peterfriese.de
Upcoming SlideShare
Loading in …5
×

Google+ for Mobile Apps on iOS and Android

2,148 views

Published on

Create a more engaging and personalized experience for your users by incorporating aspects of Google+ into your mobile app. Learn how your users can share pictures, links, and more into Google+ from your app, and how doing so can raise visibility and discoverability of your application.

Published in: Technology
  • Be the first to comment

Google+ for Mobile Apps on iOS and Android

  1. 1. Google+ for Mobile Apps on iOS & Android
  2. 2. Peter Friese Developer Advocate, Google google.com/+PeterFriese @peterfriese http://peterfriese.de
  3. 3. What is Google+ ?
  4. 4. Google+ is…! a social network Image credit: https://www.flickr.com/photos/dainbinder/10538549606/
  5. 5. An identity provider Image credit: http://www.wlmht.nhs.uk/wp-content/uploads/2012/09/passport-photos.jpg
  6. 6. Sign-in with Google
  7. 7. αὐθεντικός (greek):! ! • “that comes from the author”! • authentic! • original! • genuine
  8. 8. Ownership Knowledge Inherence
  9. 9. Authentication - How hard can it be? Image credit: https://www.flickr.com/photos/92269745@N00/3801617675
  10. 10. Quite hard, actually…
  11. 11. Hard for developers…! ... Implementation! ... Infrastructure! ... Security! ... Multiple platforms
  12. 12. Hard for your users… ... more passwords ... more devices ... more trust Image credit: https://flic.kr/p/frJ48
  13. 13. You might even be in the news!
  14. 14. … but not in a good way…
  15. 15. Image credit: https://kezialubanszky.files.wordpress.com/2013/03/don-t-panic-2568311.jpg
  16. 16. Image credit: https://kezialubanszky.files.wordpress.com/2013/03/don-t-panic-2568311.jpg
  17. 17. ± KEEP CALM AND SIGN IN WITH
 GOOGLE+
  18. 18. Easier for you Easier for the user Established, trusted brand Focus on your business model
  19. 19. Over-the-Air Installs
  20. 20. Over-the-Air Installs
  21. 21. Over-the-Air Installs
  22. 22. Over-the-Air Installs
  23. 23. Over-the-Air Installs
  24. 24. Over-the-Air Installs
  25. 25. Over-the-Air Installs
  26. 26. Cross-Device Single Sign-on No tap required, log-in will happen automatically!
  27. 27. Cross-Device Single Sign-on
  28. 28. Cross-Device Single Sign-on
  29. 29. Implementing Google+ Sign-in
  30. 30. How does Google+ Sign-in work? Based on OAuth 2.0 AppUser Google Consent Permission No password sharing Scoped access Revocable
  31. 31. Setting up Developer Console Project https://developers.google.com/console APIs Credentials iOS Client ID Android Client ID Web Client ID Branding Permissions Management
  32. 32. The Auth Triangle You Google Connecting lines need authentication Client Server Google APIs
  33. 33. Client Authentication You Google Client Server Google APIs
  34. 34. Client Authentication
  35. 35. Client Authentication: Android Overview Create OAuth 2.0 client ID Link with Google Play Services API Setup Sign-In
  36. 36. Client Authentication: Android SDK Architecture Android Your App Google APIs Google Play Client Library Google Play Services APK Authorize using existing accounts on Android device
  37. 37. Client Authentication: Android GoogleApiClient Lifecycle mApiClient = new GoogleApiClient.Builder(this) .addConnectionCallbacks(this) .addOnConnectionFailedListener(this) .addApi(Plus.API, null) .addScope(Plus.SCOPE_PLUS_LOGIN) .build(); Java 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
  38. 38. Client Authentication: Android Handling Connection Failure 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
  39. 39. Client Authentication: Android Handle connection failure 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
  40. 40. Client Authentication: Android Connection successful 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
  41. 41. Client Authentication: Android Connection successful 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
  42. 42. Client Authentication: iOS Overview Create OAuth 2.0 client ID Integrate SDK Setup Sign-In
  43. 43. Client Authentication: iOS SDK Architecture iOS Your App Google APIs Google+ iOS SDK Statically linked library
  44. 44. Client Authentication: iOS Configure Sign-In #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
  45. 45. Client Authentication: iOS Perform Sign-In, Option 1 (use our button)
  46. 46. Client Authentication: iOS Perform Sign-In, Option 2 (create your own button) 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
  47. 47. Client Authentication: iOS Receiving the authorisation // 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
  48. 48. Client Authentication: Web Overview Create OAuth 2.0 client ID Include JavaScript client on your web page Add Google+ Sign-in button Handle callback
  49. 49. Client Authentication: Web Architecture Browser Your site Google APIsplusone.js
  50. 50. Client Authentication: Web Integrate sign-in button <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
  51. 51. Client Authentication: Web Handle authorization callback function onSignInCallback(authResult) { if (authResult['access_token']) { // Successfully authorized } else if (authResult['error']) { // User is not signed in. } } JavaScript
  52. 52. Server Authentication You Google Client Server Google APIs
  53. 53. 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”
  54. 54. Server Auth: One-Time Code Integrate sign-in button <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
  55. 55. Server Auth: One-Time Code Handle authorization callback 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
  56. 56. Server Auth: One-Time Code Exchange 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
  57. 57. Sharing with Google+
  58. 58. Use interactive posts to engage your users
  59. 59. Use interactive posts to engage your users
  60. 60. Use interactive posts to engage your users
  61. 61. Sharing: iOS Interactive Posts #import <GooglePlus/GooglePlus.h> #import <GoogleOpenSource/GoogleOpenSource.h> ... id <GPPNativeShareBuilder> shareBuilder = [[GPPShare sharedInstance] nativeShareDialog]; [shareBuilder setURLToShare:[NSURL URLWithString:@“...”]]; ! [shareBuilder setPrefillText:@"Do you want to learn more ...”]; [shareBuilder setContentDeepLinkID:@"talk/googleplusdwx2014"]; [shareBuilder setCallToActionButtonWithLabel: @"LEARN_MORE" URL:[NSURL URLWithString:@“...”] deepLinkID:@“talk/googleplusdwx2014"]; ! [shareBuilder open]; Objective-C
  62. 62. Sharing: iOS Interactive Posts - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions { [GPPDeepLink setDelegate:self]; [GPPDeepLink readDeepLinkAfterInstall]; ! return YES; } Objective-C - (BOOL)application:(UIApplication *)application 
 openURL:(NSURL *)url 
 sourceApplication:(NSString *)sourceApplication annotation:(id)annotation { return [GPPURLHandler handleURL:url sourceApplication:sourceApplication annotation:annotation]; } Objective-C
  63. 63. Sharing: iOS Interactive Posts
  64. 64. Sharing: Android Interactive Posts PlusShare.Builder builder = new PlusShare.Builder(this); ! builder.addCallToAction( "CREATE_ITEM", Uri.parse(“http://...”), “/deep/linkid"); ! builder.setContentUrl(Uri.parse(“https://...”)); ! builder.setContentDeepLinkId(“/deep/linkid", null, null, null); ! builder.setText("Do you want to learn more ..."); ! startActivityForResult(builder.getIntent(), 0); Java
  65. 65. Summary
  66. 66. Summary Do not build your own authentication system Google+ makes authentication easy Use interactive posts to engage your users More info at http://developers.google.com/+
  67. 67. Peter Friese Developer Advocate, Google google.com/+PeterFriese @peterfriese http://peterfriese.de

×