Facebooks Graph API gives you the ability to better understand and target content to your user. In this blog we go over some useful implementations of the Graph API that you can use to pull in user data as well as publish on your users behalf.
\nThe first thing you will need to do is implement an authorization interface that will allow your users to Login with there Facebook credentials and grant access to your application to handle the features that we will go over in this blog.
\nYou can refer to this article on setting up a Facebook Login integration: Implement Facebook Social Login
\nWhile implementing the Login detailed in the above blog you can modify the scope included in the Facebook button to request the scopes that we will be using.
\nDefine your Facebook button as follows:
\n<!-- -->This will cause your interface to request additional permissions that may require you to submit your app for review in order for your users to get access to these permissions.
\nAfter your user has authenticated you can capture the users access token for use in your application or backend systems. During the Facebook login in the function function statusChangeCallback you can check the response for an active Facebook session and store the access token from this object as follows:
\nif (response.authResponse) { var access_token = FB.getAuthResponse()['accessToken']; }This token is valid for 2 hours by default and can be upgraded to a long lived with a server-side call as detailed here: Access Tokens for Meta Technologies
\nThe long lived token will be valid for 60 days over which you will be able to access the users data or handle actions that they have granted your app permissions.
\nIf you have stored an access token or long lived token and wish to reinitialize the Facebook JavaScript graph API you can handle this by including the following parameter when making FB.api calls:
\nFB.api( '/me', 'get', { access_token : 'access_token_for_some_user_fetched_from_your_database' } );Getting User Data and Specific Fields
\nThe simplest way to get a copy of the User Profile object is to access the /me endpoint:
\nFB.api('/me', function(response) { });This will this will return the users name and an ID by default. You can add additional field requests to the me endpoint in order to retrieve further data-points for the user. Below we request the users id, name, age_range, bio, birthday, and email using a stored access-token.
\n<!--FB.api( '/me?fields=id,name,about,age_range,bio,birthday,email', 'get', { access_token : },function(response) { //Handle Data Here it will arrive in a Json object in the response } );-->There are additional edge cases which can be accessed through the /me endpoint. A full list can be found here. A below sample details how you can retrieve the videos that the user is tagged in or has uploaded.
\n<!--FB.api( '/me/videos', 'get', { access_token : },function(response) { //Handle Data Here it will arrive in a Json object in the response } );-->Publishing Content to a Users Wall
\nIn order to publish content to a users wall you will have to have requested the publish_actions permission during login which we have done in the first part of this article. You can then access the following endpoint to publish a status post to a users wall:
\n<!--FB.api( '/me/feed?message=', 'Post', { access_token : },function(response) { //Handle Response which will contain a Post ID if successful } );-->Conclusion
\nFacebook offers many options to integrate their API into your site and offers a variety of easy to use SDKs for multiple languages. Check out their documentation for details on the various SDKs and additional graph endpoints.
\n","frontmatter":{"date":"September 29, 2015","updated_date":null,"description":null,"title":"Using Facebook Graph API After Login","tags":["Facebook","Graph API"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1,"src":"/static/eb14899edcba74a8eeaae71d14ebf399/6d161/fb-feat-img-150x150.png","srcSet":"/static/eb14899edcba74a8eeaae71d14ebf399/6d161/fb-feat-img-150x150.png 150w","sizes":"(max-width: 150px) 100vw, 150px"}}},"author":{"id":"Karl Wittig","github":null,"avatar":null}}}},{"node":{"excerpt":"Ever wondered how I work? No? Well, too bad, I'm still gonna write about it. Hello and welcome to a blog post dedicated to me. In this…","fields":{"slug":"/engineering/my-name-is-darryl-this-is-how-work/"},"html":"Ever wondered how I work? No? Well, too bad, I'm still gonna write about it. Hello and welcome to a blog post dedicated to me. In this episode, I'm going to tell you about the tools I use, the things I do to get design inspiration, and what I do when I get stuck on a project.
\nLet's get started!
\nLet's face it, you all know this is the number 1 priority for pretty much everyone you know. Getting my fuel up and over driving my brain... And hope to god I don't break down in the middle of the day.
\nThe Photoshop to my coding skills. Sure, there are other text editors out there but this one really knows what it's doing. I have come to the point where I've installed so many Sublime Packages that I cannot function without them.
\nSome of those packages are:
\nAnd since we're talking about sublime and packages, check out this nifty blog about sublime text and their packages.
\nIf you don't know what is codekit, you should. It compiles everything from SASS to HAML to Coffeescript. It also auto refresh your browser on every save. It... it just works. Bower is also built-in so you have access to over 6,000 components. Best part? No command line usage. Just drop your project files and go.
\nAs a normal human being — and not an extraterrestrial or alien as you tiny humans may call it. I tend to get stuck in a design black hole. It is where every ideas you have is just 1 big blank canvas — or as some artists call it \"modern art\". So what do I do when I don't have any ideas? It's simple really. The first website I go to is dribbble.com. Dribble used to be an invite-only social network for designers. I think they probably opened their doors to everyone. I'm not really sure. But, I am sure that most of the designers there are still the best of the best. What I really like about it is when some designers show how their designs interact with users. With the help of GIF or codepen. Speaking of codepen, That's the place I go to if I am in need of some CSS trickery. At some point, I do get inspiration from that place too. If dribbble can't help my —oh so in the dark— brain, I go to Pinterest. Pinterest have their own design category with a bunch of different sub categories from Graphic Design to UI/UX. The best thing about it? It links back to another site with more design inspiration. YAY for Pinterest.
\nNow that my brain is full of design food. How do I put it to work? There's this thing called a notebook. If you don't know what that is. It looks like this.
Sublime is no doubt the highly preferred light weight editor for developers, it doesn't require major installation space and working with it is just plain fun. The goal of this blog is to help you set-up the basic extensions that are required while working with Sublime: Package Control, a professional, sharp looking theme pack, and a core feature of Sublime, \"Goto Everywhere\". I am using a Mac, but the concept also works well in Windows, check the corresponding shortcut online, and it should be an easy and smooth process.
\nBefore marching forward, make sure Sublime Text Editor 3 is properly installed, if you haven't installed it yet, you can download it here.
\nStill with me? Awesome! Let's get started. First of all, the most amazing thing about Sublime is the diverse collection of packages you can install. The packages vary from big ones such as Git and SublimetoCodeIntel to small handy widgets like color picker and path auto fill. Keep checking and digging for the most useful packages for yourself is a very important part for your daily coding with Sublime. Therefore, first things first, let's install the Package Control.
\n\nPress
\nctrl + `(Normally the one under Esc)Then paste the code from above link into your console, it could be confusing to paste a big graph of code into your sublime python console, but it does work, so Let's do it.
\nNow try pressing
\nCmd + Shift + pThen type \"Install Package\", you should see it now:
\n2. Theme
\nPrior to installing any functional package, let's make sublime even prettier, let's search for a theme!
\nYou should see a big list of themes right now, you can first search on the internet to have some previews of the themes, pick a good color scheme that you like and then search for it here. What I would suggest is the one I am using it, is called \"Theme - itg.flat\"
\nAfter installing your preferred theme, the font and color scheme for sublime may have already been updated. But it doesn't quiet look like what you have seen from elsewhere does it? It's because you also need to update the UI preferences for sublime, for itg.flat it will give you a more flat look after the update.
\nNavigate to:
\nWhat this file does is actually overwrite the settings in the default-setting JSON file, if you mess up with this user file, just delete them to recover back to the original settings. So feel free to play around with it, from here you can define the settings from your theme provider's guidance, here I will post mine as a sample
\n{\n "color_scheme": "Packages/Theme - itg.flat/itg.dark.tmTheme",\n "font_size": 14,\n "highlight_line": true,\n "highlight_modified_tabs": true,\n "theme": "itg.flat.dark.sublime-theme"\n}Please note JSON format is significant to Sublime Settings, when you are not sure about it, check it with an online JSON validator. Now with this step done, you will have a delightful working environment to write your code in:
\n3. Goto Everywhere
\nOne of the most awesome features provided by sublime is called \"Goto Everywhere\", to me it is more like a \"Find Everything\". Once you get used to it, it will boost your productivity incredibly by saving enormous amount of time on finding stuff. Here is a brief list of its most common usage purpose:
\nTo trigger this feature, press key combination:
\nCmd + pThen for different purpose you just press different buttons to trigger the function,
\n: then input the number of line you want to jump into@, then you will see a list of options automatically show up. Navigate through or directly input the symbol you are looking for, this is most commonly used by search for HTML ids and classnames.So far I have briefly covered the essential features sublime provides.In the next blog of this series I will explain how to make your work even easier by utilizing sublime Project, Snippet and Macro.\nUntil then, Adios!!!
\n","frontmatter":{"date":"September 15, 2015","updated_date":null,"description":"Getting started with one of the lightweight Code Editor Sublime Text and it's package control and shortcut commends","title":"Beginner's Guide for Sublime Text 3","tags":["SublimeText","CodeEditor"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1,"src":"/static/fe6e52be480d783d993428df72436141/7d145/Beginner-Guide-Sublime-Text.png","srcSet":"/static/fe6e52be480d783d993428df72436141/69585/Beginner-Guide-Sublime-Text.png 200w,\n/static/fe6e52be480d783d993428df72436141/497c6/Beginner-Guide-Sublime-Text.png 400w,\n/static/fe6e52be480d783d993428df72436141/7d145/Beginner-Guide-Sublime-Text.png 610w","sizes":"(max-width: 610px) 100vw, 610px"}}},"author":{"id":"Team LoginRadius","github":"LoginRadius","avatar":null}}}},{"node":{"excerpt":"I am here to tell you that Facebook, Google, Twitter, or LinkedIn aren’t going to be happy when they find out that you changed their icon…","fields":{"slug":"/engineering/social-network-branding-guidelines/"},"html":"I am here to tell you that Facebook, Google, Twitter, or LinkedIn aren’t going to be happy when they find out that you changed their icon color to green. But, hey at least you didn’t distort the logo.
\nHello and welcome to another segment of me telling you things that you need to know but will ignore at some point. Let’s get started.
\nSocial Login and Social Sharing are everywhere. Some people even combine it with with their User Registration. There’s no surprise that on every website you go to, you’ll see either well designed social icons or just plain ugliness. We can’t blame them, they want their icons to be unique and eye catching.
\nBut, the universe is full of holes inside an “A” whom sometimes destroy a thing of beauty.
\nQuick, somebody call 911!
\nTwitter branding is a little bit complicated. Probably because they had multiple drastic changes in their logo design.
\n
On Google+ (yes “ + “ not “plus“), they prefer that you don’t change or remake their icon. But if you must, you can style it to match your design, as long as you don’t...
\nIf you’re using the icon with the title, You should use “Google” without the plus (word and sign), because… well… that’s redundant.
\nLinkedIn is kind of ridiculous with their branding guidelines. They still have the same drill with no distorting or changing the color and so forth. But there’s one thing you won’t expect, you cannot change the radius or the box.
We’re all going to LinkedIn Jail!
\nKeep it to a minimal radius, like 2px. That means no circle, square, iOS style rounded icons — hold the phone, did LinkedIn just violate their own branding guidelines? Tsk tsk, LinkedIn. Breaking your own rules, eh?
\nWhat about the other 30+ social icons? Well, by now you’ve probably seen the pattern here. No? Well, let me break it down for you.
\nBut, who am I to tell you what to do? Just do what makes you happy and hope to god they don’t catch you. Keep in mind too that these branding guidelines are part of your user experience and affect your users impression of the site.
\nLet me know in the comments if there’s a specific guideline that I miss.
\n","frontmatter":{"date":"September 08, 2015","updated_date":null,"description":null,"title":"Social Network Branding Guidelines","tags":["Social","SocialLogin","Branding"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1,"src":"/static/5e82ea46808325c644771116384e3aad/630fb/social-network-branding-300x300.png","srcSet":"/static/5e82ea46808325c644771116384e3aad/69585/social-network-branding-300x300.png 200w,\n/static/5e82ea46808325c644771116384e3aad/630fb/social-network-branding-300x300.png 300w","sizes":"(max-width: 300px) 100vw, 300px"}}},"author":{"id":"Team LoginRadius","github":"LoginRadius","avatar":null}}}},{"node":{"excerpt":"Index is a typical way to speed-up queries in normal database system. There is no difference between MongoDB and a document-based database…","fields":{"slug":"/engineering/index-in-mongodb/"},"html":"Index is a typical way to speed-up queries in normal database system. There is no difference between MongoDB and a document-based database system. This article gives insight about the index in MongoDB, for query optimization.
\n_id is an ObjectId object, 12-byte BSON type that guarantees uniqueness within the collection. The ObjectId is generated based on timestamp, machine ID, process ID, and a process-local incremental counter.
\nFor a single-field index and sort operations, the sort order (i.e. ascending or descending) of the index key does not matter because MongoDB can traverse the index in either direction. The value of index is the type of index. For example, 1 indicates ascending order and -1 specifies the descending order.
\ndb.friends.createIndex( { "name" : 1 } )Compound Field
\nThe order of fields listed in a compound index has significance. For instance, if a compound index consists of { userid: 1, score: -1 }, the index sorts first by userid and then, within each userid value, sorts by score.
\ndb.products.createIndex( { "item": 1, "stock": 1 } )Multiple Key
\nMongoDB uses multiple index to index the content in an array. MongoDB creates separate index entries for every element of the array. You do not need explicitly create multiple key.
\nA collection can have at most one text index.
\nPerformance cost for text index:
\ntext indexes can be large. They contain one index entry for each unique post-stemmed word in each indexed field for each document inserted.
\ntext indexes will impact insertion throughput because MongoDB must add an index entry for each unique post-stemmed word in each indexed field of each new source document.
db.reviews.createIndex( { comments: "text" } )Query content by its hashed value. The hash is a function to computed by its value. The hashed value is designed to be distinct value. The one advantage is it is so quick, which take O(1) at most but by contract the normal binary search tree will take O(Log(N)). Hash will be theoretically quicker than normal binary search tree implementation. But the disadvantage is hash index performing range search will be extremely slowly than normal index.
\nThis an example in python to build a hash index
\ndb.active.createIndex( { a: "hashed" } )Hey there, spider. It’s me again, your amazing blog writer, Darryl. Have you ever wanted to select the second or third child of an element without using CSS3 nth-child —which aren’t working on grandpa browsers. Let’s face it, a lot of human beings are afraid of change that they tend to stick to what they know.
\nI’m not a pro “support the older browser” kind of guy because I still think that people won’t upgrade if we keep spoiling them. But for the sake of knowing a workaround I’m gonna teach you how to ab-use sibling selectors for better compatibility.
\nSibling selectors consists of a squiggly line ( ~ ) and a plus sign ( + ).
\nSquiggly line selects all the siblings below that element where you use that sign. Plus sign select only the next sibling.
\nHave you ever seen our support docs?
\nWould you believe me if I tell you that from “Getting Started” to the “Social Sharing” section, they are all siblings with the same class and everything… well except for the css code and the search, we’ll get to that later.
\nAnyhoo, how did I do it? It’s easy, since I know that the sibling I want to get was the first child. I just used the :first child pseudo element to style the first element.
\n.sibling:first-child {\n/*styles for first sibling*/\n}Then again, that’s not a sibling selector, that’s a pseudo element. Calm your feets, this is the part where we ab-use those selectors.
\n.sibling:first-child ~ .sibling {\n/*styles for the rest of the sibling*/\n}Why would we do this? This is so it doesn’t add the style for the rest of the sibling to the first-child and vice versa. Less CSS to overwrite and eliminates the use of !important.
\nHow do we get the third child without using :nth-child pseudo element? It’s simple. Get the first child and ab-use your plus sign(+) sibling selector.
\n<div:first-child + div + div {\n/*styles*/\n}The best part is. It’s backwards compatible.
\nWhat about the 12th child? Well, you can just painfully type all those “+ div”.
\nNow, why would we do this? To support IE8, which I don’t like supporting but, maybe you do.
\nKeep experimenting with this technique and be free from any restrictions of IE8.
\n","frontmatter":{"date":"August 18, 2015","updated_date":null,"description":null,"title":"How to ab-USE CSS2 sibling selectors","tags":["Engineering","Selector","CSS"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1,"src":"/static/945890eb5408214619f2dbcdf3da2fcf/7d145/sibling-selectors.png","srcSet":"/static/945890eb5408214619f2dbcdf3da2fcf/69585/sibling-selectors.png 200w,\n/static/945890eb5408214619f2dbcdf3da2fcf/497c6/sibling-selectors.png 400w,\n/static/945890eb5408214619f2dbcdf3da2fcf/7d145/sibling-selectors.png 610w","sizes":"(max-width: 610px) 100vw, 610px"}}},"author":{"id":"Team LoginRadius","github":"LoginRadius","avatar":null}}}}]},"markdownRemark":{"excerpt":"Google has prepared a roadmap to restrict third-party cookies in Chrome. Since 04 January 2024, Chrome has rolled out third-party cookie…","fields":{"slug":"/engineering/identity-impact-of-google-chrome-thirdparty-cookie-restrictions/"},"html":"Google has prepared a roadmap to restrict third-party cookies in Chrome. Since 04 January 2024, Chrome has rolled out third-party cookie restrictions for 1% of stable clients and 20% of Canary, Dev, and Beta clients.
\nWhat does it mean for user authentication?
\nOn one hand, Google believes third-party cookies are widely used for cross-site tracking, greatly affecting user privacy. Hence, Google wants to phase out (or restrict) supporting third-party cookies in Chrome by early Q2 2025 (subject to regulatory processes).
\nOn the other hand, Google introduced Privacy Sandbox to support the use cases (other than cross-site tracking and advertising) previously implemented using third-party cookies.
\nIn this article, we’ll discuss:
\nThird-party cookie restrictions affect user authentication in three ways, as follows.
\nIf your website or app uses an external Identity Provider (IdP) — like LoginRadius, the IdP sets a third-party cookie when the user authenticates on your app.
\nIf you have multiple apps across domains within your organization and authentication is handled using an IdP (internal or external) with web SSO, you already use third-party cookies to facilitate seamless access for each user using a single set of credentials.
\nIf you have implemented web SSO with one primary domain and multiple sub-domains of the primary domain, third-party cookie restrictions may not apply. For now, Google doesn’t consider the cookies set by sub-domains as third-party cookies, although this stance may change in the future.
\nFor example, you have apps at example.com, travel.example.com, stay.example.com, and web SSO is handled by auth.example.com. In this case, third-party cookie restrictions don’t apply.
Federated SSO is similar to, albeit different from, web SSO. It can handle multiple IdPs and applications—aka., Service Providers (SPs)—spanning multiple organizations. It can also implement authentication scenarios that are usually implemented through web SSO.
\nUsually, authentication is handled on a separate pop-up or page when the user wants to authenticate rather than on the application or website a user visits.
\nFor example, you already use federated SSO if you facilitate authentication for a set of apps through multiple social identity providers as well as traditional usernames and passwords.
\n\n\nNote: It is also possible to store tokens locally, not within cookies. In this case, third-party cookie restrictions won’t affect token-based authentication. However, the restrictions still affect authentication where tokens are stored within third-party cookies (a common and secure method).
\n
Google has been developing alternative features and capabilities for Chrome to replace third-party cookies as part of its Privacy Sandbox for Web initiative.
\nSpecific to authentication, Google recommends the following:
\nCHIPS are a restricted way of setting third-party cookies on a top-level site without making them accessible on other top-level sites. Thus, they limit cross-site tracking and enable specific cross-site functionalities, such as maps, chat, and payment embeds.
\nFor example, a user visits a.com with a map embed from map-example.com, which can set a partitioned cookie that is only accessible on a.com.
If the user visits b.com with a map embed from map-example.com, it cannot access the partitioned cookie set on a.com. It has to create a separate partitioned cookie specific to b.com, thus blocking cross-site tracking yet allowing limited cross-site functionality.
You should specifically opt for partitioned cookies (CHIPS), which are set with partitioned and secure cookie attributes.
\nIf you’re using an external identity provider for your application, CHIPS is a good option to supplant third-party cookie restrictions.
\nHowever, CHIPS may not be ideal if you have a web SSO or federated SSO implementation. It creates separate partitioned cookies for each application with a separate domain, which can increase complexity and create compatibility issues.
\nWith Storage Access API, you can access the local storage in a third-party context through iframes, similar to when users visit it as a top-level site in a first-party context. That is, it gives access to unpartitioned cookies and storage.
\nStorage Access API requires explicit user approval to grant access, similar to locations, camera, and microphone permissions. If the user denies access, unpartitioned cookies and storage won’t be accessible in a third-party context.
\nIt is most suitable when loading cross-site resources and interactions, such as:
\nVerifying user sessions when allowing interactions on an embedded social post or providing personalization for an embedded video.\nEmbedded documents requiring user verification status to be accessible.
\nAs it requires explicit user approval, it is advisable to use Storage Access API when you can’t implement an identity use case with the other options.
\nWith Related Website Sets, you can declare a primary website and associatedSites for limited purposes to grant third-party cookie access and local storage for a limited number of sites.
Chrome automatically recognizes related website sets declared, accepted, and maintained in this open-source GitHub repository: Related Website Sets
\nIt provides access through Storage Access API directly without prompting for user approval, but only after the user interacts with the relevant iframe.
\nIt is important to declare a limited number of domains in related website sets that are meaningful and used for specific purposes. Google may block or suspend any exploitative use of this feature.
\nThe top-level site can also request approval for specific cross-site resources and scripts to Storage Access API using resuestStorageAccessFor() API.
If you’re using an external identity provider for your web application, you can declare the domain of the identity provider in the related set to ensure limited third-party cookies and storage access to the identity provider, thus ensuring seamless user authentication.
\nRelated Website Sets can also work to supplement third-party cookie restrictions in web SSO and federated SSO if the number of web applications (or domains) is limited.
\nFedCM API enables federated SSO without third-party cookies.
\nWith FedCM API, a user follows these steps for authentication:
\nYou can access a user demo of FedCM here: FedCM.
\nFor more information about implementing federated SSO with FedCM API, go through the FedCM developer guide.
\nFirstly, we’re committed to solving our customers' user identity pain points — and preparing for the third-party cookies phase-out is no different.
\nWe’ll implement the most relevant and widely useful solutions to facilitate a smooth transition for our customers.
\nPlease subscribe to our blog for more information. We’ll update you on how we help with the third-party cookie phase-out.
\nThe proposed changes to phase out third-party cookies and suggested alternatives are evolving as Google has been actively collaborating and discussing changes with the border community.
\nMoreover, browsers like Firefox, Safari, and Edge may approach restricting third-party cookies differently than Google does.
\nFrom LoginRadius, we’ll keep you updated on what we’re doing as a leading Customer Identity and Access Management (CIAM) vendor to prepare for the third-party cookie phase-out.
\nTop-level site: It is the primary site a user has visited.
\nFirst-party cookie: A cookie set by the top-level site.
\nThird-party cookie: A cookie set by a domain other than the top-level site. For example, let’s assume that a user has visited a.com, which might use an embed from loginradius.com to facilitate authentication. If loginradius.com sets a cookie when the user visits a.com, it is called a third-party cookie as the user hasn’t directly visited loginradius.com.