質問編集履歴

説明の修正

2020/12/12 03:47

投稿

Linkey

スコア77

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -58,7 +58,7 @@
-③index.vueでユーザー一覧取得処理を呼び出す。
+④index.vueでユーザー一覧取得処理を呼び出す。
 index.vue
@@ -272,7 +272,19 @@
 ```
+⑤サーバー起動
+yarn run dev
+⑥アプリケーションにアクセスする
+http://localhost:3000/
-この実装で動作確認を行うと「Cannot read property 'auth' of undefined」と表示されてしまいます。
+アプリケーションにアクセスすると「Cannot read property 'auth' of undefined」と表示されてしまいます。
 解決方法について探していますが、なかなか解決できません。

タイトルと説明を修正。

2020/12/12 03:46

投稿

Linkey

スコア77

test CHANGED Viewed

	@@ -1 +1 @@
1	- Nuxt.jsでFirebaseの~~認証ユーザー一覧を取得した~~い
1	+ Nuxt.jsでFirebase Admin SDKの初期化がうまくいかない

test CHANGED Viewed

@@ -1,20 +1,120 @@
 Nuxt.jsを勉強しているものです。
-Nuxt.jsのWebアプリケーションでFirebaseの認証ユーザーの一覧を取得してテーブル形式で表示させようとしています。
+Nuxt.jsのWebアプリケーションでFirebaseの認証ユーザーの一覧を取得する処理を実装しようとしています。
+作業手順
-実装は以下のようにしました。
+①プロジェクト作成
+yarn create nuxt-app sample
+②firebase-adminをインストール
+npm install firebase-admin --save
+③plugins配下にfirebaseAdmin.jsを作成
-pages/index.vue
+plugins/firebaseAdmin.js
+```js
+const admin = (function () {
+    if (process.server) {
+      const a = require('firebase-admin');
+      if (!a.apps.length) {
+        const serviceAccount = require('../key.json');
+        a.initializeApp({
+          credential: a.credential.cert(serviceAccount),
+          databaseURL: 'XXXXXXXXXX'
+        });
+      }
+      return a;
+    }
+})();
+export default admin
+```
+③index.vueでユーザー一覧取得処理を呼び出す。
+index.vue
-```Vue
+```vue
 <template>
+  <div class="container">
-  <div>
+    <div>
-    <Users />
+      <Logo />
+      <h1 class="title">
+        sample
+      </h1>
+      <div class="links">
+        <a
+          href="https://nuxtjs.org/"
+          target="_blank"
+          rel="noopener noreferrer"
+          class="button--green"
+        >
+          Documentation
+        </a>
+        <a
+          href="https://github.com/nuxt/nuxt.js"
+          target="_blank"
+          rel="noopener noreferrer"
+          class="button--grey"
+        >
+          GitHub
+        </a>
+      </div>
+    </div>
   </div>
@@ -24,15 +124,63 @@
 <script>
-import { Users } from "~/components/Users";
+import admin from '~/plugins/firebaseAdmin'
 export default {
+  data() {
-    components: {
+    return {
-      Users
+    }
-    },
+  },
+  mounted() {
+    const listAllUsers = (nextPageToken) => {
+      // List batch of users, 1000 at a time.
+      admin
+        .auth()
+        .listUsers(1000, nextPageToken)
+        .then((listUsersResult) => {
+          listUsersResult.users.forEach((userRecord) => {
+            console.log('user', userRecord.toJSON());
+          });
+          if (listUsersResult.pageToken) {
+            // List next batch of users.
+            listAllUsers(listUsersResult.pageToken);
+          }
+        })
+        .catch((error) => {
+          console.log('Error listing users:', error);
+        });
+    };
+    // Start listing users from the beginning, 1000 at a time.
+    listAllUsers();
+  },
 }
@@ -42,7 +190,81 @@
 <style>
+.container {
+  margin: 0 auto;
+  min-height: 100vh;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+}
+.title {
+  font-family:
+    'Quicksand',
+    'Source Sans Pro',
+    -apple-system,
+    BlinkMacSystemFont,
+    'Segoe UI',
+    Roboto,
+    'Helvetica Neue',
+    Arial,
+    sans-serif;
+  display: block;
+  font-weight: 300;
+  font-size: 100px;
+  color: #35495e;
+  letter-spacing: 1px;
+}
+.subtitle {
+  font-weight: 300;
+  font-size: 42px;
+  color: #526488;
+  word-spacing: 5px;
+  padding-bottom: 15px;
+}
+.links {
+  padding-top: 15px;
+}
 </style>
@@ -50,510 +272,14 @@
 ```
