Best workflow for linking website user accounts with facebook accounts

Question

I need to implement facebook-connect on a website where users can already have their internal accounts. If the internal account does not exist, it must be created from the facebook credentials. It should also be possible to link an existing account with a facebook account. I understand the technical implementation, but I'm more interested in the practical, optimal and understandable workflow of user actions.

1) My initial idea was to have a login form with user and password fields and two buttons : "connect to facebook" and "login". If login is pressed, the internal account is usually registered. If "connect with facebook" is clicked, the user connects to facebook, and then, depending on the state of the user and password, I could get an internal user and associate him with a facebook user or create a new internal user and associate him with a facebook user or get an internal user linked to facebook user. However, there I see some errors in the workflow. What if the user and password have a different internal user than the one that is associated with 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 may get confused asking themselves if they need to enter the username and password of facebook, the username and password of the website.

2) Another option would be to have a login form for connecting to facebook and a registration form as three different parameters, where you could get or create an internal account to connect to facebook; and then a separate optional form for registered users to link their facebook accounts. But then again, it may be possible to duplicate the internal account.

What are the best ways to deal with this? What other websites are mainly used?

Answer 1

Login form:

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

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

As soon as the user connects to FB, and you do not have an associated user account for this uid, you can display the following 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 path they choose, the result should be the same.

Usually you do not ask for a password for users connected to Facebook during login, they just use the button to connect to facebook, so a random generated password will do. If you want to create a full-blown account that can be used without facebook, then you request a password (but do not use it to log in to facebook).

Answer 2

FBConnect should ignore your username / password, in your database you need to save fb chips that will be returned from the fb connect input. If the user successfully logs in, you will be redirected to the page of your choice, where you can take this fb token and compare it with the database and ignore the username / password. The username / password that they fill out on the form will be ignored when fb opens its own login window.

I hope that answers your question.