Try out the two social login demos below! They’re powered by client-side JavaScript (more on this below), which means the information you will see will not be handled by a Eusebius.Tech server and therefore never stored here.

The scenario: You go to sign up to a website and they ask you to create an account using an email and a password. If you make up a new password then you will most likely forget it, and if you reuse an old one then it’s a security risk. Luckily, this website offers logging in with social networks like Facebook and Google.

Facebook

Facebook's minimum

ID:
Gender:
First name:
Last name:
Age range:
Locale:
Timezone:
Verified?
Last updated:

Email:
Number of friends:

By default, Facebook gives the permission public_profile. Optionally, an app’s developer can ask for email and user_friends, friends who also use the app. A developer can expand to have more permissions available by making a request to Facebook. This request needs to include why the extra information they would get is vital to the app’s functions and user experience. All Facebook login permissions are listed here, from date of birth to relationship status and spouse.

Note that the basic permissions don’t give the exact age in years but instead where the age falls with respect to 18 and 21 (age_range). For example, the API might just give that you have a minimum age of 13 and a maximum of 17. Even with the user_birthday permission granted, the visibility depends on your birthday privacy setting.

Google

Google's bare minimum

ID:
First name:
Last name:
Email:

By default, Google makes the scopes openid, userinfo.profile and userinfo.email available for a developer to request. A developer can quickly and easily extend to the Google Plus API, which adds the scopes plus.login and plus.me. This basically includes everything (public) on your Google Plus profile page, from your occupation to the places you have lived. The full list is available here.

Data flow

The code to gather and display your info on this page only runs on your machine and never by a Eusebius.Tech server; your info goes directly from Facebook or Google servers to your browser.

Flow diagram of social login shows Eusebius.Tech servers giving JavaScript code to the user followed by the user's side requesting user details from a social network server

My experience with social logins has come from doing web development at a startup during my last summer holiday. When a user logs in for the first time, say using Facebook, a new user is created on the database using the basic details fetched from Facebook. This user doesn’t have a password and instead, logging in with Facebook is the only way of authentication. Like in most other development work, frameworks should always be embraced, for example python-social-auth.

I would have added a demo for Twitter login but Twitter’s API requires OAuth authentication with every API request. This requires the use of the API secret key, which restricts the action from being purely client-side. Facebook and Google on the other hand, provide web-login JavaScript SDKs that can be performed only on the client. HTML with client-side JavaScript code for the two logins above are available on GitHub.

Thanks for reading and, as always, please let me know if you spot something broken.