Firefox Marketplace & Payments@ html5j 42th (Web Platform & Manetize)

by Tomoya Asai (dynamis)

about:me

Tomoya ASAI

Mozilla JapanTechnical Marketing (Evangelist)

dynamis @ communitydynamis.jp

@dynamitter

facebook.com/dynamis

mailto: Tomoya ASAI <dynamis mozilla-japan.org>@

about:topics

Topics

Web AppsFirefox MarketplacePayment API

FFiirreeffooxx MMaarrkkeettppllaacceeでアプリをインストールしたことある人いる？

Chrome Store について田中さんが聞いてたからぼくも聞いてみる！

Web Apps

Firefox OS のアプリ開発

Web アプリです。Web アプリです。Web アプリです。

大事なこと３回

Firefox OS のアプリ開発

Web アプリです。Web アプリです。Web アプリです。

大事なこと３回

Firefox OS のアプリ開発

いつもの開発ツールいつものエディタいつものライブラリ

いつもと一緒だから安心だね！

Firefox OS のアプリ課金

いつもの課金 APIPaypal, クレジットカード,Google In-App Payment などなど

＋Firefox Marketplacenavigator.mozPay()

好きなの使って！

２つの方式のアプリ

Hosted (Web 読み込み型)従来の OS ではブラウザ上で動作動作や権限は従来の Web と同じオフライン対応アプリも一応可能

Packaged (ダウンロード型)従来のスマホアプリに相当するマーケット審査を経て追加権限取得サイト全体を ZIP して配布する形式

PackagedWeb アプリ

HostedWeb アプリ

Internet

Server

端末

詳細: https://developer.mozilla.org/ja/docs/Web/Apps/Packaged_apps

アプリ情報ファイル作るだけ

Hosted AppWeb から読み込むアプリWeb サイト + manifest.webapp

Packaged App従来型のダウンロードアプリ相当サイト全体 ZIP + package.manifest

有料版は Packaged とか簡単

アプリの種類と権限

ブラウザと一緒が基本追加権限を求めない限りブラウザ内でできることと一緒

権限に応じた制限SD カード読み書きなどの権限を得るには Privileged アプリとして Marketplace での審査が必要

方式 種類 概要

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

Firefox Marketplace

Firefox Marketplace

全てを Web 技術で実装安定・平等な環境を提供Marketplace のソースも公開

オープンなマーケットキャリアなど独自マーケット可ストア、認証、課金も自由に

https://marketplace.firefox.com/

Marketplace のパートナー

多数のパートナーのうち一例です

Firefox ＝ WebRT (WebRunTime)

Gecko = アプリ環境Firefox = Gecko で XUL/JSWebApps = Gecko で HTML/JS

マルチデバイス対応PC, Android, Firefox OS...同じコードでどこでも動くマーケットもマルチデバイス

どろいど君とも仲良し！

Android に Web アプリ環境を

Web App = Native App にホームスクリーンへの追加独立してフル画面起動ネイティブ同様の利用体験

Firefox = WebRT for Android

ホームにインストール、アプリを起動した画面、マーケットをブラウズ

PC にも Web アプリ環境を

Web App = Native App にプログラムフォルダ (アプリケーションディレクトリ) への追加ウィンドウはもちろんプロセスもデータも全て独立

Firefox = WebRT for PCChrome アプリと同じです

権限に応じたレビュー

一般のアプリデフォルト安全なので公序良俗に反しないなど簡単な確認だけ

特権を持つアプリ追加で特別な権限を求める場合フルソースコードチェック対象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 Payments API とほぼ同じシステム無駄な再発明はせずに実装

W3C での議論については先ほど林さんが

課金システムフロー (簡易)ユーザ (端末) アプリサーバ Marketplace

購入開始！

商品情報 JWT 送付

mozPay(JWT)

認証と課金確認を要求

商品購入の確認

課金 postback 送付

課金完了を通知

認証は Persona、課金のバックエンドは Bango など

Firefox Marketplace と mozPay API における課金処理の流れ

参考までに課金に関するデータフロー

App Key & Secret Key

アプリケーションキーアプリの ID みたいなもの商品情報に埋め込む

シークレットキーJWT に署名するためのキー

Marketplace で発行される

サンプルキー取得: https://marketplace.firefox.com/developers/in-app-keys/

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

商品情報 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

JWT を PyJWT で署名import jwtmozJWT = 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 など各言語のライブラリがあります

JWT 署名用ライブラリ例

Python: PyJWT-mozillaRuby: ruby-jwtnode.js: node-jwt-simplePHP: luciferous/jwtJava: jsontoken.NET: Json.NET

navigator.mozPay()

navigator.mozPay([JWT])アプリサーバから商品情報を記載した JWT を取得して呼び出す課金完了したらコールバック

W3C で議論中の API とは別標準化はどうなるかまだ未知数

https://developer.mozilla.org/en-US/docs/Apps/Publishing/Marketplace_Payments

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

課金 postback 処理

Marketplace から通知最初に商品情報 JWT で指定した request.postbckURL が呼ばれるキャンセル時は chargebackURLnotice パラメータに transactionID を含む JWT が送られてくる

記録してアプリに通知

http://openid.net/specs/draft-jones-json-web-token-07.html

課金 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

アプリ側で課金処理の完了var req = navigator.mozPay([mozJWT, another]);req.onsuccess = function() { waitForPostback(); // 課金処理完了を待つ};function waitForPostback() { // 定期 Poll や WebSocket で処理完了待ち // marketplace から postback を受けたら // アプリサーバでその結果をアプリに通知する // 課金結果を確認してそれに応じた処理を実行 startCuteFoxkehApp(); // 何でも良いです}

https://wiki.mozilla.org/WebAPI/WebPayment

買ってくれてありがとう！

Web Application Receipt

課金証明 (レシート) JWTnavigator.mozApps.getSelf().receipts で購入済みレシート配列を取得

サーバに送って有効性検証アプリ起動時や定期的に検証receiptverifier 使えば簡単

https://wiki.mozilla.org/Apps/WebApplicationReceipt

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

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

For More Info

Firefox OS コミュニティ！

http://FxOS.org/イベントやドキュメントをご案内

http://FxOS.org/ml(https://groups.google.com/group/firefoxos にリダイレクト)

みんな参加してね。みんなよろしく！