{"componentChunkName":"component---src-templates-blog-list-template-js","path":"/engineering/41","result":{"data":{"allMarkdownRemark":{"edges":[{"node":{"excerpt":"Time Required : less than 10 minutes. Technologies : None. Prerequisites : None. This tutorial will go over how to configure the ‘Actions on…","fields":{"slug":"/engineering/how-to-configure-the-actions-on-google-console-for-google-assistant/"},"html":"

Time Required : less than 10 minutes.

\n

Technologies : None.

\n

Prerequisites : None.

\n

This tutorial will go over how to configure the ‘Actions on Google’ console so that it can be used for your Google Assistant actions/events that can be accessed anywhere the Google Assistant is available from phones to Google Home products.

\n

Steps

\n
    \n
  1. \n

    Create an Actions project and a Dialogflow agent here.

    \n
      \n
    1. Add/import project.\n\n \n \n
      2. \n
    2. Click on Skip(in the upper right corner) choosing a category and click Build -> Actions in the left nav to add your first actions.
      \n\n \n \n
      3. \n
    3. Enter the default text response. This will be the default response for your action until you link your account with LoginRadius and build your customized response. (This will return errors if you leave this empty, even if you handle the response in your code.)\n Time Required: 20 minutes.
      \nTechnologies: Express, Node.js, JavaScript.
      \nPrerequisites:

      \n
        \n
      • Basic knowledge of Express, Node.js, and JavaScript.
        • \n
      • Node.js and npm are installed.
        • \n
      \n

      This tutorial will go over how to build a bot that will respond to pings (i.e. @), and send messages to a chat room. On a high level, the bot will run on an express server, and receive pings via an HTTP endpoint. Responses to pings will be sent synchronously through a payload in the HTTP response, while bot-initiated messages will be sent asynchronously using the Google Hangout Chat API.

      \n
      Outline
      \n
        \n
      1. Environment setup.
        2. \n
      2. Get bot to respond to pings.
        3. \n
      3. Send bot-initiated messages.
        4. \n
      4. Deploy.
        5. \n
      \n
      Environment Setup
      \n

      Create a new project with the file ‘app.js’.
      \nOpen command line/terminal, and navigate to your project directory. Run ‘npm init’, and press enter until package.json is created. Next, install the following dependencies:

      \n
        \n
      • express: npm install express --save
        • \n
      • body-parser:  npm install body-parser --save
        • \n
      • googleapis: npm install googleapis --save
        • \n
      • unirest:  npm install unirest --save
        • \n
      \n

      In ‘app.js’, let’s setup our server:

      \n
      const express = require('express');\nconst bodyParser = require('body-parser');\nconst { google } = require('googleapis');\n\nconst app = express();\n\napp.use(bodyParser.urlencoded({\n  extended: false\n}));\n\napp.use(bodyParser.json());\n\napp.listen(8100, function() {\n  console.log('App listening on port 8100.');\n});
      \n

      Running ‘node app.js’ will now create a local server on port 8100.

      \n
      Responding to Pings
      \n

      The bot will respond to pings through a HTTP POST endpoint. Create one with express:

      \n
      app.post('/', function(req, res) {\n  console.log('someone pinged @');\n\n  if (req.body.type === 'MESSAGE') {\n    return res.json({\n      text: 'sleeping...'\n    });\n  }\n});
      \n

      The bot will respond with the text: ‘sleeping…’.

      \n

      Synchronously responding to messages simply requires us to return a response to Google. The downside to this is the 30 second time limit before Google no longer accepts responses to the request. For instance, this would be a problem if you were building some kind of reminder app; the bot wouldn't be able to synchronously respond after 30 seconds. This is where async responses come in.

      \n
      Bot-initiated Messages
      \n

      To show this, we will have our bot post to a chat room every 1 minute.

      \n

      Sending async messages to Google API requires a Service Account for authentication. Once authenticated, we can make a POST request to a Google API URL that will create a message.

      \n

      So first, create a Google Service Account following these steps. Take the downloaded JSON file and put it in the root directory of your project. Here, we renamed it to googlekeys.json:

      \n
      const gkeys = require('./googlekeys.json');
      \n

      We will be making POST requests using Unirest:

      \n
      const unirest = require('unirest');
      \n

      Now generate a JWT that will be used in our POST request:

      \n
      function getJWT() {\n  return new Promise(function(resolve, reject) {\n    let jwtClient = new google.auth.JWT(\n      gkeys.client_email,\n      null,\n      gkeys.private_key, ['https://www.googleapis.com/auth/chat.bot']\n    );\n\n    jwtClient.authorize(function(err, tokens) {\n      if (err) {\n        console.log('Error create JWT hangoutchat');\n        reject(err);\n      } else {\n        resolve(tokens.access_token);\n      }\n    });\n  });\n}
      \n

      Here is our function for posting messages. ROOM-ID can be found in the URL of the hangout chat room page i.e.: https://chat.google.com/u/0/room/{ROOM-ID}

      \n
      function postMessage(count) {\n  return new Promise(function(resolve, reject) {\n      getJWT().then(function(token) {\n          unirest.post('https://chat.googleapis.com/v1/spaces/' + {ROOM-ID} + '/messages')\n              .headers({\n                  "Content-Type": "application/json",\n                  "Authorization": "Bearer " + token\n              })\n              .send(JSON.stringify({\n                  'text': 'Hello! This is message number ' + count,\n              }))\n              .end(function(res) {\n                  resolve();\n              });\n      }).catch(function(err) {\n          reject(err);\n      });\n  });\n}
      \n

      Finally, add the code that will repeat our post every minute.

      \n
      const timer = require('timers');\n\napp.listen(8100, function() {\n  console.log('App listening on port 8100.');\n\n  let count = 0;\n  timer.setInterval(function() {\n      postMessage(count += 1);\n  }, 60000);\n});
      \n
      Deploy
      \n

      Expose your local server to public (we used ngrok).

      \n

      Login to developer console. Create a new project, and enable Hangout Chat API. Under configuration, set:

      \n
        \n
      • status: live
        • \n
      • bot name (this is how you will add and ping the bot)
        • \n
      • avatar
        • \n
      • description
        • \n
      • functionality: rooms
        • \n
      • connection settings - bot URL:
        • \n
      • permission: everyone in your domain
        • \n
      \n

      Restart your local server, and that’s it! Make sure you have your bot added to the chat room, and you can ping it by sending @. The bot will also post to the chat room every minute.

      \n

      There are a lot of different ways to further extend this bot, such as setting reminders/notifications, making to-do lists, displaying server logs, and interacting with API’s.

      \n

      \n \n \n

      \n","frontmatter":{"date":"June 06, 2018","updated_date":null,"description":null,"title":"Creating a Google Hangout Bot with Express and Node.js","tags":["Express","NodeJs","Hangout"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1,"src":"/static/f62c49828f8a2a1d1483abd689ceb93e/aac8d/hangoutchatimgage2.jpg","srcSet":"/static/f62c49828f8a2a1d1483abd689ceb93e/f836f/hangoutchatimgage2.jpg 200w,\n/static/f62c49828f8a2a1d1483abd689ceb93e/2244e/hangoutchatimgage2.jpg 400w,\n/static/f62c49828f8a2a1d1483abd689ceb93e/aac8d/hangoutchatimgage2.jpg 630w","sizes":"(max-width: 630px) 100vw, 630px"}}},"author":{"id":"Andy Yeung","github":null,"avatar":null}}}},{"node":{"excerpt":"Which character do you consider as the end of line or newline? Most developers will answer \\n (except for front-end developers, they would…","fields":{"slug":"/engineering/eol-end-of-line-or-newline-characters/"},"html":"

      Which character do you consider as the end of line or newline? Most developers will answer \\n (except for front-end developers, they would say: \"</br>tag\" 😊 ). But this is not true, let's understand why.

      \n

      What is an End of Line character:

      \n

      It is a character in a string which represents a line break, which means that after this character, a new line will start. There are two basic new line characters:

      \n

      LF (character : \\n, Unicode : U+000A, ASCII : 10, hex : 0x0a): This is simply the '\\n' character which we all know from our early programming days. This character is commonly known as the ‘Line Feed’ or ‘Newline Character’.

      \n

      CR (character : \\r, Unicode : U+000D, ASCII : 13, hex : 0x0d) : This is simply the 'r' character. This character is commonly known as ‘Carriage Return’.

      \n

      As matter of fact, \\r has also has a different meaning. In older printers, \\r meant moving the print head back to the start of line and \\n meant starting a new line.

      \n

      OS support

      \n

      Unix: Unix systems consider '\\n' as a line terminator. Unix considers \\r as going back to the start of the same line.

      \n

      Mac (up to 9): Older Mac OSs consider '\\r' as a newline terminator but newer OS versions have been made to be more compliant with Unix systems to use '\\n' as the newline.

      \n

      Windows: Windows has a different style of newline, Windows supports the combination of both CR and LF as the newline character - '\\r\\n'.

      \n

      How to check
      \nThere are lots ways to check this. I use Notepad++ as my text editor for this because it is easy to use and is widely used by developers.
      \nNPP show all characters

      \n

      Open any text file and click on the pilcrow (¶) button. Notepad++ will show all of the characters with newline characters in either the CR and LF format. If it is a Windows EOL encoded file, the newline characters of CR LF will appear (\\r\\n). If the file is UNIX or Mac EOL encoded, then it will only show LF (\\n).

      \n

      NPP Extended search

      \n

      Press the key combination of Ctrl + Shift + F and select 'Extended' under the search mode. Now search '\\r\\n' - if you find this at end of every line, it means this is a Windows EOL encoded file. However, if it is '\\n' at the end of every line, then it is a Unix or Mac EOL encoded file.

      \n

      How to convert

      \n

      Let's stick with notepad++ for this, too. Open any file that you would like to convert, click on the Edit menu, scroll down to the EOL conversion option, and select the format that you would like to convert the file to.

      \n

      Reference

      \n\n","frontmatter":{"date":"September 06, 2017","updated_date":null,"description":"Learn what are EOL (End of Line) or LF (Line Feed) or NL (New Line) ascii characters (\\n\\r) and why there are two (\\n\\r) newline characters.","title":"EOL or End of Line or newline ascii character","tags":["Engineering","EOL","LF","Linux","Mac","Windows"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.7699115044247788,"src":"/static/4f4e5464d0975f41f5388d63c602e499/ee604/eol.png","srcSet":"/static/4f4e5464d0975f41f5388d63c602e499/69585/eol.png 200w,\n/static/4f4e5464d0975f41f5388d63c602e499/497c6/eol.png 400w,\n/static/4f4e5464d0975f41f5388d63c602e499/ee604/eol.png 800w,\n/static/4f4e5464d0975f41f5388d63c602e499/f3583/eol.png 1200w,\n/static/4f4e5464d0975f41f5388d63c602e499/e4d72/eol.png 1280w","sizes":"(max-width: 800px) 100vw, 800px"}}},"author":{"id":"Kundan Singh","github":null,"avatar":null}}}},{"node":{"excerpt":"Cocoapod is a package dependency manager for Objective-C and Swift projects with XCode. Those Languages are used to make applications that…","fields":{"slug":"/engineering/what-is-cocoapods-and-installation/"},"html":"

      Cocoapod is a package dependency manager for Objective-C and Swift projects with XCode. Those Languages are used to make applications that run iOS, macOS, watchOS and tvOS. Cocoapods also acts as a coding hub to share your code with other people. That way we as a community of coders don’t have to “re-invent the wheel” to tackle problems that have already been solved.

      \n

      Installing Cocoapods

      \n

      Cocoapods is built on top of Ruby, so you would need to install that in your system before using Cocoapods.
      \nThen, you can install using this command:
      \nsudo gem install cocoapods

      \n

      Using Cocoapods

      \n

      Open Terminal and go to your XCode project directory.
      \nAfterwards, run this command:
      \npod init

      \n

      Then a Podfile is generated, configure the file, like so:

      \n
      platform :ios, '8.0'  \nuse_frameworks!  \ntarget 'MyApp' do  \n pod 'AFNetworking', '~> 2.6'   pod 'ORStackView', '~> 3.0'  \n pod 'SwiftyJSON', '~> 2.3'\nend
      \n

      Where ‘MyApp’ is your application project and the ‘pod’ inside it are the libraries that you want to use! If you need to control which version of those libraries you can manipulate it on the right side of the config.

      \n

      Updating Cocoapods

      \n

      If you want to keep up to date with the codes shared in cocoapods you can run the command:
      \npod update

      \n

      That way any latest bug fixes, enhancement and features on the new version will be downloaded!
      \nTo see which Libraries that you want to utilize, head over to cocoapods and search over there!

      \n

      Personal favorites pods

      \n

      Realm : For Managing Databases in iOS application

      \n

      Alamofire : For All of your Networking Needs

      \n

      Eureka : For Simplified UI and Forms

      \n

      And of course our:
      \nLoginRadiusSDK : For our API Calls to Manage your Login System

      \n","frontmatter":{"date":"September 06, 2017","updated_date":null,"description":null,"title":"Cocoapods : What It Is And How To Install?","tags":["Swift","Objective-C","xcode"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.4184397163120568,"src":"/static/6c62ec58193a579af3f486cb276c6bb8/14b42/cocoapods-orange-on-grey.jpg","srcSet":"/static/6c62ec58193a579af3f486cb276c6bb8/f836f/cocoapods-orange-on-grey.jpg 200w,\n/static/6c62ec58193a579af3f486cb276c6bb8/2244e/cocoapods-orange-on-grey.jpg 400w,\n/static/6c62ec58193a579af3f486cb276c6bb8/14b42/cocoapods-orange-on-grey.jpg 800w,\n/static/6c62ec58193a579af3f486cb276c6bb8/47498/cocoapods-orange-on-grey.jpg 1200w,\n/static/6c62ec58193a579af3f486cb276c6bb8/0e329/cocoapods-orange-on-grey.jpg 1600w,\n/static/6c62ec58193a579af3f486cb276c6bb8/bd694/cocoapods-orange-on-grey.jpg 2338w","sizes":"(max-width: 800px) 100vw, 800px"}}},"author":{"id":"Thompson Sanjoto","github":null,"avatar":null}}}},{"node":{"excerpt":"What is This, and Why Should I Care? NPM is a package manager for javascript. It is used to share and distribute code amongst the coding…","fields":{"slug":"/engineering/node-package-manager-npm/"},"html":"
      \n \n \n What is This, and Why Should I Care?
      \n

      NPM is a package manager for javascript. It is used to share and distribute code amongst the coding community. There are over half a million packages for free developed and shared to help your JavaScript development.

      \n

      To discover packages click here

      \n
      How Do I Install NPM?
      \n

      NPM can easily be installed by going to the node.js website. Just click on the link to download an executable file which will install the package manager for you.

      \n

      (If you have brew on Mac or Chocolatey on Windows installed, it is even easier just run the command:

      \n

      [code]brew install npm[/code]

      \n

      Or

      \n

      [code]choco install nodejs[/code]

      \n
      How Do I Install Packages?
      \n

      Head over here to search for your package. Once you’ve found it, type in your console:

      \n

      [code]npm install -g[/code]

      \n

      Since NPM packages are open-source, be wary that some of the packages may not be built correctly. A good way to tell would be viewing the top of the page for any errors.

      \n

      \n \n \n

      \n
      How Do I Keep My Packages Up-To-Date?
      \n

      To update the npm packages, simply run:

      \n

      [code]npm update -g[/code]

      \n

      This will update all your outdated packages to the latest.

      \n\n\n

      Detail: Emulates a web-server for client-side testing

      \n
      \n\n

      Detail: Assists in setting up a REST APIs to test on your local server

      \n
      \n\n

      Detail: Unit testing for web-development. Very useful in testing “code coverage” (It tells you where your code is not being tested in a nice HTML file)

      \n
      \n\n

      Detail: For existing customers, simplifies calls to our server for easy customizability

      \n
      \n","frontmatter":{"date":"August 04, 2017","updated_date":null,"description":null,"title":"Node Package Manager (NPM)","tags":["NodeJs","NPM"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.5037593984962405,"src":"/static/b1b472805cf24bc9687a374f0e76cb83/ee604/the-guide-to-NPM.png","srcSet":"/static/b1b472805cf24bc9687a374f0e76cb83/69585/the-guide-to-NPM.png 200w,\n/static/b1b472805cf24bc9687a374f0e76cb83/497c6/the-guide-to-NPM.png 400w,\n/static/b1b472805cf24bc9687a374f0e76cb83/ee604/the-guide-to-NPM.png 800w,\n/static/b1b472805cf24bc9687a374f0e76cb83/f3583/the-guide-to-NPM.png 1200w,\n/static/b1b472805cf24bc9687a374f0e76cb83/0dadc/the-guide-to-NPM.png 1500w","sizes":"(max-width: 800px) 100vw, 800px"}}},"author":{"id":"Eric Chan","github":null,"avatar":null}}}},{"node":{"excerpt":"These days SSL is a must-have element for websites, but SSL certificates are costly and range from $30 to $500 per year for a single website…","fields":{"slug":"/engineering/get-your-free-ssl-certificate/"},"html":"

      These days SSL is a must-have element for websites, but SSL certificates are costly and range from $30 to $500 per year for a single website. Don’t fret! You can get a FREE SSL certificate! Through “Let's Encrypt\", a free, automated, and open certificate authority, you will be able to acquire the necessary certificate to enable SSL on your website. Check out the below steps you can follow to get an SSL certificate for your site today.

      \n

      To obtain this certificate, you will first need to prove ownership of the domain. There are two requirements that you need to meet in order to generate a certificate from “Let's Encrypt”:

      \n

      Http-01:
      \nYou will need to setup a directory on your web server's root, and the name of this directory should be “.well-know” and with a “acme-validation” directory included within this. Inside these directories, create a file containing the random string that was provided by the ACME server and this file should serve content which is the random string included in the doc.

      \n

      Sample Structure

      \n
      /.well-known/acme-validation/&amp;lt;random file name provided by ACME&amp;gt;
      \n

      Dns-01:

      \n

      You will need to create a .TXT record on the subdomain _acme-challenge. For instance, if you would like to obtain an SSL for the domain “example.com”, then you will need to setup a subdomain on this domain - _acme-challenge.example.com - and the content of the .TXT record will be a random string provided by the ACME server.

      \n

      Now that you have everything setup, how do you get your FREE SSL? Below, we will go over the various ways to enable SSL for free on your website:

      \n

      1. Certbot : certbot is a Linux utility that is simple yet powerful. This tool doesn't share private keys with any servers, and it keeps your private key on the client that is being used to generate the cert.  You can install certbot with the following command on ubuntu:

      \n
      $ sudo add-apt-repository ppa:certbot/certbot\n$ sudo apt-get update\n$ sudo apt-get install certbot
      \n

      The certbot site has even more details and information for installing this on other systems.

      \n

      Once installed, open the DNS Manager (must do!) and call the following command to get the SSL certificate for your domain.

      \n
      sudo certbot --text --agree-tos --email &amp;lt;YOUR EMAIL ID&amp;gt; -d &amp;lt;YOUR DOMAIN&amp;gt; --manual --preferred-challenges dns --expand --renew-by-default  --manual public-ip-logging-ok certonly
      \n

      This command will request that you add the .TXT record on the subdomain _acme-challenge. Once this is added, simply press any key to generate the SSL certificate. It will show the locations of the certified file.

      \n

      2. Online using https://www.sslforfree.com/ : This is also a non-profit site and you can get SSL without any installation; just follow the steps to set up the ACME compliant site structure. They provide an easy step-by-step guide for generating the SSL certificate. Once you work through the guide, you will be able to download a copy of your certificate and include on your webserver.

      \n

      3. Other ways : There are lots of other ways to get the “Let's Encrypt” SSL. This page contains a list of ACME clients and libraries, so you can choose to work with whichever one that best suits your needs.

      \n","frontmatter":{"date":"July 13, 2017","updated_date":null,"description":null,"title":"Get your FREE SSL Certificate!","tags":["Engineering","SSL"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1,"src":"/static/44e96863451de6352d54342c2dd11bf3/bc59e/letsencrypt.png","srcSet":"/static/44e96863451de6352d54342c2dd11bf3/69585/letsencrypt.png 200w,\n/static/44e96863451de6352d54342c2dd11bf3/497c6/letsencrypt.png 400w,\n/static/44e96863451de6352d54342c2dd11bf3/bc59e/letsencrypt.png 512w","sizes":"(max-width: 512px) 100vw, 512px"}}},"author":{"id":"Kundan Singh","github":null,"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.

      \n

      What does it mean for user authentication?

      \n

      On 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).

      \n

      On 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.

      \n

      In this article, we’ll discuss:

      \n
        \n
      • How is user authentication (identity) affected?
        • \n
      • What is Google offering as part of Privacy Sandbox to support various identity use cases when third-party cookies are phased out?
        • \n
      \n

      How is User Authentication Affected?

      \n

      Third-party cookie restrictions affect user authentication in three ways, as follows.

      \n

      External Identity Providers

      \n

      If 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.

      \n

      Web SSO

      \n

      If 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.

      \n

      If 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.

      \n

      For 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.

      \n

      Federated SSO

      \n

      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.

      \n

      Usually, 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.

      \n

      For 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

      Note: 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
      \n

      Chrome’s Alternatives for Third-Party Cookies

      \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.

      \n

      Specific to authentication, Google recommends the following:

      \n
        \n
      1. Cookies Having Independent Partitioned State (CHIPS)
        2. \n
      2. Storage Access API
        3. \n
      3. Related Website Sets
        4. \n
      4. Federated Credential Management (FedCM) API
        5. \n
      \n

      Cookies Having Independent Partitioned State (CHIPS)

      \n

      CHIPS 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.

      \n

      For 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.

      \n

      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.

      \n

      You should specifically opt for partitioned cookies (CHIPS), which are set with partitioned and secure cookie attributes.

      \n

      If you’re using an external identity provider for your application, CHIPS is a good option to supplant third-party cookie restrictions.

      \n

      However, 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.

      \n

      Storage Access API

      \n

      With 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.

      \n

      Storage 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.

      \n

      It is most suitable when loading cross-site resources and interactions, such as:

      \n

      Verifying 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.

      \n

      As 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.

      \n

      Related Website Sets

      \n

      With 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.

      \n

      Chrome automatically recognizes related website sets declared, accepted, and maintained in this open-source GitHub repository: Related Website Sets

      \n

      It provides access through Storage Access API directly without prompting for user approval, but only after the user interacts with the relevant iframe.

      \n

      It 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.

      \n

      The top-level site can also request approval for specific cross-site resources and scripts to Storage Access API using resuestStorageAccessFor() API.

      \n

      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.

      \n

      Related 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.

      \n

      Federated Credential Management (FedCM) API

      \n

      FedCM API enables federated SSO without third-party cookies.

      \n

      With FedCM API, a user follows these steps for authentication:

      \n
        \n
      1. The User navigates to a Service Provider (SP) — aka., Relying Party (RP)
        2. \n
      2. As the user requests to authenticate, the SP requests the browser through FedCM API to initiate authentication.
        3. \n
      3. The browser displays a list of available identity providers (supported by the RP), such as social IdPs like Google, Apple, LinkedIn, and Facebook, or other OAuth IdPs like LoginRadius.
        4. \n
      4. Once the user selects an IdP, the browser communicates with the IdP. Upon valid authentication, the IdP generates a secure token.\nThe browser delivers this secure token to the RP to facilitate user authorization.
        5. \n
      \n

      You can access a user demo of FedCM here: FedCM.

      \n

      For more information about implementing federated SSO with FedCM API, go through the FedCM developer guide.

      \n\n

      Firstly, we’re committed to solving our customers' user identity pain points — and preparing for the third-party cookies phase-out is no different.

      \n

      We’ll implement the most relevant and widely useful solutions to facilitate a smooth transition for our customers.

      \n

      Please subscribe to our blog for more information. We’ll update you on how we help with the third-party cookie phase-out.

      \n

      In Conclusion

      \n

      The 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.

      \n

      Moreover, browsers like Firefox, Safari, and Edge may approach restricting third-party cookies differently than Google does.

      \n

      From 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.

      \n

      Glossary

      \n

      Top-level site: It is the primary site a user has visited.

      \n

      First-party cookie: A cookie set by the top-level site.

      \n

      Third-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.

      \n

      References

      \n\n","frontmatter":{"date":"July 08, 2024","updated_date":null,"description":"Google Chrome has planned to phase out third-party cookies, which will affect different website functionalities depending on third-party cookies. This blog focuses on how this phase-out affects identity and user authentication and discusses alternatives for overcoming challenges.","title":"How Chrome’s Third-Party Cookie Restrictions Affect User Authentication?","tags":["Identity","Cookies","Chrome"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.5037593984962405,"src":"/static/eb7396060c0adc430dbed2d04b63d431/ee604/third-party-cookies-phaseout-chrome.png","srcSet":"/static/eb7396060c0adc430dbed2d04b63d431/69585/third-party-cookies-phaseout-chrome.png 200w,\n/static/eb7396060c0adc430dbed2d04b63d431/497c6/third-party-cookies-phaseout-chrome.png 400w,\n/static/eb7396060c0adc430dbed2d04b63d431/ee604/third-party-cookies-phaseout-chrome.png 800w,\n/static/eb7396060c0adc430dbed2d04b63d431/f3583/third-party-cookies-phaseout-chrome.png 1200w","sizes":"(max-width: 800px) 100vw, 800px"}}},"author":{"id":"Raghunath Reddy","github":"raghunath-r-a","avatar":null}}}},"pageContext":{"limit":6,"skip":240,"currentPage":41,"type":"//engineering//","numPages":52,"pinned":"17fa0d7b-34c8-51c4-b047-df5e2bbaeedb"}},"staticQueryHashes":["1171199041","1384082988","2100481360","23180105","528864852"]}