Facebook Login Button Question

I'm trying to implement a login and registration system with facebook. I'm using the code below:

<div id="fb-root"></div>

<script type="text/javascript">
window.fbAsyncInit = function() {
 FB.init({appId: 'MYAPPIDHERE', status: true, cookie: true, xfbml: true});

     FB.Event.subscribe('auth.login', function(response) {
         window.location = "https://domain.com/fblogin.aspx";
     });
     FB.Event.subscribe('auth.logout', function(response) {
         window.location.reload();
     });

 };
 (function() {
        var e = document.createElement('script');
        e.typ开发者_StackOverflowe = 'text/javascript';
        e.src = document.location.protocol +
            '//connect.facebook.net/en_US/all.js';
        e.async = true;
        document.getElementById('fb-root').appendChild(e);
 }());

</script>

<fb:login-button autologoutlink="true" perms="email,offline_access" registration-url="https://domain.com/register_fb.aspx" />

I need some advice. Currently if I'm logged into facebook the page is automatically firing the 'auth.login' event and redirecting me to my application. It works great but I would like to prevent this behavior. In an ideal world it would be nice if the Facebook login button would only fire the 'auth.login' event when it was clicked.

What are your thoughts? Should I scrap the fb:login-button and create my own button tied to an onclick event? If so are there any good examples that you can share?

Thanks

---

I think you should keep the code you have. Give the fb:login-button an id (say, id="fb_loginbutton") and wrap your...

window.location = "https://domain.com/fblogin.aspx";

...into something like this...

var fb_loginbutton = document.getElementById('fb_loginbutton');
fb_loginbutton.onclick = function() {
    window.location = "https://domain.com/fblogin.aspx";
}

(This goes inside your Event.subscribe...auth.login function.)

That way, the successful login action isn't redirecting the browser, but just telling the button to redirect when clicked.

If the Facebook button doesn't say the right thing, then you could change it's HTML to say something more useful...

fb_loginbutton.innerHTML = "Click here to continue";

...or roll your own.

I hope that helps!

---

Update I managed to find a workable solution:

<div id="fb-root"></div>
<script type="text/javascript">
window.fbAsyncInit = function() {
 FB.init({appId: 'MYAPPID', status: true, cookie: true, xfbml: true});

     FB.Event.subscribe('auth.login', function(response) {
         login();
     });

     FB.getLoginStatus(function(response) {
         if (response.session) {
             login();
         }
     });

 };
 (function() {
        var e = document.createElement('script');
        e.type = 'text/javascript';
        e.src = document.location.protocol +
            '//connect.facebook.net/en_US/all.js';
        e.async = true;
        document.getElementById('fb-root').appendChild(e);
 }());

 function login() {

     var fb_loginbutton = document.getElementById('fb_loginbutton');

    $('.fb_button_text').html('Continue to your account...');

    fb_loginbutton.onclick = function() {
        window.location = "https://domain.com/login_controller.aspx";
    }

 }
 </script>

My login_controller.aspx page looks like this:

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load

Dim FacebookAPPID As String = "MY_FB_APP_ID"

If Request.Cookies("fbs_" & FaceBookAppID) Is Nothing Then
    'Response.Redirect("error.aspx")
End If

Dim cookie As String = Request.Cookies("fbs_" & FaceBookAppID).Value
cookie = cookie.Replace("""", "")

Dim facebookValues As NameValueCollection = HttpUtility.ParseQueryString(cookie)

'Response.Write(facebookValues("access_token"))
'Response.Write("<br><br>")
'Response.Write(facebookValues("secret"))
'Response.Write("<br><br>")
'Response.Write(facebookValues("session_key"))
'Response.Write("<br><br>")
'Response.Write(facebookValues("sig"))
'Response.Write("<br><br>")
'Response.Write(facebookValues("uid"))

doLogin(facebookValues("uid").ToString)

End Sub

I do have one question > Would it be beneficial to store some sort of AES encrypted string along with the facebook user id in my database? I'm using this process for registration:

<div id="fb-root"></div>
<script>
  window.fbAsyncInit = function() {
    FB.init({appId: 'MY_APP_ID', status: true, cookie: true, xfbml: true});
  };
  (function() {
    var e = document.createElement('script'); e.async = true;
    e.src = document.location.protocol +
      '//connect.facebook.net/en_US/all.js';
    document.getElementById('fb-root').appendChild(e);
  }());
</script>


<fb:registration fields="[{'name':'name', 'view':'prefilled'},{'name':'username', 'view':'not_prefilled', 'description':'Username','type':'text'},{'name':'password', 'view':'not_prefilled', 'description':'Password','type':'text'},{'name':'lastname', 'description':'Last name','type':'text'},{'name':'email'},{'name':'accountnumber', 'description': ' Account number','type':'text'}]" onvalidate="validate_async" redirect-uri="https://domain.com/fbregister.aspx"></fb:registration>

<script> 
function validate_async(form, cb) {

    tmp = form.accountnumber;
    tmp = tmp.split("-");

    if (tmp.length != 2) {
        cb({'accountnumber': 'Please include the dash in your account number. Example: xxxxx-xxxxxx.'});
    } 

    if (form.username) {

        if (form.username.length > 0) {

            $.getJSON('checkUsernameExists.aspx?username=' + form.username, 
                function(response) {
                    if (response.error) {
                        cb({username: 'That username is taken'});
                    }
                    cb();
            });

        }

    } else {
        cb();
    }

}
</script> 

My fbregister.aspx uses the JSON.net library to parse the facebook response:

Dim FBAppID As String, FBSecret As String, data As JObject FBAppID = "MY_FB_ID" FBSecret = "MY_FB_SECRET"

data = ClientSite.Classes.Facebook.DecodeFacebookRequest(HttpContext.Current.Request.Form("signed_request"), FBSecret)

Response.Write(data)

What would the best practices be to storing the userid with a password? I was thinking of using AES to encrypt the password. userid would be passphase, facebook secret would be salt, and a system generated machine key with be the text.

When someone tried to login using facebook it would generate an encrypted password and compare it against the one stored in the db. This would essentially provide a extra layer of security. Thoughts?