Firefox Marketplace & Payments
@ html5j 42th (Web Platform & Manetize)
by Tomoya Asai (dynamis)
about:me
Tomoya ASAI
Mozilla Japan
Technical Marketing (Evangelist)
dynamis @ community
dynamis.jp
@dynamitter
facebook.com/dynamis...
about:topics
Topics
Web Apps
Firefox Marketplace
Payment API
FFiirreeffooxx  MMaarrkkeettppllaaccee
でアプリをインストールし
たことある人いる?
Chrome Store について田中さんが聞いてたからぼくも聞いてみる!
Web Apps
Firefox OS のアプリ開発
Web アプリです。
Web アプリです。
Web アプリです。
大事なこと3回
Firefox OS のアプリ開発
Web アプリです。
Web アプリです。
Web アプリです。
大事なこと3回
Firefox OS のアプリ開発
いつもの開発ツール
いつものエディタ
いつものライブラリ
いつもと一緒だ
から安心だね!
Firefox OS のアプリ課金
いつもの課金 API
Paypal, クレジットカード,
Google In-App Payment などなど
+
Firefox Marketplace
navigator.mozPay()
好きなの
使っ...
2つの方式のアプリ
Hosted (Web 読み込み型)
従来の OS ではブラウザ上で動作
動作や権限は従来の Web と同じ
オフライン対応アプリも一応可能
Packaged (ダウンロード型)
従来のスマホアプリに相当する
マーケット審査...
アプリ情報ファイル作るだけ
Hosted App
Web から読み込むアプリ
Web サイト + manifest.webapp
Packaged App
従来型のダウンロードアプリ相当
サイト全体 ZIP + package.manifest...
アプリの種類と権限
ブラウザと一緒が基本
追加権限を求めない限りブラウ
ザ内でできることと一緒
権限に応じた制限
SD カード読み書きなどの権限を
得るには Privileged アプリとして
Marketplace での審査が必要
方式 種類 概要
Hosted
(Web から
読み込む)
Web Content
Web サイトそのもの。
ブラウザ内でアクセスして使う。Hosted
(Web から
読み込む) Installed Web
Web サイトをインストールしたも...
Firefox
Marketplace
Firefox Marketplace
全てを Web 技術で実装
安定・平等な環境を提供
Marketplace のソースも公開
オープンなマーケット
キャリアなど独自マーケット可
ストア、認証、課金も自由に
https://marketpl...
Marketplace のパートナー
多数のパートナーのうち一例です
Firefox = WebRT (WebRunTime)
Gecko = アプリ環境
Firefox = Gecko で XUL/JS
WebApps = Gecko で HTML/JS
マルチデバイス対応
PC, Android, Firef...
Android に Web アプリ環境を
Web App = Native App に
ホームスクリーンへの追加
独立してフル画面起動
ネイティブ同様の利用体験
Firefox = WebRT for Android
ホームにインストール、アプ...
PC にも Web アプリ環境を
Web App = Native App に
プログラムフォルダ (アプリケー
ションディレクトリ) への追加
ウィンドウはもちろんプロセスも
データも全て独立
Firefox = WebRT for PC
C...
権限に応じたレビュー
一般のアプリ
デフォルト安全なので公序良俗
に反しないなど簡単な確認だけ
特権を持つアプリ
追加で特別な権限を求める場合
フルソースコードチェック対象
Privileged or Certified アプリ
レビュアー募集中
レビュアー随時募集
https://blog.mozilla.org/apps/
2013/05/20/become-a-
marketplace-app-reviewer/
我こそはと思う人は是非
Payments API
Mozilla の課金 API (mozPay)
navigator.mozPay
標準化はされていない
Web 標準化の議論は W3C の Web
Payment Community Group にて
Google の In-App Paym...
課金システムフロー (簡易)
ユーザ (端末) アプリサーバ Marketplace
購入開始!
商品情報 JWT 送付
mozPay(JWT)
認証と課金確認を要求
商品購入の確認
課金 postback 送付
課金完了を通知
認証は Per...
Firefox Marketplace と mozPay API における課金処理の流れ
参考までに課金に関するデータフロー
App Key & Secret Key
アプリケーションキー
アプリの ID みたいなもの
商品情報に埋め込む
シークレットキー
JWT に署名するためのキー
Marketplace で発行される
サンプルキー取得: https://mark...
JSON Web Token (JWT)
署名付き JSON データ仕様
商品情報やレシートなどに利用
商品情報 JWT では:
App Key や価格などを記載
App Secret で署名して渡す
App Key と App Secret ...
商品情報 JWT の例
{
  "iss":	 APPLICATION_KEY,	 //	 Marketplace	 で発行されるアプリキー
  "aud":	 "marketplace.firefox.com",
  "typ":	 "moz...
JWT を PyJWT で署名
import	 jwt
mozJWT	 =	 jwt.encode({
  "iss":	 APPLICATION_KEY,
  "aud":	 "marketplace.firefox.com",
  "typ...
JWT 署名用ライブラリ例
Python: PyJWT-mozilla
Ruby: ruby-jwt
node.js: node-jwt-simple
PHP: luciferous/jwt
Java: jsontoken
.NET: Json...
navigator.mozPay()
navigator.mozPay([JWT])
アプリサーバから商品情報を記
載した JWT を取得して呼び出す
課金完了したらコールバック
W3C で議論中の API とは別
標準化はどうなるかまだ未知数...
navigator.mozPay()
//	 ユーザに課金画面を表示	 (複数要求可)
var	 req	 =	 navigator.mozPay([mozJWT,	 another]);
req.onsuccess	 =	 function(...
課金 postback 処理
Marketplace から通知
最初に商品情報 JWT で指定した
request.postbckURL が呼ばれる
キャンセル時は chargebackURL
notice パラメータに transaction...
課金 postback JWT の例
{
	 	 "iss":	 "marketplace.firefox.com",
	 	 "aud":	 APPLICATION_KEY,
	 	 "typ":	 "mozilla/payments/pay...
アプリ側で課金処理の完了
var	 req	 =	 navigator.mozPay([mozJWT,	 another]);
req.onsuccess	 =	 function()	 {
	 	 waitForPostback();	 //...
買ってくれて
ありがとう!
Web Application Receipt
課金証明 (レシート) JWT
navigator.mozApps.getSelf().receipts
で購入済みレシート配列を取得
サーバに送って有効性検証
アプリ起動時や定期的に検証
rec...
WebApp Receipt JWT の例
{
  "product":	 {
    "url":	 "http://example.jp",
    "storedata":	 "id=1234"
  },
  "iss":	 "https...
WebApp Receipt の検証
//	 receiptverifier	 ライブラリ使うと簡単
//	 receipt	 を直接操作する必要すらない
mozmarket.receipts.Prompter({
	 	 storeURL:	...
For More Info
Firefox OS コミュニティ!
http://FxOS.org/
イベントやドキュメントをご案内
http://FxOS.org/ml
(https://groups.google.com/group/
firefoxos にリダイレクト)...
Upcoming SlideShare
Loading in...5
×

Firefox Marketplace and Payment

1,413

Published on

html5j 42th で使用したスライド

Published in: Technology

Firefox Marketplace and Payment

  1. 1. Firefox Marketplace & Payments @ html5j 42th (Web Platform & Manetize) by Tomoya Asai (dynamis)
  2. 2. about:me
  3. 3. Tomoya ASAI Mozilla Japan Technical Marketing (Evangelist) dynamis @ community dynamis.jp @dynamitter facebook.com/dynamis mailto: Tomoya ASAI <dynamis mozilla-japan.org>@
  4. 4. about:topics
  5. 5. Topics Web Apps Firefox Marketplace Payment API
  6. 6. FFiirreeffooxx MMaarrkkeettppllaaccee でアプリをインストールし たことある人いる? Chrome Store について田中さんが聞いてたからぼくも聞いてみる!
  7. 7. Web Apps
  8. 8. Firefox OS のアプリ開発 Web アプリです。 Web アプリです。 Web アプリです。 大事なこと3回
  9. 9. Firefox OS のアプリ開発 Web アプリです。 Web アプリです。 Web アプリです。 大事なこと3回
  10. 10. Firefox OS のアプリ開発 いつもの開発ツール いつものエディタ いつものライブラリ いつもと一緒だ から安心だね!
  11. 11. Firefox OS のアプリ課金 いつもの課金 API Paypal, クレジットカード, Google In-App Payment などなど + Firefox Marketplace navigator.mozPay() 好きなの 使って!
  12. 12. 2つの方式のアプリ Hosted (Web 読み込み型) 従来の OS ではブラウザ上で動作 動作や権限は従来の Web と同じ オフライン対応アプリも一応可能 Packaged (ダウンロード型) 従来のスマホアプリに相当する マーケット審査を経て追加権限取得 サイト全体を ZIP して配布する形式 Packaged Web アプリ Hosted Web アプリ Internet Server 端末 詳細: https://developer.mozilla.org/ja/docs/Web/Apps/Packaged_apps
  13. 13. アプリ情報ファイル作るだけ Hosted App Web から読み込むアプリ Web サイト + manifest.webapp Packaged App 従来型のダウンロードアプリ相当 サイト全体 ZIP + package.manifest 有料版は Packaged とか簡単
  14. 14. アプリの種類と権限 ブラウザと一緒が基本 追加権限を求めない限りブラウ ザ内でできることと一緒 権限に応じた制限 SD カード読み書きなどの権限を 得るには Privileged アプリとして Marketplace での審査が必要
  15. 15. 方式 種類 概要 Hosted (Web から 読み込む) Web Content Web サイトそのもの。 ブラウザ内でアクセスして使う。Hosted (Web から 読み込む) Installed Web Web サイトをインストールしたもの。 ブラウザの UI なしで単独起動する。 Packaged (従来の OS 同 様端末にイン ストールする) Plain Packaged Web サイト全体を ZIP パッケージに しているが追加権限を要求しないもの Packaged (従来の OS 同 様端末にイン ストールする) Privileged マーケット審査を受けて追加の権限を 許可されたアプリ Packaged (従来の OS 同 様端末にイン ストールする) Certified 通信事業者や端末メーカーが特別に高 い権限を許可している組み込みアプリ Firefox OS でのアプリの分類
  16. 16. Firefox Marketplace
  17. 17. Firefox Marketplace 全てを Web 技術で実装 安定・平等な環境を提供 Marketplace のソースも公開 オープンなマーケット キャリアなど独自マーケット可 ストア、認証、課金も自由に https://marketplace.firefox.com/
  18. 18. Marketplace のパートナー 多数のパートナーのうち一例です
  19. 19. Firefox = WebRT (WebRunTime) Gecko = アプリ環境 Firefox = Gecko で XUL/JS WebApps = Gecko で HTML/JS マルチデバイス対応 PC, Android, Firefox OS... 同じコードでどこでも動く マーケットもマルチデバイス どろいど君 とも仲良し!
  20. 20. Android に Web アプリ環境を Web App = Native App に ホームスクリーンへの追加 独立してフル画面起動 ネイティブ同様の利用体験 Firefox = WebRT for Android ホームにインストール、アプリを起動した画面、マーケットをブラウズ
  21. 21. PC にも Web アプリ環境を Web App = Native App に プログラムフォルダ (アプリケー ションディレクトリ) への追加 ウィンドウはもちろんプロセスも データも全て独立 Firefox = WebRT for PC Chrome アプリと同じです
  22. 22. 権限に応じたレビュー 一般のアプリ デフォルト安全なので公序良俗 に反しないなど簡単な確認だけ 特権を持つアプリ 追加で特別な権限を求める場合 フルソースコードチェック対象 Privileged or Certified アプリ
  23. 23. レビュアー募集中 レビュアー随時募集 https://blog.mozilla.org/apps/ 2013/05/20/become-a- marketplace-app-reviewer/ 我こそはと思う人は是非
  24. 24. Payments API
  25. 25. Mozilla の課金 API (mozPay) navigator.mozPay 標準化はされていない Web 標準化の議論は W3C の Web Payment Community Group にて Google の In-App Payments API とほぼ同じシステム 無駄な再発明はせずに実装 W3C での議論については先ほど林さんが
  26. 26. 課金システムフロー (簡易) ユーザ (端末) アプリサーバ Marketplace 購入開始! 商品情報 JWT 送付 mozPay(JWT) 認証と課金確認を要求 商品購入の確認 課金 postback 送付 課金完了を通知 認証は Persona、課金のバックエンドは Bango など
  27. 27. Firefox Marketplace と mozPay API における課金処理の流れ
  28. 28. 参考までに課金に関するデータフロー
  29. 29. App Key & Secret Key アプリケーションキー アプリの ID みたいなもの 商品情報に埋め込む シークレットキー JWT に署名するためのキー Marketplace で発行される サンプルキー取得: https://marketplace.firefox.com/developers/in-app-keys/
  30. 30. JSON Web Token (JWT) 署名付き JSON データ仕様 商品情報やレシートなどに利用 商品情報 JWT では: App Key や価格などを記載 App Secret で署名して渡す App Key と App Secret は Marketplace から取得する http://openid.net/specs/draft-jones-json-web-token-07.html
  31. 31. 商品情報 JWT の例 {   "iss": APPLICATION_KEY, // Marketplace で発行されるアプリキー   "aud": "marketplace.firefox.com",   "typ": "mozilla/payments/pay/v1",   "iat": 1337357297,   "exp": 1337360897,   "request": {     "id": "915c07fc-87df-46e5-9513-45cb6e504e39", // 商品の ID     "pricePoint": 1, // 価格: 1=$0.10 ... 10=$0.99 ... 120=$29.99     "name": "フォクすけアプリ",     "description": "フォクすけのキュートなあぷりやん!",     "productData": "user_id=1234&my_session_id=XYZ",     "postbackURL": "https://dynamis.jp/payments/postback",     "chargebackURL": "https://dynamis.jp/payments/chargeback"   } } https://developer.mozilla.org/en-US/docs/Apps/Publishing/In-app_payments
  32. 32. JWT を PyJWT で署名 import jwt mozJWT = jwt.encode({   "iss": APPLICATION_KEY,   "aud": "marketplace.firefox.com",   "typ": "mozilla/payments/pay/v1",   "iat": 1337357297,   "exp": 1337360897,   "request": {     // ... 割愛 ...   } }, APPLICATION_SECRET, algorithm='HS256') node-jwt-simple, Java jsontoken など各言語のライブラリがあります
  33. 33. JWT 署名用ライブラリ例 Python: PyJWT-mozilla Ruby: ruby-jwt node.js: node-jwt-simple PHP: luciferous/jwt Java: jsontoken .NET: Json.NET
  34. 34. navigator.mozPay() navigator.mozPay([JWT]) アプリサーバから商品情報を記 載した JWT を取得して呼び出す 課金完了したらコールバック W3C で議論中の API とは別 標準化はどうなるかまだ未知数 https://developer.mozilla.org/en-US/docs/Apps/Publishing/Marketplace_Payments
  35. 35. navigator.mozPay() // ユーザに課金画面を表示 (複数要求可) var req = navigator.mozPay([mozJWT, another]); req.onsuccess = function() { // 課金リクエストが完了した時の処理 // まだ課金が完了したわけではないので注意 waitForPostback(); // 課金処理完了を待つ }; req.onerror = function(errMsg) { // 課金処理でエラーが発生した場合 console.log(this.error.name + ": " + errMsg); }; https://wiki.mozilla.org/WebAPI/WebPayment
  36. 36. 課金 postback 処理 Marketplace から通知 最初に商品情報 JWT で指定した request.postbckURL が呼ばれる キャンセル時は chargebackURL notice パラメータに transactionID を含む JWT が送られてくる 記録してアプリに通知 http://openid.net/specs/draft-jones-json-web-token-07.html
  37. 37. 課金 postback JWT の例 { "iss": "marketplace.firefox.com", "aud": APPLICATION_KEY, "typ": "mozilla/payments/pay/postback/v1", "exp": 1337370900, "iat": 1337360900,   "request": { // 商品情報 JWT と同じ     "id": "915c07fc-87df-46e5-9513-45cb6e504e39",     "pricePoint": 1,     "name": "フォクすけアプリ",     "description": "フォクすけのキュートなあぷりやん!",     ... 以下略 ...   }, "response": { "transactionID": "webpay:84294ec6-7352-4dc7-90fd-3d3dd36377e9" } } https://developer.mozilla.org/en-US/docs/Apps/Publishing/In-app_payments
  38. 38. アプリ側で課金処理の完了 var req = navigator.mozPay([mozJWT, another]); req.onsuccess = function() { waitForPostback(); // 課金処理完了を待つ }; function waitForPostback() { // 定期 Poll や WebSocket で処理完了待ち // marketplace から postback を受けたら // アプリサーバでその結果をアプリに通知する // 課金結果を確認してそれに応じた処理を実行 startCuteFoxkehApp(); // 何でも良いです } https://wiki.mozilla.org/WebAPI/WebPayment
  39. 39. 買ってくれて ありがとう!
  40. 40. Web Application Receipt 課金証明 (レシート) JWT navigator.mozApps.getSelf().receipts で購入済みレシート配列を取得 サーバに送って有効性検証 アプリ起動時や定期的に検証 receiptverifier 使えば簡単 https://wiki.mozilla.org/Apps/WebApplicationReceipt
  41. 41. WebApp Receipt JWT の例 {   "product": {     "url": "http://example.jp",     "storedata": "id=1234"   },   "iss": "https://marketplace.mozilla.org",   "verify": "https://receiptcheck.marketplace.mozilla.org/verify/1234",   "detail": "https://marketplace.mozilla.org/ja/purchases/1234",   "reissue": "https://marketplace.mozilla.org/ja/app/example/purchase/ reissue",   "user": {     "type": "directed-identifier",     "value": "1234-abcd99ef-a123-456b-bbbb-cccc11112222"   },   "typ": "purchase-receipt",   "exp": 1353028900, "iat": 1337304100, "nbf": 1337304100 // timestamp } https://developer.mozilla.org/en-US/docs/Apps/Publishing/Validating_a_receipt
  42. 42. WebApp Receipt の検証 // receiptverifier ライブラリ使うと簡単 // receipt を直接操作する必要すらない mozmarket.receipts.Prompter({ storeURL: // インストール(アプリ配信)ページ "https://marketplace.firefox.com/app/" + "your-app-id", supportHTML: // 問い合わせ先情報 Snippet '<a href="mailto:you@example.jp">' + 'email you@example.jp</a>', verify: true // 検証処理を実行 }); https://github.com/mozilla/receiptverifier
  43. 43. For More Info
  44. 44. Firefox OS コミュニティ! http://FxOS.org/ イベントやドキュメントをご案内 http://FxOS.org/ml (https://groups.google.com/group/ firefoxos にリダイレクト) みんな参加してね。みんなよろしく!
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×