Firebase Authentication の キーデータ相互登録設定を忘れてハマるな

いまさら知ったのですが。

On October 31, 2018, we will no longer actively contribute to, or accept issues and pull requests on, the open sourced SDKs (iOS, Android, Unity) on GitHub. After this date we will also stop releasing the SDKs through Cocoapods, Carthage, and Bintray JCenter.

👉 Discontinuing support for Twitter Kit SDK hatena-bookmark

Twitter 公式 SDK の代替として Firebase Authentication を Twitter で使ってみました。

実装とは別に、各管理画面から発行されるキーなどのテキストを別のサービスの管理画面に登録することが必要になります。

忘れやすくて抜けやすくてハマりやすいので整理しておきます。

 

Twitter Consumer API Key / Secret Key

Twitter Developers で作成される 「Consumer API Key / Secret Key」 を Firebase Authentication と Android Studio 上でXMLリソースとして登録します。

Twitter Developers consumer api key secret key

Twitter Developers で作成される「Consumer API Key / Secret Key」は Firebase Authentication に登録します。

<string name="twitter_consumer_key" translatable="false">YOUR_CONSUMER_KEY</string>     <string name="twitter_consumer_secret" translatable="false">YOUR_CONSUMER_SECRET</string>
👉 Twitter Developers hatena-bookmark
👉 Firebase console hatena-bookmark
👉 firebaseui.xml - firebase/snippets-android hatena-bookmark

 

Firebase Authentication Callback URL

Firebase Authentication で作成される「Callback Url」は Twitter Developers に登録します。

Firebase Authentication で作成される「Callback Url」は Twitter Developers に登録します。

Firebase Authentication で作成される「Callback Url」は Twitter Developers に登録します。

Firebase Host Config で独自ドメインにしたほうが感じが良いです。

👉 Firebase Authで独自ドメインが使いたい hatena-bookmark

 

Google Play アプリリリースキー SHA-1 フィンガープリント

アプリをリリースに使われる公開鍵のSHA-1のフィンガープリントです。

リリース鍵は、開発者が作成したり、Google Play 側で変更時に作成されたりするので、実際のリリースに利用されてる鍵を認把握している Google Play Console で確認すると間違いないです。

Google Play Console で確認して Firebase プロジェクトの概要 に登録します。

[設定] - [アプリの完全性]

[プロジェクトの概要] - [設定(歯車マーク)]
Google Play Console で確認して Firebase Authentication に登録します。

👉 Play Console hatena-bookmark

 

Android Studio デバッグキー SHA-1 フィンガープリント

デバック時に使われる鍵のSHA-1フィンガープリントです。

Android Studio の Terminal や Gradle ウインドウで確認して Firebase プロジェクトの概要 に登録すると、デバッグ時にも使えます。

Android Studio の Terminal や Gradle ウインドウで確認して Firebase Authentication に登録します。

Android Studio の Terminal や Gradle ウインドウで確認して Firebase Authentication に登録します。

👉 【コピペ用】Android「Google アプリ署名」コマンドまとめ hatena-bookmark
👉 google maps - How to get the SHA-1 fingerprint certificate in Android Studio for debug mode? - Stack Overflow hatena-bookmark
👉 Gradle タスクリストが見えない件【Android Studio】 hatena-bookmark

 

まとめ


Twitter Developers 
Consumer API Key / Secret Key
→ Firebase Authentication
→ Android Studio XML


Firebase Authentication 
Callback URL
→ Twitter Developers


Google Play Console
Release Key Fingerprint SHA-1
→ Firebase Project


Android Studio
Debug Key Fingerprint SHA-1
→ Firebase Project

箇条書きではきっとどれかが抜けてしまいそうなので手書きでも書いておきます。

Twitter 公式 SDK の代替として Firebase Authentication を Twitter で使ってみました。

👉 Firebase Authentication  |  Firebase Documentation hatena-bookmark


GitHub Gist のコードをスクリプトから更新する方法

ブラウザ上で長文テキストを編集すること、

キモいですよね、クソです!

