Your SlideShare is downloading. ×
Firefox Marketplace and Payment
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Firefox Marketplace and Payment

1,334

Published on

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

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

Published in: Technology
0 Comments
6 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,334
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
12
Comments
0
Likes
6
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Firefox Marketplace & Payments @ html5j 42th (Web Platform & Manetize) by Tomoya Asai (dynamis)
  • 2. about:me
  • 3. Tomoya ASAI Mozilla Japan Technical Marketing (Evangelist) dynamis @ community dynamis.jp @dynamitter facebook.com/dynamis mailto: Tomoya ASAI <dynamis mozilla-japan.org>@
  • 4. about:topics
  • 5. Topics Web Apps Firefox Marketplace Payment API
  • 6. FFiirreeffooxx MMaarrkkeettppllaaccee でアプリをインストールし たことある人いる? Chrome Store について田中さんが聞いてたからぼくも聞いてみる!
  • 7. Web Apps
  • 8. Firefox OS のアプリ開発 Web アプリです。 Web アプリです。 Web アプリです。 大事なこと3回
  • 9. Firefox OS のアプリ開発 Web アプリです。 Web アプリです。 Web アプリです。 大事なこと3回
  • 10. Firefox OS のアプリ開発 いつもの開発ツール いつものエディタ いつものライブラリ いつもと一緒だ から安心だね!
  • 11. Firefox OS のアプリ課金 いつもの課金 API Paypal, クレジットカード, Google In-App Payment などなど + Firefox Marketplace navigator.mozPay() 好きなの 使って!
  • 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. アプリ情報ファイル作るだけ Hosted App Web から読み込むアプリ Web サイト + manifest.webapp Packaged App 従来型のダウンロードアプリ相当 サイト全体 ZIP + package.manifest 有料版は Packaged とか簡単
  • 14. アプリの種類と権限 ブラウザと一緒が基本 追加権限を求めない限りブラウ ザ内でできることと一緒 権限に応じた制限 SD カード読み書きなどの権限を 得るには Privileged アプリとして Marketplace での審査が必要
  • 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. Firefox Marketplace
  • 17. Firefox Marketplace 全てを Web 技術で実装 安定・平等な環境を提供 Marketplace のソースも公開 オープンなマーケット キャリアなど独自マーケット可 ストア、認証、課金も自由に https://marketplace.firefox.com/
  • 18. Marketplace のパートナー 多数のパートナーのうち一例です
  • 19. Firefox = WebRT (WebRunTime) Gecko = アプリ環境 Firefox = Gecko で XUL/JS WebApps = Gecko で HTML/JS マルチデバイス対応 PC, Android, Firefox OS... 同じコードでどこでも動く マーケットもマルチデバイス どろいど君 とも仲良し!
  • 20. Android に Web アプリ環境を Web App = Native App に ホームスクリーンへの追加 独立してフル画面起動 ネイティブ同様の利用体験 Firefox = WebRT for Android ホームにインストール、アプリを起動した画面、マーケットをブラウズ
  • 21. PC にも Web アプリ環境を Web App = Native App に プログラムフォルダ (アプリケー ションディレクトリ) への追加 ウィンドウはもちろんプロセスも データも全て独立 Firefox = WebRT for PC Chrome アプリと同じです
  • 22. 権限に応じたレビュー 一般のアプリ デフォルト安全なので公序良俗 に反しないなど簡単な確認だけ 特権を持つアプリ 追加で特別な権限を求める場合 フルソースコードチェック対象 Privileged or Certified アプリ
  • 23. レビュアー募集中 レビュアー随時募集 https://blog.mozilla.org/apps/ 2013/05/20/become-a- marketplace-app-reviewer/ 我こそはと思う人は是非
  • 24. Payments API
  • 25. Mozilla の課金 API (mozPay) navigator.mozPay 標準化はされていない Web 標準化の議論は W3C の Web Payment Community Group にて Google の In-App Payments API とほぼ同じシステム 無駄な再発明はせずに実装 W3C での議論については先ほど林さんが
  • 26. 課金システムフロー (簡易) ユーザ (端末) アプリサーバ Marketplace 購入開始! 商品情報 JWT 送付 mozPay(JWT) 認証と課金確認を要求 商品購入の確認 課金 postback 送付 課金完了を通知 認証は Persona、課金のバックエンドは Bango など
  • 27. Firefox Marketplace と mozPay API における課金処理の流れ
  • 28. 参考までに課金に関するデータフロー
  • 29. App Key & Secret Key アプリケーションキー アプリの ID みたいなもの 商品情報に埋め込む シークレットキー JWT に署名するためのキー Marketplace で発行される サンプルキー取得: https://marketplace.firefox.com/developers/in-app-keys/
  • 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. 商品情報 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. 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. JWT 署名用ライブラリ例 Python: PyJWT-mozilla Ruby: ruby-jwt node.js: node-jwt-simple PHP: luciferous/jwt Java: jsontoken .NET: Json.NET
  • 34. navigator.mozPay() navigator.mozPay([JWT]) アプリサーバから商品情報を記 載した JWT を取得して呼び出す 課金完了したらコールバック W3C で議論中の API とは別 標準化はどうなるかまだ未知数 https://developer.mozilla.org/en-US/docs/Apps/Publishing/Marketplace_Payments
  • 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. 課金 postback 処理 Marketplace から通知 最初に商品情報 JWT で指定した request.postbckURL が呼ばれる キャンセル時は chargebackURL notice パラメータに transactionID を含む JWT が送られてくる 記録してアプリに通知 http://openid.net/specs/draft-jones-json-web-token-07.html
  • 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. アプリ側で課金処理の完了 var req = navigator.mozPay([mozJWT, another]); req.onsuccess = function() { waitForPostback(); // 課金処理完了を待つ }; function waitForPostback() { // 定期 Poll や WebSocket で処理完了待ち // marketplace から postback を受けたら // アプリサーバでその結果をアプリに通知する // 課金結果を確認してそれに応じた処理を実行 startCuteFoxkehApp(); // 何でも良いです } https://wiki.mozilla.org/WebAPI/WebPayment
  • 39. 買ってくれて ありがとう!
  • 40. Web Application Receipt 課金証明 (レシート) JWT navigator.mozApps.getSelf().receipts で購入済みレシート配列を取得 サーバに送って有効性検証 アプリ起動時や定期的に検証 receiptverifier 使えば簡単 https://wiki.mozilla.org/Apps/WebApplicationReceipt
  • 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. 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. For More Info
  • 44. Firefox OS コミュニティ! http://FxOS.org/ イベントやドキュメントをご案内 http://FxOS.org/ml (https://groups.google.com/group/ firefoxos にリダイレクト) みんな参加してね。みんなよろしく!

×