Mail/PW認証を追加したい
Firebaseを使用してWebのリアルタイムチャットを作成しています。
Firebaseが展開しているサンプルコード(Friendly Chat)をベースにしています。
サンプルコードでは、Google認証が実装されているのですが、Mail/PW認証を追加したいと考えています。
公式で展開されているMail/PW認証のコードを追加したのですが、認証がうまくいきません。
公式の認証コード
https://firebase.google.com/docs/auth/web/start?hl=ja
発生している問題
上記リンク先のコードをもとに、下記の通り記載しているのですが、
Mail/PW認証のリンクに遷移できません。
具体的には、Webページ上のsignInボタンを押下してもポップアップが表示されず、Google認証もML/PW認証もできません。
該当のソースコード
javascript
1function createUser(){ 2 firebase.auth().createUserWithEmailAndPassword(email, password).catch(function(error) { 3 // Handle Errors here. 4 var errorCode = error.code; 5 var errorMessage = error.message; 6 // ... 7 }); 8} 9 10function signIn() { 11 // TODO 1: Sign in Firebase with credential from the Google user. 12 var provider = new firebase.auth.GoogleAuthProvider(); 13 firebase.auth().signInWithPopup(provider); 14 firebase.auth().signInWithEmailAndPassword(email, password).catch(function(error) { 15 // Handle Errors here. 16 var errorCode = error.code; 17 var errorMessage = error.message; 18 // ... 19 }); 20} 21 22(省略) 23 24var signInButtonElement = document.getElementById('sign-in'); 25var signOutButtonElement = document.getElementById('sign-out'); 26var signInSnackbarElement = document.getElementById('must-signin-snackbar'); 27 28// Saves message on form submit. 29messageFormElement.addEventListener('submit', onMessageFormSubmit); 30signOutButtonElement.addEventListener('click', signOut); 31signInButtonElement.addEventListener('click', signIn); 32
html
1 <header class="mdl-layout__header mdl-color-text--white mdl-color--light-blue-700"> 2 <div class="mdl-cell mdl-cell--12-col mdl-cell--12-col-tablet mdl-grid"> 3 <div class="mdl-layout__header-row mdl-cell mdl-cell--12-col mdl-cell--12-col-tablet mdl-cell--12-col-desktop"> 4 <h3><i class="material-icons">chat_bubble_outline</i> Snoopath</h3> 5 </div> 6 <div id="user-container"> 7 <div hidden id="user-pic"></div> 8 <div hidden id="user-name"></div> 9 <button hidden id="sign-out" class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-color-text--white"> 10 Sign-out 11 </button> 12 <button hidden id="sign-in" class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-color-text--white"> 13 <i class="material-icons">account_circle</i>Sign-in with Google 14 </button> 15 </div> 16 </div> 17 </header> 18
###問題の発生した環境
・JaveScript
・Firebase
Firebaseプロジェクト側ではML/PW認証は有効にしています。
あなたの回答
tips
プレビュー