Firefox Marketplace and Payment
Upcoming SlideShare
Loading in...5
×
 

Firefox Marketplace and Payment

on

  • 1,792 views

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

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

Statistics

Views

Total Views
1,792
Views on SlideShare
1,732
Embed Views
60

Actions

Likes
6
Downloads
10
Comments
0

1 Embed 60

https://twitter.com 60

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Firefox Marketplace and Payment Firefox Marketplace and Payment Presentation Transcript

  • Firefox Marketplace & Payments @ html5j 42th (Web Platform & Manetize) by Tomoya Asai (dynamis)
  • about:me
  • Tomoya ASAI Mozilla Japan Technical Marketing (Evangelist) dynamis @ community dynamis.jp @dynamitter facebook.com/dynamis mailto: Tomoya ASAI <dynamis mozilla-japan.org>@
  • about:topics
  • Topics Web Apps Firefox Marketplace Payment API
  • FFiirreeffooxx MMaarrkkeettppllaaccee でアプリをインストールし たことある人いる? Chrome Store について田中さんが聞いてたからぼくも聞いてみる!
  • Web Apps
  • Firefox OS のアプリ開発 Web アプリです。 Web アプリです。 Web アプリです。 大事なこと3回
  • Firefox OS のアプリ開発 Web アプリです。 Web アプリです。 Web アプリです。 大事なこと3回
  • Firefox OS のアプリ開発 いつもの開発ツール いつものエディタ いつものライブラリ いつもと一緒だ から安心だね!
  • Firefox OS のアプリ課金 いつもの課金 API Paypal, クレジットカード, Google In-App Payment などなど + Firefox Marketplace navigator.mozPay() 好きなの 使って!
  • 2つの方式のアプリ Hosted (Web 読み込み型) 従来の OS ではブラウザ上で動作 動作や権限は従来の Web と同じ オフライン対応アプリも一応可能 Packaged (ダウンロード型) 従来のスマホアプリに相当する マーケット審査を経て追加権限取得 サイト全体を ZIP して配布する形式 Packaged Web アプリ Hosted Web アプリ Internet Server 端末 詳細: https://developer.mozilla.org/ja/docs/Web/Apps/Packaged_apps
  • アプリ情報ファイル作るだけ Hosted App Web から読み込むアプリ 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/JS WebApps = 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 PC Chrome アプリと同じです
  • 権限に応じたレビュー 一般のアプリ デフォルト安全なので公序良俗 に反しないなど簡単な確認だけ 特権を持つアプリ 追加で特別な権限を求める場合 フルソースコードチェック対象 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 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 など各言語のライブラリがあります
  • JWT 署名用ライブラリ例 Python: PyJWT-mozilla Ruby: ruby-jwt node.js: node-jwt-simple PHP: luciferous/jwt Java: 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 が呼ばれる キャンセル時は chargebackURL notice パラメータに 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 課金証明 (レシート) JWT navigator.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 にリダイレクト) みんな参加してね。みんなよろしく!