github gist edit browser

GitHub 公式のコマンドラインツールは便利です。
👉 cli/cli: GitHub’s official command line tool hatena-bookmark


$ gh gist -h
Work with GitHub gists.

USAGE
  gh gist <command> [flags]

CORE COMMANDS
  clone:       Clone a gist locally
  create:      Create a new gist
  delete:      Delete a gist
  edit:        Edit one of your gists
  list:        List your gists
  view:        View a gist

INHERITED FLAGS
  --help   Show help for command

ARGUMENTS
  A gist can be supplied as argument in either of the following formats:
  - by ID, e.g. 5b0e0062eb8e9654adad7bb1d81cc75f
  - by URL, e.g. "https://gist.github.com/OWNER/5b0e0062eb8e9654adad7bb1d81cc75f"

LEARN MORE
  Use 'gh <command> <subcommand> --help' for more information about a command.
  Read the manual at https://cli.github.com/manual

 

エディタを変える

このデフォルトのエディタ nano って誰が推してるんすかね。


$ gh gist edit f49d4d7a9963b77d00c89d1a3dbb6976

github gh gist edit nano

変えます、emacs に。


$ EDITOR=emacs gh gist edit f49d4d7a9963b77d00c89d1a3dbb6976

いいですね。

EDITOR=emacs gh gist edit

ということは、

「gh gist edit」 は、

シェル変数 EDITOR に反応するアプリケーションですね !

 

ファイルを上書き更新する

とはいえ、

いまどきはもろGUIなIDEで豊富な機能を使ってコードは書いていきます。

なので、

パソコン上のIDEで書いたコードを Gist に更新していきたいですよね !

「更新」とは同じIDの Gist の上書きのことを言っています。


$ EDITOR="cp ~/ide/path/to/script/new.js" \
 gh gist edit f49d4d7a9963b77d00c89d1a3dbb6976

想像できてましたか?

GitHub 公式アプリ内のシェル変数 EDITOR の処理を。


[ -z "$EDITOR" ] && EDITOR=nano
$EDITOR TEMP_FILE

通常、エディタの起動コマンドを入力する文字列に


cp src-file

をセットすることで


vi tmp-file

が


cp src-file tmp-file

となり実行されます。

👉 linux - How do I edit /etc/sudoers from a script? - Stack Overflow hatena-bookmark

実際、言語は Go で書かれていますが、処理の内容はそういうことです。

 

標準入力から更新する

こんなの公開されてる方がいます。


$ echo "edit a gist from output piped from another command" | \
 EDITOR="cp "<(cat -) gh gist edit {<gist ID> | <gist URL>} [flags]

👉 GitHub CLI の gist edit へパイプを接続し、gist を編集する hatena-bookmark

「プロセス置換 (Process Substitution)」を使って処理しています。

「コマンド出力をファイル化して、そのパスを返す。」という使えるやつ。


$ cat <(date)
Thu Jul 21 12:40:53 EEST 2011

$ echo <(date)
/proc/self/fd/11

👉 プロセス置換 (Process Substitution)について - 一から勉強させてください hatena-bookmark
👉 shell - Process substitution and pipe - Unix & Linux Stack Exchange hatena-bookmark

 

まとめ

この先人たちの作ったコマンドラインツールの素晴らしさよ。

「ノーコード」とか言うてるやつな。

👉 GitHub Gist に置いた Javascript をブックマークレットとして実行する hatena-bookmark


Medium などに貼り付けられたコードをハイライトするブックマークレット

Medium とかいい記事がたくさんなのですが。

コードが見づらいときありません?

medium-code-unhighlighted

ブックマークレットで「ハイライト」します。

Medium code snippets highlight




