Facebook Login & Graph API | JavaScript SDK



In this freestyle coding video I will implement Facebook login using the JavaScript SDK and we will take a look at the Graph API. We will also be working with the Graph API explorer and taking a look at the different permissions that we can request with the access token

CODE: Code for this video

Graph API Explorer:

Register Facebook App:

SPONSORS:
DevMountain Bootcamp –

EDUONIX COURSES: Please use affiliate links from website below

SUPPORT: We spend massive amounts of time creating these free videos, please donate to show your support:

FOLLOW TRAVERSY MEDIA:

Nguồn: https://hiepthanhbuildings.net/

Xem thêm bài viết khác: https://hiepthanhbuildings.net/giai-tri/

38 thoughts on “Facebook Login & Graph API | JavaScript SDK

  1. Thank you so much for all the work and for sharing your knowledge! Your tutorials help so much!
    Even if the topic was really hard for me at first attempt, after your tutorial I start to make progress, thank you very much!!

  2. thank you so much for this video! This was exactly what I was looking for. All the basics I need to get started. There is a ton of documentation on this Facebook graph which is kind of overwhelming, but this video made it easy to get started.

  3. Nobody:
    Brad: Ahhmmmm Excuse Me!!

    Really love cool stuff from you.. <3 I have seen a couple of videos of yours and you are just awesome… Love form Pakistan <3
    Never mind of that little meme joke.. I have seen you doing this in other videos 😀

  4. Hello, the video is outdated almost.
    what I wanted is guide for using Instagram with a WEBHOOK feature. or Instagram GRAPH.
    thank you in advance.

  5. when i opened up with live server it gave me this:

    The method FB.getLoginStatus can no longer be called from http pages
    Facebook Login status is only available to HTTPS pages.

    what am i doing wrong? i made the folders and and index document manually, I didnt understand the method he used. I am a beginner at this stuff.

  6. to retrieve using php you can go this route see code below

    require_once( 'C:fakepathvendorfacebookgraph-sdksrcFacebookautoload.php' );

    class Facebook {

    public $ci;

    public $accessToken;

    public $fb;

    public function __construct() {

    // Get CI object.

    $this->ci =& get_instance();

    $this->fb = new FacebookFacebook([

    'app_id' => *"your-app-id"*,

    'app_secret' => *"your-app-secret"*,

    'default_graph_version' => 'v2.10',

    //'default_access_token' => '{access-token}', // optional

    ]);

    }

    public function login(){

    $helper = $this->fb->getRedirectLoginHelper();

    $permissions = ['email','publish_to_groups','publish_pages'];
    //you can visit the facebook page and add more scopes
    $loginUrl = $helper->getLoginUrl(base_url('/client/FaceBookHandler'), $permissions);

    echo '<script>window.open("'.$loginUrl.'", "Facebook Popup", "height=500,width=400,resizable=no");</script>';
    //custom popup window
    }

    public function getAccessToken(){

    $helper = $this->fb->getRedirectLoginHelper();

    $accessToken = '';

    try {

    $accessToken = $helper->getAccessToken();

    } catch(FacebookExceptionsFacebookResponseException $e) {

    return false;

    } catch(FacebookExceptionsFacebookSDKException $e) {

    return false;

    }

    $oAuth2Client = $this->fb->getOAuth2Client();

    $tokenMetadata = $oAuth2Client->debugToken($accessToken);

    $tokenMetadata->validateAppId("*your-app-id*");

    $tokenMetadata->validateExpiration();

    if (! $accessToken->isLongLived()) {

    try {

    $accessToken = $oAuth2Client->getLongLivedAccessToken($accessToken);

    } catch (FacebookExceptionsFacebookSDKException $e) {

    return false;

    }

    }

    if(isset($accessToken) && !empty($accessToken)){

    return $accessToken;

    }

    return false;

    }

    /*Seeting the access token */
    public function setAccessToken($token){

    //$_SESSION['fb_access_token'] = (string) $accessToken;

    $_SESSION['fb_access_token'] = (string) $token->getValue();

    $_SESSION['fb_expires_at'] = strtotime($token->getExpiresAt()->format('Y-m-d H:i:s'));

    try {

    $response = $this->fb->get('/me?fields=id,name', (string) $token->getValue());

    } catch(FacebookExceptionsFacebookResponseException $e) {

    return false;

    } catch(FacebookExceptionsFacebookSDKException $e) {

    return false;

    }

    $user = $response->getGraphUser();

    $_SESSION['fb_user_id'] = $user->getId();

    return array(

    'fb_access_token'=>(string) $token->getValue(),

    'fb_expires_at'=>strtotime($token->getExpiresAt()->format('Y-m-d H:i:s')),

    'fb_user_id',$user->getId());

    }

    }

    /*Testing the code*/
    public function RequestBlogs(){

    // echo "my user id = ".$_SESSION['fb_user_id'];

    echo $this->face->login();

    }

    public function FaceBookHandler(){

    $token = $this->face->getAccessToken();

    if($token != false){

    $result = $this->face->setAccessToken($token);

    if($result != false){

    print_r($result);

    }else{

    echo "Failed to set access token";

    }

    }else{

    echo "Login Failed";

    }

  7. Great channel. Thank you so much for sharing all your knowledge. You helped me out so much on understanding a wide variety of frameworks and what they do. Thank you sir!

  8. salute you thousand time. thanks from core of my heart. i learn graph api from this video and make money $$.

  9. Thanks alot for this video. This video helped me to finally implement facebook login for my site. 😀

  10. The CSS in 2019 breaks this project when cloned from your github. Although not the point of this video, custom css would make this video last longer

  11. Brad – I googled for facebook login api tutorial and your video pops up so just know that there's always someone with a wisea** know it all comment on more than one of your videos but I would say this great job man keep up the good work and know that you are helping a lot of us devs in your videos and it means a lot to us so ignore them and keep doing what you do the best!
    Happy new year in advance and hope to see you next year with even more amazing videos like this one cheers!

Leave a Reply

Your email address will not be published. Required fields are marked *