Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at


  • Chris Houston 535 posts 980 karma points MVP admin c-trib
    Feb 16, 2017 @ 15:14
    Chris Houston
    0

    How to enable login with Facebook for select a group of Members.

    Hi All,

    I am working on a little website for my wedding, I was wondering if I could setup all my guests as Members, with their respective Facebook ID's entered as a property of the member.

    I assume I will need to use something like ASP.NET Identity for Umbraco ?

    Then some how allow my guests to "login with Facebook" and for the site to link them to their Member profile ( each member has different settings, links to other family members etc )

    Anyone else trying to login with an unknown Facebook ID should just be rejected.

    If anyone has done this or has some clues how to get started, please let me know :) I am just trying to make it as easy as possible to access the site without having to provide my friends and family with passwords etc.

    Cheers, Chris

  • Morten Bock 1867 posts 2140 karma points MVP 2x admin c-trib
    Feb 16, 2017 @ 17:04
    Morten Bock
    0

    Hi Chris

    First, congratulations :)

    For this type of relatively simple facebook auth. I've stayed away from OWIN so far. If you want to dive into OWIN, I think Shannons Identity package is a good place to start, but expect to spend som time on it :)

    What I usually do is just to use the Facebook JS api to trigger a Facebook login dialog.

    When the user has logged in, then there will be an encrypted cookie (prefixed "fbsr_") that you can access from your server, and determine the users Facebook ID, and request their email/name.

    You can the either choose to sign in a member based in the Facebook info, or you can just treat the Facebook cookie as your main auth. cookie, if everyone will log in using Facebook. Then you will also be sure that if they sign out from Facebook, they will be signed out from your site.

    I can dig up some code samples if you want.

  • Chris Houston 535 posts 980 karma points MVP admin c-trib
    Feb 16, 2017 @ 17:11
    Chris Houston
    0

    Hi Morten,

    Thanks for your reply, sounds interesting and I am definitely looking for a quick solution, not looking to win any prizes for best MVC solution etc ;)

    Just need to keep my future wife happy!

    If you can share some code samples that would probably be really helpful, I am intending to try and spend some more time on the site over the next couple of evenings as I've promised we can put it live by the end of this week.

    Cheers,

    Chris

  • Morten Bock 1867 posts 2140 karma points MVP 2x admin c-trib
    Feb 16, 2017 @ 17:30
    Morten Bock
    100

    The JS sdk has good docs, so just start here:

    https://developers.facebook.com/docs/javascript/quickstart

    and

    https://developers.facebook.com/docs/facebook-login/web/login-button

    Note that to get the fbsr_ cookie, you need "cookie: true" in the FB.init() object.

    On the server side, I use this nuget package: https://www.nuget.org/packages/Facebook

    Then, to parse the cookie, first get the cookie which is named from your app id "fbsr{appid}".

    Then use the FacebookClient to parse/decrypt it:

    private dynamic ParseSignedRequest(string signedRequest)
    {
        var client = new FacebookClient();
        dynamic parsedSignedRequest;
        if (client.TryParseSignedRequest(AppSettings.FacebookAppSecret, signedRequest, out parsedSignedRequest))
        {
            return parsedSignedRequest;
        }
    
        return null;
    }
    

    The fields on the signed request dynamic object are documented here: https://developers.facebook.com/docs/reference/login/signed-request

    So now you have the users Facebook id in parsedSignedRequest.user_id

    Now, if you already have a connection between users FB id's and the members, then you dont need any more.

    If you need the email to tie them together, then add "email" to the scope when logging the user into Facebook.

    Then to get the users email, you can do something like this (I've adapted this a bit, so might need some tweaks for your scenario:

    var request = ParseSignedRequest(signedRequest); //Parse the cookie
    if(string.IsNullOrWhiteSpace(request?.user_id))
        throw new AuthenticationException("User not authenticated");
    
    var client = new FacebookClient();
    dynamic tokenData = client.Get("/oauth/access_token", new
    {
        client_id = AppSettings.FacebookAppId,
        redirect_uri = "",
        client_secret = AppSettings.FacebookAppSecret,
        code = request.code
    });
    
    if (string.IsNullOrWhiteSpace(tokenData?.access_token))
        throw new AuthenticationException("No token received");
    
    var tokenizedClient = new FacebookClient(tokenData.access_token);
    dynamic profileData = tokenizedClient.Get("/me", new {fields = "name,email"});
    
    var name = (string) profileData.name;
    var email = (string) profileData.email;
    var id = (string) profileData.id;
    

    Now you have the email, name and Facebook Id.

    Save the Facebook Id on the member, to avoid having to request the email all the time.

    Hope this gets you started :)

  • Chris Houston 535 posts 980 karma points MVP admin c-trib
    Feb 16, 2017 @ 23:14
    Chris Houston
    0

    Hi Morten,

    Thank you so much for a very detailed response, I've run out of time to have a play with it this evening, but hopefully will have time in the next day or two.

    I will let you know how I get on :)

    Cheers, Chris

  • Chris Houston 535 posts 980 karma points MVP admin c-trib
    Feb 18, 2017 @ 01:27
    Chris Houston
    0

    Hi Morten,

    I thought I'd give you a 1am update :)

    I have managed to get what you suggested to work with the Facebook login, however it seems that Facebook now gives "Apps" unique ID's for the users instead of the normal Facebook ID's that you can find on a user's profile and hence my idea of matching a list of known FB ID's to allow people to access doesn't look like it is going to work after all.

    I have got logging on using a Facebook account working, but being able to pre-setup the members with a FB ID doesn't seem like it is going to be possible.

    Unless you have any other ideas to try?

    I have tried matching on the email address, but the difficulty with this is I have no way of knowing what email address all my friends use, it could be their work or personal emails and a lot of people don't show this on their profiles.

    Best regards,

    Chris

  • Morten Bock 1867 posts 2140 karma points MVP 2x admin c-trib
    Feb 18, 2017 @ 06:52
    Morten Bock
    0

    Yes, that is true. You will always get an app scoped id for the user.

    Maybe you could match by name? Unless multiple users have the same name?

    You might also be able to use the api to get a list of your own friends, and if you use your own app, then the id's should have the correct scope?

  • Chris Houston 535 posts 980 karma points MVP admin c-trib
    Feb 18, 2017 @ 08:23
    Chris Houston
    0

    Hi Morten,

    This is exactly the thought I had when I woke up this morning, I am now creating a page that will allow me as an authorised Member to add all my guests who are friends on Facebook as Umbraco members.

    This will actually be quicker than adding them all manually as well, bonus :)

    Cheers,

    Chris

  • Chris Houston 535 posts 980 karma points MVP admin c-trib
    Feb 20, 2017 @ 09:31
    Chris Houston
    0

    Hi Morten,

    I just thought I'd update this thread in case anyone else reads it in the future.

    It turns out that Facebook now only allows the API to return a list of friends for a user of your app who's friends have also approved the app.

    So currently if I try this for my own user profile I can see the total number of friends I have, but the list of friends has no results, which is a shame as I was hoping I could use this as a way of picking the friends to invite.

    Apparently they changed this when they launched V2 of their API as they had complaints from users about privacy.

    Cheers,

    Chris

Please Sign in or register to post replies

Write your reply to:

Draft