(() => {
  const version = '11.5.0';
  const theme = 'github-dark-dimmed';
  const prefix = `//cdnjs.cloudflare.com/ajax/libs/highlight.js/${version}`;

  const link = document.createElement('link');
  link.setAttribute('rel', 'stylesheet');
  link.setAttribute('type', 'text/css');
  link.setAttribute('href', `${prefix}/styles/${theme}.min.css`);
  document.getElementsByTagName('head')[0].appendChild(link);

  const script = document.createElement('script');
  script.setAttribute('type', 'text/javascript');
  script.setAttribute('src', `${prefix}/highlight.min.js`);
  document.getElementsByTagName('head')[0].appendChild(script);

  script.addEventListener('load', function() {
    document.querySelectorAll('pre').forEach((pre) => {
      pre.style.fontFamily = 'Courier, Menlo, Consolas, Monaco, monospace';
      pre.style.overflowX = 'scroll';
      pre.style.whiteSpace = 'pre';

      // replace medium style <br/> to LF
      pre.innerHTML = pre.innerHTML.replaceAll(/<\s*\/?br\s*[\/]?>/gi, "\n")

      if (!pre.querySelector('code')) {
        window.hljs.highlightBlock(pre);
      } else {
        window.hljs.highlightBlock(pre.querySelectorAll('code')[0]);
      }
    });
  });
})();

以下リンクをブックマークバーへドラッグしてどうぞ。

highlight-code-snippets

👉 Google「Closure Compiler」 (クロージャコンパイラ) の使い方 hatena-bookmark


【Android Studio】プラグイン「Proguard Retrace Unscrambler」で難読化されたスタックトレースを解除してみた

あってもいいよな、ありそうだ、と思っていたこのプラグイン。

Proguard Retrace Unscrambler

Adds Unscrambler support for Proguard's mapping files and Android's R8 mapping files. Use to de-obfuscate your stacktrace

Proguard Retrace Unscrambler

Proguard Retrace Unscrambler

👉 Proguard Retrace Unscrambler - IntelliJ IDEA & Android Studio Plugin | Marketplace 
👉 chrimaeon/proguard-retrace-unscrambler: An Intellij IDEA and Android Studio Plugin to de-obfuscate your Proguard stack traces 

使い方。

1. 難読化されたスタックトレースをコピーする。
2. メニューから [Analyze] - [Stack Trace or Thread Dump ...]
3. 「Unscramble stacktrace」をチェックして有効化する。
4. 「Proguard Retrace」を選択する。
5. Proguard/R8 の mapping.txt を「Log file」に選択する。
6. 難読化されているスタックトレースを貼り付ける。
7. 「OK」を押すと難読化が解除されて下部 Run ウインドウに表示される。

Proguard Retrace Unscrambler

なんとなく読めるようになりましたが、「null」と失敗しているところも見当たります。

Proguard Retrace Unscrambler

惜しいです。

公式に案内されている方法では完全に読めます。



java -jar ~/Library/Android/sdk/tools/proguard/lib/proguardgui.jar

java -jar ~/Library/Android/sdk/tools/proguard/lib/proguardgui.jar

しかし、このプラグインてサードパーティでなく、公式の同梱で作れないものなのかな ?

👉 R8 で 難読化 された スタックトレース を元に戻す 


R8 で 難読化 された スタックトレース を元に戻す


minifyEnabled true

のとき、実機にインストールして起動した瞬間にクラッシュします。


2022-04-02 23:21:04.099 5125-5125/com.benigumo.example E/AndroidRuntime: FATAL EXCEPTION: main
    Process: com.benigumo.example, PID: 5125
    java.lang.NullPointerException
        at w5.c$c.b(:112)
        at w5.c$c.f(:154)
        at v5.f.d(:233)
        at e7.x$a.c(:46)
        at v5.b$a.a(:38)
        at e7.x$a.b(:43)
        at w5.b$b.a(:25)
        at w5.b$b.add(:23)
        at android.view.WindowManagerGlobal.addView(WindowManagerGlobal.java:393)
        at android.view.WindowManagerImpl.addView(WindowManagerImpl.java:133)
        at android.app.ActivityThread.handleResumeActivity(ActivityThread.java:4847)
        at android.app.servertransaction.ResumeActivityItem.execute(ResumeActivityItem.java:54)
        at android.app.servertransaction.ActivityTransactionItem.execute(ActivityTransactionItem.java:45)
        at android.app.servertransaction.TransactionExecutor.executeLifecycleState(TransactionExecutor.java:176)
        at android.app.servertransaction.TransactionExecutor.execute(TransactionExecutor.java:97)
        at android.app.ActivityThread$H.handleMessage(ActivityThread.java:2214)
        at android.os.Handler.dispatchMessage(Handler.java:106)
        at android.os.Looper.loopOnce(Looper.java:201)
        at android.os.Looper.loop(Looper.java:288)
        at android.app.ActivityThread.main(ActivityThread.java:7842)
        at java.lang.reflect.Method.invoke(Native Method)
        at com.android.internal.os.RuntimeInit$MethodAndArgsCaller.run(RuntimeInit.java:548)
        at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:1003)

