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:
123@maisondemonde
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