How to use Facebook Login in a Meteor App

Question

I'm trying to create a custom login only using Facebook and only looking for two endpoints: "name" and "avatar".

For starters I don't know if "avatar" is even a real endpoint name but that's what I'm trying to access.

I have created a test app on FB, I have also installed all of the Meteor packages that I need so the groundwork is done.

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>

and then in the SERVERS directory I have create a .js file to store my API keys.

My questions:

My first question is where to find the names of these endpoints as I've been going the entire documentation on FB and nothing references "name" or "avatar" so the first thing I need to understand is where to find these endpoints as I haven't been able to locate even the "name".

Second question is the API shows JSON objects and that's usually how you would hookup your endpoints but in Meteor since all of that is abstracted it's unclear where this "facebook" object exists to then study more in depth the nested properties like "name" and "avatar" (which again i'm uncertain if that is the correct name for that property). I'm assuming because I'm using Meteor that calling an endpoint like this {{currentUser.services.facebook.name}} is enough, am I thinking about this correctly?

Final question is if I have to call these endpoints like this inside of my template:

{{#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}}

Then even if I wrap my facebook name and gender in their own divs like this:

{{#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}}

This still doesn't make it very obvious to me how to move it say the header?

So in other words how would I have the user login from the main body of the page, yet after they login have the actually username and avatar up in the header?

There is no obvious way for me to do this.

What am I missing? How would I DOM shuffle to move the .name and .avatar divs to the header when I just logged the user in via the body of the page?

Does this make sense?

My hunch is that I would have to create another template within the header that calls these values?

Anyone play around with this that could offer some insight?

Thank you.

Answer 1

The first part of your question is answered here:

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

The answer to the second part of your question is in the docs. You could make a template helper to check this:

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

And in your template just write:

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