Facebook Login OAuth
The Facebook Login feature helps me incorporate OAuth and JavaScript into my project: two concepts where I have been craving more exposure.
At a high-level, here is what the Facebook Login does:
Checking the login status.
If they are not logged in, a login dialog is invoked, asking for a set of data permissions.
Verify their identity.
Store the resulting access token.
Make API calls.
Log out.
To get started, copy and paste the full code example from the Quick Start section of the Facebook Developer.
Here are the moving parts of the Facebook Login:
The 'Login' button should turn into 'Logout' once the user is signed in and vice versa. To do this, either add 'auto-logout-link="true"' in the 'fb' tag from the example or customize the type of login button that you want and copy/paste the provided code. If you go with the first method, the fb tag should look like: <fb:login-button scope="public_profile,email" auto-logout-link="true" onlogin="checkLoginState()");"></fb:login-button>.
Grab the user's name and email address: 'FB.api('/me', {fields:['email', 'name']}, function(response) { ...' I placed console.log(response.email); in the function to confirm in the Developer Tools Console (right-click the browser and click Inspect) that my email address was present.
Redirect the obtained information to the route that will handle the response. window.location = '/check_email_existence?email='+response.email; is Javascript for 'Redirect my user to the following URL.' By including the email address in the URL, the /check_email_existence route is able to grab the URL from the JavaScript file. The code above is placed in the FB.api function.
Handle the response. The route '/check_email_existence?email='+response.email is purposely hidden, as my users don't need to see the information getting 'handled.' First, the User table of the apps database will be queried to check for the existence of the email address . There are three situations that can happen:
The email address exists in my database.
In this case, the user_id will be grabbed from the database, and then the user will be redirected to /landing-page/<int:user_id>.
The email address does not exist in my database.
In this case, the user will be redirected to /register, as my users are required to have an email address so that I can send them notifications about their contacts.
Facebook does not return an email address. The user could have opted out of entering an email address when signing up for a Facebook account, in which case no email would be returned in the API call.
The user will be redirected to /register for the same reason above.
I'll need to figure out a way to address the situation where a user who has already registered with my app tries to sign-in with FB but who didn't enter an email address to FB. As my app currently stands, this user will constantly be redirected to the Registration page. To resolve this, I could grab the FB_user_id returned from the API call in addition to the email address, and store that in the User table. The hidden route /check_email_existence could then query for the FB_user_id within the loop that handles 'FB didn't return an email address' situations. If FB_user_id exists, check to see if my apps database has an email stored for that user. If no, redirect them to /register. If yes, redirect them to /landing-page.
Check out homepage.html and server.py (@app.route('/check_email_existence')) on my GitHub to see the completed version :)