Polymerfire谷歌身份验证不起作用 [英] Polymerfire google auth not working
本文介绍了Polymerfire谷歌身份验证不起作用的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我是Polymer和Firebase的新手（也是程序员），我正在尝试使用Google进行简单登录并显示用户已登录。启用了Google Auth 。在Firebase中。当没有用户登录时应该隐藏注销按钮，但是当我单击登录按钮时，什么都不会发生。浏览器的控制台中没有警告。以下是我正在使用的代码：
<！DOCTYPE html>
< html>
< head>
< link rel =importhref =bower_components / polymerfire / firebase-app.html>
< link rel =importhref =bower_components / polymerfire / firebase-auth.html>
< link rel =importhref =bower_components / paper-button / paper-button.html>
< / head>
< body>
< firebase-app
auth-domain =xxx
database-url =xxxx
api-key =xxxxx>
< / firebase-app>
< firebase-auth
id =auth
user ={{user}}
status-known ={{statusKnown}}
provider =google>
< / firebase-auth>
< template is =dom-ifif =[[user]]>
< h1>欢迎[[user.displayName]]< / h1>
< / template>
< paper-button raise on-tap =loginhidden $ =[[user]]>登录< / paper-button>
<纸张按钮在on-tap上提高=logout隐藏$ =[[！user]]>注销< /纸张按钮>
< / body>
< script>
Polymer（{
是：'my-login'，
properties：{
user：{
type：Object
}，
statusKnown：{
type：Object
}
}，
login：function（）{
return this。$。auth.signInWithPopup（）;
}，
logout：function（）{
return this。$。auth.signOut（）;
}，
}）;
< / script>
< / html>
解决方案
问题在于您尝试使用绑定自定义元素之外，实际上需要一个 dom -bind 模板，如下所示：
$ b
< ;！ - index.html - >
< body>
< template is =dom-bindid =t>
< x-foo data ={{data}}>< / x-foo>
< / template>
< script>
var t = document.getElementById（'t'）;
t.data ='hello world';
< / script>
< / body>
c>），你不需要上面的 dom-bind 模板。元素的定义类似： <！ - x-login.html - >
< dom-module id =x-login>
< template>
< firebase-app name =codepen
api-key =AIzaSyDKI6ehwhVnQ-CcrtILhV6QhPukE9ZfarQ
auth-domain =codepen-demos-bc5f2.firebaseapp.com
数据库-URL = https://codepen-demos-bc5f2.firebaseio.com >
< / firebase-app>
< firebase-auth id =auth
app-name =codepen
provider =google
signed-in ={{signedIn }}
status-known ={{statusKnown}}
user ={{user}}>
< / firebase-auth>
< template is =dom-ifif =[[user]]>
< h1>欢迎[[user.displayName]]< / h1>
< / template>
< paper-button raise on-tap =loginhidden $ =[[user]]>登录< / paper-button>
<纸张按钮在on-tap上提高=logout隐藏$ =[[！user]]>注销< /纸张按钮>
< / template>
< script>
Polymer（{
is：'x-login'，
properties：{
user：{
type：Object
}，
statusKnown：{
type：Object
}
}，
login：function（）{
return this。$。auth.signInWithPopup（）;
}，
logout：function（）{
return this。$。auth.signOut（）;
}，
}）;
< / script>
< / dom-module>
然后，您可以将该元素导入 index.html ：
< head>
< link rel =importx-login.html>
...
< / head>
< body>
< x-login>< / x-login>
< / body>
I'm new to Polymer and Firebase (and as a programmer as well), I'm trying to do a simple login with Google and show the user is logged in. Google Auth is enabled in Firebase. The logout button should be hidden when there is no user logged in, but when I click the login button, nothing happens. There are no warnings in the browser's console. Here is the code that I'm using:
<!DOCTYPE html>
<html>
<head>
<link rel="import" href="bower_components/polymerfire/firebase-app.html">
<link rel="import" href="bower_components/polymerfire/firebase-auth.html">
<link rel="import" href="bower_components/paper-button/paper-button.html">
</head>
<body>
<firebase-app
auth-domain="xxx"
database-url="xxxx"
api-key="xxxxx">
</firebase-app>
<firebase-auth
id="auth"
user="{{user}}"
status-known="{{statusKnown}}"
provider="google">
</firebase-auth>
<template is="dom-if" if="[[user]]">
<h1>Welcome [[user.displayName]]</h1>
</template>
<paper-button raised on-tap="login" hidden$="[[user]]">Sign In</paper-button>
<paper-button raised on-tap="logout" hidden$="[[!user]]">Sign Out</paper-button>
</body>
<script>
Polymer({
is: 'my-login',
properties: {
user: {
type: Object
},
statusKnown: {
type: Object
}
},
login: function() {
return this.$.auth.signInWithPopup();
},
logout: function() {
return this.$.auth.signOut();
},
});
</script>
</html>
解决方案
The problem is that you're trying to use bindings outside a custom element, which actually requires a dom-bind template, like this:
<!-- index.html -->
<body>
<template is="dom-bind" id="t">
<x-foo data="{{data}}"></x-foo>
</template>
<script>
var t = document.getElementById('t');
t.data = 'hello world';
</script>
</body>
If you have a custom element (e.g., x-login), you wouldn't need the dom-bind template above. The element would be defined similarly:
<!-- x-login.html -->
<dom-module id="x-login">
<template>
<firebase-app name="codepen"
api-key="AIzaSyDKI6ehwhVnQ-CcrtILhV6QhPukE9ZfarQ"
auth-domain="codepen-demos-bc5f2.firebaseapp.com"
database-url="https://codepen-demos-bc5f2.firebaseio.com">
</firebase-app>
<firebase-auth id="auth"
app-name="codepen"
provider="google"
signed-in="{{signedIn}}"
status-known="{{statusKnown}}"
user="{{user}}">
</firebase-auth>
<template is="dom-if" if="[[user]]">
<h1>Welcome [[user.displayName]]</h1>
</template>
<paper-button raised on-tap="login" hidden$="[[user]]">Sign In</paper-button>
<paper-button raised on-tap="logout" hidden$="[[!user]]">Sign Out</paper-button>
</template>
<script>
Polymer({
is: 'x-login',
properties: {
user: {
type: Object
},
statusKnown: {
type: Object
}
},
login: function() {
return this.$.auth.signInWithPopup();
},
logout: function() {
return this.$.auth.signOut();
},
});
</script>
</dom-module>
Then, you could import that element into index.html:
<head>
<link rel="import" "x-login.html">
...
</head>
<body>
<x-login></x-login>
</body>
这篇关于Polymerfire谷歌身份验证不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