-/components/Users.vue
-```Vue
-<template>
-  <div class="container">
-      ユーザ一覧
-      <!-- TODO ここにテーブル形式でユーザー一覧を表示させる -->
-  </div>
-</template>
-<script>
-import firebase from '~/plugins/firebase'
+この実装で動作確認を行うと「Cannot read property 'auth' of undefined」と表示されてしまいます。
-export default {
-  data() {
-    return {};
-  },
-  mounted() {
-    // ユーザー一覧を取得する。
+解決方法について探していますが、なかなか解決できません。
-    let users = firebase.auth().listUsers(1000).then((listUsersResult) => {
-         console.log('user:', JSON.stringify(listUsersResult));
-    });
-  },
-  methods: {
-  }
-}
-</script>
-```
-/plugins/firebase.js
-```Vue
-import firebase from 'firebase'
+Firebase Admin SDKの初期化手順が間違っているのでしょうか？
-if (!firebase.apps.length) {
-  firebase.initializeApp(
-    {
-        apiKey: "XXXXXXX",
-        authDomain: "XXXXXX",
-        databaseURL: "XXXXXXX",
-        projectId: "XXXXXXXXX",
-        storageBucket: "XXXXX",
-        messagingSenderId: "XXXXXX",
-        appId: "XXXXXXXXXXXX",
-        measurementId: "XXXXXXXXX"
-    }
-  )
-}
-export default firebase
-```
-この状態で実行すると
-listUsers関数が見つかりませんというエラーが発生します。
-javascriptではFirebaseの認証ユーザー一覧を取得することはできないのでしょうか？
+そもそもnuxtアプリケーションにFirebase Admin SDKを導入することはできないのでしょうか？
-Firebase APIに詳しい方がいましたらご回答いただけないでしょうか？
+Firebaseに詳しい方がいましたら、ご回答いただけないでしょうか
 よろしくお願いいたします。
