dir.by  
  Поиск  
Компьютер, программы
Meta (Facebook) using to log in to our website
 Write html, js code to log in to Facebook and get the username 
посмотрели 2174 раз
обновлено: 12 June 2023
Step 1. Add our site to Facebook API
Step 2. Write html, js code to log in to Facebook and get the username
  File 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>
Step 3. Run the html, js code
In Google Chrome open the link https://dir.by/developer/meta/html_js_login_facebook/my.html and see:
 
Click on the Log In button.
Click on the Get Facebook status() button and see:
How do I handle an event when we click on the Login button?
Here's the button code:
  Html  
<!-- Facebook LogIn button (took from Facebook site) -->
<fb:login-button scope="public_profile,email">
</fb:login-button>
 
Decision:
I make the button in a different way, like this:
  Html  
<button onclick='window.FB.login(function (response) {
     // add your action here ...
     }, { scope: \"public_profile,email\" });'>
     Login
</button>
 
← Previous topic
We make a login on our site using Meta (Facebook)
 
Next topic →
Error! JSSDK Option is Not Toggled. | JavaScript Meta (Facebook) API
 
Your feedback ... Comments ...
   
Your Name
Your comment (www links can only be added by a logged-in user)

Экскурсии по Москве Экскурсии по Москве: пешеходные, автобусные и речные прогулки на любой вкус
  Объявления  
  Объявления  
 
We make a login on our site using Meta (Facebook)
Write html, js code to log in to Facebook and get the username
Error! JSSDK Option is Not Toggled. | JavaScript Meta (Facebook) API
How do I find out Facebook Application ID and Facebook API version?

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