Social Network Authentication: Setup

This article is written for and published on SitePoint.

Almost every website which contains a log in option, also contains ways to log in through different social networks. In this series of articles, we will take a look at how we can make sure that our visitor can log in through Google+ and eventually other networks like Twitter and Facebook. In the final article, we will have a close look at how we can make sure users don’t have different accounts due to the fact that they used different social networks.

We will create a framework agnostic package which can easily handle users from different social networks. In this part, we will have a look at our basic setup.

You can view the code for all the articles on this Github page.

Creating your package

We start by creating our package. For that, we just start a fresh project without any content. We first need to define what our vendor name is. In general, people use their (user)name or company name. I will use SitePoint as my vendor name.

Next to that, we also need a package name. This name normally describes your package. Since we are using social networks to log in with, we will use SocialLogin as our package name.

It’s time to create our directory structure. In general, it’s recommended to store your classes in the src directory. So let’s start by creating the directory src/SitePoint/SocialLogin.

We are going to create a composer.json file, to easily maintain our dependencies.

{
    "name": "sitepoint/social-login",
    "type": "library",
    "description": "Social login functionality",
    "homepage": "https://www.peternijssen.nl",
    "license": "MIT",
    "authors": [
        {
            "name":     "Peter Nijssen",
            "homepage": "https://www.peternijssen.nl"
        }
    ],
    "require": {
        "php":              ">=5.3.0",
        "lusitanian/oauth": "0.3.*"
    },
    "autoload": {
        "psr-0": { "SitePoint\SocialLogin": "src" }
    },
    "target-dir": "SitePoint/SocialLogin"
}

To make sure we didn’t make any mistakes, run composer validate against the composer.json file.

Creating interfaces

We are going to create some interfaces before starting to work with the social networks. For that, we create the directory srcSitePointSocialLoginInterfaces. Within this directory, we are going to create two interfaces.

We start off with the social network interface. This interface will be implemented by every class that handles the log in with a social network.

<?php

namespace SitePointSocialLoginInterfaces;

interface SocialLoginInterface {

    /**
     * Initializes our service
     */
    public function init();

    /**
     * Returns the login url for the social network
     *
     * @return string
     */
    public function getLoginUrl();

    /**
     * Handles the login callback from the social network
     *
     * @param string $accessToken
     *
     * @return SocialUserInterface
     */
    public function loginCallback($accessToken);
}

The init method will initialize our social network login configuration. The getLoginUrl will return the URL to redirect the user to, when he logs in with the social network. The LoginCallback method needs to be called whenever you are receiving an answer from a social network. This method will return a user.

The next interface is the social user interface. From every social network, we will receive a lot of data back regarding the user. By creating a class which normalizes this data, we can easily read it and process it.

<?php

namespace SitePointSocialLoginInterfaces;

interface SocialUserInterface {

    /**
     * Get the provider name
     *
     * @return string
     */
    public function getProvider();

    /**
     * Get the UID of the user
     *
     * @return string
     */
    public function getUid();

    /**
     * Get the first name of the user
     *
     * @return string
     */
    public function getFirstname();

    /**
     * Get the last name of the user
     *
     * @return string
     */
    public function getLastname();

    /**
     * Get the username
     *
     * @return string
     */
    public function getUsername();

    /**
     * Get the emailaddress
     *
     * @return string
     */
    public function getEmailAddress();

    /**
     * Get the city
     *
     * @return string
     */
    public function getCity();

    /**
     * Get the birthdate
     *
     * @return string
     */
    public function getBirthDate();

    /**
     * Get the gender
     *
     * @return string
     */
    public function getGender();
}

Required packages

All communication with the social networks will go through the so called OAuth protocol. Instead of developing that part ourselves, we will be using an already existing library.

run composer require lusitanian/oauth:0.3.* on the command line to install this library.

Conclusion

Our package setup is completed right now. In the following article, I will show you how you can log in through Google+. In the final article, we will dive into merging accounts together as one.