MeteorJS: Login buttons without a dropdown

问题

I know that you can use

{{> loginButtons}}

to get a dropdown with login options. I would like to have the login buttons on my page directly without a dropdown since I would like the UI to be clean on mobile. Is there any way to break the accounts ui out of the dropdown and put it in a div on the main page?

回答1:

I asked the same question in #meteor and someone sent me this example on customizing the accounts-ui login.

It is clear and straightforward. I used this as a guide to customize the accounts-ui look and feel and it worked great for me.

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

There is one caveat. The example does not handle the scenario if the accounts-google package still needs the api information setup. For example {{loginButtons}} will turn red and give you the opportunity to setup the information needed for google-accounts to work. The implementation in the example does not handle that scenario. So be sure to have that setup in your application.

回答2:

Easy way to do this (i.e. hack):

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

回答3:

I figured I'd post my solution for this as of 0.8.3.

I wanted a simple Facebook Login button that is replaced by a simple Sign Out button when logged in. I didn't want to rewrite much logic so I came up with this.

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() is a global that accounts-ui uses for determing what services are enabled. I use this in an #each block to make sure the data context is correct so clicking on the button calls the correct 'loginWithX'

回答4:

@shinank - Yes this is a great tutorial for customizing logins for meteor; however it doesn't explain how to separate the buttons out of the dropdown list created by {{loginButtons}} when using more than one authentication method.

You are able to create free standing buttons with the following code:

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

You can then add logic to the click for your sign-in-google or sign-in-facebook span and use the following code:

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
        }
    })
}
});

You can always add requestPermissions to your login function for addition permissions that your website may require.

You may need to tweak the CSS slightly since they button does not look exactly the same as it does in the dropdown list

来源：https://stackoverflow.com/questions/14621384/meteorjs-login-buttons-without-a-dropdown

标签

meteor