Seamless facebook integration with nopcommerce at www.pocomaru.com!!!

well. there seem to be length limit in the post..

the interface appears in the above post is

       /// <summary>
        /// Adds a customer with facebookId
        /// </summary>
        /// <param name="email">The email</param>
        /// <param name="username">The username</param>
        /// <param name="password">The password</param>
        /// <param name="isAdmin">A value indicating whether the customer is administrator</param>
        /// <param name="isGuest">A value indicating whether the customer is guest</param>
        /// <param name="active">A value indicating whether the customer is active</param>
        /// <param name="status">Status</param>
        /// <returns>A customer</returns>
        Customer AddCustomer(string email, string facebookId, string username, string password,
           bool isAdmin, bool isGuest, bool active, out MembershipCreateStatus status);

Thanks for Part III, great to see you adding to your original post.

Question - On your live website there does not appear to be a facebook login as part of the normal NOP pages for register/login.

Much like the Facebook login button on this site - http://supercoach.heraldsun.com.au/

Are you yet to complete the front-end integration and what you've posted so far is just the backend updates so far?

If you go to
http://www.pocomaru.com/login.aspx
you should see the facebook login besides the register button.

Thanks for that.

Seems your Facebook login button does not function on IE9 or IE9 compatibility mode. Used firefox and the facebook login is there as expected.

Could you please provide your login.aspx page and relevant code steps so we can complete this customisation fully.

Thanks very much, great post and community contribution mate.

thanks for the code. Looking forward for the rest.

Just found this thread, and "liked" your page as well. Thanks for sharing this, and as soon as my workload settles, I'll look at integrating this into my existing client sites. Thank you!

To make the testing easier, I made a copy of \nopCommerce_1.90_Source\NopCommerceStore\Modules\CustomerLogin.ascx and rename it to \NopCommerceStore\Modules\CustomerLoginWithFacebook.ascx,(together with CustomerLoginWithFacebook.ascx.cs, CustomerLoginWithFacebook.ascx.designer.cs of cause) and then in

nopCommerce_1.90_Source\NopCommerceStore\Login.aspx, change it to use  CustomerLoginWithFacebook.ascx:
<%@ Page Language="C#" MasterPageFile="~/MasterPages/TwoColumn.master" AutoEventWireup="true"
    Inherits="NopSolutions.NopCommerce.Web.LoginPage" Title="Login" Codebehind="Login.aspx.cs"  %>

<%@ Register TagPrefix="nopCommerce" TagName="CustomerLogin" Src="~/Modules/CustomerLoginWithFacebook.ascx" %>
<asp:Content ID="Content1" ContentPlaceHolderID="cph1" runat="Server">
    <nopCommerce:CustomerLogin ID="ctrlCustomerLogin" runat="server" />
</asp:Content>

Now, you can just modify the CustomerLoginWithFacebook.* to play around with facebook.

First of all, I will just put CustomerLoginWithFacebook.ascx code here. It will include the "Login with facebook" button.
The highlighted part are the changes for facebook support.

<%@ Control Language="C#" AutoEventWireup="true" Inherits="NopSolutions.NopCommerce.Web.Modules.CustomerLoginWithFacebookControl"
    CodeBehind="CustomerLoginWithFacebook.ascx.cs" %>
