FlaskとFirebaseでログイン機能を実装！初心者でもわかる認証システムの基本構成

Flask×Firebaseで認証を実装する基本構成を解説

先生と生徒の会話形式で理解しよう

生徒

「Flaskで作ったアプリにログイン機能を作りたいです！でも、パスワードを自分のサーバーに保存するのはセキュリティが不安で……。」

先生

「その悩みは、Googleが提供しているFirebase（ファイアベース）というサービスを使うと解決しますよ。ユーザーの情報を安全に管理してくれる、いわば認証の専門家です。」

生徒

「専門家にお任せできるんですね。具体的には、FlaskとFirebaseはどうやって連携させるんですか？」

先生

「基本的な仕組みを理解すれば、初心者の方でもスムーズに導入できます。まずは全体的な構成から見ていきましょう！」

1. Firebase Authenticationとは？認証の仕組みを解説

プログラミングを始めたばかりの方にとって、ログイン機能の作成はとても高い壁に見えるかもしれません。通常、ログイン機能を自作するには、ユーザーのパスワードを暗号化して保存したり、ログイン中かどうかをずっと見張っておく複雑な仕組みが必要です。

ここで役に立つのがFirebase Authentication（ファイアベース・オーセンティケーション）です。これは、Googleが提供しているクラウドサービスの一つで、メールアドレスとパスワードによるログインや、Googleアカウントでのログインなどを肩代わりしてくれます。認証（にんしょう）とは、アクセスしてきた人が本人かどうかを確認することですが、この大切な作業を信頼できるGoogleのシステムに丸投げできるのが最大のメリットです。

FlaskアプリからFirebaseを使うことで、私たちは面倒なセキュリティ対策を気にせず、アプリの楽しい機能作りに集中できるようになります。まさに、初心者の強い味方といえるサービスです。

2. 連携に必要な道具をインストールしよう

まずは、自分のパソコンでPythonとFirebaseが通信できるように準備をしましょう。これにはPyrebase（パイレベース）という便利なライブラリを使います。これは、Pythonという言葉をFirebaseが理解できる形に通訳してくれる道具のようなものです。

パソコンの「黒い画面」（コマンドプロンプトやターミナル）を開いて、以下のコマンドを入力してください。これを実行することで、必要な機能があなたのパソコンに追加されます。


pip install flask pyrebase4

インストールが終われば、準備は完了です。パソコンをあまり触ったことがない方は、この「黒い画面」に少し驚くかもしれませんが、一文字ずつ正確に入力すれば、魔法のように必要なファイルが揃っていきますよ。

3. Firebaseコンソールでプロジェクトを作成する

次に、インターネット上でFirebaseの設定を行います。Firebaseコンソールにアクセスし、新しいプロジェクトを作成しましょう。ここでいうプロジェクトとは、あなたのアプリ専用の管理部屋のことです。

部屋ができたら、「Authentication」というメニューから、ログイン方法（メール・パスワードなど）を有効にします。その後、設定画面から「構成情報」と呼ばれる、暗号のような文字列をメモしてください。これには、APIキーやドメイン名などが含まれています。これらの情報は、あなたのFlaskアプリが「私はこのプロジェクトの持ち主です」と証明するための大切な合言葉になります。

4. FlaskからFirebaseに接続する初期設定

それでは、プログラムを書いていきましょう。まずは、先ほどメモした合言葉を使って、Firebaseに接続する基本の形を作ります。ファイル名は「app.py」として保存してください。


import pyrebase
from flask import Flask, request, render_template

app = Flask(__name__)

# Firebaseの設定情報（メモした内容に書き換えてください）
config = {
    "apiKey": "あなたのAPIキー",
    "authDomain": "あなたのプロジェクトID.firebaseapp.com",
    "projectId": "あなたのプロジェクトID",
    "storageBucket": "あなたのプロジェクトID.appspot.com",
    "messagingSenderId": "あなたの送信者ID",
    "appId": "あなたのアプリID",
    "databaseURL": ""
}

# Firebaseを初期化します
firebase = pyrebase.initialize_app(config)
auth = firebase.auth()

if __name__ == "__main__":
    print("Firebaseとの接続準備が整いました！")

このコードの中にあるconfigという部分が、接続のための設定書です。ここに正しい情報を入れることで、あなたの書いたプログラムがGoogleのクラウドサーバーとつながります。初心者の方は、まずこの「つながる瞬間」を体験することがとても大切です。

5. 新規ユーザー登録機能を実装する

アプリに新しい人を迎え入れるための「新規登録」機能を作りましょう。Firebaseを使えば、たった一行の命令でユーザーを登録することができます。以下のコードをapp.pyに追加してみましょう。


@app.route("/signup", methods=["POST"])
def signup():
    # 画面から送られてきたメールアドレスとパスワードを取得
    email = request.form.get("email")
    password = request.form.get("password")
    
    try:
        # Firebaseにユーザーを作成するよう命令します
        auth.create_user_with_email_and_password(email, password)
        return "ユーザー登録に成功しました！ログイン画面へ進んでください。"
    except Exception as e:
        # すでに登録されている場合などはエラーになります
        return f"登録に失敗しました：{str(e)}"

