Tuesday, December 16, 2014

How to Integerate FaceBook Login Button In a Page.

In this article i will explain how to integrate  facebook login button in your aspnet website.

First,we have to create a application for this 
Click on the below link  http://developers.facebook.com/setup/ then it will display window like this




Click on Close

Click on Register Now.





Click on No Button

Click on Register Now,



Click on Done Button.

Click on WebSite


Click on Skip and Create App ID





Click on Create Apple ID


Click on Submit

After clicking on Submit , the following screen is displayed


Now, click on Test Apps in the left side menu




Click on Create Test App

Click on Create Test App


Click on  Getting Started.


Now, Give your site URL.




And Click on Next Button

Click on Skip Quick Start

Now, copy this app id 


Now, Go to Default222.aspx page and  write the following code as below


<table align="center">
            <tbody>
                <tr>
                    <td align="center" style="color#33ccfffont-sizelargefont-weightboldtext-transformcapitalize;"></td>
                </tr>
                <tr>
                    <td align="center" style="margin-top350px;">
                        <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";
                                ref.parentNode.insertBefore(js, ref);
                            }(document));

                            // Init the SDK upon load  
                            window.fbAsyncInit = function () {
                                FB.init({
                                    appId: '000000000000'// 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  
                                });

                                // 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  
                                        FB.api('/me'function (me) {
                                            if (me.name) {
                                                document.getElementById('auth-displayname').innerHTML = me.name;
                                            }
                                        })
                                        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';
                                    }
                                });
                                $("#auth-logoutlink").click(function () { FB.logout(function () { window.location.reload(); }); });
                            }
                        </script>



                        <h1>asp.net facebook login</h1>
                        <div id="auth-status">
                            <div id="auth-loggedout">
                                <div autologoutlink="true" class="fb-login-button" scope="email,user_checkins">
                                    Login with Facebook
                                </div>
                            </div>
                            <div id="auth-loggedin" style="displaynone;">
                                Hi, <span id="auth-displayname">dotnet developers</span>(<a href="http://www.dfdsfasdfasfs.com/post-edit.g?blogID=892712659100500876&postID=sdafdsfsfsfsfsfsf#" id="auth-logoutlink">Signout</a>)
                            </div>
                        </div>
                    </td>
                </tr>
            </tbody>
        </table>



Run, your page Default222.aspx and see the output






Click on Login with FaceBook



Click on okay button


No comments:

Post a Comment

Thank you for visiting my blog

Kubernetes

Prerequisites We assume anyone who wants to understand Kubernetes should have an understating of how the Docker works, how the Docker images...