<%@ Register TagPrefix="nopCommerce" TagName="Captcha" Src="~/Modules/Captcha.ascx" %>
<%@ Register TagPrefix="nopCommerce" TagName="Topic" Src="~/Modules/Topic.ascx" %>
<div class="login-page">
    <div id="fb-root">
    </div>
    <script src="http://connect.facebook.net/en_US/all.js"></script>
    <script>
        FB.init({ appId: '<%: Facebook.FacebookApplication.Current.AppId %>', status: true, cookie: true, xfbml: true
        });
    </script>
    <div class="page-title">
        <h1>
            <%=GetLocaleResourceString("Login.Welcome")%></h1>
    </div>
    <div class="clear">
    </div>
    <div class="wrapper">
        <%if (!CheckoutAsGuestQuestion)
          { %>
        <div class="new-wrapper">
            <span class="register-title">
                <%=GetLocaleResourceString("Login.NewCustomer")%></span>
            <div class="register-block" runat="server" id="pnlRegisterBlock">
                <table>
                    <tbody>
                        <tr>
                            <td>
                                <%=GetLocaleResourceString("Login.NewCustomerText")%>
                            </td>
                        </tr>
                        <tr>
                            <td align="right" style="padding-right: 20px; padding-top: 20px;">
                                <fb:login-button perms="email,user_checkins" onlogin="Facebook._CheckLogin(getQuerystring('returnurl'));">Facebook Login</fb:login-button>
                                <asp:Button runat="server" ID="btnRegister" Text="<% $NopResources:Account.Register %>"
                                    OnClick="btnRegister_Click" CssClass="registerbutton" />
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
        <%}
          else
          { %>
        <div class="new-wrapper">
            <span class="register-title">
                <%=GetLocaleResourceString("Checkout.CheckoutAsGuestOrRegister")%></span>
            <div class="checkout-as-guest-or-register-block">
                <table>
                    <tbody>
                        <tr>
                            <td>
                                <nopCommerce:Topic ID="topicCheckoutAsGuestOrRegister" runat="server" TopicName="CheckoutAsGuestOrRegister"
                                    OverrideSEO="false"></nopCommerce:Topic>
                            </td>
                        </tr>
                        <tr>
                            <td align="right" style="padding-right: 20px; padding-top: 20px;">
                                <fb:login-button perms="email,user_checkins" onlogin="Facebook._CheckLogin(getQuerystring('returnurl'));">Facebook Login</fb:login-button>
                                <asp:Button runat="server" ID="btnCheckoutAsGuest" Text="<% $NopResources:Checkout.CheckoutAsGuest %>"
                                    OnClick="btnCheckoutAsGuest_Click" CssClass="checkoutasguestbutton" />
                                <asp:Button runat="server" ID="btnRegister2" Text="<% $NopResources:Account.Register %>"
                                    OnClick="btnRegister_Click" CssClass="registerbutton" />
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
        <%} %>
        <div class="returning-wrapper">
            <span class="login-title">
                <%=GetLocaleResourceString("Login.ReturningCustomer")%></span>
            <asp:Panel ID="pnlLogin" runat="server" DefaultButton="LoginForm$LoginButton" CssClass="login-block">
                <asp:Login ID="LoginForm" TitleText="" OnLoggedIn="OnLoggedIn" OnLoggingIn="OnLoggingIn"
                    runat="server" CreateUserUrl="~/register.aspx" DestinationPageUrl="~/Default.aspx"
                    OnLoginError="OnLoginError" RememberMeSet="True" FailureText="<% $NopResources:Login.FailureText %>">
                    <LayoutTemplate>
                        <table class="login-table-container">
                            <tbody>
                                <tr class="row">
                                    <td class="item-name">
                                        <asp:Label runat="server" ID="lblUsernameOrEmail" Text="E-Mail" AssociatedControlID="UserName" />:
                                    </td>
                                    <td class="item-value">
                                        <asp:TextBox ID="UserName" runat="server"></asp:TextBox>
                                        <asp:RequiredFieldValidator ID="UserNameOrEmailRequired" runat="server" ControlToValidate="UserName"
                                            ErrorMessage="Username is required." ToolTip="Username is required." ValidationGroup="LoginForm">*</asp:RequiredFieldValidator>
                                    </td>
                                </tr>
                                <tr class="row">
                                    <td class="item-name">
                                        <asp:Label runat="server" ID="lblPassword" Text="<% $NopResources:Login.Password %>"
                                            AssociatedControlID="Password" />:
                                    </td>
                                    <td class="item-value">
                                        <asp:TextBox ID="Password" TextMode="Password" runat="server" MaxLength="50"></asp:TextBox>
                                        <asp:RequiredFieldValidator ID="PasswordRequired" runat="server" ControlToValidate="Password"
                                            ErrorMessage="<% $NopResources:Login.PasswordRequired %>" ToolTip="<% $NopResources:Login.PasswordRequired %>"
                                            ValidationGroup="LoginForm">*</asp:RequiredFieldValidator>
                                    </td>
                                </tr>
                                <tr class="row">
                                    <td class="item-value" colspan="2">
                                        <asp:CheckBox ID="RememberMe" runat="server" Text="<% $NopResources:Login.RememberMe %>">
                                        </asp:CheckBox>
                                    </td>
                                </tr>
                                <tr class="row">
                                    <td class="message-error" colspan="2">
                                        <asp:Literal ID="FailureText" runat="server" EnableViewState="False"></asp:Literal>
                                    </td>
                                </tr>
                                <tr class="row">
                                    <td class="forgot-password" colspan="2">
                                        <asp:HyperLink ID="hlForgotPassword" runat="server" NavigateUrl="~/passwordrecovery.aspx"
                                            Text="<% $NopResources:Login.ForgotPassword %>"></asp:HyperLink>
                                    </td>
                                </tr>
                                <tr class="row">
                                    <td colspan="2">
                                        <nopCommerce:Captcha ID="CaptchaCtrl" runat="server" />
                                    </td>
                                </tr>
                                <tr class="row">
                                    <td colspan="2">
                                        <div class="buttons">
                                            <asp:Button ID="LoginButton" runat="server" CommandName="Login" Text="<% $NopResources:Login.LoginButton %>"
                                                ValidationGroup="LoginForm" CssClass="loginbutton" />
                                        </div>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </LayoutTemplate>
                </asp:Login>
            </asp:Panel>
        </div>
    </div>
    <div class="clear">
    </div>