難読化されてるので原因を特定するのがツラいです !!

難読化を元に戻してみましょう。

 

手順

1. R8 ルールを追加する。

proguard-rules.pro に以下を追加することで再構成がより確実になります。


-keepattributes LineNumberTable,SourceFile
-renamesourcefileattribute SourceFile

2. 再度クラッシュさせる。

ルール追加したので再度クラッシュさせてスタックトレースを出力します。


2022-04-04 02:44:01.054 2001-2001/com.benigumo.example E/AndroidRuntime: FATAL EXCEPTION: main
    Process: com.benigumo.example, PID: 2001
    java.lang.NullPointerException
        at w5.c$c.b(SourceFile:112)
        at w5.c$c.f(SourceFile:154)
        at v5.f.d(SourceFile:233)
        at e7.x$a.c(SourceFile:46)
        at v5.b$a.a(SourceFile:38)
        at e7.x$a.b(SourceFile:43)
        at w5.b$b.a(SourceFile:25)
        at w5.b$b.add(SourceFile:23)
        at android.view.WindowManagerGlobal.addView(WindowManagerGlobal.java:393)
        at android.view.WindowManagerImpl.addView(WindowManagerImpl.java:133)
        at android.app.ActivityThread.handleResumeActivity(ActivityThread.java:4847)
        at android.app.servertransaction.ResumeActivityItem.execute(ResumeActivityItem.java:54)
        at android.app.servertransaction.ActivityTransactionItem.execute(ActivityTransactionItem.java:45)
        at android.app.servertransaction.TransactionExecutor.executeLifecycleState(TransactionExecutor.java:176)
        at android.app.servertransaction.TransactionExecutor.execute(TransactionExecutor.java:97)
        at android.app.ActivityThread$H.handleMessage(ActivityThread.java:2214)
        at android.os.Handler.dispatchMessage(Handler.java:106)
        at android.os.Looper.loopOnce(Looper.java:201)
        at android.os.Looper.loop(Looper.java:288)
        at android.app.ActivityThread.main(ActivityThread.java:7842)
        at java.lang.reflect.Method.invoke(Native Method)
        at com.android.internal.os.RuntimeInit$MethodAndArgsCaller.run(RuntimeInit.java:548)
        at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:1003)

少しスタックトレースが変化しました。

これは、クリップボードにコピーして使います。

3. 難読化を解除して元に戻す。 - retrace

「スタックトレース」 ( クリップボード内 ) と

「マッピングファイル」
( <module>/build/outputs/mapping/<build>/mapping.txt )

をデータとして retrace ツールを実行します。


~/Example
❯ pbpaste | java -jar ~/Library/Android/sdk/tools/proguard/lib/retrace.jar -verbose \
app/build/outputs/mapping/debug/mapping.txt
 