ここで使っているcreate_user_with_email_and_passwordが、新規登録を行う魔法の言葉です。これだけで、Googleの安全なデータベースにユーザー情報が保存されます。自分でパスワードを隠す処理（ハッシュ化といいます）を書く必要がないので、とても安心ですね。

6. ログイン機能を実装して本人確認を行う

登録ができたら、次はログイン機能です。入力されたメールアドレスとパスワードが正しいかどうか、Firebaseに問い合わせて確認します。以下のコードを追加してください。


@app.route("/login", methods=["POST"])
def login():
    email = request.form.get("email")
    password = request.form.get("password")
    
    try:
        # 入力情報が正しいかチェックします
        user = auth.sign_in_with_email_and_password(email, password)
        # 成功すると、その人の「証拠品（トークン）」が返ってきます
        token = user['idToken']
        return f"ログイン成功！あなたのIDトークンは {token[:10]}... です。"
    except Exception:
        return "メールアドレスかパスワードが間違っています。"

ログインに成功すると、IDトークンというものが発行されます。これは「この人は間違いなく本人です」という内容が書かれたデジタルな証明書のようなものです。これを持っている間だけ、会員限定のページを見せるといった仕組みを作ることができます。まさにホテルのルームキーのような役割ですね。

7. ユーザーが操作するログイン画面を作る

プログラムだけでは使いにくいので、実際にユーザーが入力する画面（HTML）も用意しましょう。Flaskの機能を使って、きれいな入力フォームを表示させます。


<div class="card p-4 shadow">
    <h3 class="mb-3"><i class="bi bi-door-open"></i> ログイン</h3>
    <form action="/login" method="post">
        <div class="mb-3">
            <label>メールアドレス</label>
            <input type="email" name="email" class="form-control" placeholder="example@test.com">
        </div>
        <div class="mb-3">
            <label>パスワード</label>
            <input type="password" name="password" class="form-control">
        </div>
        <button type="submit" class="btn btn-success w-100">ログインする</button>
    </form>
</div>

このように、FlaskのプログラムとHTMLを組み合わせることで、私たちは普段見慣れているログイン画面を作ることができます。formタグのactionという部分をログイン用のURLに合わせておくのがポイントです。これで、画面で入力した情報が正しくPythonのプログラムに届くようになります。

8. パスワードを忘れた時の再設定機能

実際のアプリでは、パスワードを忘れてしまうこともありますよね。Firebaseには、パスワード再設定用のメールを送る便利な機能も備わっています。これを使えば、自分でメール送信システムを作る必要はありません。


@app.route("/reset_password", methods=["POST"])
def reset_password():
    email = request.form.get("email")
    try:
        # 再設定用メールを送るようFirebaseに指示します
        auth.send_password_reset_email(email)
        return "パスワード再設定用のメールを送信しました。確認してください。"
    except Exception:
        return "メール送信に失敗しました。アドレスをもう一度確認してください。"

この一行の命令で、Googleが代わりに丁寧なメールを送ってくれます。ユーザーはそのメールのリンクをクリックして、新しいパスワードを決めることができます。こうした細かい配慮までFirebaseにお任せできるので、アプリ全体の信頼性がぐっと上がります。

9. セキュリティをさらに高めるための注意点

最後に、アプリをより安全にするためのコツをお話しします。今回は練習用にプログラムの中に直接「設定情報（config）」を書きましたが、本格的に公開するときはこれらを環境変数（かんきょうへんすう）という場所に隠すのが一般的です。環境変数とは、プログラムのコードとは別の場所に秘密のメモを残しておく仕組みのことです。

また、Firebaseには「セキュリティルール」という設定があり、誰がデータを読み書きできるかを細かく制限することができます。最初は難しく感じるかもしれませんが、「Googleの強固な城壁の中で自分のアプリを守っている」という感覚で、少しずつ知識を深めていきましょう。クラウド連携を使いこなせば、あなたのアプリは驚くほどプロフェッショナルなものに進化していきますよ！

10. クラウド連携でアプリの可能性を広げよう

FlaskとFirebaseの連携はいかがでしたか？自分で一からログイン機能を作るのは大変ですが、クラウドの力を借りれば、短時間で安全な認証システムを作ることができます。これは個人開発だけでなく、プロの現場でもよく使われる手法です。

認証ができるようになると、「その人だけの情報を保存する」「特定のユーザーだけにメッセージを送る」といった、双方向のコミュニケーションができるアプリが作れるようになります。パソコンを触ったことがない方でも、この手順を一つずつクリアしていけば、立派なWebエンジニアへの一歩を踏み出せます。まずは今回のコードを自分の手で動かして、ログインが成功する感動を味わってみてください。あなたのアプリ作りが、ここからさらに面白くなることを願っています！

公的機関での指導実績【Flask Web開発実践セミナー】