如何在流星应用程序中使用Facebook登录

时间:2015-06-29 17:46:37

标签: facebook-graph-api meteor meteor-accounts

我正在尝试仅使用Facebook创建自定义登录,只查找两个端点:“name”和“avatar”。

对于初学者,我不知道“avatar”是否真的是一个真正的端点名称,但这就是我想要访问的内容。

我在FB上创建了一个测试应用程序,我还安装了所需的所有Meteor软件包,以便完成基础工作。

I've create the following template:
<template name="Login">
    <h2>Login</h2>
    {{#if currentUser}}
        {{currentUser.services.facebook.name}}
        {{currentUser.services.facebook.avatar}}
        <button id="logout">Logout</button>
    {{else}}
        <button id="facebook-login" class="btn btn-default">Login with Facebook</button>
    {{/if}}
</template>

然后在SERVERS目录中创建了一个.js文件来存储我的API密钥。

我的问题:

我的第一个问题是在哪里找到这些端点的名称,因为我一直在关于FB的整个文档,没有引用“名称”或“头像”所以我需要了解的第一件事就是在哪里找到这些端点因为我甚至找不到“名字”。

第二个问题是API显示JSON对象,这通常是你如何连接你的端点,但在Meteor中,因为所有这些都是抽象的,不清楚这个“facebook”对象存在于何处,然后更深入地研究嵌套属性,如“name” “和”头像“(我不确定这是否是该属性的正确名称)。我假设因为我正在使用Meteor来调用像{{currentUser.services.facebook.name}}这样的端点就足够了,我是否正确地思考这个问题?

最后一个问题是我是否必须在我的模板中调用这样的端点:

{{#if currentUser}}
        {{currentUser.services.facebook.name}}
        {{currentUser.services.facebook.gender}}
        <button id="logout">Logout</button>
    {{else}}
        <button id="facebook-login" class="btn btn-default">Login with Facebook</button>
    {{/if}}

然后,即使我将我的Facebook名称和性别包装在他们自己的div中,如下所示:

{{#if currentUser}}
        <div class="name">
            {{currentUser.services.facebook.name}}
        </div>
        <div class="avatar">
            {{currentUser.services.facebook.avatar}}
        </div>
        <button id="logout">Logout</button>
    {{else}}
        <button id="facebook-login" class="btn btn-default">Login with Facebook</button>
    {{/if}}

这仍然没有让我明白如何移动它说标题?

所以换句话说,我如何让用户从页面主体登录,但是在他们登录之后,标题中是否有实际的用户名和头像?

我没有明显的方法可以做到这一点。

我错过了什么?当我刚刚通过页面正文登录用户时,DOM如何将.name和.avatar div移动到标题?

这有意义吗?

我的预感是我必须在标题中创建另一个调用这些值的模板吗?

任何人都可以提供一些有用的信息吗?

谢谢。

1 个答案:

答案 0 :(得分:1)

您的问题的第一部分在这里得到解答:

https://stackoverflow.com/a/15019052/1327678

问题第二部分的答案在文档中。您可以制作一个模板助手来检查:

Template.header.helpers({
    currentUser: function(){
        if(Meteor.user()){
            return true;
        }
        else{
            return false;
        }
    }
});

在你的模板中写下:

{{#if currentUser}}
    {{!-- your facebook code here --}}
{{/if}}