--- 追記 --
-https://gurutaka-log.com/nuxt-firebase-auth-serviceworker#STEP4firebase-admin
-https://gurutaka-log.com/nuxtserverinit-firestore
-上記サイトを参考に以下のように実装してみました。
-nuxt.config.json
-```json
-export default {
-  (中略)
-  workbox: {
-    importScripts: [
-      "https://www.gstatic.com/firebasejs/7.6.1/firebase-app.js",
-      "https://www.gstatic.com/firebasejs/7.6.1/firebase-auth.js",
-      "https://www.gstatic.com/firebasejs/6.2.4/firebase-database.js",
-      "sw-firebase-auth.js"
-    ],
-    dev: process.env.MODE != "production",
-  },
-  (省略)
-}
-```
-static/sw-firebase-auth.js
-```json
-// firebaseを初期化
-firebase.initializeApp({
-  apiKey: XXXXXXX,
-  authDomain: XXXXXXXXX,
-  databaseURL: XXXXXXXXXX,
-  projectId: XXXXXXXXXXX,
-  storageBucket: XXXXXXXXXXX,
-  messagingSenderId: XXXXXXXXXXXXX,
-  appId: XXXXXXXXXXXXX,
-  measurementId: XXXXXXXXXXXXX
-});
-// onAuthStateChanged()で現在のuserからidTokenを取得
-const getIdToken = () => {
-  return new Promise((resolve, reject) => {
-    const unsubscribe = firebase.auth().onAuthStateChanged(user => {
-      unsubscribe();
-      if (user) {
-        user.getIdToken().then(
-          idToken => resolve(idToken),
-          error => resolve(null)
-        );
-      } else {
-        resolve(null);
-      }
-    });
-  });
-};
-// URLからルートのURLを取得する処理
-const getOriginFromUrl = url => {
-  // https://stackoverflow.com/questions/1420881/how-to-extract-base-url-from-a-string-in-javascript
-  const pathArray = url.split("/");
-  const protocol = pathArray[0];
-  const host = pathArray[2];
-  return protocol + "//" + host;
-};
-/**
- *  Service Workderのライフサイクルでfetchしたときの処理
- */
-self.addEventListener("fetch", event => {
-  // リクエストをラップして、ヘッダにFirebase AuthのIdTokenを追加する処理
-  const requestProcessor = idToken => {
-    let req = event.request;
-    // URLを取得して、httpsもしくはlocalhostかなどをチェック
-    if (self.location.origin == getOriginFromUrl(event.request.url) &&
-      (self.location.protocol == "https:" || self.location.hostname == "localhost") &&
-      idToken
-    ) {
-      // ヘッダ情報をクローンする
-      const headers = new Headers();
-      for (let entry of req.headers.entries()) {
-        headers.append(entry[0], entry[1]);
-      }
-      // クローンしたヘッダにFirebase AuthのIdTokenを追加
-      headers.append("Authorization", "Bearer " + idToken);
-      try {
-        req = new Request(req.url, {
-          method: req.method,
-          headers: headers,
-          mode: "same-origin",
-          credentials: req.credentials,
-          cache: req.cache,
-          redirect: req.redirect,
-          referrer: req.referrer,
-          body: req.body,
-          bodyUsed: req.bodyUsed,
-          context: req.context
-        });
-      } catch (e) {
-        console.error(e);
-      }
-    }
-    return fetch(req);
-  };
-  // 上の関数を使って、全リクエストでIdTokenの取得し、Firebase AuthのIdTokenを追加ようにする
-  event.respondWith(getIdToken().then(requestProcessor, requestProcessor));
-});
-/**
- *  Service Workderのライフサイクルでactivateしたときの処理
- */
-self.addEventListener("activate", event => {
-  event.waitUntil(clients.claim());
-});
-```
-plugins/firebaseAdmin.js
-```javascript
-let admin
-if (process.server) {
-  admin = require('firebase-admin')
-  if (!admin.apps.length) {
-    const serviceAccount = require('key.json')
-    admin.initializeApp({
-      credential: admin.credential.cert(serviceAccount),
-      databaseURL: "XXXXXXXXXXXXXXX"
-    })
-  }
-}
-export default admin
-```
-/components/Users.vue
-```Vue
-<template>
-  <div class="container">
-      ユーザ一覧
-  </div>
-</template>
-<script>
-export default {
-  data() {
-    return {};
-  },
-  created() {},
-  // 計算等
-  computed: {},
-  // 監視
-  watch: {
-  },
-  filters: {
-  },
-  mounted() {
-    this.nuxtServerInit();
-  },
-  methods: {
-    async nuxtServerInit() {
-        // firebase-adminの初期化
-        const admin = require('~/plugins/firebaseAdmin').default;
-    　  let users = admin.auth().listUsers(1000).then((listUsersResult) => {
-        　console.log('user:', JSON.stringify(listUsersResult));
-    　　});
-      }
-  }
-}
-</script>
-```
-この状態で動作確認すると以下のエラーが発生します。
-Uncaught (in promise) TypeError: Cannot read property 'auth' of undefined
-admin.firestore().collectionの部分でエラーとなってしまいfirebaseの初期化がうまくいきません。
-また、workboxを使ってfirebaseのライブラリを読み込んでいるはずが以下の警告が出てしまいます。
-It looks like you're using the development build of the Firebase JS SDK.
-When deploying Firebase apps to production, it is advisable to only import
-the individual SDK components you intend to use.
-For the module builds, these are available in the following manner
-(replace <PACKAGE> with the name of a component - i.e. auth, database, etc):
-CommonJS Modules:
-const firebase = require('firebase/app');
-require('firebase/<PACKAGE>');
-ES Modules:
-import firebase from 'firebase/app';
-import 'firebase/<PACKAGE>';
-Typescript:
-import firebase from 'firebase/app';
-import 'firebase/<PACKAGE>';
-なかなか問題が解決できないですが、解決方法を確認しています。

拡張子を記載

2020/12/12 03:45

投稿

Linkey

スコア77

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -52,7 +52,7 @@
-/components/Users
+/components/Users.vue
 ```Vue
@@ -424,7 +424,7 @@
-/components/Users
+/components/Users.vue
 ```Vue

追記を追加

2020/12/11 00:44

投稿

Linkey

スコア77

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -159,3 +159,401 @@
 Firebase APIに詳しい方がいましたらご回答いただけないでしょうか？
 よろしくお願いいたします。
