Web技術勉強会 20130525 - Google Cloud Messaging入門
?
1 like?1,419 views
Google Cloud Messagingの紹介とサンプルの作成について。
![手順1：ChromeExtension作成
manifest.json
{
"manifest_version": 2,
"name": "GCM Test",
"description": "It's test extension",
"version": "1.0.1",
"permissions": ["permissions": [
"pushMessaging",
"notifications"
],
"background": {
"scripts": ["test.js"]
}
}](https://image.slidesharecdn.com/web20130525-130524235027-phpapp01/85/Web-20130525-Google-Cloud-Messaging-6-320.jpg)
![手顺5：通知プログラム作成
アクセストークンは1時間で使用不可になるので実行ごと
にとるようにすると良い
request = {
'client_id' => client_id,
'client_secret' => client_secret,
'refresh_token' => refresh,
'grant_type' => 'refresh_token''grant_type' => 'refresh_token'
}
client = HTTPClient.new
client.ssl_config.verify_mode = nil
res = client.post(
'https://accounts.google.com/o/oauth2/token',
request
)
access_token = JSON.parse(res.body)['access_token']](https://image.slidesharecdn.com/web20130525-130524235027-phpapp01/85/Web-20130525-Google-Cloud-Messaging-27-320.jpg)
Web技術勉強会 20130525 - Google Cloud Messaging入門
- 1. Web技術勉強会 Ryuichi TANAKA/@mapserver2007/summer-lights.jp Google Cloud Messaging for Chrome入門
- 6. 手順1：ChromeExtension作成 manifest.json { "manifest_version": 2, "name": "GCM Test", "description": "It's test extension", "version": "1.0.1", "permissions": ["permissions": [ "pushMessaging", "notifications" ], "background": { "scripts": ["test.js"] } }
- 7. 手順1：ChromeExtension作成 test.json chrome.pushMessaging.getChannelId(false, function (response){ console.log(response); } var messageCallback = function(message) { var notification = webkitNotifications.createNotification(var notification = webkitNotifications.createNotification( '', 'Message', message.payload + message.subchannelId ); notification.show(); }; chrome.pushMessaging.onMessage.addListener(messageCallback);
- 14. 手順3：Google APIs Console設定 Google APIs Console (https://code.google.com/apis/console)。 APIのOauth認証の設定を行う
- 16. 手順3：Google APIs Console設定 API Access→Create an Oauth 2.0 client ID branding informationに入力する Application Typeは「Web Application」を選択 Authrorized Redirect URLs→More optionsを選択 https://developers.google.com/oauthplayground を入力 ClientID、Client secretを取得するClientID、Client secretを取得する
- 18. 手順3：Google APIs Console設定 「Service」で「Google Cloud Messaging for Chrome」を「ON」にする
- 19. 手順4：Oauth 2.0 Playground設定 Oauth 2.0 Playground(https://developers.google.com/oauthpla yground/) に遷移 右上の設定ボタンから「Oauth Client ID」「Oauth Client secret」を設定
- 21. 手順4：Oauth 2.0 Playground設定 Step1 Select & authorize APIs https://www.googleapis.com/auth/gcm_for_chrome を入 力して「Authorize APIs」をクリック
- 24. 手順4：Oauth 2.0 Playground設定 Step2 Exchange authorization code for tokens Exchange authorization code for tokensボタンをクリックし てRefresh tokenとAccess tokenを入手
- 27. 手顺5：通知プログラム作成 アクセストークンは1時間で使用不可になるので実行ごと にとるようにすると良い request = { 'client_id' => client_id, 'client_secret' => client_secret, 'refresh_token' => refresh, 'grant_type' => 'refresh_token''grant_type' => 'refresh_token' } client = HTTPClient.new client.ssl_config.verify_mode = nil res = client.post( 'https://accounts.google.com/o/oauth2/token', request ) access_token = JSON.parse(res.body)['access_token']
- 28. 手顺5：通知プログラム作成 Chromeに通知するサンプルコード data = { :channelId => channelId, :subchannelId => "0", :payload => "hellow!" } response = client.post( 'https://www.googleapis.com/gcm_for_chrome/v1/messages', data.to_json, { 'Content-Type' => "application/json", 'Authorization' => "Bearer #{access_token}" } )
- 29. 手顺5：通知プログラム作成