CIS13: An Introduction to Integrating Google+ Sign-In
Post on 15-Jan-2015
1123 Views
Preview:
DESCRIPTION
Transcript
Developers
Tuesday, July 23, 13
Tuesday, July 23, 13
An Introduction to Integrating Google+ Sign-In
Tuesday, July 23, 13
Tuesday, July 23, 13
Jonathan Beri
Developer Advocate, Google+google.com/+JonathanBeri
Tuesday, July 23, 13
Agenda
4
Tuesday, July 23, 13
Agenda
+The Google+ Sign-In Button
4
Tuesday, July 23, 13
Agenda
+The Google+ Sign-In Button+Personalizing Your App
4
Tuesday, July 23, 13
Agenda
+The Google+ Sign-In Button+Personalizing Your App+Involve Close Friends with Targeted Sharing
4
Tuesday, July 23, 13
Agenda
+The Google+ Sign-In Button+Personalizing Your App+Involve Close Friends with Targeted Sharing+Surfacing Relevant Actions Across Google
4
Tuesday, July 23, 13
Tuesday, July 23, 13
Tuesday, July 23, 13
Thinking SocialIt starts with people and connections
Tuesday, July 23, 13
New Users & Engagement
6
Tuesday, July 23, 13
New Users & Engagement
6
New Users
Tuesday, July 23, 13
New Users & Engagement
6
New Users Engagement
Tuesday, July 23, 13
Tuesday, July 23, 13
Google+ Sign-InCapture new users with a button
Tuesday, July 23, 13
The Google+ Sign-In Button
8
Sign in with Google
Tuesday, July 23, 13
Tuesday, July 23, 13
Tuesday, July 23, 13
Tuesday, July 23, 13
Tuesday, July 23, 13
Tuesday, July 23, 13
Tuesday, July 23, 13
10
Tuesday, July 23, 13
10
Tuesday, July 23, 13
Tuesday, July 23, 13
The Google+ Sign-In ButtonAdding the code
Tuesday, July 23, 13
Developers.google.com/+
12
Tuesday, July 23, 13
Code.google.com/apis/console
13
Tuesday, July 23, 13
Google+ Sign-In (button): Web
<span id="signinButton"> <span class="g-signin" data-clientid="CLIENT_ID" data-scope="https://www.googleapis.com/auth/plus.login" data-cookiepolicy="single_host_origin" data-requestvisibleactions="http://schemas.google.com/AddActivity" data-callback="signinCallback"> </span></span>
14
The HTML
HTML
Tuesday, July 23, 13
Google+ Sign-In (button): Web
<span id="signinButton"> <span class="g-signin" data-clientid="CLIENT_ID" data-scope="https://www.googleapis.com/auth/plus.login" data-cookiepolicy="single_host_origin" data-requestvisibleactions="http://schemas.google.com/AddActivity" data-callback="signinCallback"> </span></span>
15
The HTML
HTML
Tuesday, July 23, 13
Google+ Sign-In (button): Web
<span id="signinButton"> <span class="g-signin" data-clientid="CLIENT_ID" data-scope="https://www.googleapis.com/auth/plus.login" data-cookiepolicy="single_host_origin" data-requestvisibleactions="http://schemas.google.com/AddActivity" data-callback="signinCallback"> </span></span>
16
The HTML
HTML
Tuesday, July 23, 13
Google+ Sign-In (button): Web
<span id="signinButton"> <span class="g-signin" data-clientid="CLIENT_ID" data-scope="https://www.googleapis.com/auth/plus.login" data-cookiepolicy="single_host_origin" data-requestvisibleactions="http://schemas.google.com/AddActivity" data-callback="signinCallback"> </span></span>
17
The HTML
HTML
Tuesday, July 23, 13
Google+ Sign-In (button): Web
<span id="signinButton"> <span class="g-signin" data-clientid="CLIENT_ID" data-scope="https://www.googleapis.com/auth/plus.login" data-cookiepolicy="single_host_origin" data-requestvisibleactions="http://schemas.google.com/AddActivity" data-callback="signinCallback"> </span></span>
18
The HTML
HTML
Tuesday, July 23, 13
Google+ Sign-In (button): Web
<span id="signinButton"> <span class="g-signin" data-clientid="CLIENT_ID" data-scope="https://www.googleapis.com/auth/plus.login" data-cookiepolicy="single_host_origin" data-requestvisibleactions="http://schemas.google.com/AddActivity" data-callback="signinCallback"> </span></span>
19
The HTML
HTML
Tuesday, July 23, 13
Google+ Sign-In (button): Web
<span id="signinButton"> <span class="g-signin" data-clientid="CLIENT_ID" data-scope="https://www.googleapis.com/auth/plus.login" data-cookiepolicy="single_host_origin" data-requestvisibleactions="http://schemas.google.com/AddActivity" data-callback="signinCallback"> </span></span>
20
The HTML
HTML
Tuesday, July 23, 13
Google+ Sign-In (button): Web
<script type="text/javascript" > (function() { var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true; po.src = 'https://apis.google.com/js/client:plusone.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s); })();</script>
21
The JavaScript
JS
Tuesday, July 23, 13
Google+ Sign-In (button): Web
<script type="text/javascript" > (function() { var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true; po.src = 'https://apis.google.com/js/client:plusone.js'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s); })();</script>
22
The JavaScript
JS
Tuesday, July 23, 13
Google+ Sign-In (button): Web
<span id="signinButton"> <span class="g-signin" data-apppackagename="com.google.android.apps.plus" data-clientid="CLIENT_ID" data-scope="https://www.googleapis.com/auth/plus.login" data-cookiepolicy="single_host_origin" data-requestvisibleactions="http://schemas.google.com/AddActivity" data-callback="signinCallback"> </span></span>
23
App Installs: Over-The-Air
HTML
Tuesday, July 23, 13
Google+ Sign-In (button): Web
<span id="signinButton"> <span class="g-signin" data-apppackagename="com.google.android.apps.plus" data-clientid="CLIENT_ID" data-scope="https://www.googleapis.com/auth/plus.login" data-cookiepolicy="single_host_origin" data-requestvisibleactions="http://schemas.google.com/AddActivity" data-callback="signinCallback"> </span></span>
24
App Installs: Over-The-Air
HTML
Tuesday, July 23, 13
Google+ Sign-In (button): Android
@Overrideprotected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); mPlusClient = new PlusClient.Builder(this, this, this) .setScopes(Scopes.PLUS_LOGIN) .setVisibleActivities("http://schemas.google.com/AddActivity") .build(); mPlusClient.connect();}
25
Google Play Services & PlusClient
Java
Tuesday, July 23, 13
Google+ Sign-In (button): iOS
#import <GooglePlus/GooglePlus.h>#import <GoogleOpenSource/GoogleOpenSource.h>
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions { GPPSignIn *signIn = [GPPSignIn sharedInstance]; signIn.clientID = @"CLIENT_ID"; signIn.scopes = @[@"https://www.googleapis.com/auth/plus.login"]; signIn.actions = @[@"http://schemas.google.com/AddActivity"];}
26
iOS Framework
Obj-C
Tuesday, July 23, 13
Tuesday, July 23, 13
Personalizing Your AppIntegrating profile and connection data more deeply
Tuesday, July 23, 13
Quickly Create Profiles
28
Tuesday, July 23, 13
Tuesday, July 23, 13
Tuesday, July 23, 13
Personalizing Your AppAdding the code
Tuesday, July 23, 13
Personalizing Your App
gapi.client.load(‘plus’, ‘v1’, function() { var request = gapi.client.plus.people.get({ 'userId': "me" }); request.execute(function(resp) { console.log('Retrieved profile:' + resp.displayName); });});
31
Retrieve a profile
JS
Tuesday, July 23, 13
Personalizing Your App
gapi.client.load(‘plus’, ‘v1’, function() { var request = gapi.client.plus.people.get({ 'userId': "me" }); request.execute(function(resp) { console.log('Retrieved profile:' + resp.displayName); });});
32
Retrieve a profile
JS
Tuesday, July 23, 13
Personalizing Your App
gapi.client.load(‘plus’, ‘v1’, function() { var request = gapi.client.plus.people.get({ 'userId': "me" }); request.execute(function(resp) { console.log('Retrieved profile:' + resp.displayName); });});
33
Retrieve a profile
JS
Tuesday, July 23, 13
Personalizing Your App
var friends = gapi.client.plus.people.list({ 'userId': "me", 'collection': "visible"});friends.execute(function(resp) { console.log('Num people visible:' + resp.totalItems);});
34
Retrieve a list of friends
JS
Tuesday, July 23, 13
Personalizing Your App
var friends = gapi.client.plus.people.list({ 'userId': "me", 'collection': "visible"});friends.execute(function(resp) { console.log('Num people visible:' + resp.totalItems);});
35
Retrieve a list of friends
JS
Tuesday, July 23, 13
Tuesday, July 23, 13
Involve Close Friends with Targeted SharingGet friends to join from the stream with Interactive Posts
Tuesday, July 23, 13
Tuesday, July 23, 13
Tuesday, July 23, 13
Tuesday, July 23, 13
Tuesday, July 23, 13
Tuesday, July 23, 13
Tuesday, July 23, 13
Tuesday, July 23, 13
Check out the delicious dishes at La Mar Cebicheria Peruana
Tuesday, July 23, 13
6:14
Jonathan Beri shared with you:Check out the delicious dishes at...
Jonathan Beri shared with you: Check out the delicious dishes at...
Tuesday, July 23, 13
Jonathan Beri
6:14
Mascone West
Check out the delicious dishes at Tía Pol!
Jonathan Beri
Tuesday, July 23, 13
6:15
Tía Pol
Tuesday, July 23, 13
A Button for Every Social Action
Tuesday, July 23, 13
A Button for Every Social Action
Jonathan BeriBrett JohnsonJonathan BeriBrett Johnson
Tuesday, July 23, 13
A Button for Every Social Action
Joanna SmithJoanna Smith
Tuesday, July 23, 13
A Button for Every Social Action
Tuesday, July 23, 13
A Button for Every Social Action
Tuesday, July 23, 13
Tuesday, July 23, 13
Involve Close Friends with Targeted SharingAdding the code
Tuesday, July 23, 13
Involve Close Friends
<button class=”g-interactivepost” data-clientid="CLIENT_ID" data-scope="https://www.googleapis.com/auth/plus.login" data-cookiepolicy="single_host_origin" data-requestvisibleactions="http://schemas.google.com/AddActivity" data-calltoactionlabel="CREATE" data-calltoactionurl="http://plus.google.com/pages/create" data-calltoactiondeeplinkid="/pages/create"> Share!</button>
46
Interactive Post (HTML)
JS
Tuesday, July 23, 13
Involve Close Friends
<button class=”g-interactivepost” data-clientid="CLIENT_ID" data-scope="https://www.googleapis.com/auth/plus.login" data-cookiepolicy="single_host_origin" data-requestvisibleactions="http://schemas.google.com/AddActivity" data-calltoactionlabel="CREATE" data-calltoactionurl="http://plus.google.com/pages/create" data-calltoactiondeeplinkid="/pages/create"> Share!</button>
47
Setting up Labels & Call-To-Action
JS
Tuesday, July 23, 13
Involve Close Friends
<button class=”g-interactivepost” data-clientid="CLIENT_ID" data-scope="https://www.googleapis.com/auth/plus.login" data-cookiepolicy="single_host_origin" data-requestvisibleactions="http://schemas.google.com/AddActivity" ... data-prefilltext="Create a Google+ page for your business." data-recipients="110967630299632321627,leeroy.jenkins@example.com" Share!</button>
48
Prefill Recipients & Share Text
JS
Tuesday, July 23, 13
Involve Close Friends
<button class=”g-interactivepost” data-clientid="CLIENT_ID" data-scope="https://www.googleapis.com/auth/plus.login" data-cookiepolicy="single_host_origin" data-requestvisibleactions="http://schemas.google.com/AddActivity" ... data-prefilltext="Create a Google+ page for your business." data-recipients="110967630299632321627,leeroy.jenkins@example.com" Share!</button>
49
Also a Sign-In Button!
JS
Tuesday, July 23, 13
Involve Close Friends
- (IBAction)share:(id)sender { id<GPPShareBuilder> shareDialog = [[GPPShare sharedInstance] shareDialog]; [shareDialog setCallToActionButtonWithLabel:@"CREATE" URL: [NSURL URLWithString:@"https://developers.google.com/+/mobile/ios/"] deepLinkID:@"/+/mobile/ios/"]; [shareDialog open];}
50
iOS
JS
Tuesday, July 23, 13
Tuesday, July 23, 13
Surface Activities on Google when they matterWriting App Activities
Tuesday, July 23, 13
40 personal results. 24,700,000 other results.
Images Maps Shopping News More ▾ Search tools
Ardan Arac
+Ardan Search Images Mail Drive Calendar Sites Groups Contacts More ▾
▾3 Share
Web
fandango
FollowFandango7,912 followers on Google+
Recent post
Joss Whedon Talks Thanos, 'Avengers 2 & 3' and RDJ in 'Iron Man 3' on our movie blog. 3 hours ago
OblivionPG-13, 2 hr 5 min2,044 watched the trailer
42PG-13, 2 hr 8 min1,903 watched the trailer
The CroodsPG, 1 hr 31 min1,968 watched the trailer
Scary Movie VPG-13, 1 hr 25 min1,761 watched the trailer
Popular with Google+ users
Tuesday, July 23, 13
40 personal results. 24,700,000 other results.
Images Maps Shopping News More ▾ Search tools
Ardan Arac
+Ardan Search Images Mail Drive Calendar Sites Groups Contacts More ▾
▾3 Share
Web
fandango
FollowFandango7,912 followers on Google+
Recent post
Joss Whedon Talks Thanos, 'Avengers 2 & 3' and RDJ in 'Iron Man 3' on our movie blog. 3 hours ago
OblivionPG-13, 2 hr 5 min2,044 watched the trailer
42PG-13, 2 hr 8 min1,903 watched the trailer
The CroodsPG, 1 hr 31 min1,968 watched the trailer
Scary Movie VPG-13, 1 hr 25 min1,761 watched the trailer
Popular with Google+ users
Tuesday, July 23, 13
Tuesday, July 23, 13
Tuesday, July 23, 13
Surface Activities on Google when they matterAdding the code
Tuesday, July 23, 13
Involve Close Friends
moment = {“type” : “http://schamas.google.com/BuyActivity”, "target": { "url": "https://developers.google.com/+/plugins/snippet/examples/thing" } }google_request = service.moments().insert(userId='me', collection='vault', body=moment)momentResult = google_request.execute()
55
Server-Side (Python)
Python
Tuesday, July 23, 13
Review
56
Tuesday, July 23, 13
Review
+The Google+ Sign-In Button
56
Tuesday, July 23, 13
Review
+The Google+ Sign-In Button+Personalizing Your App
56
Tuesday, July 23, 13
Review
+The Google+ Sign-In Button+Personalizing Your App+Involve Close Friends with Targeted Sharing
56
Tuesday, July 23, 13
Review
+The Google+ Sign-In Button+Personalizing Your App+Involve Close Friends with Targeted Sharing+Surfacing Relevant Actions Across Google
56
Tuesday, July 23, 13
Credits• New User designed by Yuri Mamaev from The Noun Project• Click designed by Rohan Gupta from The Noun Project
57
Tuesday, July 23, 13
Tuesday, July 23, 13
<Thank You!>developers.google.com/+plus.google.com/+GooglePlusDevelopersstackoverflow.com/questions/tagged/google-plus
Jonathan Beri, google.com/+JonathanBeri
Tuesday, July 23, 13
Developers
Tuesday, July 23, 13
top related