Download - Cross-Platform Authentication with Google+ Sign-In

Transcript
Page 1: Cross-Platform Authentication with Google+ Sign-In

Cross-Platform Auth with Google+ Sign-InGoogle+ Platform

Peter Friese - Developer Advocate

Page 2: Cross-Platform Authentication with Google+ Sign-In

Peter Friese - Developer Advocate +PeterFriese @peterfriese http://www.peterfriese.de

Page 3: Cross-Platform Authentication with Google+ Sign-In

What is Google+ ?

Page 4: Cross-Platform Authentication with Google+ Sign-In

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

Page 5: Cross-Platform Authentication with Google+ Sign-In

http://openclipart.org/detail/26329/aiga-immigration-bg-by-anonymous

Page 6: Cross-Platform Authentication with Google+ Sign-In

What is Authentication?

Page 7: Cross-Platform Authentication with Google+ Sign-In

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.

Page 8: Cross-Platform Authentication with Google+ Sign-In

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/

Page 9: Cross-Platform Authentication with Google+ Sign-In

Authentication - How hard can it be?

https://www.flickr.com/photos/isherwoodchris/7018779395/

Page 10: Cross-Platform Authentication with Google+ Sign-In

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

Page 11: Cross-Platform Authentication with Google+ Sign-In

You might end up in the News

Page 12: Cross-Platform Authentication with Google+ Sign-In

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

Page 13: Cross-Platform Authentication with Google+ Sign-In

±KEEP CALM

ANDSIGN INWITH

GOOGLE+

Page 14: Cross-Platform Authentication with Google+ Sign-In

Google+ Sign-in Features

Page 15: Cross-Platform Authentication with Google+ Sign-In

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)

Page 16: Cross-Platform Authentication with Google+ Sign-In

Sign-in to web site

Cross-Device Single Sign-on and Over-the-Air Install (OTA)Google+ Sign-in Features

Page 17: Cross-Platform Authentication with Google+ Sign-In

Sign-in to web site

Cross-Device Single Sign-on and Over-the-Air Install (OTA)Google+ Sign-in Features

Page 18: Cross-Platform Authentication with Google+ Sign-In

Sign-in to web site

Cross-Device Single Sign-on and Over-the-Air Install (OTA)Google+ Sign-in Features

Page 19: Cross-Platform Authentication with Google+ Sign-In

Sign-in to web site

Cross-Device Single Sign-on and Over-the-Air Install (OTA)Google+ Sign-in Features

OTA consent dialog

Page 20: Cross-Platform Authentication with Google+ Sign-In

Sign-in to web site

Cross-Device Single Sign-on and Over-the-Air Install (OTA)Google+ Sign-in Features

OTA consent dialogOTA installation

Page 21: Cross-Platform Authentication with Google+ Sign-In

Sign-in to web site

Cross-Device Single Sign-on and Over-the-Air Install (OTA)Google+ Sign-in Features

OTA consent dialogOTA installation

Page 22: Cross-Platform Authentication with Google+ Sign-In

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

Page 23: Cross-Platform Authentication with Google+ Sign-In

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

Page 24: Cross-Platform Authentication with Google+ Sign-In

How does Google+ Sign-in work?

Page 25: Cross-Platform Authentication with Google+ Sign-In

AppUser

Google

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

Consent Permission

Page 26: Cross-Platform Authentication with Google+ Sign-In

AppUser

Google

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

Consent Permission

No password sharing

Scoped access

Revocable

Page 27: Cross-Platform Authentication with Google+ Sign-In

Implementing Google+ Sign-in

Page 28: Cross-Platform Authentication with 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

Page 29: Cross-Platform Authentication with 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

One project, multiple clients

Page 30: Cross-Platform Authentication with 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

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

Page 31: Cross-Platform Authentication with Google+ Sign-In

You Google

The Auth Triangle

Connecting lines need authentication

Client

Server

Google APIs

Page 32: Cross-Platform Authentication with Google+ Sign-In

You Google

Client

Server

Google APIs

Client Authentication

Page 33: Cross-Platform Authentication with Google+ Sign-In

Client Authentication

Page 34: Cross-Platform Authentication with Google+ Sign-In

Create OAuth 2.0 client ID

Link with Google Play Services API

Setup Sign-In

OverviewClient Authentication: Android

Page 35: Cross-Platform Authentication with Google+ Sign-In

SDK ArchitectureClient Authentication: Android

iOS

Your App

Google APIs

Google Play Client Library

Google Play Services APK

Authorize using existing accounts on Android device

Page 36: Cross-Platform Authentication with Google+ Sign-In

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

Page 37: Cross-Platform Authentication with Google+ Sign-In

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

Page 38: Cross-Platform Authentication with Google+ Sign-In

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

Page 39: Cross-Platform Authentication with Google+ Sign-In

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

Page 40: Cross-Platform Authentication with Google+ Sign-In

Create OAuth 2.0 client ID

Integrate SDK

Setup Sign-In

OverviewClient Authentication: iOS

Page 41: Cross-Platform Authentication with Google+ Sign-In

iOS

Your App

Google APIsGoogle+ iOS SDK

SDK ArchitectureClient Authentication: iOS

Statically linked library

Page 42: Cross-Platform Authentication with Google+ 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

Configure Sign-InClient Authentication: iOS

Page 43: Cross-Platform Authentication with Google+ Sign-In

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

Page 44: Cross-Platform Authentication with Google+ Sign-In

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

Page 45: Cross-Platform Authentication with Google+ Sign-In

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

Page 46: Cross-Platform Authentication with Google+ Sign-In

Create OAuth 2.0 client ID

Include JavaScript client on your web page

Add Google+ Sign-in button

Handle callback

OverviewClient Authentication: Web

Page 47: Cross-Platform Authentication with Google+ Sign-In

Browser

Your site

Google APIsplusone.js

ArchitectureClient Authentication: Web

Page 48: Cross-Platform Authentication with Google+ Sign-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"> </button> </div> !<!-- Place plusone.js asynchronous JavaScript just before your </body> tag —>

HTML

Integrate sign-in buttonClient Authentication: Web

Page 49: Cross-Platform Authentication with Google+ Sign-In

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

JavaScript

Handle authorization callbackClient Authentication: Web

Page 50: Cross-Platform Authentication with Google+ Sign-In

Server Authentication

You Google

Client

Server

Google APIs

Page 51: Cross-Platform Authentication with Google+ Sign-In

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 52: Cross-Platform Authentication with Google+ Sign-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

Page 53: Cross-Platform Authentication with Google+ Sign-In

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

Page 54: Cross-Platform Authentication with Google+ Sign-In

$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

Page 55: Cross-Platform Authentication with Google+ Sign-In

Best practices and Common Pitfalls

Page 56: Cross-Platform Authentication with Google+ Sign-In

Best practices and Common Pitfalls

Common PitfallsGuidelinesBest practicesUseful resources

Page 57: Cross-Platform Authentication with Google+ Sign-In

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.

Page 58: Cross-Platform Authentication with Google+ Sign-In

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

Page 59: Cross-Platform Authentication with Google+ Sign-In

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

Page 60: Cross-Platform Authentication with Google+ Sign-In

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=

Page 61: Cross-Platform Authentication with Google+ Sign-In

Review

Page 62: Cross-Platform Authentication with Google+ Sign-In

• 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

Page 63: Cross-Platform Authentication with Google+ Sign-In

<Thank You!>developers.google.com/+

Peter Friese - Developer Advocate +PeterFriese @peterfriese http://www.peterfriese.de