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

Question

我正在尝试仅使用 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 上的整个文档，没有任何参考文献 "name" 或 "avatar" 所以我首先需要了解的是在哪里可以找到这些端点，因为我什至无法找到 "name".

第二个问题是 API 显示 JSON objects，这通常是您连接端点的方式，但在 Meteor 中，因为所有这些都是抽象的，所以不清楚这个 "facebook" object 的存在是为了更深入地研究 "name" 和 "avatar" 等嵌套属性（我再次不确定属性是否是正确的名称).我假设因为我正在使用 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}}

这对我来说仍然不是很明显如何移动它说 header?

所以换句话说，我如何让用户从页面的主 body 登录，但在他们登录后在 header 中显示实际的用户名和头像？

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

我错过了什么？当我刚刚通过页面的 body 登录用户时，我如何 DOM 随机移动 .name 和 .avatar div 到 header？

这有意义吗？

我的预感是我必须在 header 中创建另一个调用这些值的模板？

有人玩这个可以提供一些见解吗？

谢谢。

Answer 1

你的问题的第一部分在这里得到回答：

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

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

然后在您的模板中只写：

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

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

How to use Facebook Login in a Meteor App

facebook-graph-api

meteor

meteor-accounts