新しいFirebaseの認証を解説とGitHubActionsの実装例
こんにちは!Authが大須に聞こえるMizutani(@sirycity)です。名古屋人あるある。
今日はFirebaseの新しい大須についてです。...はい、認証についてです。
所感
設定がめんどくなったが格段に安全になった。設定にかかる時間は10分くらい。
認証について
GUIでログイン
Firebaseへのログイン、というか認証にはfirebase-toolsを用います。こんな感じのコマンド。
firebase login
ただこれ使うとGUIでのログインとなるのでCIでは使えないです。
CUIでログイン
Firebaseには認証用のトークンがあります。これ↓で入手できる。
firebase login:ci
これを使ってコマンドの末尾に --token 【トークン】
ってやれば勝手にログインできます。例としてGitHubActionsではこんなかんじ。
steps:
- name: Deploy to Firebase
run: firebase deploy --token 【トークン】
もしくは環境変数のFIREBASE_TOKEN
に設定しといてもOKです。こんなかんじ。
env:
FIREBASE_TOKEN: 【トークン】
steps:
- name: Deploy to Firebase
run: firebase deploy
従来型トークンはちょっと危険
正直↑このトークンで別に問題ないんですが、ちょっと危険な点があってこのトークンGoogleアカウントに紐付いている上に再発行できません。つまり何かの拍子に漏洩したら同じGoogleアカウントで作ったプロジェクト全滅&修復不可能です。アカウント消すしかないです。
新しいログイン
てなわけで認証方法が新しくなりました。簡単に言うとGCPと同じになります。サービスアカウントと秘密鍵を使ったやりかたです。GitHubActionsだとこう。
steps:
- uses: google-github-actions/auth@v0
with:
credentials_json: 【秘密鍵】
- name: Deploy to Firebase
run: firebase deploy
以上。
サービスアカウントと秘密鍵の設定方法
ここからは設定方法です。つってもGCPと全く同じです。でもFirebaseだけ触ってた人もいると思うので解説。ちなみに公式ドキュメントはこれ。
サービスアカウントと秘密鍵の生成
まずはGCPのサービスアカウントのページにいきます。んでサービスアカウントを作成を押します。
次に適当なサービスアカウント名を設定。なんでもいいです。そしたらロールを選択する画面で以下の3つを追加。ここは自信ない...もっと簡単なのあるかも。一応これでいけるけど。
- Cloud Functions 開発者
- Firebase Hosting 管理者
- サービス アカウント ユーザー
設定したら元のページに戻るので、今名付けたサービスアカウントを探してクリック→上のメニューからキーを選択→鍵を追加→新しい鍵を作成→JSON で一旦おしまい。
Actionsに環境変数として設定
次にGitHubActions側に今落としてきた秘密鍵を設定します。まずは該当リポジトリの環境変数設定画面にいきます。URLはhttps://github.com/【ユーザー名】/【リポジトリ名】/settings/secrets/actions
。
んでNew repository secretを押したらまた適当な名前をつけ、環境変数にはさっきJSONで落としてきたファイルの中身を丸々コピー。CIをこんな風に設定して完了。
steps:
- uses: google-github-actions/auth@v0
with:
credentials_json: ${{ secrets.【つけた名前】 }}
さいごに
やっぱりちょっとめんどいですが、まあ安全のために早めに移行しましょう。まだ前のも当分使えそうだけど以上!
LINK
TAGS
LATESTS
POPULAR
- CSS2021/04/29【CSS】右寄せの方法は結局flexが一番良さそう
- React2020/07/13【JS】Reactのstyleの使い方、書き方いろいろ
- Payment2021/10/16GooglePayでVisaタッチを使う時に知っておきたい過酷な現実【追記あり】
- Others2021/07/11Slackに予約投稿機能ができて嬉しいけどそれでもまだ少し不満な理由【追記あり】
- CSS2020/04/30【CSS】tailwind.cssでよく使うデザインパターン
- CSS2019/03/30【CSS】100vhは「一画面」ではないという罠
- CSS2020/06/09【CSS】max-font-sizeやmin-font-sizeを使いたくなったら
- Vue2019/06/29【JS】Vueの:classの書き方3通り
- JavaScript2020/09/02【JS】yarnの長所とyarnからnpmに戻ってきた理由
- React2020/06/04【JS】ReactのclassNameの色々な書き方紹介