CakeDC Blog

TIPS, INSIGHTS AND THE LATEST FROM THE EXPERTS BEHIND CAKEPHP

CakePHP Facebook login using CakeDC Users Plugin

IMPORTANT: This tutorial is old, please check the updated Facebook version for CakeDC Users Plugin 3.1.5

 

If you are using an old version, we recommend to migrate to latest version of the plugin. We'll keep this article online for some more time....

 

The CakeDC Users Plugin provides an easy way to integrate Facebook social login into your application.

This is a short how-to tutorial to enable Facebook login. We'll assume you have a brand new CakePHP 3 application already setup.

Setup

Use composer to install the CakeDC Users Plugin

        composer require cakedc/users:~3.1.0
        composer require opauth/opauth:1.0.x-dev
        composer require opauth/facebook:1.0.x-dev

Now update your composer.json file adding the following repository override, to use our own fork of the Facebook Strategy, as the main repo is not maintained

        "repositories":
        [
            {
                "type": "vcs",
                "url": "https://github.com/CakeDC/facebook.git"
            }
        ],

Note we are using the 3.1 version, matching the CakePHP 3.1 compatible version of the Plugin, check the compatibility matrix to find the right version for your current CakePHP version.

Load it from your bootstrap.php file

        Plugin::load('CakeDC/Users', ['routes' => true, 'bootstrap' => true]);

Run migrations to add 2 new tables: 'users' and 'social_accounts'

        bin/cake migrations migrate -p CakeDC/Users

Configuration

Load the Component in your src/Controller/AppController.php

    public function initialize()
    {
        parent::initialize();
        //
        // ...
        //
        $this->loadComponent('CakeDC/Users.UsersAuth');
    }

login page output

Create a new Facebook application

  • Go to Facebook developers and log in
  • Create a new Facebook application new Facebook app
  • Click "website" and select some awesome name for your brand new app (yeah, some random name would work too)
  • Pick a Category, complete the quick start form, etc.
  • Once you are done, go to your newly created app and click "settings"
  • In settings, you should add your domain to "App domains" and ensure there is at least one login platform = "Website" defined
  • Copy your App ID and secret

Setup the Plugin to use your Facebook app for login

Now you have a working Facebook app configured, we are going to link the CakeDC Users Plugin to use the app for login.

Update your bootstrap.php file to customize the CakeDC Users Plugin

        Configure::write('Users.config', ['users']);
        Plugin::load('CakeDC/Users', ['routes' => true, 'bootstrap' => true]);

Create a new "config/users.php" file with contents

    return [
        'Opauth.Strategy.Facebook.app_id' => 'YOUR APP ID',
        'Opauth.Strategy.Facebook.app_secret' => 'YOUR APP SECRET',
        //etc
    ];

This file will override any configuration key present in the Plugin, you can check the configuration options here Configuration.

You are done!

Now the "login with Facebook" link (in "/login" page) will open the Facebook login popup and connect back to your application. If the email is provided by the user, he'll be automatically registered using the default role = 'user'. If no email is provided, the user will be requested to enter an email to complete the registration process in your application. Once his email is validated (link sent via email), he'll be able to login using Facebook.

Read more about CakeDC Users Plugin

Giving back to the community

This Plugin's development has been sponsored by the Cake Development Corporation. Contact us if you are interested in:

  • Professional, commercial CakePHP development and consultancy
  • Professional CakePHP training
  • CakePHP code reviews

We hope you've enjoyed this short tutorial covering the Facebook login, stay tunned for new CakePHP + Users Plugin tutorials coming soon...

 

Latest articles

Simplicity is important - here’s why