2022-04-04 02:44:01.054 2001-2001/com.benigumo.example E/AndroidRuntime: FATAL EXCEPTION: main
    Process: com.benigumo.example, PID: 2001
    java.lang.NullPointerException
        at curtains.internal.WindowCallbackWrapper$Companion.android.view.Window$Callback getJetpackWrapped(android.view.Window$Callback)(SourceFile:112)
        at curtains.internal.WindowCallbackWrapper$Companion.android.view.Window$Callback unwrap(android.view.Window$Callback)(SourceFile:154)
        at curtains.WindowsKt.android.view.Window$Callback getWrappedCallback(android.view.Window$Callback)(SourceFile:233)
        at leakcanary.RootViewWatcher$listener$1.void onRootViewAdded(android.view.View)(SourceFile:46)
        at curtains.OnRootViewAddedListener$DefaultImpls.void onRootViewsChanged(curtains.OnRootViewAddedListener,android.view.View,boolean)(SourceFile:38)
        at leakcanary.RootViewWatcher$listener$1.void onRootViewsChanged(android.view.View,boolean)(SourceFile:43)
        at curtains.internal.RootViewsSpy$delegatingViewList$1.boolean add(android.view.View)(SourceFile:25)
        at curtains.internal.RootViewsSpy$delegatingViewList$1.boolean add(java.lang.Object)(SourceFile:23)
        at android.view.WindowManagerGlobal.addView(WindowManagerGlobal.java:393)
        at android.view.WindowManagerImpl.addView(WindowManagerImpl.java:133)
        at android.app.ActivityThread.handleResumeActivity(ActivityThread.java:4847)
        at android.app.servertransaction.ResumeActivityItem.execute(ResumeActivityItem.java:54)
        at android.app.servertransaction.ActivityTransactionItem.execute(ActivityTransactionItem.java:45)
        at android.app.servertransaction.TransactionExecutor.executeLifecycleState(TransactionExecutor.java:176)
        at android.app.servertransaction.TransactionExecutor.execute(TransactionExecutor.java:97)
        at android.app.ActivityThread$H.handleMessage(ActivityThread.java:2214)
        at android.os.Handler.dispatchMessage(Handler.java:106)
        at android.os.Looper.loopOnce(Looper.java:201)
        at android.os.Looper.loop(Looper.java:288)
        at android.app.ActivityThread.main(ActivityThread.java:7842)
        at java.lang.reflect.Method.invoke(Native Method)
        at com.android.internal.os.RuntimeInit$MethodAndArgsCaller.run(RuntimeInit.java:548)
        at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:1003)

全クラス名が丸出しになりました !!

👉 R8 retrace  |  Android デベロッパー  |  Android Developers 

4. Android Studio でスタックトレースを分析します。


[Analyze] - [Stack Trace or Thread Dump ...]

[Analyze] - [Stack Trace or Thread Dump ...]

[Analyze] - [Stack Trace or Thread Dump ...]

ソースファイルへのクリック可能なリンクも表示されています。

👉 スタック トレースを分析する  |  Android デベロッパー  |  Android Developers 

ちなみに、今回のクラッシュの原因は、Leakcanary まわりでした !


Proguard GUI

同様に、同梱の Proguard GUI を使っても retrace はできます。


java -jar ~/Library/Android/sdk/tools/proguard/lib/proguardgui.jar

GUI上でマッピングファイルのパスを入力して、スタックトレースは貼り付けます。

proguardgui.jar

 

日本語

さて、「難読化 (obfuscation)」の反対語は何なのでしょうか。

英語だと

「deobfuscation」

ですが、公式リファレンスの日本語を見ているといろいろな単語が使われています。

「デコード」

「難読化の解除」

「解読」

日本語は難しいですね !

 

まとめ

proguard-rules.pro に追記して、コピーしたスタックトレースを2つのツールどちらかで retrace する。


# To de-obfuscate stacktrace
-keepattributes LineNumberTable,SourceFile
-renamesourcefileattribute SourceFile


pbpaste | java -jar ~/Library/Android/sdk/tools/proguard/lib/retrace.jar -verbose \
app/build/outputs/mapping/debug/mapping.txt | tee >(pbcopy)


java -jar ~/Library/Android/sdk/tools/proguard/lib/proguardgui.jar

alias にしとくと良いでしょうか。

👉 アプリの圧縮、難読化、最適化  |  Android デベロッパー  |  Android Developers 
👉 【Android Studio】プラグイン「Proguard Retrace Unscrambler」で難読化されたスタックトレースを解除してみた