![navigator.mozPay()
navigator.mozPay([JWT])
アプリサーバから商品情報を記
載した JWT を取得して呼び出す
課金完了したらコールバック
W3C で議論中の API とは別
標準化はどうなるかまだ未知数
https://developer.mozilla.org/en-US/docs/Apps/Publishing/Marketplace_Payments](https://image.slidesharecdn.com/firefoxmarketplaceandpayment-130925073124-phpapp01/85/Firefox-Marketplace-and-Payment-34-320.jpg)
![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](https://image.slidesharecdn.com/firefoxmarketplaceandpayment-130925073124-phpapp01/85/Firefox-Marketplace-and-Payment-35-320.jpg)
![アプリ側で課金処理の完了
var req = navigator.mozPay([mozJWT, another]);
req.onsuccess = function() {
waitForPostback(); // 課金処理完了を待つ
};
function waitForPostback() {
// 定期 Poll や WebSocket で処理完了待ち
// marketplace から postback を受けたら
// アプリサーバでその結果をアプリに通知する
// 課金結果を確認してそれに応じた処理を実行
startCuteFoxkehApp(); // 何でも良いです
}
https://wiki.mozilla.org/WebAPI/WebPayment](https://image.slidesharecdn.com/firefoxmarketplaceandpayment-130925073124-phpapp01/85/Firefox-Marketplace-and-Payment-38-320.jpg)
Firefox Marketplace and Payment
- 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
- 6. FFiirreeffooxx MMaarrkkeettppllaaccee でアプリをインストールし たことある人いる？ Chrome Store について田中さんが聞いてたからぼくも聞いてみる！
- 7. Web Apps
- 8. Firefox OS のアプリ開発 Web アプリです。 Web アプリです。 Web アプリです。 大事なこと３回
- 9. Firefox OS のアプリ開発 Web アプリです。 Web アプリです。 Web アプリです。 大事なこと３回
- 11. Firefox OS のアプリ課金 いつもの課金 API Paypal, クレジットカード, Google In-App Payment などなど ＋ Firefox Marketplace navigator.mozPay() 好きなの 使って！
- 12. ２つの方式のアプリ 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 でのアプリの分類
- 17. Firefox Marketplace 全てを Web 技術で実装 安定・平等な環境を提供 Marketplace のソースも公開 オープンなマーケット キャリアなど独自マーケット可 ストア、認証、課金も自由に https://marketplace.firefox.com/
- 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 アプリと同じです
- 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 における課金処理の流れ
- 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