Sign Up with Facebook in asp.net website

    <script type="text/javascript" src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
    <script type="text/javascript" src="https://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>

<script type="text/javascript">
        // Load the SDK Asynchronously
        (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";
            ref.parentNode.insertBefore(js, ref);
        } (document));

        // Init the SDK upon load
        window.fbAsyncInit = function () {
            //            FB.init({
            //                appId: 'Enter AppID Hear..', // App ID
            //                channelUrl: '//' + window.location.hostname + '/channel', // Path to your Channel File
            //                status: true, // check login status
            //                cookie: true, // enable cookies to allow the server to access the session
            //                xfbml: true  // parse XFBML
            //            });
            function OnLogin(response) {
                if (response.authResponse) {
                    FB.api('/me?fields=id,name,gender,email,birthday', LoadValues);
                }
            }
            // listen for and handle auth.statusChange events
            FB.Event.subscribe('auth.statusChange', function (response) {
                if (response.authResponse) {
                    // user has auth'd your app and is logged into Facebook
                    var uid = "http://graph.facebook.com/" + response.authResponse.userID + "/picture?type=large";
                    FB.api('/me', function (me) {
                        if (me.name) {
                            console.log('Successful login for: ' + response.name);
                            document.getElementById('auth-displayname').innerHTML = me.name;
                            document.getElementById('first_name').innerHTML = me.first_name;
                            document.getElementById('last_name').innerHTML = me.last_name;
                            document.getElementById('gender').innerHTML = me.gender;
                            document.getElementById('birthday').innerHTML = me.birthday;
                            document.getElementById('email').innerHTML = me.email;
                            document.getElementById('profileImg').src = uid;

                            var first_name = document.getElementById('<%=hdnFbFirstname.ClientID %>');
                            var last_name = document.getElementById('<%=hdnFbLastName.ClientID %>');
                            var gender = document.getElementById('<%=hdnFbGender.ClientID %>');
                            var birthday = document.getElementById('<%=hdnFbBirthdate.ClientID %>');
                            var email = document.getElementById('<%=hdnFbEmail.ClientID %>');

                            var txtEmail = document.getElementById('<%=txtFbEmail.ClientID %>');
                            txtEmail.value = me.email;
                            first_name.value = me.first_name;
                            last_name.value = me.last_name;
                            gender.value = me.gender;
                            birthday.value = me.birthday;
                            email.value = me.email
                        }
                    })

                    document.getElementById("Fblogindv").style.display = 'block';
                    document.getElementById("dvNormal").style.display = 'none';

                    document.getElementById('auth-loggedout').style.display = 'none';
                    document.getElementById('auth-loggedin').style.display = 'block';
                } else {
                    // user has not auth'd your app, or is not logged into Facebook
                    document.getElementById('auth-loggedout').style.display = 'block';
                    document.getElementById('auth-loggedin').style.display = 'none';

                    document.getElementById("dvNormal").style.display = 'block';
                    document.getElementById("Fblogindv").style.display = 'none';

                }
            });
            $("#auth-logoutlink").click(function () { FB.logout(function () { window.location.reload(); }); });
        }
    </script>

    <div id="fb-root">
               </div>
                    <!-- This initializes the FB controls-->
                <div class="fb-login-button" autologoutlink="true" scope="user_birthday,email">
                        Signup with Facebook
             </div>


                <b>Hi, <span id="auth-displayname"></span>&nbsp;&nbsp;(<a href="#" id="auth-logoutlink">Logout</a>)</b>
                <br />
                <div id="auth-loggedin" style="display: block">
                    <div class="datailpasge-in-left">
                        <div class="datailpasge-left">
                            <img id="profileImg" height="162px" max-width="170px" alt="" />
                            <br />
                        </div>
                        <div class="datailpasge-right" style="margin: 36px 0px 0px;">
                            Name: <b><span id="first_name"></span></b>&nbsp;<b><span id="last_name"></span></b>
                            <br />
                            <br />
                            Gender: <b><span id="gender"></span></b>
                            <br />
                            <br />
                            Email: <b><span id="email"></span></b>
                            <br />
                            <br />
                            Birth Date: <b><span id="birthday"></span></b>
                        </div>
                    </div>
                </div>
            </div>

Comments

  1. Unknown25 September 2015 at 05:27

    document.getElementById('profileImg').src = uid;
    Line 43:
    Line 44: var first_name = document.getElementById('<%=hdnFbFirstname.ClientID %>');
    Line 45: var last_name = document.getElementById('<%=hdnFbLastName.ClientID %>');
    Line 46: var gender = document.getElementById('<%=hdnFbGender.ClientID %>');

    ReplyDelete

Post a Comment

Popular posts from this blog

Stack vs Heap So far we have seen how to declare basic type variables such as int , double , etc, and complex types such as arrays and structs. The way we have been declaring them so far, with a syntax that is like other languages such as MATLAB, Python, etc, puts these variables on the stack in C. The Stack What is the stack? It's a special region of your computer's memory that stores temporary variables created by each function (including the main() function). The stack is a "FILO" (first in, last out) data structure, that is managed and optimized by the CPU quite closely. Every time a function declares a new variable, it is "pushed" onto the stack. Then every time a function exits, all of the variables pushed onto the stack by that function, are freed (that is to say, they are deleted). Once a stack variable is freed, that region of memory becomes available for other stack variables. The advantage of using the stack to store variable...
Read more

Validate Mobile Number with 10 Digits in ASP.Net

Here is the code for validating textbox for 10 digit mobile number. .ASPX File: <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox><br\>     <asp:RegularExpressionValidator ID="RegularExpressionValidator1" runat="server"        ControlToValidate="TextBox1" ErrorMessage="RegularExpressionValidator"      ValidationExpression="[0-9]{10}"></asp:RegularExpressionValidator>
Read more
What is  Abstraction? Abstraction is another good feature of OOPS. Abstraction means to show only the necessary details to the client of the object . Do you know the inner details of the Monitor of your PC? What happen when you switch ON Monitor? Does this matter to you what is happening inside the Monitor? No Right, Important thing for you is weather Monitor is ON or NOT. When you change the gear of your vehicle are you really concern about the inner details of your vehicle engine? No but what matter to you is that Gear must get changed that’s it!! This is abstraction; show only the details which matter to the user.  Let’s say you have a method "CalculateSalary" in your Employee class, which takes EmployeeId as parameter and returns the salary of the employee for the current month as an integer value. Now if someone wants to use that method. He does not need to care about how Employee object calculates the salary? An only thing he needs to be concern is name...
Read more