google+ for mobile apps on ios and android

67
Google+ for Mobile Apps on iOS & Android

Upload: peter-friese

Post on 08-Sep-2014

402 views

Category:

Technology


5 download

DESCRIPTION

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.

TRANSCRIPT

Page 1: Google+ for Mobile Apps on iOS and Android

Google+ for Mobile Apps on iOS & Android

Page 2: Google+ for Mobile Apps on iOS and Android

Peter Friese Developer Advocate, Google

google.com/+PeterFriese @peterfriese

http://peterfriese.de

Page 3: Google+ for Mobile Apps on iOS and Android

What is Google+ ?

Page 4: Google+ for Mobile Apps on iOS and Android

Google+ is…!a social network

Image credit: https://www.flickr.com/photos/dainbinder/10538549606/

Page 5: Google+ for Mobile Apps on iOS and Android

An identity provider

Image credit: http://www.wlmht.nhs.uk/wp-content/uploads/2012/09/passport-photos.jpg

Page 6: Google+ for Mobile Apps on iOS and Android

Sign-in with Google

Page 7: Google+ for Mobile Apps on iOS and Android

αὐθεντικός (greek):!!• “that comes from the author”!• authentic!• original!• genuine

Page 8: Google+ for Mobile Apps on iOS and Android

Ownership Knowledge Inherence

Page 9: Google+ for Mobile Apps on iOS and Android

Authentication - How hard can it be?

Image credit: https://www.flickr.com/photos/92269745@N00/3801617675

Page 10: Google+ for Mobile Apps on iOS and Android

Quite hard, actually…

Page 11: Google+ for Mobile Apps on iOS and Android

Hard for developers…!... Implementation!... Infrastructure!... Security!... Multiple platforms

Page 12: Google+ for Mobile Apps on iOS and Android

Hard for your users…

... more passwords

... more devices

... more trustImage credit: https://flic.kr/p/frJ48

Page 13: Google+ for Mobile Apps on iOS and Android

You might even be in the news!

Page 14: Google+ for Mobile Apps on iOS and Android

… but not in a good way…

Page 15: Google+ for Mobile Apps on iOS and Android

Image credit: https://kezialubanszky.files.wordpress.com/2013/03/don-t-panic-2568311.jpg

Page 16: Google+ for Mobile Apps on iOS and Android

Image credit: https://kezialubanszky.files.wordpress.com/2013/03/don-t-panic-2568311.jpg

Page 17: Google+ for Mobile Apps on iOS and Android

±KEEP CALM

ANDSIGN INWITH

GOOGLE+

Page 18: Google+ for Mobile Apps on iOS and Android

Easier for youEasier for the user

Established, trusted brandFocus on your business

model

Page 19: Google+ for Mobile Apps on iOS and Android

Over-the-Air Installs

Page 20: Google+ for Mobile Apps on iOS and Android

Over-the-Air Installs

Page 21: Google+ for Mobile Apps on iOS and Android

Over-the-Air Installs

Page 22: Google+ for Mobile Apps on iOS and Android

Over-the-Air Installs

Page 23: Google+ for Mobile Apps on iOS and Android

Over-the-Air Installs

Page 24: Google+ for Mobile Apps on iOS and Android

Over-the-Air Installs

Page 25: Google+ for Mobile Apps on iOS and Android

Over-the-Air Installs

Page 26: Google+ for Mobile Apps on iOS and Android

Cross-Device Single Sign-on

No tap required, log-in will happen automatically!

Page 27: Google+ for Mobile Apps on iOS and Android

Cross-Device Single Sign-on

Page 28: Google+ for Mobile Apps on iOS and Android

Cross-Device Single Sign-on

Page 29: Google+ for Mobile Apps on iOS and Android

Implementing Google+ Sign-in

Page 30: Google+ for Mobile Apps on iOS and Android

How does Google+ Sign-in work?Based on OAuth 2.0

AppUser

Google

Consent Permission

No password sharing

Scoped access

Revocable

Page 31: Google+ for Mobile Apps on iOS and Android

Setting up

Developer Console Project

https://developers.google.com/console

APIs

CredentialsiOS Client ID

Android Client ID

Web Client ID

Branding

Permissions

Management

Page 32: Google+ for Mobile Apps on iOS and Android

The Auth Triangle

You Google

Connecting lines need authentication

Client

Server

Google APIs

