Polymer 1.0：我需要一个登录按钮的例子

Question

问题

Does anyone have a working example of code for a login button?

详情:

我需要它是一个 <paper-button> 表示，"Login with x." 其中 "x" 是以下任何一项："Google"、"Google Plus"、"Facebook"、"Linked In"、"Yahoo" 或 "Twitter".

显然，该按钮还需要 "point to" 或与它提到的相应服务集成。

另请注意，<google-signin> described here 对我不起作用，因为我需要使用自己的按钮（出于样式目的）。我不想使用 <google-signin> 按钮。我只需要它提供的功能。更具体地说，如何使用我自己的 <paper-button> 元素来实现该功能。

代码：

<paper-button>Login with Google</paper-button>
<paper-button>Login with Google Plus</paper-button>
<paper-button>Login with Facebook</paper-button>
<paper-button>Login with Linked-In</paper-button>
<paper-button>Login with Yahoo</paper-button>
<paper-button>Login with Twitter</paper-button>

Answer 1

元素

<!--
@license
Copyright (c) 2015 Glenn Vandeuren. All rights reserved.
-->
<link rel="import" href="../polymer/polymer.html">
<link rel="import" href="../paper-button/paper-button.html">

<dom-module id="login-button">

  <style>
    :host {
      display: block;
      box-sizing: border-box;
    }
  </style>

  <template>
    <paper-button raised>Login using <span>[[service]]</span></paper-button>
  </template>

</dom-module>

<script>

  Polymer({

    is: 'login-button',

    properties: {
      service: String
    },

    listeners: {
      'tap': '_handleTap'
    },

    _handleTap: function () {
      this.fire('login', this.service);
    }

  });

</script>

索引

<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
    <title>login-button Demo</title>
    <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
    <link rel="import" href="../login-button.html">
  </head>
  <body>

    <login-button service="google"></login-button>
    <login-button service="twitter"></login-button>

    <script>
      document.addEventListener('login', function(service) {
        // handleLogin();
        alert(service.detail);
      });
    </script>

  </body>
</html>

Answer 2

在 , Ian 上发布此答案：

I ended up getting auth to work by adapting this example element by HackITtoday for my firebase urls.

Polymer 1.0：我需要一个登录按钮的例子

Polymer 1.0: I need an example of a login button

facebook

authentication

polymer

polymer-1.0

paper-elements

问题

元素

索引