Как использовать регистрацию в Facebook и войти или подключиться к моему сайту asp.net? - PullRequest
7 голосов
/ 11 августа 2011

Может ли кто-нибудь дать мне лучший пример URL-адреса сайта, чтобы узнать, как использовать Facebook Connect или зарегистрироваться на Facebook на моем сайте или войти в систему с сайта asp.net?

На самом деле мое требование заключается в том, чтобы при регистрации на своем сайте asp.net с помощью facebook мы хотели получить имя пользователя Facebook (emailid) из Facebook, а также имя и фамилию с изображением пользователя.

Ответы [ 4 ]

6 голосов
/ 18 августа 2011

используйте Facebook Javascript SDK, потому что с помощью Javascript SDK вы можете легко сделать что угодно на Facebook. Я дал вам пример кода для этого

<script type="text/javascript" src="http://connect.facebook.net/en_US/all.js"></script>
<div id="fb-root">
    </div>
    <script type="text/javascript">
        FB.init({
            appId: '012341352533212',
            status: true, // check login status
            cookie: true, // enable cookies to allow the server to access the session
            xfbml: true, // parse XFBML
            channelUrl: 'http://www.xyz.com/channel.html', // channel.html file
            oauth: true // enable OAuth 2.0
        });
    </script>

этот код позвоните в ваше приложение Facebook

 <script type="text/javascript">
        function facebookLogin() {
            FB.login(function (response) {
                if (response.authResponse) {
                    FB.api('/me', function (response) {
                        jQuery('#txtFirstName').val(response.first_name);
                        jQuery('#txtLastName').val(response.last_name);
                        jQuery('#txtEmail').val(response.email);
                        jQuery('#hdfUID').val(response.id);
                        //                        FB.logout(function (response) {
                        //                        });
                    });
                } else {
                    jQuery('#txtFirstName').val('');
                    jQuery('#txtLastName').val('');
                    jQuery('#txtEmail').val('');
                    jQuery('#hdfUID').val('');
                }
            }, { scope: 'email' });
            return false;
        }
    </script>

и этот код вызывает страницу входа на Facebook и в ответ вы получаете ID пользователя, имя. фамилию и адрес электронной почты конкретного пользователя и с помощью jquery сохраните эти значения в текстовом поле или в скрытом поле и получите эти значения на кодовой странице на стороне сервера.

4 голосов
/ 10 мая 2013

Здесь я собираюсь написать пошаговую процедуру для этого.

  1. Вам необходимо войти в раздел разработчиков fb, используя эту ссылку .
  2. Создайте новое приложение, щелкнув по этой ссылке .
  3. Введите имя требуемого приложения, например, логин, тест и т. Д., Как показано на снимке экрана ниже

  4. Заполните необходимые значения в текстовом поле, см. Снимок экрана для этого. Теперь вы закончили с шагами по созданию приложения для входа в систему с учетной записью разработчика, откройте Visual Studio и создайте страницу asp.net с расширением aspx.в visual studio.

  5. скопируйте и вставьте нижеприведенный код javascript в заголовок вашей страницы.

<script>
    // 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: '155578484623690', // Write your own application id
            channelUrl: '//' + window.location.hostname + '/channel', // Path to your Channel File
            scope: 'id,name,gender,user_birthday,email',
            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
                var uid = "http://graph.facebook.com/" + response.authResponse.userID + "/picture";
                FB.api('/me', function (me) {
                    if (me.name) {
                        document.getElementById('auth-displayname').innerHTML = me.name;
                        document.getElementById('Email').innerHTML = me.email;
                        document.getElementById('BD').innerHTML = me.birthday;
                        document.getElementById('profileImg').src = uid;
                        document.getElementById('Gender').innerHTML = me.gender;
                    }
                })
                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>

Скопируйте и вставьте приведенный ниже html в раздел body вашей html-страницы

  <div style="height: 500px; margin-left: 23px;">
            <h1>
                Facebook Login Authentication Example</h1>
            <div id="auth-status">
                <div id="auth-loggedout">
                    <div class="fb-login-button" autologoutlink="true" scope="email,user_checkins">
                        Login with Facebook</div>
                </div>
                <div id="auth-loggedin" style="display: none">
                    Hi, <span id="auth-displayname"></span>(<a href="#" id="auth-logoutlink">logout</a>)
                    <br />
                    Email: <span id="Email"></span><br/> Ammar's Birthday <span id="BD"></span><br/>
                    Gender :<span id="Gender"></span><br/>
                    <br />
                    Profile Image:
                    <img id="profileImg" />
                </div>
            </div>
    </div>

Теперь запустите asp.net страницу, и вы получите необходимую информацию.Здесь я получил отображаемое имя, день рождения, адрес электронной почты, пол и изображение

посмотрите окончательный снимок экрана и наслаждайтесь этим по-своему:)

enter image description here

Write name of Application

Fill Necessary Text Boxes

0 голосов
/ 18 августа 2011

Вы можете сделать это с помощью Javascript SDK на своей веб-странице.

В следующем решении используется плагин xocialCore, доступный здесь.На самом деле вы можете просто извлечь первые две функции из этого плагина, поскольку они предоставляют необходимые функции для этого.

https://github.com/xocialhost/jquery.xocialCore.js/blob/master/jquery.xocialCore.js

Сначала вам необходимо создать и настроить приложение facebook.Убедитесь, что вы заполнили информацию на веб-сайте своим URL / доменом.

На своей странице регистрации убедитесь, что вы включили jQuery, а затем указанный выше плагин.:

<button id="fbLoginButton">Login</button>

и затем внедрите следующий код:

$.xcInitFacebook({appId:'yourFBappId',callback:function(){

   $('#fbLoginButton').click(function(event){

      event.preventDefault();

      $.xcFbLogin({permissions:'manage_pages, offline_access, email',callback:function(){

            FB.getLoginStatus(function(response) {

                var fbUrl='https://graph.facebook.com/'+response.authResponse.userID+
                          '?fields=email,first_name,last_name,picture'+
                           '&access_token='+response.authResponse.accessToken;

        $.getJSON(fbUrl,function(data){
                     //Pass the return data information to your Registration/Login system
                });


            }); 

      } }); 

   });

} });

Ответ от сервера Facebook должен выглядеть примерно так:

{
 "email": "emailid\u0040domain.com",
 "first_name": "fName",
 "last_name": "lName",
 "id": "12345",
 "picture": "https://fbcdn-profile-a.akamaihd.net/hprofile-ak-snc4/49860_12345_8441_q.jpg"
}

Вы быочевидно, вы хотите пойти дальше, чтобы проверить, вошел ли пользователь уже в систему, а затем показать кнопку входа или нет, но это должно дать вам запрашиваемую информацию о пользователе.

0 голосов
/ 17 августа 2011

Вы можете посмотреть здесь проект с открытым исходным кодом, который делает то, что вы ищете:

http://www.codeplex.com/site/search?query=facebook%20api&ac=3

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...