Featured image of post Firebase Authenticationを導入し、ポップアップでログインできるシステムを構築する

Firebase Authenticationを導入し、ポップアップでログインできるシステムを構築する

第1回 APIキーを取得する

どうもこんにちは、whatacotton です。

これから NextJS でフロントエンドを golang でバックエンドを作成し、Firebase Authentication を利用したシステムを実装していきます。 できるだけ丁寧に解説していく予定なので、何回に渡るか予想不可能ですが、気長に読んでもらえると幸いです。

今回は Firebase Authentication の API キーを取得するところまでやります。今回はコーディングを行いません。こんなの簡単だよと思う方は読み飛ばして次回以降に進んでください。

# なぜ Firebase Authentication なのか

私は現在開発しているシステムで、Firebase Authentication を使用しています。Firebase Authentication を使用しているのにはいくつか理由があって、

  • システムがそこまで難しくない
  • ユーザのパスワードを google 様が管理してくれる
  • ユーザの ID を勝手に振ってくれる
  • パスワード変更のメール送信やアカウントの削除など、API が多機能
  • ログイン方法が何種類かある

と言った感じです。

# 早速はじめてみる

# プロジェクトを作成する

まずはfirebase 公式サイトにアクセスします。

次のような設定を踏んでいけばとりあえずプロジェクトを作成することができます。

# 認証トークンを取得する

認証トークンを取得します。認証トークンは 2 種類あり、フロント用とバック用があります。

# フロントエンド用の API キーを取得

フロントエンド用の API キーを取得-1

まず、設定のこのページまで行きます。今回は web での開発なので、</>をクリックして、アプリを作成してください。

フロントエンド用の API キーを取得-2

アプリを作成すると、このように API キーが発行されます。

# バックエンド用の API キーを取得

バックエンド用の API キーを取得-1

同じページのサービスアカウントを開くとバックエンド用の API キーを取得できます。新しい秘密鍵を生成すると、認証情報が入った json ファイルを取得できます。

# まとめ

今回は API キーを取得しました。取得したキーはこれから重要になってくるので、必要になったときこのページにアクセスして参照していただけると幸いです。

API キーを設定していないことから起こるエラーメッセージからたどっていくと、ADC(Application Default Credentials)関連のページに飛んで、CLI 等を叩いたり迷走してしまう可能性があり、場所はしっかりと認識しておかないといけないため、このような記事となりました。(私はかなり迷走しました。)

comments powered by Disqus
Hugo で構築されています。
テーマ StackJimmy によって設計されています。