Contenu connexe Similaire à Firefox Marketplace and Payment (20) Firefox Marketplace and Payment11. 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
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 アプリと同じです
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 など
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 など各言語のライブラリがあります
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
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