Nuxt+Firebase+Slack認証

を仮で実装してみた。

github.com

とはいえ中身はほとんど以下を参考にしている。

qiita.com

カスタム認証の仕組みは最初いまいちよく分からなかったが、

  1. ログイン画面からSlackの認証画面に飛ばす
  2. Slackの認可実行後、Cloud Functionsの方へリダイレクトさせる
    1. リダイレクト先はSlackの管理画面で設定できる
  3. Cloud Functions内でアクセストークン取得APIを実行する
  4. 3.のレスポンスからFirebaseの認証に使うカスタムトークンを作成する
  5. 4.で作成したカスタムトークンを持たせたまま元の画面にリダイレクトさせ、そのカスタムトークンを利用してFirebaseにログインする

という流れを把握することで理解できた(気になれた)。

色々詰まったところは以下。

  • 参考にしたQiita記事の注意点(アクセストークン取得で外部アクセスが発生するため、従量課金プランに変更する必要がある点や、カスタムトークン作成時の権限関係)のところは同じようにハマった
  • Cloud Functionsのデフォルトタイムアウトは60秒であり、これを変更しようと思った場合Firebaseの画面でなくGCPの画面に移動する必要があり、それがちょっと面倒だった
  • dotenvをちゃんと使いこなせていないせいでリダイレクト先等の値をうまく環境変数からとってこれず、そのせいでいろいろ時間を取られた
  • ローカル用と本番用のリダイレクトURLをSlackに登録するとアクセストークン発行がうまくいかなかった
    • bad_redirect_uriのエラーが返ってきた
    • 最終的にリダイレクトURLを一つだけ指定してやることでうまく動作するようになった
      • 解決できていない気がするが、よく考えたら実運用だとテスト用と本番用でSlackのアプリ複数作成すればいいかと思うようになった