13

我知道你可以使用

{{> loginButtons}}

获取带有登录选项的下拉列表。我想直接在我的页面上使用登录按钮，而不需要下拉菜单，因为我希望 UI 在移动设备上是干净的。有什么方法可以将帐户 ui 从下拉列表中取出并将其放在主页上的 div 中？

4

4 回答 4

7

简单的方法来做到这一点（即黑客）：

Template.loginButtons.rendered = function()
{
    Accounts._loginButtonsSession.set('dropdownVisible', true);
};
于 2013-08-07T00:56:10.487 回答
6

我在#meteor 中问了同样的问题，有人给我发了这个关于自定义帐户-ui 登录的示例。

它清晰明了。我使用它作为自定义帐户 UI 外观和感觉的指南，它对我来说非常有用。

https://www.youtube.com/watch?v=-CTSGdQOYYg

有一个警告。如果 accounts-google 包仍需要 api 信息设置，则该示例不处理该场景。例如 {{loginButtons}} 将变为红色，让您有机会设置 google-accounts 工作所需的信息。示例中的实现不处理该场景。因此，请务必在您的应用程序中进行该设置。

于 2013-01-31T13:50:10.410 回答
2

我想我会在 0.8.3 发布我的解决方案。

我想要一个简单的 Facebook 登录按钮，在登录时替换为一个简单的退出按钮。我不想重写太多逻辑，所以我想出了这个。

login.html:

<template name='login'>

    <div id="login-buttons">

    {{#if currentUser}}

      Hi, {{currentUser.profile.name}}
      <button id='logout-button' class='small'>Sign Out</button>

    {{else}}
      <div class="service-login-buttons">
          {{#each service}}
            {{> _loginButtonsLoggedOutSingleLoginButton}}
          {{/each}}
      </div>
    {{/if}}

    </div>

</template>

 

login.js:

Template.login.events({
  'click #logout-button': function() {
    Meteor.logout();
  }
});

Template.login.service = function()
{
    //returns an array like [{name: 'facebook'}];
    return getLoginServices();
}

getLoginService() 是 account-ui 用于确定启用哪些服务的全局变量。我在#each 块中使用它来确保数据上下文正确，因此单击按钮会调用正确的“loginWithX”

于 2014-06-11T06:09:03.600 回答
1

@shinank - 是的，这是一个很好的自定义流星登录的教程；但是，它没有说明在使用多种身份验证方法时如何将按钮从 {{loginButtons}} 创建的下拉列表中分离出来。

您可以使用以下代码创建独立按钮：

<div id="login-buttons">
    <div class="login-text-and-button">
      <div class="login-button single-login-button " id="login-buttons-facebook">
        <div class="login-image" id="login-buttons-image-facebook"></div>
        <span id="sign-in-facebook" class="text-besides-image sign-in-text-facebook">Sign in with Facebook</span>
      </div>
      <br>
    </div>
    <div class="login-text-and-button">
      <div class="login-button single-login-button " id="login-buttons-google">
        <div class="login-image" id="login-buttons-image-google"></div>
        <span id="sign-in-google" class="text-besides-image sign-in-text-google">Sign in with Google</span> 
      </div>
    </div>
</div>

然后，您可以为您的 sign-in-google 或 sign-in-facebook span 添加逻辑，并使用以下代码：

Template.user_loggedout.events({
"click #sign-in-google": function(e, tmpl){
    Meteor.loginWithGoogle({

    }, function (err) {
        if (err){
            console.log("ERROR: " + err);//error handling
        } else {
            console.log("NO ERROR ON LOGIN");//show an alert
        }
    })
}
});

您始终可以将 requestPermissions 添加到您的登录功能，以获得您的网站可能需要的其他权限。

您可能需要稍微调整 CSS，因为它们的按钮看起来与下拉列表中的不完全相同

于 2013-05-08T19:22:27.653 回答