Implement facebook authentication

How many methods to implement facebook authentication on my website? My approach are:

1. Display a facebook login button on my website
2. When user click on it, they 开发者_运维百科will be asked for username password or grant some permissions etc...
3. After they logged, display their face and name on my website at position of login button.

Now, I can do 1, 2 with this code below

    <div id="fb-root"></div>
    <script src="http://connect.facebook.net/en_US/all.js"></script>
    <script>
        FB.init({ 
            appId:'22***00**58****', 
            cookie:true, 
            status:true, 
            xfbml:true,
            oauth:true
        });
    </script>
    <fb:login-button></fb:login-button>

I'm still stuck with 3.

check out the guide at http://fbdevhub.com/wiki/index.php?title=Canvas_App_Tutorial for a quickstart example

Here is the JS SDK method you'll need to use.

FB.login(function(responseLogin) {
    if (responseLogin.session) {
        // user is logged in
        // uid is in responseLogin.session.uid
        // just explore the whole object with console.log(responseLogin);
    } else {
        // refused to grant the permissions
    }
}, { perms:'offline_access,email' }); // example of perms

Remove the <fb:login> button, replace by a real button, and when the user clicks on this button, call this method. It's not the only way, but it's a simple one.