Facebook login to LightSwitch

Question

Hi i made a custom login page as described here 

is it possible to add a facebook connect button to my custom login page?

I tried this code, a small window open, it asks my email and facebook password, when i write and click okay it close itself..

nothing happens...

Any idea???

<table align="center">
          <tr>
              <td align="center" 
                  style="color: rgb(51, 204, 255); text-transform: capitalize; font-size: large; font-weight: bold;">
                  facebook hesabıyla login olabilirsiniz:</td>
          </tr>
          <tr>
              <td align="center" style="margin-top: 350px;">
                  <div id="fb-root">
                  </div>
                  <script type="text/javascript">
        window.fbAsyncInit = function() {
          FB.init({
            appId      : 'my_app_id',
            status     : true, 
            cookie     : true,
            xfbml      : true,
            oauth      : true,
          });
        };
        (function(d){
           var js, id = 'facebook-jssdk'; if (d.getElementById(id)) {return;}
           js = d.createElement('script'); js.id = id; js.async = true;
           js.src = "//connect.facebook.net/en_US/all.js";
           d.getElementsByTagName('head')[0].appendChild(js);
         }(document));
      
</script>

                  <dfacebook login</div>
              </td>
          </tr>
      </table>

Answer 1

Hi

Your code have some issue,

You can try this code in your project:

    <table width="900px;" align="center">
    <tr>
    <td align="center" style=" font-family: Verdana;font-size: large;font-weight: bold;text-transform: capitalize;color: #33ccff;">
    Implement Facebook Login Button in Asp.Net
    </td>
    </tr>
    <tr>
    <td align="center" style="margin-top:350px;">
      <div id="fb-root"></div>
      <script type="text/javascript">
        window.fbAsyncInit = function() {
          FB.init({
            appId      : 'Your App ID',
            status     : true, 
            cookie     : true,
            xfbml      : true,
            oauth      : true,
          });
        };
        (function(d){
           var js, id = 'facebook-jssdk'; if (d.getElementById(id)) {return;}
           js = d.createElement('script'); js.id = id; js.async = true;
           js.src = "//connect.facebook.net/en_US/all.js";
           d.getElementsByTagName('head')[0].appendChild(js);
         }(document));
      </script>
     <div class="fb-login-button" >
        Login with Facebook
      </div>
    </td>
    </tr>
    </table>

Hope it helpful.

Answer 2

This is not a problem for function, its out of script.

</script>
                  <dfacebook login</div>
              </td>
          </tr>
      </table>

I didnt use facebook login before but i think its possible.

Answer 3

Hey Ismail,

I think you'll run into multiple problems because you seem to be mixing client-side (javascript) and server-side (the custom login page's code behind) techniques, without tie-ing them together.

I have an article that'll be published in 8 days that will describe this in detail, but I found the best way to do this is to use Azure ACS (there's some great labs on how to use ACS if you Bing/Google) to secure the Asp.Net page.  This is an alternative to your approach, not a solution for your specific question though.

---

It's your story - time to switch on the innovation. || About me || LightSwitch blog

Answer 4

Ok Jan thanks, please can you send a link i ll check it 8 days later.

Answer 5

I have an article that'll be published in 8 days that will describe this in detail, but I found the best way to do this is to use Azure ACS (there's some great labs on how to use ACS if you Bing/Google) to secure the Asp.Net page.  This is an alternative to your approach, not a solution for your specific question though.

---

It's your story - time to switch on the innovation. || About me || LightSwitch blog

This sounds like a good one... :)

---

The Visual Studio LightSwitch Marketplace

http://LightSwitchHelpWebsite.com

Answer 6

Hey Ismail,

if you're still wondering: this is how I did it. 

First I set up a brand new ASP.Net website that's used as "the portal page".  You can secure it with Azure ACS, meaning you can redirect the user's browser to an ACS login page where the user can log in with his or her social credentials, including facebook.

Next up, just grab those credentials from your ASP.Net website and pass them to your custom lightswitch login page.  You can use the URL like I did (for simplicity), but cookies or shared sessions will work just as well.

You can read the full article here (http://msdn.microsoft.com/en-us/magazine/jj129610.aspx ) Note that unlike you, I tend to replace the Silverlight "login page", not the hosting Asp.Net page, but you could make either work.

Let me know if this suits your needs, and if you would need help implementing any of it!

Keep rocking LS!

Jan

---

It's your story - time to switch on the innovation. || About me || LightSwitch blog

Answer 7

Hi Jan,

I dont have a Azure account because its not supported in Türkiye.

Please look at this link : http://blogs.msdn.com/b/mthalman/archive/2011/12/08/creating-a-custom-login-page-for-a-lightswitch-application.aspx

Im using this custom login page :

http://yonetimkati.com/apartmanyonet/login.aspx?ReturnUrl=%2fapartmanyonet%2f

username : [e-mail] 

Password:  DEMO+12345

How can i add fb login to this custom login page?