</div>

As you can see,
<div id="fb-root">
    </div>
    <script src="http://connect.facebook.net/en_US/all.js"></script>
    <script>
        FB.init({ appId: '<%: Facebook.FacebookApplication.Current.AppId %>', status: true, cookie: true, xfbml: true
        });
    </script>[/i][/b]
You need a facebook Id, which you can set up on https://www.facebook.com/developers/, click the set up new app button. For www.pocomaru.com, the setting is like this:
Site URL
    http://www.pocomaru.com/
Site Domain
    www.pocomaru.com
You can also specify a localhost for testing purpose, here is an example:
App ID
    137465179660537
API Key
    766e0a914f7a261229e0cd3c418848bf
App Secret
    ede3d11d8633553b6825203a05f02cad
Site URL
    http://localhost:40147/
Site Domain
    localhost

Once you have got the AppID and app secret, put them into web.config like the following:
<!--localhost:40147-->
  <facebookSettings
  appId = "137465179660537"
  appSecret ="ede3d11d8633553b6825203a05f02cad" />
and of cause you need to hook this up with  "Facebook.FacebookApplication.Current.AppId". In  my case, I just use the facebook developer SDK, "Facebook.dll" downloaded from http://facebooksdk.codeplex.com/. Put facebook.dll into nopCommerce_1.90_Source\Dependencies and then add it to the reference list of your project.

Note that using facebook developer SDK is not mandatory. I started using facebook SDK only to find its really hard to use. I just leave it there only to read the facebook settings from web.config. You can see how lazy I am...

When you add facebook login button, be sure to have <div id="fb-root">
    </div> above all the facebook related code. If you dont put it in the above, you will not see the facebook login button.

Next, I will talk about the code support for <fb:login-button perms="email,user_checkins" onlogin="Facebook._CheckLogin(getQuerystring('returnurl'));">Facebook Login</fb:login-button>.

Thanks a lot for your effort. Will surely give this a try to integrate fb login in the site.

Sorry for the delay(again....)  I accidentally deleted some live customer data from the cloud(windows azure)!!!!! and spent almost a whole week writing scripts to recover some data.. so the lesson i learned is 1. don't run some tool that you are not familiar with(that's how the data got wiped out) 2. Data should always have backup..

Ok. back to the topic!
As you can see from the previous post, onlogin="Facebook._CheckLogin(getQuerystring('returnurl'));">
Apparently, we need some javascript function here.

Again, I will just paste my js file here. put it under NopCommerceStore\Scripts\Facebook.js and be sure to add the reference in \NopCommerceStore\Modules\CustomerLoginWithFacebook.ascx.cs like the following:

    protected override void OnPreRender(EventArgs e)
        {
            //java-script
            string facebookJS = CommonHelper.GetStoreLocation() + "Scripts/facebook.js";
            Page.ClientScript.RegisterClientScriptInclude(facebookJS, facebookJS);

            base.OnPreRender(e);
        }

So here is facebook.js:

function getQuerystring(key, default_) {  
  if (default_ == null) default_ = "";
    key = key.replace(/[\[]/, "\\\[").replace(/[\]]/, "\\\]");
    var regex = new RegExp("[\\?&]" + key + "=([^&#]*)");
    var qs = regex.exec(window.location.href);
    if (qs == null)
        return default_;
    else
        return qs[1];
}


var Facebook = new function () {
   
    this._CheckLogin = function (returnUrl) {    
        if (FB) {
            FB.getLoginStatus(function (response) {
                if (response.session) {
                    var uid = response.session["uid"];
                    var access_token = response.session["access_token"];             
                    jQuery.ajax({
                        type: "POST",
                        url: "/FBUtils.aspx/UserIDExists",
                        data: "{ uid: '" + uid + "', accesstoken: '" + access_token + "', returnurl: '" + returnUrl + "'}",
                        contentType: "application/json; charset=utf-8",
                        dataType: "json",
                        success: function (data) {                          
                            var obj = jQuery.parseJSON(data.d);
                            if (obj['result'] == "true") {
                                response.session["isfacebooklogin"] = "true";
                                window.location = obj['returnUrl'];
                            }
                        }
                    });
                } else {
                    // The user has logged out, and the cookie has been cleared
                }
            });
        }
    };   
};

  

I am not going to explain line by line here, but its pretty straightforward: when user clicks facebook login,
it use ajax to call a webservice /FBUtils.aspx/UserIDExists and I will explain FBUtils.aspx and UserIDExists in my next post.

Thanks again. Looking forward for your next post.