+-- 追記 --
+https://gurutaka-log.com/nuxt-firebase-auth-serviceworker#STEP4firebase-admin
+https://gurutaka-log.com/nuxtserverinit-firestore
+上記サイトを参考に以下のように実装してみました。
+nuxt.config.json
+```json
+export default {
+  (中略)
+  workbox: {
+    importScripts: [
+      "https://www.gstatic.com/firebasejs/7.6.1/firebase-app.js",
+      "https://www.gstatic.com/firebasejs/7.6.1/firebase-auth.js",
+      "https://www.gstatic.com/firebasejs/6.2.4/firebase-database.js",
+      "sw-firebase-auth.js"
+    ],
+    dev: process.env.MODE != "production",
+  },
+  (省略)
+}
+```
+static/sw-firebase-auth.js
+```json
+// firebaseを初期化
+firebase.initializeApp({
+  apiKey: XXXXXXX,
+  authDomain: XXXXXXXXX,
+  databaseURL: XXXXXXXXXX,
+  projectId: XXXXXXXXXXX,
+  storageBucket: XXXXXXXXXXX,
+  messagingSenderId: XXXXXXXXXXXXX,
+  appId: XXXXXXXXXXXXX,
+  measurementId: XXXXXXXXXXXXX
+});
+// onAuthStateChanged()で現在のuserからidTokenを取得
+const getIdToken = () => {
+  return new Promise((resolve, reject) => {
+    const unsubscribe = firebase.auth().onAuthStateChanged(user => {
+      unsubscribe();
+      if (user) {
+        user.getIdToken().then(
+          idToken => resolve(idToken),
+          error => resolve(null)
+        );
+      } else {
+        resolve(null);
+      }
+    });
+  });
+};
+// URLからルートのURLを取得する処理
+const getOriginFromUrl = url => {
+  // https://stackoverflow.com/questions/1420881/how-to-extract-base-url-from-a-string-in-javascript
+  const pathArray = url.split("/");
+  const protocol = pathArray[0];
+  const host = pathArray[2];
+  return protocol + "//" + host;
+};
+/**
+ *  Service Workderのライフサイクルでfetchしたときの処理
+ */
+self.addEventListener("fetch", event => {
+  // リクエストをラップして、ヘッダにFirebase AuthのIdTokenを追加する処理
+  const requestProcessor = idToken => {
+    let req = event.request;
+    // URLを取得して、httpsもしくはlocalhostかなどをチェック
+    if (self.location.origin == getOriginFromUrl(event.request.url) &&
+      (self.location.protocol == "https:" || self.location.hostname == "localhost") &&
+      idToken
+    ) {
+      // ヘッダ情報をクローンする
+      const headers = new Headers();
+      for (let entry of req.headers.entries()) {
+        headers.append(entry[0], entry[1]);
+      }
+      // クローンしたヘッダにFirebase AuthのIdTokenを追加
+      headers.append("Authorization", "Bearer " + idToken);
+      try {
+        req = new Request(req.url, {
+          method: req.method,
+          headers: headers,
+          mode: "same-origin",
+          credentials: req.credentials,
+          cache: req.cache,
+          redirect: req.redirect,
+          referrer: req.referrer,
+          body: req.body,
+          bodyUsed: req.bodyUsed,
+          context: req.context
+        });
+      } catch (e) {
+        console.error(e);
+      }
+    }
+    return fetch(req);
+  };
+  // 上の関数を使って、全リクエストでIdTokenの取得し、Firebase AuthのIdTokenを追加ようにする
+  event.respondWith(getIdToken().then(requestProcessor, requestProcessor));
+});
+/**
+ *  Service Workderのライフサイクルでactivateしたときの処理
+ */
+self.addEventListener("activate", event => {
+  event.waitUntil(clients.claim());
+});
+```
+plugins/firebaseAdmin.js
+```javascript
+let admin
+if (process.server) {
+  admin = require('firebase-admin')
+  if (!admin.apps.length) {
+    const serviceAccount = require('key.json')
+    admin.initializeApp({
+      credential: admin.credential.cert(serviceAccount),
+      databaseURL: "XXXXXXXXXXXXXXX"
+    })
+  }
+}
+export default admin
+```
+/components/Users
+```Vue
+<template>
+  <div class="container">
+      ユーザ一覧
+  </div>
+</template>
+<script>
+export default {
+  data() {
+    return {};
+  },
+  created() {},
+  // 計算等
+  computed: {},
+  // 監視
+  watch: {
+  },
+  filters: {
+  },
+  mounted() {
+    this.nuxtServerInit();
+  },
+  methods: {
+    async nuxtServerInit() {
+        // firebase-adminの初期化
+        const admin = require('~/plugins/firebaseAdmin').default;
+    　  let users = admin.auth().listUsers(1000).then((listUsersResult) => {
+        　console.log('user:', JSON.stringify(listUsersResult));
+    　　});
+      }
+  }
+}
+</script>
+```
+この状態で動作確認すると以下のエラーが発生します。
+Uncaught (in promise) TypeError: Cannot read property 'auth' of undefined
+admin.firestore().collectionの部分でエラーとなってしまいfirebaseの初期化がうまくいきません。
+また、workboxを使ってfirebaseのライブラリを読み込んでいるはずが以下の警告が出てしまいます。
+It looks like you're using the development build of the Firebase JS SDK.
+When deploying Firebase apps to production, it is advisable to only import
+the individual SDK components you intend to use.
+For the module builds, these are available in the following manner
+(replace <PACKAGE> with the name of a component - i.e. auth, database, etc):
+CommonJS Modules:
+const firebase = require('firebase/app');
+require('firebase/<PACKAGE>');
+ES Modules:
+import firebase from 'firebase/app';
+import 'firebase/<PACKAGE>';
+Typescript:
+import firebase from 'firebase/app';
+import 'firebase/<PACKAGE>';
+なかなか問題が解決できないですが、解決方法を確認しています。