When it comes to web design, simplicity is not valued enough. Simplicity is important - but why? Simplicity reduces navigation confusion, makes the website look more sophisticated and can help in increasing site conversions (sign ups, contacts). All too often, web designers tend to miss the point of simplicity and over do the amount of information given on a single page - the need to get everything across at once can seriously hinder how much a website visitor is able take in. Over complicated pages can lead to higher than average bounce rates or lower on-page conversions. We thought we’d share with you some top tips to simplify your website.

  • Keep things along the 80-20 rule
    • Use the Pareto principle which is that 80% of the effects come from 20% of the causes. This means taking away as much as you can from your design that will not lead to any type of conversion. Take things back to the bare essentials and make those work properly
  • Embrace few colors in your theme
    • Does a monochrome color scheme work for you? If not, try out as few colors as possible. Work towards a design that requires less effort for your website visitor to process. Fewer colors will also give your site a sleek, classic look
  • Keep copy short and sweet
    • Embrace compelling copy but keep things shorter and to the point. Make your point quickly and keep things easy-to-read by sticking to a few key points. Use shorter sentences, and keep paragraphs to a maximum of 3-4 sentences for easy reading.
  • Fix your navigation
    • Often many sites have over complicated and lengthy navigation options. Remember to include navigation to your list of things to simplify today. Keep important and key pages in your navigation bar. Remove excess clutter and keep all navigation menus visible. Other key things to keep in mind is the use of universal icons as well as ensuring a sitemap in your footer - these are all standard items that visitors look for.

How Much Does it Cost to Design a Site?

If you are in the market for a website or application, it can sometimes be daunting. Being unsure of where to start, which development firm to use or how much the whole process is going to cost you can be truly overwhelming. And then there are those horror stories of others, who selected a developer based solely on cost (the cheapest quote perhaps) and ended up majorly down the hole with their budgets, while owning a unfinished website. Whether you are in the market for a website application with a specific outline and goal, or have a rough idea of what you need your application to do, how do you go about finding the best selection for you? And then how do you know that whoever you select is going to deliver what you want and in the time frame that you need it? And then, not knowing how to code yourself, you can land up frustrated at not understanding the process - especially if your development team gives you the runaround. At CakeDC, we are committed to a transparent workflow - we've created our own git workflow (MIT license) and we've used it successfully with our clients for 3+ years and dozens of projects. We use it to accelerate growth and innovation providing the highest quality application development. What sets CakeDC apart from others is that our experts listen closely to your needs. Second, we formulate a roadmap of milestones based on your specifications. Third, we offer guidance while delivering the highest quality results in a fraction of other developer’s time, by doing things The Right Way™ So how much is it going to cost you? Well this is of course dependent on what you project scope includes, however, we will work with you in determining the best package to suit your requirements. You can check out all of our rates and packages here. Ready to get your project started? Reach out to our experts today to see how easy it can be to get your application up and running.

What your website users are trying to tell you

Every visitor to your website has a goal in mind - this may not be a conscious goal, but they are visiting your site for a reason. So listening to your users feedback is key to meeting their expectations! As a business owner, be sure to keep these in consideration and as a developer, be sure to pass these recommendations through to your clients. What are some things that users are trying to tell you and how do you find out? What and why is it Often people forget about the basics and fail to include what their product, service or business is. By excluding this vital information there will be users who will not know what the purpose of the page that they have stumbled upon is, but what to do next - and therefor bounce quickly off of your site. Where is your pricing information? If you are trying to sell something - a product or a service - be sure to include the price information as this is used by your visitor to determine their next action. Even if you are providing resources in return for their details, it is important to be clear. Where are those testimonials or reviews? Have others tried it People like to know that whatever they are investing money into is worth it - reviews or customer testimonials help to show your visitors what you can do. Be sure to add this information in a way that is easy for you visitors to find. Where can I sign up or contact you Another vital piece of information that many often forget is to let your visitors know how to signup and contact you. Perhaps you have chosen to hide your contact information due to spam bots or other issues faced, however, if you are in the business of recruiting clients, then be sure to have some form of contact information easily available to your visitors.
Not sure if you are missing anything? CakeDC, the experts behind CakePHP, offer a range of services including consulting, guiding you through the best practices with your CakePHP application.

We Bake with CakePHP