はじめに
Cordova で Repro とカスタム URL スキームを使ってディープリンクを扱う方法。
TL;DR
- EddyVerbruggen/Custom-URL-scheme をインストール
- Content Security Policy の設定変更
config.xml変更(allow-intent,config-file追加)window.handleOpenURLを定義
- ディープリンクを設定して Repro プッシュ通知を送信
はじめに
firebase/firebaseui-web による Firebase Authentication の認証 UI でパスワードの強度チェック(文字数や文字種のルール設定)を行う方法。
TL;DR
- JS で正規表現を使ってバリデーション
- 付け焼き刃(フロントでの対処のみ)なので注意
はじめに
firebase/firebaseui-web による Firebase Authentication の認証 UI をローカライズ(日本語化)する方法。
TL;DR
- 読み込む
scriptに__{LANGUAGE_CODE}を付けるLANGUAGE_CODEはLANGUAGES.md参照
- 日本語の場合は以下のように変更
1 | -<script src="https://www.gstatic.com/firebasejs/ui/4.7.3/firebase-ui-auth.js"></script> |
はじめに
Chrome 拡張機能で Firebase Authentication を使って認証する方法。
TL;DR
- Email/Password での認証は
signInWithEmailAndPasswordで実施- 次回以降ログインできるように Email/Password を Sync ストレージ に保存(※セキュリティ上の問題あり)
- Email/Password で認証後、トークン発行＆保持 でもいけそうだけど試せてない
- Google 認証などの方法もあるが試せてない
はじめに
Stripe & Firebase によるサブスクリプションを試した際のメモ。
TL;DR
- Stripe 公式の サブスク用 Firebase Extension を試した
- 導入後の Tips を簡単に整理した
- 購読状況の確認は Firestore の
statusとcurrent_period_endを使えば OK - 購読キャンセルは Stripe でカスタマーポータルの設定を変更すれば OK
- 購読状況の確認は Firestore の
はじめに
Firebase 公式ドキュメント Firebase による支払い処理 を試した際のメモ。
TL;DR
- 公式ドキュメントを試した
- Firebase 側のデータがどうなるか、外観カスタマイズはどうするか、などについて簡単に確認した内容をメモ
はじめに
Cordova Android アプリで HTTP(≠ HTTPS) 通信をした際に出る net::ERR_CLEARTEXT_NOT_PERMITTED エラーの解決方法
TL;DR
- Android P から
cleartextTrafficPermitted="false"がデフォルトになった- 非暗号化(HTTP)通信がエラーになる
AndroidManifest.xmlにandroid:usesCleartextTraffic="true"を追加すれば HTTP 通信を許可できる- Cordova Android:
platforms/android/app/src/main/AndroidManifest.xml
- Cordova Android:
config.xmlにedit-configを追加すれば OK- Cordova 9.0 環境だと問題が起きるが、8.0 や 10.0 だと問題ない(っぽい)
はじめに
Cordova Android で iframe 内のリンクをシステムデフォルトブラウザで開く方法。
前置きなどは 親 Window で iframe からのデータ受信、イベント検出する方法 の「前置き」と同じ。
以下はとあるプロジェクトの要件など。
- Cordova で iOS/Android まとめて開発
- コンテンツ内部は先方が作成
- コンテンツ内に先方管理外のサイトへのリンクがある
- ガワはこちらで作成して、コンテンツを
iframeで読み込むiframe内のリンクをシステムデフォルトブラウザで開きたいiOS は問題なかった(意図通りに動作した)が、Android だけ上手く動かなかった。具体的には、リンクをタップすると
iframe内で開こうとするが、X-Frame-Options の設定によりnet::ERR_BLOCKED_BY_RESPONSEとなる、というもの。
TL;DR
iframe側:postMessageでリンク先 URL を送信- 送信後
preventDefaultで元イベント(リンク先をiframe内で開こうとするアクション)を抑止
- 送信後
- アプリ(Cordova App)側: apache/cordova-plugin-inappbrowser でシステムデフォルトのブラウザを呼び出す
- 他ページで余計な動作をしないように注意
- 今回は Vue なので
created,beforeDestroyフックでイベントリスナを 追加/削除
- 今回は Vue なので
はじめに
親 Window で iframe から送られてきたデータを受信したり、iframe 内のイベントを検出する方法。
※イベント検出もデータ送受信機能で実現しているので、厳密にはイベント検出(addEventListener 相当)ではない。
TL;DR
iframe側からwindow.postMessageでデータ送信targetOriginを適切に指定(可能なら)
- 親 Window 側で
addEventListener('message', handler)で受信ハンドラ設定event.originで送信元をチェック
iframeで読み込むサイトが管理外の場合は実現不可(のはず)- その他・メモを参照
はじめに
Cordova iOS アプリで長押し(ロングタップ, ロングプレス)によるコンテキストメニューを無効化する方法。
TL;DR
- テキスト選択、3Dタッチを無効化する場合は
config.xmlを設定SuppressesLongPressGesture,Suppresses3DTouchGestureをtrue
- 画像などの長押しを無効化する場合は CSS で設定
- 意図通りに動くか、他箇所で不具合が出ないかはしっかり検証が必要
