Help us understand the problem. What is going on with this article?

ElectronでFirebaseAuthを利用する

ElectronでFirebaseAuthを利用するにはいくつか問題があります。

まず、大前提としてFirebase公式はElectronへのサポートを提供していない事を理解しておきましょう。

その他にも、Electronは通常fileプロトコルでアプリケーションを動かす事が多いですが、その状態でFirebaseAuth(もっというとGoogleAPIなど)を利用しようとしても
対応してるプロトコルはhttpかhttps、もしくはChromeExtensionで、その他にWebストレージを有効にする必要があります。
と怒られます。

今回利用したいのはFirebaseAuth(Googleアカウント認証/認可)のみですが、FirebaseのリアルタイムDBやFirestoreでも同じように対応することで利用出来ると思います、ただし検証はしていないのでAuth以外を使う方はあくまで参考程度にしてください。


Electronアプリが既に存在する前提で話を進めていきます。

ElectronアプリにExpressモジュールを追加してローカルサーバーを建てる

httpモジュール使えば新規にExpressモジュールを追加する必要はありませんが、簡単なのでExpressをインストールします。

また、既にElectronアプリがhttp/httpsで読み込んでいる場合はこの章はスキップできます。

Electronアプリのディレクトリで以下を実行し、Expressを追加します。

% npm i express

インストールが完了したら、Electronのエントリーポイントとなるファイル、通常はアプリディレクトリにあるmain.js、にExpressでサーバーを建てるためのプログラムを追加します。

main.js
const express = require('express');
const exp = express();
exp.use(express.static('./'));
exp.listen(8080);

ポートは任意の開いてる所を選んでください。

このコードを書くことでElectronアプリにブラウザからもlocalhost:8080でアクセスできるようになります。

main.jsの中のファイルをロードしている部分を以下のように書き換えましょう。

main.js
//win.loadFile('index.html');            //筆者はこのようにファイルを読み込んでいた
win.loadURL('http://localhost:8080');    //このようにlocalhost:8080を読むように変更する

% electron .コマンドでアプリを起動すると、fileを読んでいた時と同じように画面が表示されるはずです。

Firebaseのセットアップ

プロジェクトは事前に作成し、GoogleAuthを有効にしておいてください。

アプリケーションにFirebaseモジュールを追加しましょう。

既に追加している方はスキップしてください。

% npm i firebase

基本的に、モジュールを追加した後にアプリで利用するには以下のコード

const firebase = require('firebase');

を記述しますが、今回は無視してください。書かなくても問題無いです。

インストールしたら、index.htmlのheadに以下のコードを追加します。

index.html
<script src="./node_modules/firebase/firebase.js"></script>
<script src="./node_modules/firebase/firebase-app.js"></script>
<script src="./node_modules/firebase/firebase-auth.js"></script>

これにより、JavaScriptファイル内でrequireからインポートしなくても、firebaseオブジェクトが利用できるようになります。

FirebaseAuth部分の処理を書く

筆者の環境は、自分で設置したbutton要素をクリックすると、ログイン処理が走るようになっているので、その前提で進めて行きます。

<button id="google_auth">Googleログイン</button>
login.js
const authButton = document.getElementById("auth_button");
authButton.addEventListener("click", () => {auth()}, false);

上記のように、Googleログインボタンをクリックすると、authという関数が呼ばれます。

まずauth関数の前に、firebaseオブジェクトを利用するには、初期化処理が必要です。

初期化に必要な情報はFirebaseプロジェクトの設定から確認できるので、自身の情報に置き換えて読んでください。

login.js
const firebaseConfig = {
    apiKey: "xxx",
    authDomain: "xxx",
    databaseURL: "xxx",
    projectId: "xxx",
    storageBucket: "xxx",
    messagingSenderId: "xxx",
    appId: "xxx"
};
firebase.initializeApp(firebaseConfig);

これでfirebaseオブジェクトが利用可能になるので、authの実装をしていきます。

login.js
const auth = async () => {
    const provider = new firebase.auth.GoogleAuthProvider();
    const auth = await firebase.auth().signInWithPopup(provider);
    if (auth.user != null && auth.user.email != null) {
        console.table({uid: auth.user.uid, email: auth.user.email});
    }
};

これで準備がほぼ整いました。

筆者は認証にsignInWithPopup()を使用しています。

Electronアプリでこのようにポップアップを利用するには、main.js内でインスタンス化されているBrowserWindowに値がtruewebPreferences.nativeWindowOpenプロパティを渡す必要があります。

main.js
let win;
function createWindow () {
    win = new BrowserWindow({
        width: 1200,
        height: 1000,
        webPreferences: {
            nativeWindowOpen: true, //ここ
            nodeIntegration: true
        }
    });

    win.loadURL('http://localhost:8080');

    win.webContents.openDevTools();

    win.on('closed', () => {
        win = null;
    });
}
app.on('ready', createWindow);

ここまでやって、ついに準備が整いました。

Electronアプリを起動して、「Googleログイン」ボタンをクリックすると、ポップアップウィンドウが表示され、馴染み深いGoogleログイン画面が表示されます。

ログインを終えると、ポップアップウィンドウが閉じられ、開発者ツールのコンソール画面にユーザーIDとログインしたユーザーのメールアドレスが表示されます。

お疲れさまでした。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした