はじめに

Chrome 拡張機能で Firebase Authentication を使って認証する方法。

TL;DR

  • Email/Password での認証は signInWithEmailAndPassword で実施
    • 次回以降ログインできるように Email/Password を Sync ストレージ に保存(※セキュリティ上の問題あり)
  • Email/Password で認証後、トークン発行＆保持 でもいけそうだけど試せてない
  • Google 認証などの方法もあるが試せてない
この記事が参考になった方
ここかここからチャージや購入してくれると嬉しいです(ブログ主へのプレゼントではなく、ご自身へのチャージ)
欲しいもの / Wish list

目次

  1. はじめに
  2. TL;DR
  3. 環境・条件
  4. 詳細
    1. Email/Password でログイン - 1
      1. 動作イメージ
      2. ざっくり解説
      3. 問題点
    2. Email/Password でログイン - 2
    3. Google 認証
  5. まとめ
  6. 参考文献

環境・条件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
$ sw_vers
ProductName:	macOS
ProductVersion:	11.1
BuildVersion:	20C69

$ node -v
v12.7.0

$ npm -v
6.14.5

$ npm ls firebase webextension-polyfill
├── firebase@8.2.6
└── webextension-polyfill@0.7.0

詳細

拡張機能のベースは webpack & Babel を使って Chrome 拡張機能を開発するためのテンプレート(Hot Reload 付き) を使用。

あらかじめ Firebase Auth へのユーザー登録は済ませている前提。

Email/Password でログイン - 1

リポジトリ: 17number/chrome-extension-with-firebase-auth-email-password-example

動作イメージ

アイコンクリックで Email/Password の入力エリアを表示、ログインできたら Firebase UID を表示する。
次回以降ログインできる用(= 毎回入力しなくて良い用)に Email, Password を Sync ストレージに保存しておく。(※)

ログイン前

ログインできたら、Firebase UID を表示

ざっくり解説

options.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<html lang="ja">
<head><!-- 略 --></head>
<body>
  <div>
    <label for="email">Email</label>
    <div><input id="email" type="email" value="" placeholder="xxxx@example.com"></div>
    <label for="password">Password</label>
    <div><input id="password" type="password" value="" placeholder="password"></div>
    <button id="signin">Sign in</button>
  </div>
  <div style="display: none;" data-signin>
    <label for="uid">Firebase UID</label>
    <div><input id="uid" type="text" value="" readonly></div>
  </div>
</body>
<script src="options.js"></script>
</html>

options.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
import './assets/stylesheets/options.scss';
const browser = require("webextension-polyfill");
const firebase = require("firebase/app").default;
require("firebase/auth");
const firebaseConfig = {
  apiKey: "xxxx",
  authDomain: "xxxx",
  projectId: "xxxx",
  storageBucket: "xxxx",
  messagingSenderId: "xxxx",
  appId: "xxxx"
};
const firebaseApp = firebase.initializeApp(firebaseConfig);

/**
 * サインイン
 * @param {*} email
 * @param {*} password
 */
const signinFirebaseWithEmailAndPassword = async (email, password) => {
  if (!email || !password) {
    return {};
  }

  try {
    await firebaseApp.auth().signInWithEmailAndPassword(email, password);
  } catch (error) {
    console.error({ error });
    return {};
  }

  // サインインできたらストレージに Email/Password を保存
  await browser.storage.sync.set({
    email,
    password,
  });

  return firebaseApp.auth().currentUser;
};

/**
 * サインインボタン
 */
const clickSigninButton = async () => {
  const email = document.getElementById('email')?.value;
  const password = document.getElementById('password')?.value;
  const user = await signinFirebaseWithEmailAndPassword(email, password);
  if (user?.uid) {
    showSignedInArea(user);
  }
}

/**
 * サインイン後エリアの表示
 * @param {*} user
 */
const showSignedInArea = (user) => {
  document.querySelector('[data-signin]').style.display = 'block';
  document.getElementById('uid').value = user.uid;
}

(async () => {
  document.getElementById('signin').addEventListener('click', clickSigninButton)

  // ストレージに Email/Password があれば最初にサインイン
  const { email } = await browser.storage.sync.get({ email: null });
  const { password } = await browser.storage.sync.get({ password: null });
  document.getElementById('email').value = email;
  document.getElementById('password').value = password;
  const user = await signinFirebaseWithEmailAndPassword(email, password);

  if (user?.uid) {
    showSignedInArea(user);
  }
})();

問題点

実装はシンプルでわかりやすいが Email, Password を Storage に保存しておく必要がある(= セキュリティ的に良くない)ので注意。

最低限生データではなく暗号化して保存した方が良いと思われる。(本質的な解決にはならないし、暗号化/復号化 に使う secret も同梱するので微妙ではあるが。。。)

以下、brix/crypto-js を使う場合の一例。

1
2
3
4
5
6
7
8
9
10
11
const CryptoJS = require('crypto-js');
const secret = 'Your Secret';

// 暗号化して storage.sync に保存
const password = 'xxxx';
const encryptedPassword = CryptoJS.AES.encrypt(password, secret).toString();
browser.storage.set({ password: encryptedPassword });

// storage.sync から取得して復号化
const { password } = browser.storage.get({ password: '' });
const decryptedPassword = CryptoJS.AES.decrypt(password, secret).toString(CryptoJS.enc.Utf8);

Email/Password でログイン - 2

Storage に認証情報そのものではなくトークンを保存する方法。

以下あたりを参考にすればいけると思うが、試せてない(ので、できないかも)。試したら追記する。

Google 認証

試せてない。以下あたりが参考になると思う。試したら追記する。

まとめ

  • Email/Password での認証は signInWithEmailAndPassword で実施
    • 次回以降ログインできるように Email/Password を Sync ストレージ に保存(※セキュリティ上の問題あり)
  • Email/Password で認証後、トークン発行＆保持 でもいけそうだけど試せてない
  • Google 認証などの方法もあるが試せてない

参考文献

関連記事

この記事が参考になった方
ここかここからチャージや購入してくれると嬉しいです(ブログ主へのプレゼントではなく、ご自身へのチャージ)
欲しいもの / Wish list