0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

Firebaseを使ってGoogleログイン機能を実装する方法

Posted at

Firebaseは、Googleが提供するモバイルとウェブアプリケーション開発のためのプラットフォームです。Firebase Authenticationを使用すると、Googleアカウントを含む多様な認証方法を簡単に実装できます。本記事では、Firebaseを使ってウェブアプリケーションにGoogleログイン機能を追加する手順を解説します。

ステップ1: Firebaseプロジェクトのセットアップ

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

Firebaseコンソールにアクセスし、Googleアカウントでログインします。
「プロジェクトを追加」をクリックし、プロジェクト名を入力して作成します。

2. ウェブアプリを追加
プロジェクトのダッシュボードで「>」アイコンをクリックしてウェブアプリを追加します。
アプリのニックネームを入力し(例: my-web-app)、必要に応じてFirebase Hostingを設定します。
作成後、Firebase SDKの設定スニペットが表示されます。これを後で使用するのでコピーしておきます。

ステップ2: 認証方法の有効化

1. 認証ページに移動
Firebaseコンソールの左側のメニューから「Authentication」を選択します。

2. サインイン方法を設定
「サインイン方法」タブで、「Google」を選択し、有効にします。
必要に応じてプロジェクトのサポートメールを設定します。

ステップ3: プロジェクトにFirebaseを追加

1. Firebase SDKのスクリプトを追加
HTMLファイルの

タグ内に以下のスクリプトを追加します。
<!-- Firebase App(必須) -->
<script src="https://www.gstatic.com/firebasejs/9.23.0/firebase-app.js"></script>
<!-- Firebase Authentication(オプション) -->
<script src="https://www.gstatic.com/firebasejs/9.23.0/firebase-auth.js"></script>

2. Firebaseの設定を初期化

先ほどコピーしたFirebase SDKの設定スニペットを追加します。

<script>
  // Firebaseの設定
  
  const firebaseConfig = {
    apiKey: "YOUR_API_KEY",
    authDomain: "YOUR_PROJECT_ID.firebaseapp.com",
    // 他の設定項目
  };

  // Firebaseの初期化
  firebase.initializeApp(firebaseConfig);
</script>

ステップ4: Googleログイン機能の実装

  1. ログインボタンの作成
    HTMLファイルの内にログインボタンを追加します。
<button id="login">Googleでログイン</button>

2. 認証処理の実装

タグ内に以下のコードを追加します。

// Firebase Authenticationの参照を取得
const auth = firebase.auth();

// Google認証プロバイダーのインスタンスを作成
const provider = new firebase.auth.GoogleAuthProvider();

// ログインボタンのクリックイベントを設定
document.getElementById('login').addEventListener('click', () => {
  auth.signInWithPopup(provider)
    .then((result) => {
      // ログイン成功時の処理
      const user = result.user;
      console.log('ユーザー情報:', user);
      alert(`ようこそ、${user.displayName}さん!`);
    })
    .catch((error) => {
      // エラー処理
      console.error('エラー:', error);
    });
});

3. ログアウト機能の追加(オプション)

<button id="logout">ログアウト</button>
javascript
コードをコピーする
document.getElementById('logout').addEventListener('click', () => {
  auth.signOut()
    .then(() => {
      alert('ログアウトしました。');
    })
    .catch((error) => {
      console.error('エラー:', error);
    });
});

ステップ5: ユーザーの認証状態を監視
ユーザーのログイン状態をリアルタイムで監視するには、onAuthStateChangedメソッドを使用します。

auth.onAuthStateChanged((user) => {
  if (user) {
    // ユーザーがログインしている場合の処理
    console.log('ログイン中:', user);
  } else {
    // ユーザーがログアウトしている場合の処理
    console.log('ログアウトしています。');
  }
});

ステップ6: セキュリティ上の考慮事項
APIキーの保護: FirebaseのAPIキーは公開されても問題ないように設計されていますが、不必要に共有しないよう注意しましょう。
Firebaseルールの設定: データベースやストレージを使用する場合は、Firebaseのセキュリティルールを適切に設定してください。

#まとめ
これでFirebaseを使用したGoogleログイン機能の実装が完了しました。Firebase Authenticationを使うことで、複雑なバックエンドの設定なしに認証機能を追加できます。さらに、他の認証方法(メール/パスワード、Facebook、Twitterなど)も簡単に統合できます。

参考資料
Firebase公式ドキュメント - ウェブでのGoogleサインイン
Firebase Authenticationの概要

毎日更新していますので、@y-t0910をフォロー,いいねしていただけると嬉しいです。

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?