Page 33: Google+ for Mobile Apps on iOS and Android

Client Authentication

You Google

Client

Server

Google APIs

Page 34: Google+ for Mobile Apps on iOS and Android

Client Authentication

Page 35: Google+ for Mobile Apps on iOS and Android

Client Authentication: AndroidOverview

Create OAuth 2.0 client ID

Link with Google Play Services API

Setup Sign-In

Page 36: Google+ for Mobile Apps on iOS and Android

Client Authentication: AndroidSDK Architecture

Android

Your App

Google APIs

Google Play Client Library

Google Play Services APK

Authorize using existing accounts on Android device

Page 37: Google+ for Mobile Apps on iOS and Android

Client Authentication: AndroidGoogleApiClient 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

Page 38: Google+ for Mobile Apps on iOS and Android

Client Authentication: AndroidHandling 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

Page 39: Google+ for Mobile Apps on iOS and Android

Client Authentication: AndroidHandle 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

Page 40: Google+ for Mobile Apps on iOS and Android

Client Authentication: AndroidConnection 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

Page 41: Google+ for Mobile Apps on iOS and Android

Client Authentication: AndroidConnection 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

Page 42: Google+ for Mobile Apps on iOS and Android

Client Authentication: iOSOverview

Create OAuth 2.0 client ID

Integrate SDK

Setup Sign-In

Page 43: Google+ for Mobile Apps on iOS and Android

Client Authentication: iOSSDK Architecture

iOS

Your App

Google APIsGoogle+ iOS SDK

Statically linked library

Page 44: Google+ for Mobile Apps on iOS and Android

Client Authentication: iOSConfigure 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

Page 45: Google+ for Mobile Apps on iOS and Android

Client Authentication: iOSPerform Sign-In, Option 1 (use our button)

Page 46: Google+ for Mobile Apps on iOS and Android

Client Authentication: iOSPerform 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

Page 47: Google+ for Mobile Apps on iOS and Android

Client Authentication: iOSReceiving 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

Page 48: Google+ for Mobile Apps on iOS and Android

Client Authentication: WebOverview

Create OAuth 2.0 client ID

Include JavaScript client on your web page

Add Google+ Sign-in button

Handle callback

Page 49: Google+ for Mobile Apps on iOS and Android

Client Authentication: WebArchitecture

Browser

Your site

Google APIsplusone.js

Page 50: Google+ for Mobile Apps on iOS and Android

Client Authentication: WebIntegrate 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

Page 51: Google+ for Mobile Apps on iOS and Android

Client Authentication: WebHandle authorization callback

function onSignInCallback(authResult) { if (authResult['access_token']) { // Successfully authorized } else if (authResult['error']) { // User is not signed in. } }

JavaScript

Page 52: Google+ for Mobile Apps on iOS and Android

Server Authentication

You Google

Client

Server

Google APIs

Page 53: Google+ for Mobile Apps on iOS and Android

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”

Page 54: Google+ for Mobile Apps on iOS and Android

Server Auth: One-Time CodeIntegrate 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

Page 55: Google+ for Mobile Apps on iOS and Android

Server Auth: One-Time CodeHandle 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

Page 56: Google+ for Mobile Apps on iOS and Android

Server Auth: One-Time CodeExchange 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

Page 57: Google+ for Mobile Apps on iOS and Android

Sharing with Google+

Page 58: Google+ for Mobile Apps on iOS and Android

Use interactive posts to engage your users

Page 59: Google+ for Mobile Apps on iOS and Android

Use interactive posts to engage your users

Page 60: Google+ for Mobile Apps on iOS and Android

Use interactive posts to engage your users

Page 61: Google+ for Mobile Apps on iOS and Android

Sharing: iOSInteractive 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

Page 62: Google+ for Mobile Apps on iOS and Android

Sharing: iOSInteractive 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

Page 63: Google+ for Mobile Apps on iOS and Android

Sharing: iOSInteractive Posts

Page 64: Google+ for Mobile Apps on iOS and Android

Sharing: AndroidInteractive 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

Page 65: Google+ for Mobile Apps on iOS and Android

Summary

Page 66: Google+ for Mobile Apps on iOS and Android

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/+

Page 67: Google+ for Mobile Apps on iOS and Android

Peter Friese Developer Advocate, Google

google.com/+PeterFriese @peterfriese

http://peterfriese.de