asked on

Asp.net facebook Javascript login button

Hi,

I have the code attache, please could someone tell me whats wrong with it as the button for facebook login will not appear

Please help

Thanks

R8VI

<body>
    <form id="form1" runat="server">
    <div id="fb-root">
    </div>
    <script type="text/javascript">
        window.fbAsyncInit = function () {
            FB.init({
                appID: // I have put the app id here ,
                status: true, //Check loging status 
                cookie: true, //enable cookies to allow the server to access the session
                xfbml: true //parse  XFBML
            });

            FB.Event.subscribe('auth.authResponseChange', function (response) {
                if (response.status == 'connected') {
                    // the user is logged in and authenticated 
                    // app, and response.authResponse supplies
                    // the user's ID, a valid access token, a signed
                    // request, and the time the access token 
                    // and signed request each expire 
                    var uid = response.authResponse.userID;
                    var accessToken = response.authResponse.accessToken;

                    // TODO: Handle the access token 
                    // Do a post to the server to finish the logon
                    // This is a form post since we dont want to use AJAX 

                    var form = document.createElement("form");
                    form.setAttribute("method", 'post');
                    form.setAttribute("action", '/FacebookLogin.ashx');

                    var field = document.createElement("input");
                    field.setAttribute("type", "hidden");
                    field.setAttribute("name", 'accessToken');
                    field.setAttribute("value", accessToken);
                    form.appendChild(field);

                    document.body.appendChild(form);
                    form.submit();

                } else if (response.status === 'not_authorized') {
                    // the user is logged into facebook,
                    // but has not authenticated your app
                } else {
                    // the user isnt logged in to Facebook 
                }
            });
        };

        // Load the SDK Asynchrinously

        (function (d) {
            var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0];
            if (d.getElementById(id)) { return; }
            js = d.createElement('script'); js.id = id; js.async = true;
            js.src = "//connect.facebook.net/en_US/all.js";
            ref.parentNode.insertBefore(js, ref);
        } (document));
    </script>
        <div class="fb-login-button" data-show-faces="true" data-width="200" data-max-rows="1" scope="user_checkins, email, publish_actions">
        
    </div>
    </form>
</body>

Open in new window

leakim971

line 56 :
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=your_appID";

Manoj Patil

Here you will find a very simple way to login with facebook.

http://www.aspdotnet-suresh.com/2012/04/aspnet-integrate-facebook-login.html

http://thinkdiff.net/facebook/graph-api-javascript-base-facebook-connect-tutorial/

R8VI

ASKER

Hi leakim971,

I added the bits you referred to above, but that still doesnt work the button does not appear

I also changed the canvas URL in facebook to read http://localhost:1778/ but still doesnt work

Anything else i can try, iam also looking at the other tutorial mentioned above by techChallenger1

leakim971

put your application on a web server with a valid ssl certificate and let me know if it don't work

R8VI

ASKER

Hi,

At the moment I am testing on local, does your last statement mean this will only work if I have a web server with a valid SSL certificate

Thanks

R8VI

leakim971

