chat

開発環境：Mac firebase:6.5.0 firebaseとjavascriptを使ったチャットアプリでgoogle認証を追加したいです。下記のリンク先の動画を参考に、FirebaseでGoogle認証を導入したいのですが、 [Youtube](https://www.youtube.com/watch?v=LOuHa9ujdjs) ログインボタンを押して実行すると下記のようなエラーが出ます。 main.js:48 Uncaught ReferenceError: base_provider is not defined at HTMLButtonElement. (main.js:48) わからない点が2点あり、・jsの48行目で定義しているのに、not definedとなっている点・HTMLの最後のあたりでも何か起こっているらしいのですが、google認証のコードを追加するまではこのjsで動いていたので読み込みが失敗しているということではないかなと思ってい、HTMLの何がおかしいのかです。どなたかご教授いただければ幸いです。コードは以下の通りです。 ```HTML chat

``` ```CSS body{ font-size:14px; font-family: Verdana, Geneva, Tahoma, sans-serif; padding:20px; } h1{ font-size:22px; font-weight:normal; } li{ line-height:2; list-style: none; margin:15px; } input[type="text"]{ padding:6px 8px; font-size:14px; width:300px; } h1 > button { float:right; } .hidden{ display: none; } .wrapper{ min-height: 100vh; position: relative;/*←相対位置*/ padding-bottom: 120px;/*←footerの高さ*/ box-sizing: border-box;/*←全て含めてmin-height:100vhに*/ } .login{ padding:30px 60px; text-align: center; } .logout{ position: fixed; /* 要素の位置を固定する */ top: 0; /* 基準の位置を画面の一番下に指定する */ right:0; margin:30px 30px; } .msg{ position: fixed; /* 要素の位置を固定する */ bottom: 0; /* 基準の位置を画面の一番下に指定する */ width: 300px; /* 幅を指定する */ border: 3px solid #a9a9a9; /* ボーダーを指定する */ } ``` ```JavaScript // 変数のスコープを限定する // 全体を即時関数で囲っておく (() => { 'use strict'; const firebaseConfig = { apiKey: "AIzaSyBYhs5TXHHPIu24MqupS4XsXUG3ovyPgh0", authDomain: "chat-98ce8.firebaseapp.com", databaseURL: "https://chat-98ce8.firebaseio.com", projectId: "chat-98ce8", storageBucket: "chat-98ce8.appspot.com", messagingSenderId: "456970089843", appId: "1:456970089843:web:05f584754bb617de" }; // Initialize Firebase firebase.initializeApp(firebaseConfig); const db = firebase.firestore(); // messagesというcollectionが使えるように const collection = db.collection('messages'); // authのインスタンスを作って使えるように const auth = firebase.auth(); // ユーザーの情報を保持する変数の宣言 // nullで初期化しとく let me = null; // messageの要素を取得する(idをふったので) const message = document.getElementById('message'); // formにはqueryセレクタを使えばOK const form = document.querySelector('form'); // 要素を取得！ const messages = document.getElementById('messages'); // ログインとログアウトボタンを取得 const login = document.getElementById('login'); const logout = document.getElementById('logout'); // クリックイベントの設定 // googleでのログイン認証 login.addEventListener('click', () => { base_provider = new firebase.auth.GoogleAuthProvider() firebase.auth().signInWithPopup(base_provider).then(function (result) { console.log(result) console.log("Success...Google Account Linked") }).catch(function (err) { console.log(err) console.log("Failed to do") }) }); // logout.addEventListener('click', () => { // auth.signOut(); // }); // ログイン状態の監視 auth.onAuthStateChanged(user => { if (user) { // ログインした時にuserをセットしてあげる me = user; // ここで何も書かないと、messageがある状態でlogoutすると // 再ログインした時に、同じmessageがappendChildされるので、一旦messa meの内容を // クリアにする必要がある // messagesの最初の子要素が存在する限りmessagesからmessagesの最初の子要素を削除していく while (messages.firstChild) { messages.removeChild(messages.firstChild); } // ==もしuserがtrueだったらログインしていることになるので、collectionの監視をこのなかに入れる=== // 格納したデータを表示 // 「処理が成功したら」のthen // snapshotが返ってくるので、それをループで処理 // collectionをgetしただけだとドキュメントに振られたIDの順番になる // get()の前でorderBy()として、createdでソートする // collectionの値の変更を監視して、違うユーザーが投稿した時も、読み込みなしで更新されるようにonSnapshotをかく collection.orderBy('created').onSnapshot(snapshot => { // 返ってきたデータをdocとする snapshot.docChanges().forEach(change => { // データが追加された時だけ、この処理をしたい if (change.type === 'added') { // そのデータで、li要素を作る const li = document.createElement('li'); // 一覧でも、投稿者がわかるようにする // 受け取る内容をchangeとして // データをdで受け取る const d = change.doc.data(); // uidが長いので最初の8けただけにする li.textContent = d.uid.substr(0, 8) + ':' + d.message; // messagesに対して、子要素としてliを追加していく messages.appendChild(li); } }); // ログアウトすると読み込み権限がなくなるので、onSnapshotでの処理に失敗する // 失敗した時の処理を指定するには、第２引数にエラーが出た時の処理を渡す // 特に何もしたくないので{}内に書かない }, error => { }); console.log(`Logged in as: ${user.uid}`); // ログインに成功したらloginボタンは消す=hiddenクラスをつける // logoutもformもmessageもhiddenクラスを外したいのでfoeEachで処理 login.classList.add('hidden'); // それぞれの要素をelementで受け取る [logout, form, messages].forEach(el => { // elementのclassListからclassListをremoveすればOK el.classList.remove('hidden'); }); message.focus(); return; } // ログアウトした時にはnullに戻す me = null; console.log('Nobody is logged in'); login.classList.remove('hidden'); [logout, form, messages].forEach(el => { el.classList.add('hidden'); }); }); // formにsubmitイベントを設定する form.addEventListener('submit', e => { // ページ遷移しないように e.preventDefault(); // 空文字は投稿できないようにtrimを使う // returnで処理を抜ける（？） const val = message.value.trim(); if (val === "") { return; } // messageを空にしつつ、focusを当てると親切 // ここの処理を上に持っていくともたつかない message.value = ''; // ⬇︎保存の処理 // collectionに対して、addとすると、ドキュメントにユニークなidをつけてくれる collection.add({ // messageがキーで、testという文字列を書き込んでみる // 追加する値に関しては、messageのvalueを使えばOK message: val, // 保存するデータにcreatedキーでサーバー側のタイムスタンプを取得して設定する created: firebase.firestore.FieldValue.serverTimestamp(), // meはnullになり得るので、一応条件演算子を使ってnullの時はnobodyになるように uid: me ? me.uid : 'nobody' }) // thenで処理が成功した時の処理 // docを引数にしつつidを表示したい // バッククオートを使えば、値の埋め込みができる .then(doc => { console.log(`${doc.id}added!`); }) // エラーが起きた時の処理はcatchでかける // ので、エラーの内容を表示させる .catch(error => { // 書き込めなかった時のエラーを追加 console.log('document add error!'); console.log(error); }); }); // focusを当てる処理は、ページが読み込まれる時にも行う message.focus(); })(); ```

Login Logout