Best workflow for binding website user accounts with facebook accounts

Question

I need to implement facebook-connect to a website where users already might have their internal accounts. If internal account doesn't exist, it should be created from facebook credentials. Also it should be possible to link an existing account to facebook account. The technical implementation is clear to me, but I am more interested about a practical, optimal, and understandable user activity workflow.

1) My initial idea was to have a login form with user and password fields and two buttons: "connect with facebook" and "login". If "login" is pressed, the internal account is normally logged in. If "connect with facebook" is pressed, the user is connected to facebook and then depending on the state of user and password, I could retrieve the internal user and bind it with facebook user, or create a new internal user and bind it to facebook user, or retrieve the internal user that is binded to the facebook user. However, there I see some gotchas in the workflow. What if the user and password entered are of a different internal user than the one that is binded to the facebook account?

I will try to illustrate the problem in pseudocode:

if "login" is pressed:
    internal_user = authenticate(username, password)

if "connect to facebook" is pressed:
    facebook_user = get_facebook_user()
    if username and password are filled in:
        internal_user = authenticate(username, password)
        if facebook_user has no internal_user:
            facebook_user.bind_internal_user(internal_user)
        else:
            # conflict! what to do with it?
            # facebook_user.get_internal_user() != internal_user
    else:
        if facebook_user has internal_user:
            internal_user = facebook_user.get_internal_user()
        else:
            internal_user = facebook_user.create_internal_user()

internal_user.login()

Also users might get confused asking themselves if they need to enter facebook username and password or the username and password of the website.

2) Another option could be to have a login form, connect to facebook, and registration form as three different options, where connect to facebook would either get or create an internal account; and then a separate optional form for logged-in users to bind their facebook accounts. But then again there would be possibilites left to create a duplicate internal account.

What are the best practices to deal with that? What are the other websites using mostly?

Answer 1

FBConnect should ignore your username/pass, in your database you need to store the fb tokens which will be returned from a fb connect login. If the user successfully logs in you will be redirected to a page of your choosing where you can take that fb token and compare it to the database and ignore the username/password. The username/password they filled in on the form will be ignored when fb pops up its own login window.

I hope that answers your question.

Answer 2

Login form:

[username]   |
[password]   |  or [fbconnect button] with facebook
   [ok]      |

(two mutually exclusive sections "either or", you don't need to fill out the login form if you use facebook)

Once a user is connected with FB and you don't have associated user account for this uid then you popup another form:

Welcome, 
Please choose username for this site:
[username] [ok] 
(you can prompt to select a password as well if you want)
----------------------------------------------------
If you already have an account on our site please enter your credentials:
[username]
[password]
   [ok] 

After this step you should be covered - no matter which way they chose the result should be the same.

Usually you don't prompt for password for facebook connected users during login, they just use facebook connect button, so randomly generated password would do. If you want to create full scale account that could be used without facebook then you prompt for a password (but still don't use it for facebook login).