dir.by  
  Поиск  
Праздники ...
Концерты, выставки, цирки ...
Афишу
Спорт занятия ...
Спорт занятие
Объявления ...
Объявление
Программирование, разработка, тестирование
Meta (Facebook) используемя для входа на наш сайт
Пишем html, js код для логина в Facebook и получении имени пользователя
  Посмотрели 1619 раз(а)    
 Пишем html, js код для логина в Facebook и получении имени пользователя 
последнее обновление: 12 июня 2023
Шаг 1. Добавляем наш сайт в Facebook API
Шаг 2. Пишем html, js код для логина в Facebook и получении имени пользователя
  Файл my.html
<meta http-equiv='Content-Type' content='text/html;charset=utf-8' >

<html xmlns='http://www.w3.org/1999/xhtml'>
     <HEAD>
          <title>Hello!</title>
          <meta http-equiv='Content-Type' content='text/html;charset=utf-8' >
     </HEAD>

     <BODY>

     <!-- Facebook init (took from Facebook site) -->
     <script>
          window.fbAsyncInit = function() {
               FB.init({
                    appId : '290004326783306', // <-- Facebook Application id !!!!!!!!!!!!
                    cookie : true,
                    xfbml : true,
                    version : 'v17.0' // <-- Facebook API version !!!!!!!!!!!
               });

               FB.AppEvents.logPageView();
          };

          (function(d, s, id){
               var js, fjs = d.getElementsByTagName(s)[0];
               if (d.getElementById(id)) {return;}
               js = d.createElement(s); js.id = id;
               js.src = "https://connect.facebook.net/en_US/sdk.js";
               fjs.parentNode.insertBefore(js, fjs);
          }(document, 'script', 'facebook-jssdk'));

     </script>

     <!-- get logined info from Facebook (took from Facebook site) -->
     <script>
          function ShowMeFacebookStatus()
          {
               FB.getLoginStatus(function(response)
               {
                    if (response.status === 'connected')
                    {
                         alert("Connected");

                         // show user name, last name, email, id
                         GetUserInfo();
                    }

                    else if (response.status === 'not_authorized')
                    {
                         alert("Not authorized");
                    }

                    else
                    {
                         alert("Error");
                    }
               });
          }
     </script>

     <!-- Facebook LogIn button (took from Facebook site) -->
     <fb:login-button scope="public_profile,email">
     </fb:login-button>

     <!-- my button when click we see user info -->
     <button onclick="ShowMeFacebookStatus();">Get Facebook status()</button>
     </BODY>

     <!-- get user name, last name, email, id -->
     <script>
          function GetUserInfo()
          {
               FB.api('/me', 'get', { fields: 'id, first_name, last_name, email' }, function (response)
               {
                    alert(
                         'user name: ' + response.first_name + '\n' +
                         'user last name: ' + response.last_name + '\n' +
                         'user email: ' + response.email + '\n' +
                         'user id: ' + response.id
                    );
               });    
          }
     </script>

</html>
Шаг 3. Запускаем html, js код
В Google Chrome открываем ссылку https://dir.by/developer/meta/html_js_login_facebook/my.html и увидим:
 
Нажимаем на кнопку Log In.
Нажимаем на кнопку Get Facebook status() и увидим:
Как обработать событие, когда нажаимаем на кнопку Login ?
Вот код кнопки:
  Html  
<!-- Facebook LogIn button (took from Facebook site) -->
<fb:login-button scope="public_profile,email">
</fb:login-button>
 
Решение:
Я кнопку делаю другим способом, вот так:
  Html  
<button onclick='window.FB.login(function (response) {
     // add your action here ...
     }, { scope: \"public_profile,email\" });'>
     Login
</button>
 
← Предыдущая тема
Делаем на своем сайте логин используя Meta (Facebook)
 
Следующая тема →
Ошибка! JSSDK Option is Not Toggled. | JavaScript Meta (Facebook) API
 
Ваши Отзывы ... комментарии ...
   
Вашe имя
Ваш комментарий (www ссылки может добавлять только залогиненный пользователь)

  Отдых  
Экскурсии по Москве
Экскурсии по Москве: пешеходные, автобусные и речные прогулки на любой вкус
  Объявления  
  Объявления  
 
Делаем на своем сайте логин используя Meta (Facebook)
Пишем html, js код для логина в Facebook и получении имени пользователя
Ошибка! JSSDK Option is Not Toggled. | JavaScript Meta (Facebook) API
Как узнать Facebook Application ID и Facebook API version?

  Ваши вопросы присылайте по почте: info@dir.by  
Яндекс.Метрика