I just placed a valid app id, I tested on my localhost (http://localhost:8888/) and the url of th canvas is the one of the true website, with ssl

your page code work fine with : http://localhost:8888/yourpage.php

R8VI

ASKER

Ok thanks, ill try this

Just as FYI mine is a .net app so the URL will look like

http://localhost:1798/test.aspx

Not that this should matter

leakim971

no, of course if your page is simple as your show it or/else just try with a simple one

R8VI

ASKER

Hi leakim971

I tried everything you said but still no joy, what am i doing wrong

I set the canvas URL: http://localhost:1178/
I set the secure canvas URL: https://www.facebook.com/ - i used this just for test purposes

with the full code below

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="testpage.aspx.cs" Inherits="CompletefacebookSolution.testpage" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div id="fb-root">
    </div>
    <script type="text/javascript">
        window.fbAsyncInit = function () {
            FB.init({
                appID: '3296463',
                status: true, //Check loging status 
                cookie: true, //enable cookies to allow the server to access the session
                xfbml: true //parse  XFBML
            });

            FB.Event.subscribe('auth.authResponseChange', function (response) {
                if (response.status == 'connected') {
                    // the user is logged in and authenticated 
                    // app, and response.authResponse supplies
                    // the user's ID, a valid access token, a signed
                    // request, and the time the access token 
                    // and signed request each expire 
                    var uid = response.authResponse.userID;
                    var accessToken = response.authResponse.accessToken;

                    // TODO: Handle the access token 
                    // Do a post to the server to finish the logon
                    // This is a form post since we dont want to use AJAX 

                    var form = document.createElement("form");
                    form.setAttribute("method", 'post');
                    form.setAttribute("action", '/FacebookLogin.ashx');

                    var field = document.createElement("input");
                    field.setAttribute("type", "hidden");
                    field.setAttribute("name", 'accessToken');
                    field.setAttribute("value", accessToken);
                    form.appendChild(field);

                    document.body.appendChild(form);
                    form.submit();

                } else if (response.status === 'not_authorized') {
                    // the user is logged into facebook,
                    // but has not authenticated your app
                } else {
                    // the user isnt logged in to Facebook 
                }
            });
        };

        // Load the SDK Asynchrinously

        (function (d) {
            var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0];
            if (d.getElementById(id)) { return; }
            js = d.createElement('script'); js.id = id; js.async = true;
            js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appid=3296463";
            ref.parentNode.insertBefore(js, ref);
        } (document));
    </script>
    <div class="fb-login-button" data-show-face="true" data-width="200" data-max-rows="1"
        scope="user_checkins, email, publish_actions">
    </div>
    </form>
</body>
</html>

Open in new window

leakim971

The secure is not good.
https://www.facebook.com/ is not your site

R8VI

ASKER

Ok thanks for this

Then am i right in thinking the only way is to get a hosting with SSL certificate on it ?

R8VI

ASKER

Hi leakim971

I configured my local IIS and put the website under

http://localhost/CnR/testpage.aspx

Still not luck

What should i try please help

Thanks

R8VI

R8VI

ASKER

Hi leakim971

I configured my local IIS and put the website under

http://localhost/CnR/testpage.aspx

Still not luck

What should i try please help

Thanks

R8VI

leakim971

So to resume, your page work with an other appid
The only difference is your appid

R8VI

ASKER

It seems like that considering you tried with your appid, but then the other 2 variables are the canvas url and the secure canvas url

Thats the big issue i think how do it get a secure canvas URL for my local host

leakim971

First try something that work
Second try something new

If something new don't work try to find a solution but sometimes there's no solution.

R8VI

ASKER

well ok thanks for the help so far, problem with that is the first statment the first thing doesnt work full stop

leakim971

No the first is to try on a true website, where Facebook itself can check your domain is valid

R8VI

ASKER

Ok I get that point and thanks for putting up with me on all this

To test your last point about try on a true website then I will get a web server and set it up with a proper domain and check that should test the theory correctly is that right ?

leakim971

Yes

R8VI

ASKER

HI leakim971,

I have bought a server and a proper URL www.tsr.com, changed the secure Canvas URL to this but kept the canvas URL to http://localhost1798/.

Should I be able to test this on my local then or do I need to deploy everything on the server and then check.

Reason I ask is because I didnt deploy everything to server and tried from local and it didnt work

Thanks

R8VI

leakim971

You've a simple page
why don't/can't you test it on this server using https://www.tsr.com for both canvas?

and once you get it work, make conclusion

R8VI

ASKER

Sorry I was just thinking ahead, as I would test it on the server, but then i need to access the access token and things like that to do some further dev after, I may have to break this down totally,

Ok thanks for the help will try this later today

Thanks

R8VI

R8VI

ASKER

Hi leakim971,

Ok I have deployed my application to a server with a URL

changed the

canvas url: http://thesocialreviews.com/CompletefacebookSolution/CompletefacebookSolution/

Secure Canvas URL to: https://thesocialreviews.com/CompletefacebookSolution/CompletefacebookSolution/

Still no joy,

You can have a look at the page at

http://thesocialreviews.com/CompletefacebookSolution/CompletefacebookSolution/testpage.aspx

Appreciate the help

Thanks

R8VI

ASKER CERTIFIED SOLUTION

leakim971

membership

Create a free account to see this answer

Signing up is free and takes 30 seconds. No credit card required.

See answer

R8VI

ASKER

Thank you very much this works

Also works on local host as well now

Thanks

R8VI