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

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 アプリです。
大事なこと３回

9. Firefox OS のアプリ開発
Web アプリです。
Web アプリです。
Web アプリです。
大事なこと３回

10. Firefox OS のアプリ開発
いつもの開発ツール
いつものエディタ
いつものライブラリ
いつもと一緒だ
から安心だね！

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 でのアプリの分類

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 にリダイレクト)
みんな参加してね。みんなよろしく！