Instructions for Creating Facebook, Google and Twitter Login Apps

How to get client_id and client_secret for Laravel Socialite plugin configurations.

Facebook

This is a quick guide how to create facebook app and find parameters required to implement facebook login on back-end applications.

If you are not a facebook developer

Go to facebook for developers and click Register Now button. You will see a confirmation popup where you need to accept some facebook policies. Accept and click register.

Register as as Developer

Create a new app

Open facebook for developers and click Create a new App or Add a New App if you already created apps before. Type Display Name - this can be whatever you want, but you should enter some reasonable name to describe the website you are integrating login with. Also, you must select category of your application/website.

New Facebook App

Creating New Facebook App

After that you will be redirected to the new facebook panel for app management. There you will have a list of "setups" you can choose from. Choose the first one Facebook Login by clicking Get Started.

Facebook Login Setup

You will be redirected to the Facebook Login Settings page. Only thing you need to add here is a valid redirect URLs. You can also use development URLs such as http://localhost:8000.

Redirect URLs

It is important to enter URLs correctly or you will get an error. Also, there is no need to specify complete redirect URL path, just a domain part.

URL Error example

Click Save Changes.

Now you can click on the Dashboard in the left navigation menu. On this dashboard you have all data required to implement social login with Laravel.

Click Show on app secret to get a client_secret parameter. App ID is client_id. Copy that and put it into your application config file app/services.php.

'facebook' => [
    'client_id' => 'copy from app id',
    'client_secret' => 'copy from app secret',
    // make sure redirect URL is added to the Valid OAuth Redirect URIs
    'redirect' => 'http://localhost:8000/callback/facebook'
],

Or even better to put them in the .env file like this:

FACEBOOK_CLIENT_ID=202828393650541
FACEBOOK_SECRET=34fefcb62264235bda6bba0395498867

And app/services.php:

'facebook' => [
    'client_id' => env('FACEBOOK_CLIENT_ID'),
    'client_secret' => env('FACEBOOK_SECRET'),
    'redirect' => env('APP_URL').'/callback/facebook',
],

Make the app live

Whey you are ready to share the app with a world, from application panel click on the App Review where you can make your app public.

Making App Public

Otherwise your users will see the error that app is still in development mode and they will not have permission to access it.

App Without Permissions

Google

Open Google Console and on the top navigation, click on the dropdown next to the logo and then Create project.

Create New Project

And then type the app's name.

Type App Name

In a few of seconds, the app will be ready. Now we need to enable Google+ API. Click on the Library tab on the left side then under the Social APIs group select Google+ API. On the new page click Enable.

Finding Google+ API

Enabling Google+ API

Now we need to create a credentials. On the left menu select Credentials, and first select OAuth consent screen. Fill in Product name shown to users field and save.

Credentials Consent

Select Credentials tab and click Create credentials dropdown and choose OAuth client ID.

Creating Google+ Credentials

Select Web application, type Name and list the authorized redirect URLs. You can have multiple redirect URLs, one for development, another for production, but make sure they are typed in correctly. Compared to facebook URLs, google's URLs must contain full path to the callback function, not just URL to the root of the website.

Configuring Google+ Credentials

Click Create and you will get a popup with info that we need.

Google+ Social Login Credentials

Copy and paste client id and client secret to your app/services.php configuration or .env file.

'google' => [
    'client_id' => env('GOOGLE_CLIENT_ID'),
    'client_secret' => env('GOOGLE_SECRET'),
    'redirect' => env('APP_URL').'/callback/google',
],

Or in .env

GOOGLE_CLIENT_ID=186808598499-t6krcde3naodsbtct01o0cjgol5p3om7.apps.googleusercontent.com
GOOGLE_SECRET=wvfaZzwIzMaC_OHxyWg5nSV9

Twitter

Before creating application make sure that your twitter account has attached phone number. You can do it in many ways. I chose to go to Settings and click on Mobile on sidebar and request verification code that will be sent to mobile phone.

Open Application Management page and Create New App.

Create new twitter app

Fill in application name and description. Put your real website address or for development you can use any valid url like http://placeholder.com. Callback URL field can also be any valid TLD, put your site domain or again http://placeholder.com. Finally click Create your Twitter application.

To be able to get email from twitter when registring users, we need to elevate permissions. To do that first we must set Privacy Policy and Terms of Service urls on our settings page.

Settings Tab

Privacy Policy and TOS urls

Update settings and click Permissions tab, tick Request email addresses from users checkbox and again update settings.

Request Email address from users

Click on Keys and Access Tokens tab. From this page copy Consumer Key (API Key) to client_id and Consumer Secret (API Secret) to client_secret.

Keys and Access Tokens

Update config/services.php file.

'twitter' => [
    'client_id' => env('TWITTER_CLIENT_ID'),
    'client_secret' => env('TWITTER_SECRET'),
    'redirect' => env('APP_URL') . '/callback/twitter',
]

And .env.

TWITTER_CLIENT_ID=OJVhxM7VLotwDf7qovImhu8dU
TWITTER_SECRET=0BD36K586lalv3EY1bFLTpuUXsEIBP1JnV13nqtLVBaSTPRWeN

When user is prompted to login, you will see page like bellow. Because of that make sure that Organization, Website URL and other optional fields are correctly filled.

Login Twitter Prompt

Author

I plan to write more articles about common laravel components. If you are interested let’s stay in touch.
comments powered by Disqus