Unable to connect my laravel app with facebook authentification

Question

I followed the instructions given by Sriram Ranganathan in this thread How to integrate Facebook PHP SDK with Laravel 5.4? .

this is the code of my login page:

<fb:login-button  id="btn-login" class="btn w-md btn-bordered btn-primary 
waves-effect waves-light" type="button">Via <i class="fa fa-facebook- 
official"></i>
</fb:login-button>

<script>
    $(document).ready(function() 
    {
    $.ajaxSetup({ cache: true }); // since I am using jquery as well in my app
    $.getScript('//connect.facebook.net/en_US/sdk.js', function () {
        // initialize facebook sdk
        FB.init({
            appId: '866665793537033', // replace this with your id
            status: true,
            cookie: true,
            version: 'v2.8'
        });

        // attach login click event handler
        $("#btn-login").click(function(){
            FB.login(processLoginClick, {scope:'public_profile,email,user_friends,manage_pages', return_scopes: true});  
        });
    });
    });

    // function to send uid and access_token back to server
    // actual permissions granted by user are also included just as an addition
    function processLoginClick (response) 
    {    
        var uid = response.authResponse.userID;
        var access_token = response.authResponse.accessToken;
        var permissions = response.authResponse.grantedScopes;
        var data = { uid:uid, 
                     access_token:access_token, 
                     _token:'{{ csrf_token() }}', // this is important for Laravel to receive the data
                     permissions:permissions 
                   };        
        postData("{{ url('/login') }}", data, "post");
    }

    // function to post any data to server
    function postData(url, data, method) 
    {
        method = method || "post";
        var form = document.createElement("form");
        form.setAttribute("method", method);
        form.setAttribute("action", url);
        for(var key in data) {
            if(data.hasOwnProperty(key)) 
            {
                var hiddenField = document.createElement("input");
                hiddenField.setAttribute("type", "hidden");
                hiddenField.setAttribute("name", key);
                hiddenField.setAttribute("value", data[key]);
                form.appendChild(hiddenField);
             }
        }
        document.body.appendChild(form);
        form.submit();
    }
</script>

these are the settings of my app on facebook

When i try to connect i get this error :

Unable to load this URL: The domain of this URL is not registered in those of the application. To import this URL, add all the domains and subdomains of your application to the Domains field of the application settings.

my french isn't good but I believe the error message is asking for `https` link in redirect auth link. — yasaryousuf, Apr 26 '18 at 09:37
the message says :"to enhance security u should activate the HTTPS" — , Apr 26 '18 at 09:47
so i should make my project accessible with https and then activate it in facebook settings — , Apr 26 '18 at 09:57
This is only part of the relevant settings, you need to specify your valid OAuth redirect URIs as well, https://developers.facebook.com/docs/facebook-login/security#strict_mode — CBroe, Apr 26 '18 at 10:02
if u click on the image link u will see that i already did that — , Apr 26 '18 at 10:04
If you could set your FB language to English before making such screenshots, that could help avoid confusion. But I’d still bet you almost anything, that the base domain address is not the actual redirect URI value used in your login dialog call. — CBroe, Apr 26 '18 at 12:43
Check the browser address bar when the login dialog is shown ... — CBroe, Apr 27 '18 at 12:57
this is the redirect_uri part http%3A%2F%2Fstaticxx.facebook.com%2Fconnect%2Fxd_arbiter%2Fr%2FJW5GlLnAsFw.js%3Fversion%3D42%23cb%3Df18a2e468160988%26domain%3D127.0.0.1%26origin%3Dhttp%253A%252F%252F127.0.0.1%252Ff2aa357ede2bc4%26relation%3Dopener%26frame%3Df8f0274838079 — , Apr 27 '18 at 14:44

score 0 · Answer 1 · answered Apr 26 '18 at 11:03

0

I managed to connect fb and gmail auth in my Laravel app. The problem was when I write 127.0.0.1:8000/login/facebook not works, but with localhost:8000/login/facebook works. And in developers fb page there is website url input box under settings basic tab write there http://localhost:8000/

answered Apr 26 '18 at 11:03

Ozal Zarbaliyev

566
6
22

same problem i only use localhost in my case localhost:80 – Apr 26 '18 at 11:11
here you will see Client OAuth Login, Web OAuth Login make them yes – Ozal Zarbaliyev Apr 26 '18 at 11:17

score -1 · Answer 2 · answered Apr 26 '18 at 09:21

-1

Maybe its not possible to connect with localhost?

U could try doing it on a host.

answered Apr 26 '18 at 09:21

MrZzippo p

24
1
1
7

the problem is i must get it running on local for now and then on a host – Apr 26 '18 at 09:22
my french isnt that good but the screenshot says something about HTTPS, i think thats the only way – MrZzippo p Apr 26 '18 at 09:26
the message says :"to enhance security u should activate the HTTPS" – Apr 26 '18 at 09:29
I see, Could u explain where exactly u get the errer 'Unable to load this URL'. is this in laravel or on facebook – MrZzippo p Apr 26 '18 at 09:31
in the login page of my laravel app i have a normal login button with laravel authentification and the second button to try to connect to my apllication with the facebook data . when i click it to connect i get that error – Apr 26 '18 at 09:33
have you declared all the information in de .env ? and did u add that information in ur config? maybe show some code about it – MrZzippo p Apr 26 '18 at 09:35
yes i added my app informations in the .env file and i created a facebook.php config file – Apr 26 '18 at 09:36

Unable to connect my laravel app with facebook authentification

2 Answers2