How to get client_id and client_secret for Laravel Socialite plugin configurations.
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.
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.
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.
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.
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.
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.
Otherwise your users will see the error that app is still in development mode and they will not have permission to access it.
Open Google Console and on the top navigation, click on the dropdown next to the logo and then Create project.
And then type the app's 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.
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.
Select Credentials tab and click Create credentials dropdown and choose OAuth client ID.
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.
Click Create and you will get a popup with info that we need.
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
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.
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.
Update settings and click Permissions tab, tick Request email addresses from users checkbox and again update settings.
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.
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.
Open Dev Console and create new app.
Fill this huge form. For this you need to prepare 80x80 application image.
After creating the application, copy Client ID and Client Secret in your config file.
Leave default permissions. Important thing is to setup redirect url. Fill redirect url, click Add and then Update.
Update config/services.php file.
'linkedin' => [
'client_id' => env('LINKEDIN_CLIENT_ID'),
'client_secret' => env('LINKEDIN_SECRET'),
'redirect' => env('APP_URL') . '/callback/linkedin',
],
And .env.
LINKEDIN_CLIENT_ID=86qlxm1ht1yfpj
LINKEDIN_SECRET=mTEzz4vLlhC5cWwx