Copied to clipboard

Flag this post as spam?

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


  • Elad Lachmi 112 posts 144 karma points
    Aug 27, 2011 @ 18:27
    Elad Lachmi
    0

    Facebook and Umbraco membership provider integration

    Hi,

    I'm trying to figure out how to allow members to register via thier Facebook account.

    I'm thinking it should work something along the lines of:

    1. Member clicks a button on the registration page and is redirected to Facebook authentication.

    2. After authentication he is redirected back to a page where I get all the details via the token.

    3. Once I have the token, I get all the details from Facebook and programaticly create the new member.

     

    I know how to create the member on the server side, but that's about all I know right now.

    With all the SDKs and versions, etc. I'm a little lost.

    Can anyone point me to some example? Anyone done something like this?

    Thank you!

  • Bex 444 posts 555 karma points
    Aug 31, 2011 @ 16:54
    Bex
    9

    I have done exactly this.

    I used the Facebook C# SDK (think this is it)

    I had two login buttons for my site one that came with the facebook stuff that said "Login with facebook" or something then the normal site one. 
    With facebook you just log in, the trick is to detect if it's the first time the user has logged in with facebook or not.

    If the user logged in with facebook the redirect page was set to a page that checked if I'd seen them before, if not I created a site user for them and added their facebook Id against it.
    Then sent them through the normal registration process to grab any info from them that I needed to create a fully fledged site user, then each time they logged back in with facebook I checked if the FB id existed against any user and logged them in automatically.

     

    To start you off if you need it I had a class with the following:

    static FacebookApp fbApp;
            private static FacebookSession session;
            public static bool IsFBAuthenticated()
            {
                fbApp = new FacebookApp();
                session = fbApp.Session;
    
                if (session != null)
                {
                    return true;
                }
                else
                {
                    return false;
                }
    
            }
            public static long? UserId()
            {
                return session != null ? fbApp.UserId : 0;
    
            }
            public static string AppId()
            {
                return FacebookSettings.Current.AppId;
            }

    In my page with the login buttons I had

    <script type="text/javascript">
        //Login and redirect
        function onLogin() {
    
            window.location.href = "facebookusermapping.aspx";
        }
    
        function Logout() {
    
            if (FB != null) {
                FB.logout();
            }
        }
    </script>




    <!--login button-->
    <div class="FBLogin"><fb:login-button onlogin="onLogin()"></fb:login-button></div> 

    <!-- at the bottom-->

    <div id="fb-root"></div> <script> window.fbAsyncInit = function () { FB.init({ appId: '<%= appId() %>', status: true, // check login status cookie: true, // enable cookies to allow the server to access the session xfbml: true // parse XFBML }); }; (function () { var e = document.createElement('script'); e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js'; e.async = true; document.getElementById('fb-root').appendChild(e); } ()); </script>
     

    I have to admit I got very confused with all the facebook sdks etc so I hope this is the actual code I used!

     

    Hope this is of some help

     

    Bex

  • Elad Lachmi 112 posts 144 karma points
    Aug 31, 2011 @ 17:47
    Elad Lachmi
    0

    Wow!

    That's great! I would High five you ten times if I could :)

    Thank you.

  • Bex 444 posts 555 karma points
    Aug 31, 2011 @ 17:51
    Bex
    0

    Your welcome!

    Let me know if you get stuck anywhere and I'll do my best to help!

     Bex

  • SideSam 13 posts 33 karma points
    Sep 02, 2011 @ 13:33
    SideSam
    0

    Hi, I am doing exactly same thing and ran into small problem.

    Here is what I am doing: Getting user permission to acces their data from facebook (name, email and such) - getting access token. I am also using Facebook C# SDK. Then I create new umbraco member from that data. For members created from facebook data I have special member type "FromFacebook".

    The problem: umbraco.cms.businesslogic.member.Member.MakeNew(string Name, MemberType mbt, User u) is replaced by System.Web.Security.Membership.CreateUser(string username, string password, string email). New constructor (or it's overloads) do not support MemberType and I am not able to control what member type new member will have. Also I was not able to find way of changing member type after it is created.

    Actually, if you use System.Web.Security.Membership.CreateUser(string username, string password, string email) (or it's overloads) you will always get new member of type specified in web.config (<add name="UmbracoMembershipProvider" type="umbraco.providers.members.UmbracoMembershipProvider" enablePasswordRetrieval="false" enablePasswordReset="false" requiresQuestionAndAnswer="false" defaultMemberTypeAlias="Member_Type" passwordFormat="Hashed" />)

    Similar problem was mentioned some time ago here http://our.umbraco.org/forum/developers/extending-umbraco/5701-Change-member-type-programatically

    Any ideas of how it should be done correct way using asp Membership model?

  • Bex 444 posts 555 karma points
    Sep 02, 2011 @ 13:48
    Bex
    0

    Hi SideSam

    Has Member.Make new actually been replaced, or is it just recommended that you used the .net membership provider stuff?
    I think you should still  be able to use Member.MakeNew? Other than that I don't know, unless you can use a role?

    Maybe create a separate post asking how to add members as specific types?

    Bex

     

  • Elad Lachmi 112 posts 144 karma points
    Sep 02, 2011 @ 22:06
    Elad Lachmi
    0

    Just create another provider with a different defualt member type.

    I have two member types and that is what I did.

  • Marc Love (uSkinned.net) 447 posts 1789 karma points
    Dec 16, 2011 @ 17:45
    Marc Love (uSkinned.net)
    0

    For anyone that has got the Facebook c# SDK working with Umbraco what version did you use. If I drop the latest Facebook.Web.dll into Umbraco I get the error:

    Error parsing XSLT file:

    for all of my xslt files.

    Cheers,

    Marc

  • Marc Love (uSkinned.net) 447 posts 1789 karma points
    Dec 17, 2011 @ 16:06
    Marc Love (uSkinned.net)
    1

    Recompiled facebook dlls and its working now..

  • Lachlann 344 posts 626 karma points
    Jul 26, 2012 @ 22:47
    Lachlann
    4

    Hey for anyone coming at this and trying to use the more recent Facebook SDK here is how I implemented the above.

    The c# SDK is now here

    you can install it with NuGet pretty easily.

    You will also need to set your app up within facebook by loging into facebook and going to the developers section

    I setup a new member type which (along with some other fields) has a facebook user id field

    After reading the getting started SDK documentation which is pretty well written and clear, I implemented the following to get the LOGIN button to appear

    window.fbAsyncInit = function () {
        FB.init({
            appId: 'YOUR AP ID', // App ID
            status: true, // check login status
            cookie: true, // enable cookies to allow the server to access the session
            xfbml: true  // parse XFBML
        });

        // Additional initialization code here
        FB.Event.subscribe('auth.authResponseChange', function (response) {
            if (response.status === 'connected') {
                // the user is logged in and has authenticated your
                // app, and response.authResponse supplies
                // the user's ID, a valid access token, a signed
                // request, and the time the access token
                // and signed request each expire
                var uid = response.authResponse.userID;
                var userAccessToken = response.authResponse.accessToken;


                $.post("/Base/FacebookLogin/LogUserIn", { accessToken: userAccessToken }, function callback(data) {
                    if (data != "error") {
                        alert(data);
                    } else {
                        displayMessage("Error", "Oops! something has gone wrong we will look into it now.", "errormessage")
                        return "error";
                    }
                });

            } else if (response.status === 'not_authorized') {
                // the user is logged in to Facebook,
                // but has not authenticated your app
            } else {
                // the user isn't logged in to Facebook.
            }
        });
    };

    // Load the SDK Asynchronously
    (function (d) {
        var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0];
        if (d.getElementById(id)) { return; }
        js = d.createElement('script'); js.id = id; js.async = true;
        js.src = "//connect.facebook.net/en_US/all.js";
        ref.parentNode.insertBefore(js, ref);
    } (document));

     

    Then on your output page you need to have the div to hold the log in button

    NOTE: You have to set the scope of your app in order to access the users email address (this took me a while to fnd out) read more about the scope options here

    You can see above that once the user has authenticated I call a BASE method to do the authenticating basically you need to pass your BASE method the access token created by the login JS (I am using JQuery).

    NOTE: I am not sure if it is okay to use AJAX for this? Are there any security buffs who could comment on this? the SDK page uses a post method to a web service but I thought this would be easier.

    As described above my BASE method basically takes the access token and gets the users details. It then uses UQuery to check if a member in my Umbraco install exists with that UID, if it does log them in if it doesnt then create a new member and log them in.

     

            public static string LogUserIn()
            {
                string accessToken = HttpContext.Current.Request["accessToken"];
                try
                {
                    var client = new FacebookClient(accessToken);
                    dynamic user = client.Get("me");
                    /*we have authenticated the user now we must either create a new member or log them is as an existing member*/
                    System.Collections.Generic.List ExistingMember = uComponents.Core.uQuery.GetMembersByXPath("//*[facebookUserId = '" + user.id + "']");
                    if (ExistingMember.Count() > 0)
                    {
    Member.AddMemberToCache(ExistingMember[0]);
                        return ExistingMember[0].Id.ToString();
                    }else{
                        return createNewUser(user);
                    }
                }
                catch (Exception e)
                {
                    return e.Message + " "+e.StackTrace;
                }
            }

     

    Notice how awesome UQuery is for searching

    uComponents.Core.uQuery.GetMembersByXPath("//*[facebookUserId = '" + user.id + "']");

     

    I also created a little method to create a new user and pass back the ID

     

            private static String createNewUser(dynamic facebookUser)
            {
                MemberType siteUser = new MemberType(1085);
                Member newMember = Member.MakeNew(facebookUser.name, siteUser, new umbraco.BusinessLogic.User(0));

                newMember.getProperty("facebookUserId").Value = facebookUser.id;
                newMember.getProperty("name").Value = facebookUser.first_name + " " + facebookUser.last_name;
                newMember.LoginName = facebookUser.id;
                newMember.Email = facebookUser.email;
                newMember.Save();
    Member.AddMemberToCache(newMember);
                return newMember.Id.ToString();
            }

     

    PS I am including the following libraries (I always hate it when people dont specify this is there an easy way to find out what libraries you need  to use for different methods in VS?)

     

    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Text;
    using Facebook;
    using System.Web;
    using uComponents.Core;
    using umbraco.BusinessLogic;
    using umbraco.MacroEngines.Library;
    using umbraco.cms.businesslogic.relation;
    using System.Text.RegularExpressions;
    using umbraco.presentation.nodeFactory;
    using umbraco.cms.businesslogic.member;
    using umbraco.cms.businesslogic.propertytype;

     

    I really hope this is useful, TBH it really didnt take me too long to get this implemented, I am still playing around with it too so If I spot anything that I have missed from the above I will post in the comments.

    Finally If I am doing something above that is crazy I would love a heads up :)

    L

Please Sign in or register to post replies

Write your reply to:

Draft