[SOLVED] How to get the profilepic path after login with facebook

How to get the profilepic path after login with facebook

Here i am doing Login with facebook,and also it is working fine,now my question is after login i need the profile pic path,i don't how can get the path,if any one knows please update your answer.as od now i am getting the values like id,name,email but i don't the profilepic path

window.fbAsyncInit = function() {
          FB.init({appId: '1990039811315283', status: true, cookie: true, xfbml: true});

      };
      (function() {
        var e = document.createElement('script'); e.async = true;
        e.src = document.location.protocol +
          '//connect.facebook.net/en_US/all.js';
        document.getElementById('fb-root').appendChild(e);
      }());

    function fetchUserDetail()
    {
      FB.api('/me?fields=id,name,email', function(responseFromFB){ 
                //console.log("Name: "+ response.name + "\Email: "+ response.email + "ID: "+response.id);
				console.log(JSON.stringify(responseFromFB)); 
				 var userName = responseFromFB.name;
				var userEmail = responseFromFB.email;
				var profilePic = '1.png';
				var registerFrom = 'Web';
				var FCM_Token = '';
				  $.ajax({
					url:'admin/rest/registerFB',
					type:'POST',
					data: {userName: userName, userEmail: userEmail, profilePic: profilePic, registerFrom: registerFrom, FCM_Token: FCM_Token},
					success:function(loginResponse){
						  if(loginResponse['status']=='success'){
							 window.location.href = "index.php";
						  } 
							
					},
				}); 
            });
			
			
    }

    function checkFacebookLogin() 
    {
        FB.getLoginStatus(function(response) {
          if (response.status === 'connected') {
            fetchUserDetail();
          } 
          else 
          {
            initiateFBLogin();
          }
         });
    }

    function initiateFBLogin()
    {

    	
			   FB.login(function(response) {
				fetchUserDetail();
			}, {scope: 'email'});
    }

<html>
<head>
<title>Facebook Login JavaScript Example</title>
<meta charset="UTF-8">
</head>
<body>
  <input type="button" class="btn btn-lg btn-fb" value="Sign in using Facebook" scope="public_profile,email" onclick="checkFacebookLogin();"/>
<div id="fb-root"></div>

Solution

When you get the response from FB, you'll get the id of the user for your registered App. You can use this id and get the image of the user. The below code creates an image tag dynamically and adds to the body. add this to your fetchUserDetail() response handler.

let image = document.createElement("img");
image.src = `https://graph.facebook.com/v2.12/${responseFromFB.id}/picture`;
document.body.appendChild(image);

API docs here