MeteorJS: кнопки входа без выпадающего меню

Я знаю, что вы можете использовать

{{> loginButtons}}

чтобы получить раскрывающийся список с параметрами входа. Я хотел бы иметь кнопки входа на моей странице напрямую без выпадающего списка, так как я хотел бы, чтобы пользовательский интерфейс был чистым на мобильном устройстве. Есть ли способ разбить учетные записи ui из раскрывающегося списка и поместить его в div на главной странице?

Ответы

Ответ 1

Я задал тот же вопрос в #meteor, и кто-то прислал мне этот пример по настройке входа в учетную запись ui.

Это ясно и понятно. Я использовал это как руководство по настройке внешнего вида учетных записей, и он отлично работал у меня.

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

Существует одна оговорка. В примере не выполняется сценарий, если пакет учетных записей google по-прежнему нуждается в настройке информации api. Например {{loginButtons}} станет красным и даст вам возможность настроить информацию, необходимую для работы google-аккаунтов. Реализация в примере не обрабатывает этот сценарий. Поэтому не забудьте установить эту настройку в своем приложении.

Ответ 2

Простой способ сделать это (например, взломать):

Template.loginButtons.rendered = function()
{
    Accounts._loginButtonsSession.set('dropdownVisible', true);
};

Ответ 3

Я решил, что смогу разместить мое решение для этого с 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() - это глобальный, который использует учетные записи - ui для определения того, какие службы включены. Я использую это в блоке #each, чтобы убедиться, что контекст данных верен, поэтому нажатие на кнопку вызывает правильный "loginWiспасибо"

Ответ 4

@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>

Затем вы можете добавить логику к клику для входа в Google-Google или вход в систему facebook и использовать следующий код:

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, поскольку они не выглядят точно так же, как в раскрывающемся списке