Social Network Authentication: Setup

This entry is part 1 of 4 in the series Using Social Networks as a Login System

Using Social Networks as a Login System

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 src\SitePoint\SocialLogin\Interfaces. 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 SitePoint\SocialLogin\Interfaces;

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.

namespace SitePoint\SocialLogin\Interfaces;

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.

Using Social Networks as a Login System

Social Network Authentication: Google+ >>

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • http://about.me/lauhakari Lauhakari [mikko]

    this series is a bit backwords ;)

    • https://www.peternijssen.nl/ Peter Nijssen

      Hehe. Probably fixes itself with the next articles :)

      • BennyBrown

        Google is paying 80$>>CLICK NEXT TAB FOR MORE INFO AND HELP

  • hari

    HybridAuth does the job

    • https://www.peternijssen.nl/ Peter Nijssen

      Of course. So do dozens of other libraries. Point is that sometimes, you might have reasons to do it all yourself or you just want to learn how to. :) This series has much more into it then just a “simple social login” :)

  • Taylor Ren

    Looking forward to more to come.

    • KerryJTruong

      Google is paying 80$ per hour! Work for few hoursand have more time with friends & family! On tuesday I got a great new Land Rover Range Rover>>CLICK NEXT TAB FOR MORE INFO AND HELP</b

  • https://www.peternijssen.nl/ Peter Nijssen

    Cool :) As noted in my comment before, I had the intention to put more into it then just a “simple social login” :)