如何在Polymer 3中使用Firebase Auth？

时间：2019-03-05 21:38:17

标签： javascript polymer-3.x

在聚合物2中使用Firebase进行身份验证之前，我感到非常困惑，但是现在我不能:(我只有一个简单的组件可以测试：

import { LitElement, html } from 'lit-element';
import firebase from '@firebase/app';
import '@firebase/auth';
import '@firebase/firestore';
//import firebase from 'firebase/app';
import '@polymer/paper-button/paper-button.js';

class DataAuth extends LitElement {
  autenticar(){


  firebase.initializeApp(
    {
      apiKey: "",
      authDomain: "",
      databaseURL: "",
      projectId: "",
      storageBucket: "",
      messagingSenderId: ""
  }
  )

  const autentica = firebase.auth();  
  var provider = new firebase.auth.GoogleAuthProvider();
  autentica.signInWithPopup(provider).then(function(result) {
    // This gives you a Google Access Token. You can use it to access the Google API.
    var token = result.credential.accessToken;
    // The signed-in user info.
    var user = result.user;
    console.log(user);
    // ...
  }).catch(function(error) {
    // Handle Errors here.
    var errorCode = error.code;
    var errorMessage = error.message;
    // The email of the user's account used.
    var email = error.email;
    // The firebase.auth.AuthCredential type that was used.
    var credential = error.credential;
    // ...
  });
  }

  render() {
    return html`
    <paper-button raised @click="${this.autenticar}">Autenticar</paper-button>
    `;
  }
}
customElements.define('data-auth', DataAuth);

然后将其导入聚合物项目的view1中，但出现此错误：

enter image description here

我真的不知道为什么，我是Polymer的新手:(，请提供任何帮助

2 个答案:

答案 0 :(得分：0)

尝试在Polymer外部安装Firebase依赖项。喜欢索引文件

index.html 

 <script src="https://www.gstatic.com/firebasejs/5.8.4/firebase-app.js"></script>
 <script src="https://www.gstatic.com/firebasejs/5.8.4/firebase-auth.js"></script>
 <script src="https://www.gstatic.com/firebasejs/5.8.4/firebase-database.js"></script>
 <script src="https://www.gstatic.com/firebasejs/5.8.4/firebase-messaging.js"></script>

 <script>
   // Initialize Firebase
   var config = {
     apiKey: "Api - key - String",
     authDomain: "<api-name>.firebaseapp.com",
     databaseURL: "https://<api-name>.firebaseio.com",
     projectId: "<api-name>",
     messagingSenderId: "1013602754277"
   };
   firebase.initializeApp(config);
 </script>

我在使用Firebase时没有遇到上述问题

并检查内部用户状态，例如：（您可以在延迟加载后触发此功能。）

checkUserStatus(){  
    firebase.auth().onAuthStateChanged((user)=> {
      if (user) {
         // User is signed In.
         console.log("signed IN..");                                          
      } else {
        // User is signed out.
         console.log("signed out..");
      }

    });
}

答案 1 :(得分：0)

@HakanC非常感谢，但是当我使用命令：npm run build（与package.json一致时：“ build”：“ polymer build --auto-base-path && gulp prpl-server”， ）

我不知道为什么会有这个错误：（：

0 info it worked if it ends with ok
1 verbose cli [ 'C:\\Program Files\\nodejs\\node.exe',
1 verbose cli   'C:\\Users\\Marcos\\AppData\\Roaming\\npm\\node_modules\\npm\\bin\\npm-cli.js',
1 verbose cli   'run',
1 verbose cli   'build' ]
2 info using npm@6.0.1
3 info using node@v8.11.1
4 verbose run-script [ 'prebuild', 'build', 'postbuild' ]
5 info lifecycle pwa-starter-kit@0.9.0~prebuild: pwa-starter-kit@0.9.0
6 info lifecycle pwa-starter-kit@0.9.0~build: pwa-starter-kit@0.9.0
7 verbose lifecycle pwa-starter-kit@0.9.0~build: unsafe-perm in lifecycle true
8 verbose lifecycle pwa-starter-kit@0.9.0~build: PATH: C:\Users\Marcos\AppData\Roaming\npm\node_modules\npm\node_modules\npm-lifecycle\node-gyp-bin;C:\Users\Marcos\Dropbox\proyectos web\polymer3\my-app\node_modules\.bin;C:\Program Files (x86)\Common Files\Oracle\Java\javapath;C:\ProgramData\Oracle\Java\javapath;C:\WINDOWS\system32;C:\WINDOWS;C:\WINDOWS\System32\Wbem;C:\WINDOWS\System32\WindowsPowerShell\v1.0\;C:\Program Files (x86)\Microsoft ASP.NET\ASP.NET Web Pages\v1.0\;C:\Program Files\Microsoft SQL Server\110\Tools\Binn\;C:\Program Files (x86)\Windows Live\Shared;C:\Program Files\Microsoft\Web Platform Installer\;C:\Program Files\Calibre2\;;C:\Program Files (x86)\Windows Kits\8.1\Windows Performance Toolkit\;C:\Program Files\Microsoft SQL Server\120\Tools\Binn\;C:\WINDOWS\system32;C:\WINDOWS;C:\WINDOWS\System32\Wbem;C:\WINDOWS\System32\WindowsPowerShell\v1.0\;C:\WINDOWS\system32\config\systemprofile\.dnx\bin;C:\Program Files\Microsoft DNX\Dnvm\;C:\Program Files\Git\cmd;C:\ProgramData\ComposerSetup\bin;C:\PHP7;C:\curl-7.58.0\src;C:\Program Files\nodejs\;C:\Program Files (x86)\Panda Security\WaAgent\Common;C:\Program Files (x86)\Pinnacle\Shared Files\;C:\Program Files\Microsoft SQL Server\Client SDK\ODBC\130\Tools\Binn\;C:\Program Files (x86)\Microsoft SQL Server\130\Tools\Binn\;C:\Program Files\Microsoft SQL Server\130\Tools\Binn\;C:\Program Files\Microsoft SQL Server\130\DTS\Binn\;C:\Program Files (x86)\Microsoft SQL Server\Client SDK\ODBC\130\Tools\Binn\;C:\Program Files (x86)\Microsoft SQL Server\140\Tools\Binn\;C:\Program Files (x86)\Microsoft SQL Server\140\DTS\Binn\;C:\Program Files (x86)\Microsoft SQL Server\140\Tools\Binn\ManagementStudio\;;C:\Program Files (x86)\Compac\SDK\Librerias Interfaz;C:\Program Files\Microsoft VS Code\bin;C:\Program Files (x86)\Yarn\bin\;C:\RailsInstaller\Git\cmd;C:\RailsInstaller\Ruby2.1.0\bin;C:\Program Files (x86)\Microsoft VS Code\bin;C:\Users\Marcos\AppData\Local\Microsoft\WindowsApps;C:\Users\Marcos\AppData\Local\Programs\Fiddler;C:\Users\Marcos\AppData\Roaming\Composer\vendor\bin;C:\Users\Marcos\AppData\Local\GitHubDesktop\bin;C:\Users\Marcos\AppData\Local\Microsoft\WindowsApps;C:\Users\Marcos\AppData\Roaming\npm;C:\Users\Marcos\AppData\Local\Yarn\bin
9 verbose lifecycle pwa-starter-kit@0.9.0~build: CWD: C:\Users\Marcos\Dropbox\proyectos web\polymer3\my-app
10 silly lifecycle pwa-starter-kit@0.9.0~build: Args: [ '/d /s /c',
10 silly lifecycle   'polymer build --auto-base-path && gulp prpl-server' ]
11 silly lifecycle pwa-starter-kit@0.9.0~build: Returned: code: 3  signal: null
12 info lifecycle pwa-starter-kit@0.9.0~build: Failed to exec build script
13 verbose stack Error: pwa-starter-kit@0.9.0 build: `polymer build --auto-base-path && gulp prpl-server`
13 verbose stack Exit status 3
13 verbose stack     at EventEmitter.<anonymous> (C:\Users\Marcos\AppData\Roaming\npm\node_modules\npm\node_modules\npm-lifecycle\index.js:283:16)
13 verbose stack     at emitTwo (events.js:126:13)
13 verbose stack     at EventEmitter.emit (events.js:214:7)
13 verbose stack     at ChildProcess.<anonymous> (C:\Users\Marcos\AppData\Roaming\npm\node_modules\npm\node_modules\npm-lifecycle\lib\spawn.js:55:14)
13 verbose stack     at emitTwo (events.js:126:13)
13 verbose stack     at ChildProcess.emit (events.js:214:7)
13 verbose stack     at maybeClose (internal/child_process.js:925:16)
13 verbose stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:209:5)
14 verbose pkgid pwa-starter-kit@0.9.0
15 verbose cwd C:\Users\Marcos\Dropbox\proyectos web\polymer3\my-app
16 verbose Windows_NT 10.0.16299
17 verbose argv "C:\\Program Files\\nodejs\\node.exe" "C:\\Users\\Marcos\\AppData\\Roaming\\npm\\node_modules\\npm\\bin\\npm-cli.js" "run" "build"
18 verbose node v8.11.1
19 verbose npm  v6.0.1
20 error code ELIFECYCLE
21 error errno 3
22 error pwa-starter-kit@0.9.0 build: `polymer build --auto-base-path && gulp prpl-server`
22 error Exit status 3
23 error Failed at the pwa-starter-kit@0.9.0 build script.
23 error This is probably not a problem with npm. There is likely additional logging output above.
24 verbose exit [ 3, true ]

相关问题
最新问题