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 で同じ質問をしたところ、誰かが accounts-ui ログインのカスタマイズに関するこの例を送ってくれました。

それは明確で簡単です。これをガイドとして使用して、accounts-ui のルック アンド フィールをカスタマイズしましたが、うまく機能しました。

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

注意点が 1 つあります。この例では、accounts-google パッケージで引き続き API 情報のセットアップが必要な場合のシナリオを処理しません。たとえば、{{loginButtons}} が赤くなり、Google アカウントが機能するために必要な情報をセットアップする機会が与えられます。この例の実装は、そのシナリオを処理しません。そのため、必ずアプリケーションでその設定を行ってください。

于 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() は、どのサービスが有効になっているかを判断するために accounts-ui が使用するグローバルです。これを #each ブロックで使用して、データ コンテキストが正しいことを確認し、ボタンをクリックすると正しい「loginWithX」が呼び出されるようにします。

于 2014-06-11T06:09:03.600 に答える
1

@shinank - はい、これは meteor のログインをカスタマイズするための優れたチュートリアルです。ただし、複数の認証方法を使用する場合に {{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 スパンのクリックにロジックを追加し、次のコードを使用できます。

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 に答える