title
Facebook Login & Graph API | JavaScript SDK

description
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 https://github.com/bradtraversy/socialauth Graph API Explorer: https://developers.facebook.com/tools/explorer/ Register Facebook App: https://developers.facebook.com/apps/ SPONSORS: DevMountain Bootcamp - https://goo.gl/6q0dEa EDUONIX COURSES: Please use affiliate links from website below http://www.traversymedia.com/eduonix-courses SUPPORT: We spend massive amounts of time creating these free videos, please donate to show your support: http://www.paypal.me/traversymedia http://www.patreon.com/traversymedia FOLLOW TRAVERSY MEDIA: http://www.facebook.com/traversymedia http://www.twitter.com/traversymedia http://www.linkedin.com/bradtraversy

detail
{'title': 'Facebook Login & Graph API | JavaScript SDK', 'heatmap': [{'end': 469.938, 'start': 444.409, 'weight': 0.891}, {'end': 550.55, 'start': 516.668, 'weight': 0.751}, {'end': 596.727, 'start': 566.902, 'weight': 0.724}, {'end': 746.241, 'start': 663.92, 'weight': 0.705}, {'end': 841.56, 'start': 760.138, 'weight': 0.807}], 'summary': 'Tutorial series covers facebook login and graph api basics, javascript sdk setup, implementing facebook login in html, styling and implementing functions, handling api responses and user profile information, emphasizing the need for permissions and providing insights into working with different features of the facebook api.', 'chapters': [{'end': 86.726, 'segs': [{'end': 43.681, 'src': 'embed', 'start': 0.663, 'weight': 0, 'content': [{'end': 1.604, 'text': "hey, what's going on, guys?", 'start': 0.663, 'duration': 0.941}, {'end': 7.808, 'text': 'I recently got a request to do a video on the Facebook login and graph API.', 'start': 1.604, 'duration': 6.204}, {'end': 11.03, 'text': "now I've used this before, but I'm definitely not an expert.", 'start': 7.808, 'duration': 3.222}, {'end': 15.833, 'text': "I don't know the ins and outs of it, but what I just want to kind of do some basic stuff.", 'start': 11.03, 'duration': 4.803}, {'end': 24.119, 'text': 'I want to show you how to implement the JavaScript SDK, how to actually set up a page so that we can log in,', 'start': 15.833, 'duration': 8.286}, {'end': 28.962, 'text': 'so that we can add some access control and do a few other things.', 'start': 24.119, 'duration': 4.843}, {'end': 30.583, 'text': "alright. so let's go ahead and get into it.", 'start': 28.962, 'duration': 1.621}, {'end': 33.787, 'text': 'This video is sponsored by DevMountain.', 'start': 31.524, 'duration': 2.263}, {'end': 38.073, 'text': "If you're interested in learning web development, iOS or UX design,", 'start': 33.908, 'duration': 4.165}, {'end': 43.681, 'text': 'DevMountain is a 12-week design and development boot camp intended to get you a full-time job in the industry.', 'start': 38.073, 'duration': 5.608}], 'summary': 'Video tutorial on implementing facebook login and graph api, sponsored by devmountain.', 'duration': 43.018, 'max_score': 0.663, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/gXux8b3wcYw/pics/gXux8b3wcYw663.jpg'}, {'end': 86.726, 'src': 'embed', 'start': 61.193, 'weight': 2, 'content': [{'end': 68.397, 'text': "So if I do make a mistake or I do something that's not the best way to do it, feel free to point it out, but just don't be a dick about it.", 'start': 61.193, 'duration': 7.204}, {'end': 78.422, 'text': 'I hate the know-it-alls that like to pick apart everything I do and try to find some fault in it or be a wise ass about it.', 'start': 69.698, 'duration': 8.724}, {'end': 79.802, 'text': "It's perfectly fine.", 'start': 78.902, 'duration': 0.9}, {'end': 86.726, 'text': "I actually want you guys to correct me if I do something that's not the best way, but just do it respectfully.", 'start': 79.843, 'duration': 6.883}], 'summary': 'Encourages respectful feedback, dislikes know-it-alls and seeks correction constructively.', 'duration': 25.533, 'max_score': 61.193, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/gXux8b3wcYw/pics/gXux8b3wcYw61193.jpg'}], 'start': 0.663, 'title': 'Facebook login and graph api basics', 'summary': 'Covers the basics of implementing the javascript sdk for facebook login and graph api, and mentions a 12-week design and development boot camp by devmountain.', 'chapters': [{'end': 86.726, 'start': 0.663, 'title': 'Facebook login and graph api basics', 'summary': 'Covers the basics of implementing the javascript sdk for facebook login and graph api, with a mention of a 12-week design and development boot camp by devmountain.', 'duration': 86.063, 'highlights': ['The video introduces the basics of implementing the JavaScript SDK for Facebook login and graph API.', 'DevMountain is mentioned as a sponsor, offering a 12-week design and development boot camp intended to help individuals secure full-time jobs in the industry.', 'The speaker emphasizes that while he may not be an expert, he aims to demonstrate basic implementation and encourages respectful correction if he makes any mistakes.']}], 'duration': 86.063, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/gXux8b3wcYw/pics/gXux8b3wcYw663.jpg', 'highlights': ['DevMountain offers a 12-week design and development boot camp', 'The video introduces the basics of implementing the JavaScript SDK for Facebook login and graph API', 'The speaker aims to demonstrate basic implementation and encourages respectful correction']}, {'end': 469.938, 'segs': [{'end': 134.878, 'src': 'embed', 'start': 87.981, 'weight': 0, 'content': [{'end': 90.202, 'text': 'All right, so I have a couple tabs open here.', 'start': 87.981, 'duration': 2.221}, {'end': 93.223, 'text': 'This is the documentation for the JavaScript SDK.', 'start': 90.242, 'duration': 2.981}, {'end': 97.785, 'text': "All right, so there's a few different SDKs that you can use.", 'start': 93.803, 'duration': 3.982}, {'end': 100.566, 'text': "For the web, there's the JavaScript, there's the PHP.", 'start': 97.865, 'duration': 2.701}, {'end': 110.109, 'text': 'You also have SDKs for mobile apps right here, Swift and iOS, Android, all that stuff, even React Native, which is kind of cool.', 'start': 101.266, 'duration': 8.843}, {'end': 114.751, 'text': "But we're going to stick to the web and the JavaScript SDK.", 'start': 110.969, 'duration': 3.782}, {'end': 121.353, 'text': "Alright, so let's go ahead and click on this quick start link and we'll go down here to basic setup,", 'start': 115.831, 'duration': 5.522}, {'end': 124.034, 'text': 'and we need to include this script tag in our HTML.', 'start': 121.353, 'duration': 2.681}, {'end': 128.836, 'text': "This is going to load the SDK and it's going to do everything asynchronously.", 'start': 124.074, 'duration': 4.762}, {'end': 134.878, 'text': "So right here it says the async load means that it doesn't block loading other elements on your page.", 'start': 129.436, 'duration': 5.442}], 'summary': 'The javascript sdk documentation covers web and mobile app sdks, emphasizing asynchronous loading for non-blocking page elements.', 'duration': 46.897, 'max_score': 87.981, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/gXux8b3wcYw/pics/gXux8b3wcYw87981.jpg'}, {'end': 199.975, 'src': 'embed', 'start': 153.506, 'weight': 3, 'content': [{'end': 160.469, 'text': "Now, if you don't know what the graph API is, try and think of everything on Facebook as a node.", 'start': 153.506, 'duration': 6.963}, {'end': 167.353, 'text': 'So you have users, you have their posts, their photos, their friends, everything and picture them as nodes on a graph.', 'start': 160.65, 'duration': 6.703}, {'end': 171.655, 'text': "OK, so that's kind of how you need to visualize the graph API.", 'start': 167.513, 'duration': 4.142}, {'end': 179.06, 'text': 'And you can make queries and request certain info from a user, from an authenticated user.', 'start': 172.655, 'duration': 6.405}, {'end': 182.262, 'text': 'Now, if we look over here, this is the Graph API Explorer.', 'start': 179.46, 'duration': 2.802}, {'end': 185.224, 'text': "It's just a tool that's used to query the API.", 'start': 182.762, 'duration': 2.462}, {'end': 190.908, 'text': "Now, we'll be doing this in the code, but this is a nice little tool to kind of see what you can do.", 'start': 185.244, 'duration': 5.664}, {'end': 193.33, 'text': "And you'll see that right here, it says slash me.", 'start': 191.348, 'duration': 1.982}, {'end': 196.212, 'text': 'That represents the current logged in user.', 'start': 193.39, 'duration': 2.822}, {'end': 199.975, 'text': "You can see I'm logged in with my personal account.", 'start': 196.852, 'duration': 3.123}], 'summary': 'Graph api visualizes facebook data as nodes in queries. graph api explorer queries the api.', 'duration': 46.469, 'max_score': 153.506, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/gXux8b3wcYw/pics/gXux8b3wcYw153506.jpg'}, {'end': 316.862, 'src': 'embed', 'start': 293.288, 'weight': 2, 'content': [{'end': 300.372, 'text': 'If we click show, it says here the field email is only accessible on the user object that grants the email permission.', 'start': 293.288, 'duration': 7.084}, {'end': 302.933, 'text': "And this one's for the user birthday permission.", 'start': 300.812, 'duration': 2.121}, {'end': 308.797, 'text': "So let's go back to the user token here and check off email and user birthday.", 'start': 303.554, 'duration': 5.243}, {'end': 310.818, 'text': 'And then get access token.', 'start': 309.417, 'duration': 1.401}, {'end': 312.659, 'text': "So we'll have to do this once again.", 'start': 311.138, 'duration': 1.521}, {'end': 316.862, 'text': 'And now if we submit, we can get the email and the birthday.', 'start': 312.679, 'duration': 4.183}], 'summary': "By updating user token to include email and birthday permissions, we successfully accessed the user's email and birthday.", 'duration': 23.574, 'max_score': 293.288, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/gXux8b3wcYw/pics/gXux8b3wcYw293288.jpg'}, {'end': 478.82, 'src': 'heatmap', 'start': 444.409, 'weight': 0.891, 'content': [{'end': 446.711, 'text': 'Looks like I had a social login before.', 'start': 444.409, 'duration': 2.302}, {'end': 449.733, 'text': "So this is social auth, we'll call it.", 'start': 447.491, 'duration': 2.242}, {'end': 454.517, 'text': "And then let's click save and then continue.", 'start': 451.374, 'duration': 3.143}, {'end': 455.597, 'text': 'All right.', 'start': 454.537, 'duration': 1.06}, {'end': 457.519, 'text': 'So this is our custom.', 'start': 455.637, 'duration': 1.882}, {'end': 460.035, 'text': 'uh, call to FB.', 'start': 458.474, 'duration': 1.561}, {'end': 462.855, 'text': 'init and you can see it actually includes our app ID.', 'start': 460.035, 'duration': 2.82}, {'end': 468.157, 'text': "so this is what we saw right here, but it's customized for this application.", 'start': 462.855, 'duration': 5.302}, {'end': 469.938, 'text': 'yours will obviously have a different ID.', 'start': 468.157, 'duration': 1.781}, {'end': 478.82, 'text': "so what I'm going to do is just copy this here click copy code and I'm using XAMPP on Windows, which gives me an Apache server.", 'start': 469.938, 'duration': 8.882}], 'summary': 'Setting up social authentication with customized app id using xampp on windows.', 'duration': 34.411, 'max_score': 444.409, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/gXux8b3wcYw/pics/gXux8b3wcYw444409.jpg'}], 'start': 87.981, 'title': 'Javascript sdk setup and facebook graph api basics', 'summary': 'Discusses the setup process for the javascript sdk, covering different sdks for web and mobile apps, async loading, and the basics of using the facebook graph api, including accessing user data, generating access tokens, obtaining an app id, and requesting permissions for user data.', 'chapters': [{'end': 134.878, 'start': 87.981, 'title': 'Javascript sdk setup', 'summary': "Discusses the setup process for the javascript sdk, including the use of different sdks for web and mobile apps, and the async loading feature that doesn't block other page elements.", 'duration': 46.897, 'highlights': ["The JavaScript SDK setup process involves including a script tag in the HTML, which loads the SDK asynchronously and doesn't block other page elements.", 'Different SDKs are available for web (JavaScript, PHP) and mobile apps (Swift, iOS, Android, React Native).']}, {'end': 469.938, 'start': 135.618, 'title': 'Facebook graph api basics', 'summary': 'Covers the basics of using the facebook graph api, including accessing user data, generating access tokens, and obtaining an app id, emphasizing the visualization of facebook elements as nodes on a graph and the process of requesting permissions for user data.', 'duration': 334.32, 'highlights': ['The process of requesting permissions for user data involves allowing specific permissions for access, such as email and birthday, which can be tested using the Graph API Explorer. The process of requesting permissions for user data involves allowing specific permissions for access, such as email and birthday, which can be tested using the Graph API Explorer.', 'Visualizing Facebook elements as nodes on a graph and understanding the concept of the Graph API, including making queries and accessing user information using the FB object. Visualizing Facebook elements as nodes on a graph and understanding the concept of the Graph API, including making queries and accessing user information using the FB object.', 'The generation of access tokens for querying information from the Graph API and the usage of the Graph API Explorer as a testing tool for API queries. The generation of access tokens for querying information from the Graph API and the usage of the Graph API Explorer as a testing tool for API queries.']}], 'duration': 381.957, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/gXux8b3wcYw/pics/gXux8b3wcYw87981.jpg', 'highlights': ['Different SDKs available for web (JavaScript, PHP) and mobile apps (Swift, iOS, Android, React Native).', "The JavaScript SDK setup process involves including a script tag in the HTML, which loads the SDK asynchronously and doesn't block other page elements.", 'The process of requesting permissions for user data involves allowing specific permissions for access, such as email and birthday, which can be tested using the Graph API Explorer.', 'Visualizing Facebook elements as nodes on a graph and understanding the concept of the Graph API, including making queries and accessing user information using the FB object.', 'The generation of access tokens for querying information from the Graph API and the usage of the Graph API Explorer as a testing tool for API queries.']}, {'end': 974.951, 'segs': [{'end': 550.55, 'src': 'heatmap', 'start': 469.938, 'weight': 0, 'content': [{'end': 478.82, 'text': "so what I'm going to do is just copy this here click copy code and I'm using XAMPP on Windows, which gives me an Apache server.", 'start': 469.938, 'duration': 8.882}, {'end': 480.761, 'text': 'so I can run this on my local host.', 'start': 478.82, 'duration': 1.941}, {'end': 485.602, 'text': 'you can use any kind of server that you want or you know, just use your file system.', 'start': 480.761, 'duration': 4.841}, {'end': 489.826, 'text': "but all I'm going to do here is create a new directory In my HD docs.", 'start': 485.602, 'duration': 4.224}, {'end': 494.493, 'text': "I'm going to call this social off and then we're going to CD into that.", 'start': 489.826, 'duration': 4.667}, {'end': 498.419, 'text': "And you don't have to use the command line.", 'start': 496.657, 'duration': 1.762}, {'end': 502.286, 'text': "You can obviously just use your your Explorer or whatever it's called.", 'start': 498.44, 'duration': 3.846}, {'end': 508.621, 'text': "And then I'm going to just create a file here called index.html.", 'start': 503.457, 'duration': 5.164}, {'end': 512.505, 'text': "And then I'm just going to say adam.", 'start': 509.863, 'duration': 2.642}, {'end': 516.648, 'text': "and that's going to open up my text editor in that directory.", 'start': 512.725, 'duration': 3.923}, {'end': 518.83, 'text': "I'm using adam for my text editor.", 'start': 516.668, 'duration': 2.162}, {'end': 529.357, 'text': "So what we want to do is just take that code we just copied, let's open up index.html, and I'm just going to put some basic HTML structure in here.", 'start': 519.933, 'duration': 9.424}, {'end': 532.978, 'text': 'And we want to put this right under the opening body tag.', 'start': 530.057, 'duration': 2.921}, {'end': 535.299, 'text': "All right, so I'm just going to paste that in here.", 'start': 533.338, 'duration': 1.961}, {'end': 538.26, 'text': "And let's just move this over.", 'start': 535.319, 'duration': 2.941}, {'end': 541.721, 'text': 'All right.', 'start': 538.28, 'duration': 3.441}, {'end': 546.723, 'text': "And for title, let's just say social auth.", 'start': 543.042, 'duration': 3.681}, {'end': 550.55, 'text': 'and then you can see it has my app ID.', 'start': 548.448, 'duration': 2.102}], 'summary': 'Setting up a local server using xampp on windows, creating a new directory, and adding basic html structure to an index.html file.', 'duration': 48.892, 'max_score': 469.938, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/gXux8b3wcYw/pics/gXux8b3wcYw469938.jpg'}, {'end': 653.914, 'src': 'heatmap', 'start': 566.902, 'weight': 3, 'content': [{'end': 575.849, 'text': "so right here we're going to use this FB, get login status, and that's going to give us a response telling us if the current user is is logged in.", 'start': 566.902, 'duration': 8.947}, {'end': 578.216, 'text': "So let's grab that.", 'start': 576.813, 'duration': 1.403}, {'end': 582.886, 'text': 'And you want to make sure you put that in here, inside of this function.', 'start': 578.838, 'duration': 4.048}, {'end': 585.932, 'text': "So we're actually going to get rid of this.", 'start': 583.066, 'duration': 2.866}, {'end': 587.115, 'text': "We don't need this right here.", 'start': 585.972, 'duration': 1.143}, {'end': 590.06, 'text': 'All right, paste that in.', 'start': 588.979, 'duration': 1.081}, {'end': 596.727, 'text': "If you try to put this somewhere else, it's going to say that FB is not found.", 'start': 591.702, 'duration': 5.025}, {'end': 597.888, 'text': "It's not going to know what that is.", 'start': 596.787, 'duration': 1.101}, {'end': 599.67, 'text': 'You have to do it inside this function.', 'start': 597.928, 'duration': 1.742}, {'end': 608.458, 'text': "So once we call get login status, we're actually going to create a function called status change callback and pass in that response.", 'start': 600.551, 'duration': 7.907}, {'end': 611.241, 'text': "So let's go ahead and do that.", 'start': 609.459, 'duration': 1.782}, {'end': 613.003, 'text': "We're actually going to go down here.", 'start': 611.361, 'duration': 1.642}, {'end': 629.729, 'text': "down to the bottom here and we're going to say function status, change callback and pass in the response,", 'start': 615.342, 'duration': 14.387}, {'end': 637.953, 'text': 'and then we want to check to see if the response status is connected, because if we look over here we should get something like this all right.', 'start': 629.729, 'duration': 8.224}, {'end': 653.914, 'text': "so let's do an if statement here And let's say if response dot status is equal to a string called connected, then that means we're logged in.", 'start': 637.953, 'duration': 15.961}], 'summary': "Using fb's get login status to determine user's login status and handling the response", 'duration': 62.212, 'max_score': 566.902, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/gXux8b3wcYw/pics/gXux8b3wcYw566902.jpg'}, {'end': 746.241, 'src': 'heatmap', 'start': 663.92, 'weight': 0.705, 'content': [{'end': 667.982, 'text': "Okay, and then let's do an else.", 'start': 663.92, 'duration': 4.062}, {'end': 673.81, 'text': "And we'll do another console log.", 'start': 671.969, 'duration': 1.841}, {'end': 681.956, 'text': "I'll just say not authenticated.", 'start': 673.83, 'duration': 8.126}, {'end': 685.639, 'text': "Okay, so let's go ahead and save this.", 'start': 683.037, 'duration': 2.602}, {'end': 693.044, 'text': "And then I'm going to go to localhost slash, what is this, social auth.", 'start': 685.879, 'duration': 7.165}, {'end': 694.703, 'text': 'all right.', 'start': 694.423, 'duration': 0.28}, {'end': 699.545, 'text': "so let's open up the console with f12 and you see we're not authenticated.", 'start': 694.703, 'duration': 4.842}, {'end': 702.447, 'text': "so we need a way to authenticate and we don't have that.", 'start': 699.545, 'duration': 2.902}, {'end': 703.307, 'text': "there's nothing here.", 'start': 702.447, 'duration': 0.86}, {'end': 705.628, 'text': 'so we we can create a button.', 'start': 703.307, 'duration': 2.321}, {'end': 716.914, 'text': 'if we go back to where the hell were we right here and click next, we can use this, this uh, fb login button and then provide some attributes.', 'start': 705.628, 'duration': 11.286}, {'end': 721.438, 'text': 'Now, scope is going to be basically the permissions that we want.', 'start': 716.995, 'duration': 4.443}, {'end': 725.622, 'text': "And these are identical to, let's see, these right here.", 'start': 721.619, 'duration': 4.003}, {'end': 728.805, 'text': 'So you can see we can request email and user birthday and all that.', 'start': 725.682, 'duration': 3.123}, {'end': 739.697, 'text': "Okay, so we put that in there, and then we have an onLogin attribute that's going to call a function called checkLoginState, okay, once we do that.", 'start': 729.491, 'duration': 10.206}, {'end': 746.241, 'text': "And we're going to create that function and then use that FB object and call getLoginStatus.", 'start': 740.298, 'duration': 5.943}], 'summary': 'Developing authentication process using fb login button and permissions', 'duration': 82.321, 'max_score': 663.92, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/gXux8b3wcYw/pics/gXux8b3wcYw663920.jpg'}, {'end': 841.56, 'src': 'heatmap', 'start': 760.138, 'weight': 0.807, 'content': [{'end': 767.005, 'text': "Okay And for now, we'll just keep public profile and email.", 'start': 760.138, 'duration': 6.867}, {'end': 770.428, 'text': 'And we want to create this check login state.', 'start': 767.746, 'duration': 2.682}, {'end': 771.87, 'text': 'So we can get that from here.', 'start': 770.508, 'duration': 1.362}, {'end': 776.154, 'text': "And we're going to go ahead and put that in our script tags.", 'start': 771.89, 'duration': 4.264}, {'end': 783.604, 'text': "Okay And then that's going to call FB get login status.", 'start': 780.083, 'duration': 3.521}, {'end': 788.284, 'text': "And then it's going to call status change callback again, which is this here.", 'start': 784.604, 'duration': 3.68}, {'end': 789.345, 'text': 'All right.', 'start': 789.065, 'duration': 0.28}, {'end': 791.145, 'text': "So let's save this and see what we get.", 'start': 789.385, 'duration': 1.76}, {'end': 794.806, 'text': 'Okay So we have a little login button.', 'start': 791.165, 'duration': 3.641}, {'end': 801.367, 'text': "If we click it, it's going to say social auth will receive your public profile and email address.", 'start': 794.966, 'duration': 6.401}, {'end': 812.581, 'text': "Now, if we wanted to add to this and say user birthday, We'll go back and reload and click it again.", 'start': 802.207, 'duration': 10.374}, {'end': 821.105, 'text': 'Now this right here, Submit for Login Review, it says some of the permissions below have not been approved for use by Facebook.', 'start': 813.421, 'duration': 7.684}, {'end': 824.126, 'text': 'So what we would have to do is go to this link here.', 'start': 821.845, 'duration': 2.281}, {'end': 827.948, 'text': 'and do some stuff.', 'start': 826.466, 'duration': 1.482}, {'end': 829.709, 'text': 'So make social auth public.', 'start': 828.008, 'duration': 1.701}, {'end': 831.971, 'text': "No, we don't want to do that.", 'start': 831.271, 'duration': 0.7}, {'end': 834.353, 'text': 'We want to submit items for approval.', 'start': 831.991, 'duration': 2.362}, {'end': 841.56, 'text': 'So automatically, public profile, email, and user friends are approved automatically.', 'start': 835.174, 'duration': 6.386}], 'summary': 'Creating a login process with public profile and email; adding user birthday requires facebook approval.', 'duration': 81.422, 'max_score': 760.138, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/gXux8b3wcYw/pics/gXux8b3wcYw760138.jpg'}, {'end': 841.56, 'src': 'embed', 'start': 813.421, 'weight': 4, 'content': [{'end': 821.105, 'text': 'Now this right here, Submit for Login Review, it says some of the permissions below have not been approved for use by Facebook.', 'start': 813.421, 'duration': 7.684}, {'end': 824.126, 'text': 'So what we would have to do is go to this link here.', 'start': 821.845, 'duration': 2.281}, {'end': 827.948, 'text': 'and do some stuff.', 'start': 826.466, 'duration': 1.482}, {'end': 829.709, 'text': 'So make social auth public.', 'start': 828.008, 'duration': 1.701}, {'end': 831.971, 'text': "No, we don't want to do that.", 'start': 831.271, 'duration': 0.7}, {'end': 834.353, 'text': 'We want to submit items for approval.', 'start': 831.991, 'duration': 2.362}, {'end': 841.56, 'text': 'So automatically, public profile, email, and user friends are approved automatically.', 'start': 835.174, 'duration': 6.386}], 'summary': 'Submit items for approval to use public profile, email, and user friends on facebook.', 'duration': 28.139, 'max_score': 813.421, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/gXux8b3wcYw/pics/gXux8b3wcYw813421.jpg'}, {'end': 977.353, 'src': 'embed', 'start': 948.331, 'weight': 7, 'content': [{'end': 949.431, 'text': "So we'll just say continue.", 'start': 948.331, 'duration': 1.1}, {'end': 955.193, 'text': 'And now if you look down here, it says logged in and authenticated.', 'start': 950.307, 'duration': 4.886}, {'end': 964.684, 'text': "So what's happening is it's calling the change callback here, and it's seeing that we're connected, and it's just console logging this.", 'start': 957.175, 'duration': 7.509}, {'end': 967.087, 'text': 'Okay, so we can now log in.', 'start': 965.545, 'duration': 1.542}, {'end': 971.289, 'text': "And if I were to click this again, it's just going to kind of flash.", 'start': 968.447, 'duration': 2.842}, {'end': 974.951, 'text': "Now, you're going to want to hide this if they're logged in.", 'start': 971.409, 'duration': 3.542}, {'end': 977.353, 'text': "And I'll show you how we can do that in a minute.", 'start': 974.991, 'duration': 2.362}], 'summary': 'Demonstration of authentication process and logging in, with plans to hide interface when user is logged in.', 'duration': 29.022, 'max_score': 948.331, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/gXux8b3wcYw/pics/gXux8b3wcYw948331.jpg'}], 'start': 469.938, 'title': 'Setting up local host server and implementing facebook login in html', 'summary': 'Explains setting up a local host server using xampp on a windows system, creating a new directory, and creating an index.html file. it also demonstrates implementing a facebook login in html, including checking login status, requesting permissions, and dealing with the review and approval process, leading to successful authentication and logging in.', 'chapters': [{'end': 518.83, 'start': 469.938, 'title': 'Setting up local host server', 'summary': 'Explains the process of setting up a local host server using xampp on a windows system, creating a new directory, and creating an index.html file.', 'duration': 48.892, 'highlights': ['Using XAMPP on Windows to set up a local host server.', 'Creating a new directory in HD docs and navigating into it.', 'Creating an index.html file in the new directory.']}, {'end': 974.951, 'start': 519.933, 'title': 'Implementing facebook login in html', 'summary': 'Demonstrates the process of implementing a facebook login in html, including checking login status, requesting permissions, and dealing with the review and approval process, leading to successful authentication and logging in.', 'duration': 455.018, 'highlights': ['The process involves checking the login status using FB.getLoginStatus and creating a status change callback to handle the response, allowing the system to determine if the user is logged in or not.', 'The implementation includes requesting permissions, such as public profile and email, using the FB login button and defining the check login state function to handle the login status change callback.', 'The review and approval process for additional permissions, such as user birthday, involves filling out a form and providing a screencast file demonstrating the usage of the permissions, leading to successful authentication and logging in.']}], 'duration': 505.013, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/gXux8b3wcYw/pics/gXux8b3wcYw469938.jpg', 'highlights': ['Setting up a local host server using XAMPP on Windows.', 'Creating a new directory in HD docs and navigating into it.', 'Creating an index.html file in the new directory.', 'Checking the login status using FB.getLoginStatus and creating a status change callback.', 'Requesting permissions like public profile and email using the FB login button.', 'Defining the check login state function to handle the login status change callback.', 'Completing the review and approval process for additional permissions.', 'Leading to successful authentication and logging in.']}, {'end': 1664.931, 'segs': [{'end': 1026.103, 'src': 'embed', 'start': 974.991, 'weight': 2, 'content': [{'end': 977.353, 'text': "And I'll show you how we can do that in a minute.", 'start': 974.991, 'duration': 2.362}, {'end': 981.696, 'text': 'But I do want to add a little bit of style to this application.', 'start': 977.993, 'duration': 3.703}, {'end': 983.217, 'text': "So we're going to use Bootstrap.", 'start': 981.796, 'duration': 1.421}, {'end': 992.606, 'text': "I'm just going to go to boot swatch which will give us kind of a customized version and let's grab this right here.", 'start': 984.099, 'duration': 8.507}, {'end': 1000.952, 'text': "It has the Facebook blue so we'll just say download and then grab this link here and let's go to our index file.", 'start': 992.626, 'duration': 8.326}, {'end': 1004.715, 'text': "And I'm just going to paste that in here.", 'start': 1003.234, 'duration': 1.481}, {'end': 1006.355, 'text': 'All right.', 'start': 1004.735, 'duration': 1.62}, {'end': 1008.156, 'text': 'And then I want to get a nav bar.', 'start': 1006.475, 'duration': 1.681}, {'end': 1010.417, 'text': "So I'm going to go to getbootstrap.com.", 'start': 1008.176, 'duration': 2.241}, {'end': 1013.558, 'text': 'If you guys watch a lot of my videos, you know the drill.', 'start': 1010.617, 'duration': 2.941}, {'end': 1015.079, 'text': 'Getting started.', 'start': 1014.238, 'duration': 0.841}, {'end': 1018.02, 'text': 'Examples Starter template.', 'start': 1016.039, 'duration': 1.981}, {'end': 1018.74, 'text': 'Control U.', 'start': 1018.06, 'duration': 0.68}, {'end': 1021.321, 'text': "And I'm going to grab this nav here.", 'start': 1018.74, 'duration': 2.581}, {'end': 1023.842, 'text': 'All right.', 'start': 1021.341, 'duration': 2.501}, {'end': 1026.103, 'text': "We're going to go put this down here.", 'start': 1023.882, 'duration': 2.221}], 'summary': 'Using bootstrap to style the application with a customized version and adding a navigation bar.', 'duration': 51.112, 'max_score': 974.991, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/gXux8b3wcYw/pics/gXux8b3wcYw974991.jpg'}, {'end': 1240.317, 'src': 'embed', 'start': 1210.902, 'weight': 1, 'content': [{'end': 1217.93, 'text': 'So now what I want to do is create a function to show and hide things depending on our login state.', 'start': 1210.902, 'duration': 7.028}, {'end': 1227.342, 'text': "OK, so let's go down at the bottom here and let's say function set elements.", 'start': 1218.671, 'duration': 8.671}, {'end': 1234.195, 'text': "and let's put in here it's going to take in a parameter if we're logged in or not.", 'start': 1230.354, 'duration': 3.841}, {'end': 1235.676, 'text': 'so true or false.', 'start': 1234.195, 'duration': 1.481}, {'end': 1240.317, 'text': "so let's call this is logged in and then we're just going to check for it.", 'start': 1235.676, 'duration': 4.641}], 'summary': 'Create function to show/hide elements based on login state.', 'duration': 29.415, 'max_score': 1210.902, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/gXux8b3wcYw/pics/gXux8b3wcYw1210902.jpg'}, {'end': 1664.931, 'src': 'embed', 'start': 1630.708, 'weight': 0, 'content': [{'end': 1631.409, 'text': 'Refresh that.', 'start': 1630.708, 'duration': 0.701}, {'end': 1635.372, 'text': 'So we can say slash me, and then we can add some fields.', 'start': 1632.129, 'duration': 3.243}, {'end': 1637.734, 'text': "So let's say FB.API.", 'start': 1636.213, 'duration': 1.521}, {'end': 1644.779, 'text': "And then in here we'll say slash me because we're authenticated.", 'start': 1640.476, 'duration': 4.303}, {'end': 1645.96, 'text': 'It knows who we are.', 'start': 1644.839, 'duration': 1.121}, {'end': 1655.508, 'text': "And then we're going to attach the fields fields parameter and set that to name and email.", 'start': 1646.541, 'duration': 8.967}, {'end': 1659.509, 'text': 'All right.', 'start': 1659.269, 'duration': 0.24}, {'end': 1662.93, 'text': "And then it's going to take a second parameter of a callback.", 'start': 1659.689, 'duration': 3.241}, {'end': 1664.931, 'text': "So I'm going to say function.", 'start': 1663.53, 'duration': 1.401}], 'summary': "Using fb.api, attach fields 'name' and 'email' for authenticated user.", 'duration': 34.223, 'max_score': 1630.708, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/gXux8b3wcYw/pics/gXux8b3wcYw1630708.jpg'}], 'start': 974.991, 'title': 'Styling and implementing functions', 'summary': 'Demonstrates styling an application using bootstrap, modifying web page style, implementing javascript function to show/hide elements based on login state, and implementing facebook login/logout functionality with event handlers and accessing graph api.', 'chapters': [{'end': 1067.116, 'start': 974.991, 'title': 'Styling application with bootstrap', 'summary': 'Demonstrates styling an application using bootstrap by adding a customized version and a navigation bar with specific links and classes.', 'duration': 92.125, 'highlights': ['The chapter demonstrates adding a customized version of Bootstrap using Bootswatch, specifically the Facebook blue theme.', 'It shows the process of adding a navigation bar from getbootstrap.com with specific links and classes.', 'The tutorial also covers modifying the navigation bar by adjusting classes and adding a button.']}, {'end': 1309.366, 'start': 1067.136, 'title': 'Web page styling and javascript function', 'summary': 'Involves making style modifications and implementing a javascript function to show or hide elements on a web page based on the login state, including giving specific ids and adjusting display properties.', 'duration': 242.23, 'highlights': ['Implemented ID for a button and adjusted the style to move it down using margin top. Implemented ID for a button and adjusted the style to move it down using margin top.', "Set an ID for heading and added a message 'log in to view your profile' with plans to manipulate it through JavaScript. Set an ID for heading and added a message 'log in to view your profile' with plans to manipulate it through JavaScript.", "Configured the profile div to be hidden by default using a style display property of 'none'. Configured the profile div to be hidden by default using a style display property of 'none'.", "Developed a JavaScript function 'set elements' to handle displaying or hiding elements based on the login state, using specific IDs and adjusting display properties. Developed a JavaScript function 'set elements' to handle displaying or hiding elements based on the login state, using specific IDs and adjusting display properties."]}, {'end': 1664.931, 'start': 1309.406, 'title': 'Implementing facebook login and logout functionality', 'summary': 'Explains the process of implementing a facebook login and logout functionality, including setting elements based on login status, adding event handlers for log out, and accessing the graph api to retrieve user information.', 'duration': 355.525, 'highlights': ["Setting elements based on login status The code demonstrates setting elements to be displayed or hidden based on the user's login status.", 'Adding event handlers for log out The process includes adding an event handler for the log out functionality, ensuring that the action triggers the log out function when clicked.', 'Accessing the Graph API to retrieve user information The chapter illustrates how to access the Graph API to retrieve user information such as name and email after authentication.']}], 'duration': 689.94, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/gXux8b3wcYw/pics/gXux8b3wcYw974991.jpg', 'highlights': ['The chapter illustrates how to access the Graph API to retrieve user information such as name and email after authentication.', "Developed a JavaScript function 'set elements' to handle displaying or hiding elements based on the login state, using specific IDs and adjusting display properties.", 'The tutorial also covers modifying the navigation bar by adjusting classes and adding a button.', 'The chapter demonstrates adding a customized version of Bootstrap using Bootswatch, specifically the Facebook blue theme.']}, {'end': 2467.28, 'segs': [{'end': 1698.784, 'src': 'embed', 'start': 1665.371, 'weight': 2, 'content': [{'end': 1668.292, 'text': "And that's going to give us a response from that call.", 'start': 1665.371, 'duration': 2.921}, {'end': 1669.472, 'text': 'All right.', 'start': 1668.312, 'duration': 1.16}, {'end': 1674.814, 'text': "And then here, let's check to make sure there's a response and that there's no error.", 'start': 1669.733, 'duration': 5.081}, {'end': 1684.878, 'text': "So we can say if response and there's no response dot error, then we can continue on with it.", 'start': 1674.874, 'duration': 10.004}, {'end': 1688.859, 'text': "So for now, let's just do a console log.", 'start': 1685.878, 'duration': 2.981}, {'end': 1692.281, 'text': 'the response.', 'start': 1690.8, 'duration': 1.481}, {'end': 1698.784, 'text': "so we'll save that and then let's go back and reload and down here.", 'start': 1692.281, 'duration': 6.503}], 'summary': 'Check response for errors before continuing.', 'duration': 33.413, 'max_score': 1665.371, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/gXux8b3wcYw/pics/gXux8b3wcYw1665371.jpg'}, {'end': 1785.192, 'src': 'embed', 'start': 1735.837, 'weight': 0, 'content': [{'end': 1737.537, 'text': "Oh, it's just birthday, not user.", 'start': 1735.837, 'duration': 1.7}, {'end': 1741.178, 'text': "That's the name of the permission, but the actual field is just birthday.", 'start': 1737.997, 'duration': 3.181}, {'end': 1742.112, 'text': 'All right.', 'start': 1741.852, 'duration': 0.26}, {'end': 1742.692, 'text': 'And there it is.', 'start': 1742.172, 'duration': 0.52}, {'end': 1748.396, 'text': "Cool Now we want to output that profile information that we're fetching.", 'start': 1743.273, 'duration': 5.123}, {'end': 1750.577, 'text': 'So we could do that here.', 'start': 1748.916, 'duration': 1.661}, {'end': 1753.058, 'text': "But what I'm going to do is create another function for that.", 'start': 1750.737, 'duration': 2.321}, {'end': 1759.922, 'text': "So we're going to call that build profile and we're going to pass along the response.", 'start': 1753.318, 'duration': 6.604}, {'end': 1762.443, 'text': "OK And then we'll just create that right here.", 'start': 1760.442, 'duration': 2.001}, {'end': 1765.045, 'text': "We'll say function build profile.", 'start': 1762.684, 'duration': 2.361}, {'end': 1773.245, 'text': "And for the response that's passed in, we're going to call that user because that's essentially what it is.", 'start': 1768.083, 'duration': 5.162}, {'end': 1776.887, 'text': "And then we're going to create a variable called profile.", 'start': 1773.986, 'duration': 2.901}, {'end': 1781.67, 'text': "And I'm going to use a template string.", 'start': 1777.728, 'duration': 3.942}, {'end': 1785.192, 'text': 'So these are actually back ticks to the left of your number one key.', 'start': 1781.69, 'duration': 3.502}], 'summary': 'Creating a function to build and output profile information.', 'duration': 49.355, 'max_score': 1735.837, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/gXux8b3wcYw/pics/gXux8b3wcYw1735837.jpg'}, {'end': 2021.445, 'src': 'embed', 'start': 1977.162, 'weight': 3, 'content': [{'end': 1986.508, 'text': "so let's see he's talking about that.", 'start': 1977.162, 'duration': 9.346}, {'end': 1991.31, 'text': 'uh, user dot, location dot name.', 'start': 1986.508, 'duration': 4.802}, {'end': 2000.833, 'text': 'Oh, you know what it is?', 'start': 2000.112, 'duration': 0.721}, {'end': 2007.058, 'text': 'Since we added a new field that needs a permission, we actually need to log back in.', 'start': 2000.933, 'duration': 6.125}, {'end': 2015.362, 'text': "so now, if we go ahead and we click login, it's going to now ask us to share the city or the location and continue,", 'start': 2008.118, 'duration': 7.244}, {'end': 2017.483, 'text': 'and now we can get the data all right.', 'start': 2015.362, 'duration': 2.121}, {'end': 2021.445, 'text': "so we're pulling this data from my facebook profile.", 'start': 2017.483, 'duration': 3.962}], 'summary': 'New field added requires permission for location data access from facebook profile.', 'duration': 44.283, 'max_score': 1977.162, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/gXux8b3wcYw/pics/gXux8b3wcYw1977162.jpg'}, {'end': 2467.28, 'src': 'embed', 'start': 2441.448, 'weight': 5, 'content': [{'end': 2447.331, 'text': "There's even documentation on how to implement it through Angular and React and all that stuff.", 'start': 2441.448, 'duration': 5.883}, {'end': 2455.134, 'text': 'All right, so hopefully this gave you a little bit of insight as to how everything works with the Facebook API and login.', 'start': 2447.931, 'duration': 7.203}, {'end': 2456.955, 'text': 'All right, so thanks for watching, guys.', 'start': 2455.575, 'duration': 1.38}, {'end': 2459.676, 'text': "If you're not subscribed, please do so if you liked this.", 'start': 2457.015, 'duration': 2.661}, {'end': 2465.479, 'text': "And also leave a like, leave a dislike if you didn't, and leave some feedback.", 'start': 2460.617, 'duration': 4.862}, {'end': 2467.28, 'text': 'And I will see you next time.', 'start': 2466.199, 'duration': 1.081}], 'summary': 'The video provides insight on implementing facebook api through angular and react, and encourages subscriptions and feedback.', 'duration': 25.832, 'max_score': 2441.448, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/gXux8b3wcYw/pics/gXux8b3wcYw2441448.jpg'}], 'start': 1665.371, 'title': 'Api response, user profile, and facebook graph api', 'summary': 'Covers handling api responses, extracting user profile information, and using es6 template strings for efficient html generation. it also discusses the implementation of facebook login, obtaining user location and posts, and making calls to the graph api using javascript sdk, emphasizing the need for permissions and providing insights into working with different features of the facebook api.', 'chapters': [{'end': 1876.369, 'start': 1665.371, 'title': 'Handling api response and building user profile', 'summary': 'Covers handling api responses, extracting user profile information, and using es6 template strings for efficient html generation.', 'duration': 210.998, 'highlights': ['Utilizing an API call to fetch user profile information, including email, user ID, and birthday.', 'Implementing a build profile function to efficiently generate HTML using ES6 template strings for user information display.', 'Checking for response validity and absence of errors before proceeding with the retrieved data from the API call.']}, {'end': 2467.28, 'start': 1876.389, 'title': 'Implementing facebook login and graph api', 'summary': 'Discusses the implementation of facebook login, obtaining user location and posts, and making calls to the graph api using javascript sdk. it also emphasizes the need for permissions and provides insights into working with different features of the facebook api.', 'duration': 590.891, 'highlights': ['Implementing Facebook login and obtaining user location and posts The chapter discusses the implementation of Facebook login, obtaining user location and posts, and making calls to the Graph API using JavaScript SDK.', 'Emphasis on the need for permissions The chapter emphasizes the need for permissions when adding new fields, such as user location and posts, and highlights the requirement to log back in to access the newly added permissions.', 'Insights into working with different features of the Facebook API The chapter provides insights into working with different features of the Facebook API, including its documentation, guides, and examples, as well as implementing it through Angular and React.']}], 'duration': 801.909, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/gXux8b3wcYw/pics/gXux8b3wcYw1665371.jpg', 'highlights': ['Utilizing an API call to fetch user profile information, including email, user ID, and birthday.', 'Implementing a build profile function to efficiently generate HTML using ES6 template strings for user information display.', 'Checking for response validity and absence of errors before proceeding with the retrieved data from the API call.', 'Implementing Facebook login and obtaining user location and posts.', 'Emphasis on the need for permissions when adding new fields, such as user location and posts, and highlights the requirement to log back in to access the newly added permissions.', 'Insights into working with different features of the Facebook API, including its documentation, guides, and examples, as well as implementing it through Angular and React.']}], 'highlights': ['The video introduces the basics of implementing the JavaScript SDK for Facebook login and graph API', 'Different SDKs available for web (JavaScript, PHP) and mobile apps (Swift, iOS, Android, React Native)', 'The process of requesting permissions for user data involves allowing specific permissions for access, such as email and birthday, which can be tested using the Graph API Explorer', 'Visualizing Facebook elements as nodes on a graph and understanding the concept of the Graph API, including making queries and accessing user information using the FB object', 'The generation of access tokens for querying information from the Graph API and the usage of the Graph API Explorer as a testing tool for API queries', 'Setting up a local host server using XAMPP on Windows', 'The chapter illustrates how to access the Graph API to retrieve user information such as name and email after authentication', 'Utilizing an API call to fetch user profile information, including email, user ID, and birthday', 'Implementing a build profile function to efficiently generate HTML using ES6 template strings for user information display', 'Emphasis on the need for permissions when adding new fields, such as user location and posts, and highlights the requirement to log back in to access the newly added permissions']}