{"componentChunkName":"component---src-templates-blog-list-template-js","path":"/118","result":{"data":{"allMarkdownRemark":{"edges":[{"node":{"excerpt":"Back in the day, when consumers wanted to access different sites and applications, they had to register first, and then log in with their…","fields":{"slug":"/identity/loginradius-federated-identity-management/"},"html":"

Back in the day, when consumers wanted to access different sites and applications, they had to register first, and then log in with their usernames and passwords every single time. Such experiences are no longer acceptable to consumers and they choose to opt-out of such services.

\n

The recently launched Federated Identity Management by LoginRadius is an arrangement to simplify the implementation of Single Sign-On (SSO) and user experience across applications. 

\n

Intent Behind the Launch

\n

Federated Identity Management by LoginRadius helps businesses and applications use a single set of identity data. Consumers need not create multiple accounts for multiple organizations to access their web applications. These applications do not  communicate with each other directly and standard SSO protocols like JWT, SAML, OAuth 2.0, OIDC etc are used to establish the communication.

\n

\"Federated

\n

Federated Identity Management is designed by LoginRadius to help your business in the following ways: 

\n\n

Key Capabilities of Federated Identity Management by LoginRadius

\n

\"Federated

\n

1. Support for industry-standard SSO protocols: LoginRadius supports the following standard SSO protocols: 

\n\n

2. LoginRadius Admin Console: LoginRadius offers a simple dashboard to manage all configurations required for the above mentioned SSO protocols.

\n

3. API support for protocols: LoginRadius covers end-to-end API support for the SSO protocols mentioned above which make integration and implementation relatively easy to be executed within any system.

\n

4. LoginRadius acts as Identity Provider: LoginRadius acts as an IdP which stores and authenticates the identities that consumers use to log in to systems, applications, files servers, and more depending upon the configuration.

\n

A Final Word

\n

Federated Identity Management by LoginRadius is a way to connect multiple web applications and services using the same identity data. It’s a many to one mapping to help your consumers access your business and partners with a single credential set.   

\n

\"LoginRadius

\n","frontmatter":{"date":"October 15, 2020","updated_date":null,"description":"Our Federated Identity Management feature is designed to simplify the implementation of Federated SSO, so consumers now do not need to create multiple accounts for multiple organisations to access their web applications.","title":"Announcement - LoginRadius Simplifies the Implementation of Federated SSO With Federated Identity Management","tags":["industry-news"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.408450704225352,"src":"/static/534a4b5eecf3cee2ae1e2a3bb871feeb/7f8e9/fim-image.webp","srcSet":"/static/534a4b5eecf3cee2ae1e2a3bb871feeb/61e93/fim-image.webp 200w,\n/static/534a4b5eecf3cee2ae1e2a3bb871feeb/1f5c5/fim-image.webp 400w,\n/static/534a4b5eecf3cee2ae1e2a3bb871feeb/7f8e9/fim-image.webp 768w","sizes":"(max-width: 768px) 100vw, 768px"}}},"author":{"id":"Kundan Singh","github":null,"avatar":null}}}},{"node":{"excerpt":"Build a Twitter Bot with NodeJs Hey there! In this blog post, we will build a twitter bot that let us tweet using the command line directly…","fields":{"slug":"/engineering/build-a-twitter-bot-using-nodejs/"},"html":"

Build a Twitter Bot with NodeJs

\n

Hey there! In this blog post, we will build a twitter bot that let us tweet using the command line directly.

\n
\n

Node and npm (or, yarn) must be installed on your system.

\n
\n

Let's Start 🎉

\n

We will use twitter - a client library for the Twitter REST and Streaming APIs. This npm package will make the whole process of building the bot a whole lot easier and faster.

\n

1. Apply for a Twitter Developer Account

\n

To be able to access Twitter API, you need a Twitter Developer Account. Apply for it here. Click on Apply for a Developer Account.

\n

\"Twitter

\n

It will ask you to log in. Select appropriate settings after logging in. It will also generate keys and secret tokens like Consumer Key, Consumer Secret, Access Token Key, Access Token Secret. Copy and save them somewhere for future use.

\n

2. Setup Project

\n

Make a project folder with any name of your choice. Run npm init to initialize the project. This will generate a package.json file in your directory. Alternatively, you can run npm init -y to setup your project with default settings.

\n
\n

package.json holds all the dependencies of a project.

\n
\n

Since our project will be dependent on twitter client library, it's time we install this dependency in our project. Run npm install twitter to include this in your package.json .

\n

3. Setup Files

\n

Now we will start with the actual coding part. At the moment, your project folder will have a node_modules folder, a package.json file, and a package-lock.json file. If you have gone with the default options while running npm init, then index.js is the file we will be working upon.

\n

Open index.js. To be able to use the twitter library, which we have installed, you need to include it in index.js.

\n

var Twitter = require('twitter');

\n

Also, remember the keys and tokens you got from Twitter Developer Portal? It's time we use them.

\n
var client = new Twitter({\n\tconsumer_key: process.env.CONSUMER_KEY,\n\tconsumer_secret: process.env.CONSUMER_SECRET,\n\taccess_token_key: process.env.ACCESS_TOKEN_KEY,\n\taccess_token_secret: process.env.ACCESS_TOKEN_SECRET\n});
\n

Do not add your Consumer or Access Token keys or secrets directly in the index.js. These should be managed accordingly using environment variables.

\n
\n

We will use dotenv library to manage our environment variables in NodeJS. Run npm install dotenv and follow these instructions. Your .env will look something like this.

\n
\n
CONSUMER_KEY=........................................\nCONSUMER_SECRET=.....................................\nACCESS_TOKEN_KEY=....................................\nACCESS_TOKEN_SECRET=.................................
\n

4. Start Coding 🎯

\n

I will use Official Joke API to automatically fetch content for my tweet. You can visit the repository and learn more about the endpoints. But the only endpoint we will work with is random_joke. Click on this, and you will receive a JSON response with fields id, type, setup, and punchline. The fields we are concerned with are setup and punchline.

\n

We will use axios for calling the API endpoint. Run npm install axios and add var axios = require('axios'); in index.js.

\n

Now everything has been laid out. We need to connect the dots. The Official Joke API will return a JSON response. We will grab the required data, i.e., the setup and the punchline from it. And then make use of client.post functionality of twitter package.

\n
axios("https://official-joke-api.appspot.com/random_joke").then(Response => {\n\treturn [Response.data.setup, Response.data.punchline];\n}).then(([setup, punch]) => {\n\tclient.post('statuses/update', {status: `${setup}\\n${punch}`}, function(error, tweet, response){\n\t\tif(!error){\n\t\t\tconsole.log(tweet);\n\t\t}\n\t})\n});
\n

Now run node index.js on the terminal and see the output.\nIf everything went well, you would see a tweet response, otherwise an error message. The successful message would look something like this.

\n

At this point, your index.js should look like this.

\n

\"index.js\"

\n

Congratulations! 🎊

\n

That's it! You have created your first Twitter Bot, which tweets content after directly calling it from an API. You might take a look at the repository if you encountered any errors. Here, I have used different APIs to fetch content and tweet. Moreover, I have added a script that will search posts with a particular hashtag and like them.

\n
\n

While pushing your code to GitHub, make sure to add .gitignore file and include node_modules and .env in it.

\n
\n

Further Reading

\n
\n

The world is yours to explore.

\n
\n

And the dev world is based entirely on exploring technologies and frameworks. Play with this twitter library and see what interesting stuff can be built with it. Maybe, search tweets with a particular hashtag and like them? Or maybe, retweet tweets of any particular user? You are free to use your imagination and coding skills to explore more and more. If axios and dotenv are new to you, then go ahead and read their documentation. Get hold of the concepts of environment variables. And come up with your own cool Twitter Bot.

\n
\n

Keep in mind Twitter's Developer Policy & Terms and Twitter Terms & Conditions. These should not be violated in whatever project you are building.

\n
\n","frontmatter":{"date":"October 14, 2020","updated_date":null,"description":"Learn how to create a twitter bot using NodeJS that let us tweet using the command line directly","title":"Build A Twitter Bot Using NodeJS","tags":["NodeJs","Twitter","Bot"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.5037593984962405,"src":"/static/820019d481163bc17d6c095404abb359/58556/cover.webp","srcSet":"/static/820019d481163bc17d6c095404abb359/61e93/cover.webp 200w,\n/static/820019d481163bc17d6c095404abb359/1f5c5/cover.webp 400w,\n/static/820019d481163bc17d6c095404abb359/58556/cover.webp 800w,\n/static/820019d481163bc17d6c095404abb359/99238/cover.webp 1200w","sizes":"(max-width: 800px) 100vw, 800px"}}},"author":{"id":"Vineeta Jain","github":"Ninjavin","avatar":null}}}},{"node":{"excerpt":"Motivation Maps are an effective, intuitive way to understand data in some use-cases. Interactive web maps can help us visualize the data…","fields":{"slug":"/engineering/visualizing-data-using-leaflet-and-netlify/"},"html":"

Motivation

\n

Maps are an effective, intuitive way to understand data in some use-cases. Interactive web maps can help us visualize the data better and derive better insights.

\n

Different map visualizations can highlight different aspects of a dataset. Heatmaps, Choropleth maps and Clustering maps are frequently used for this purpose.

\n

In this blog, I shall go over using a powerful JavaScript library to build a web map and deploy it on Netlify.

\n

Using Leaflet

\n

The Leaflet is a great library for implementing interactive web maps as it provides many UI features, like smooth canvas panning, zooming, mouse events, and all the involved work in animations, which one would otherwise have to implement from scratch.

\n
\n

Leaflet is the leading open-source JavaScript library for mobile-friendly interactive maps. Weighing just about 39 KB of JS, it has all the mapping features most developers ever need.

\n

source: leafletjs.com

\n
\n

\"Leaflet

\n

We can include Leaflet in our application by including the CSS stylesheet and the JS file from the unpkg CDN. Let's start building the application by starting with the following code at the project root. Create a file named index.html and put the following markup in it. The map shall be rendered in div#mapid.

\n
<!--index.html-->\n<!DOCTYPE html>\n<html lang="en">\n\n  <head>\n    <meta charset="UTF-8">\n    <meta name="viewport" content="width=device-width, initial-scale=1.0">\n    <title>MapViz</title>\n    <link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />\n    <style>\n      #mapid {\n        position: fixed;\n        width: 100%;\n        height: 100%;\n        top: 0;\n        left: 0;\n      }\n    </style>\n  </head>\n\n  <body>\n    <div id="mapid"></div>\n    <script defer src="https://unpkg.com/leaflet/dist/leaflet.js"></script>\n  </body>\n\n</html>
\n

Now, we gather a link to the GeoJSON file for metro stations in Washington D.C., that we shall be visualizing, from the MapBox documentation. It should look similar to the following:

\n
https://docs.mapbox.com/help/data/stations.geojson
\n

Create a new JavaScript file named script.js in the same directory as the HTML file. Include this file in the web page by adding the following line to it.

\n
<!--index.html-->\n  ...\n  <body>\n    ...\n    <script defer src="https://unpkg.com/leaflet/dist/leaflet.js"></script>\n    <script src="script.js"></script>\n  </body>\n  ...
\n

In script.js, we can use the Fetch API to make an AJAX request and get the data as a response to a GET request using promises and take a look at what we are dealing with.

\n
// script.js\nlet data = {};\nconst dataUrl = 'https://cors-anywhere.herokuapp.com/https://docs.mapbox.com/help/data/stations.geojson';\n\nfetch(dataUrl)\n  .then(response => response.json())\n  .then(data => console.log(data))\n  .catch(err => console.error(err));
\n

We can take a look at the data in the Developer Console. We observe that it is a JavaScript object. The various properties associated with the data can be viewed by checking the individual features.

\n
{\n  "type": "FeatureCollection",\n  "features": [\n    ...\n    {\n      "geometry": {\n        "type": "Point",\n        "coordinates": [-76.9750541388, 38.8410857803]\n      },\n      "type": "Feature",\n      "properties": {\n        "description": "Southern Ave",\n        "marker-symbol": "rail-metro",\n        "title": "Southern Ave",\n        "url": "http://www.wmata.com/rider_tools/pids/showpid.cfm?station_id=107",\n        "lines": ["Green"],\n        "address": "1411 Southern Avenue, Temple Hills, MD 20748"\n      }\n    },\n    ...\n  ]\n}
\n

Before we begin adding the layers to our map, we need to instantiate a Leaflet map object with the DOM ID of the map container and center it on our point of interest at a specified initial zoom level.

\n
const map = L.map('mapid').setView([38.8977, -77.0365], 15);
\n

As we need a base map (the base layer) for our map, we can use one that is provided by Mapbox. In order to use that, you need a Mapbox API access token that you can create on their portal.

\n

The following snippet instantiates a tileLayer object and adds it to our map:

\n
L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}', {\n  attribution: 'Map data © <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',\n  maxZoom: 18,\n  id: 'mapbox/streets-v11',\n  tileSize: 512,\n  zoomOffset: -1,\n  accessToken: 'your_mapbox_api_access_token'\n}).addTo(map);
\n

We can use the following snippet to parse the GeoJSON and add it to the map.

\n
L.geoJSON(data).addTo(map);
\n

Replace the code in script.js with the following, and refresh the web page:

\n
let data = {};\nconst dataUrl = 'https://cors-anywhere.herokuapp.com/https://docs.mapbox.com/help/data/stations.geojson';\n\nconst map = L.map('mapid').setView([38.8977, -77.0365], 15);\n\nL.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}', {\n  attribution: 'Map data © <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',\n  maxZoom: 18,\n  id: 'mapbox/streets-v11',\n  tileSize: 512,\n  zoomOffset: -1,\n  accessToken: 'your_mapbox_api_access_token'\n}).addTo(map);\n\nfetch(dataUrl)\n  .then(response => response.json())\n  .then(data => {\n    L.geoJSON(data).addTo(map);\n  })\n  .catch(err => console.error(err));
\n

As the dataset contains Point features, markers will be added at the respective coordinates. Our web page will now look like the following:

\n

\"Map

\n

We can show tooltips upon clicking on the markers by modifying the code as follows, to include some custom HTML using the properties in the feature, in the popup:

\n
// script.js\n  ...\n  fetch(dataUrl)\n  .then(response => response.json())\n  .then(data => {\n    L.geoJSON(data, {\n      onEachFeature: function (feature, layer) {\n        layer.bindPopup(\n          '<h4>'\n          + feature.properties.title\n          + '</h4>'\n          + '<p>' \n          +  feature.properties.address\n          + '</p>'\n        );\n      }\n    }).addTo(map);\n  })\n  .catch(err => console.error(err));\n  ...
\n

Uupon clicking any marker, we will now see the following popup:

\n

\"Map

\n

We can also customize the marker icon using the pointToLayer option of the geoJSON constructor as follows:

\n
// scripts.js\n  ...\n  L.geoJSON(data, {\n      pointToLayer: function (feature, coords) {\n        return L.marker(coords, {\n          icon: new L.Icon({\n            iconSize: [30, 30],\n            iconAnchor: [15, 15],\n            popupAnchor: [1, -24],\n            iconUrl: 'https://cdn.iconscout.com/icon/free/png-256/metro-subway-underground-train-railway-engine-emoj-symbol-30744.webp'\n          })\n        });\n      },\n      onEachFeature: function (feature, layer) {\n        layer.bindPopup(\n          '<h4>'\n          + feature.properties.title\n          + '</h4>'\n          + '<p>'\n          + feature.properties.address\n          + '</p>'\n        );\n      }\n    }).addTo(map);\n    ...
\n

Our updated web page will now look like the following:

\n

\"Map

\n

Now, we can move on to deploy this web page on Netlify.

\n

Deploying on Netlify

\n

Netlify is an awesome platform to host your web applications. It also offers many other features such as serverless functions.

\n

\"Netlify

\n

Once you have pushed your web page to a Git repository, hosted either on GitHub, GitLab or BitBucket, navigate to Netlify and click on the New Site from Git button.

\n

\"Starting

\n

Next, select your Git provider and your repository:

\n

\"Git

\n

\"Git

\n

Go ahead with the defaults, and now your site shall be published on Netlify, and all future pushes should result in a Netlify deployment:

\n

\"Netlify

\n

Nice! Now we have a web map, even though a very basic one, live! Check out the Leaflet documentation for more!

\n

Source Code

\n

Demonstration: Priceless Poincare

\n

GitHub: leaflet netlify starter

\n","frontmatter":{"date":"October 14, 2020","updated_date":null,"description":"Let's visualize geospatial data on the web using Leaflet and host it on Netlify!","title":"Visualizing Data using Leaflet and Netlify","tags":["GIS","Serverless","JavaScript"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":2.0618556701030926,"src":"/static/f09ca52cdb62e663db2958fa17ee7f4a/58556/map.webp","srcSet":"/static/f09ca52cdb62e663db2958fa17ee7f4a/61e93/map.webp 200w,\n/static/f09ca52cdb62e663db2958fa17ee7f4a/1f5c5/map.webp 400w,\n/static/f09ca52cdb62e663db2958fa17ee7f4a/58556/map.webp 800w,\n/static/f09ca52cdb62e663db2958fa17ee7f4a/99238/map.webp 1200w,\n/static/f09ca52cdb62e663db2958fa17ee7f4a/42314/map.webp 1366w","sizes":"(max-width: 800px) 100vw, 800px"}}},"author":{"id":"Sudipto Ghosh","github":"sudiptog81","avatar":null}}}},{"node":{"excerpt":"Introduction The Secure Enclave is a hardware-based key manager that’s isolated from the main processor to provide an extra layer of…","fields":{"slug":"/engineering/secure-enclave-ios-app/"},"html":"

Introduction

\n

The Secure Enclave is a hardware-based key manager that’s isolated from the main processor to provide an extra layer of security. Using a secure enclave, we can create the key, securely store the key, and perform operations with the key. Thus makes it difficult for the key to be compromised.

\n

We usually save data persistently in the app using UserDefaults, Keychain, Core Data or SQLite.\nFor example, To save the session of logged in user, we save username and password. But this process puts our data at high-security risk. So it's always recommended to store sensitive data in an encrypted format. But again, it's a challenge to secure keys used in encryption/decryption.

\n

\"Secure

\n

Now here Secure Enclave comes in the role.

\n

In this blog, we will use Secure Enclave to generate key pair and use those in encryption/decryption of sensitive data further.

\n

Here I will create a wrapper to generate key pair using Secure Enclave and use them to encrypt/decrypt sensitive data. And also a viewcontroller to show how to use a wrapper to get encrypted and decrypted data.\nYou may implement wrapper's methods as common methods and use wherever needed in the project. But its recommended to use a separate wrapper for handling communication with Secure Enclave.

\n

Wrapper

\n

I have created .h and .m files named as SecEnclaveWrapper as a subclass of NSObject.\nIn .h file I am declaring function for being accessible from other classes like:

\n
/**\nReturn encrypted value of data using kSecKeyAlgorithmECIESEncryptionStandardX963SHA256AESGCM algo\n*/\n- (NSData *_Nonnull)encryptData:(NSData *_Nonnull)data ;\n\n/**\nReturn decryrpted data of encrypted data  using kSecKeyAlgorithmECIESEncryptionStandardX963SHA256AESGCM algo\n*/\n- (NSData *_Nonnull)decryptData:(NSData *_Nonnull)data ;\n\n/**\nReturn an initialized instance of the wrapper\n*/\n- (instancetype)init;
\n

Then in .m file, define the following methods as :

\n

The method init initializes and returns the object of this wrapper class. And 'encryptData' and 'decryptData' method return encrypted data and decrypted data of encrypted data, respectively.

\n
- (instancetype)init {\n    self = [super init];\n    \n    if(![self lookupPublicKeyRef] || ![self lookupPrivateKeyRef])\n        [self generatePasscodeKeyPair];\n    \n    return self;\n}\n- (NSData *)encryptData:(NSData *)data {\n    if (data && data.length) {\n        \n        CFDataRef cipher = SecKeyCreateEncryptedData(publicKeyRef, kSecKeyAlgorithmECIESEncryptionStandardX963SHA256AESGCM, (CFDataRef)data, nil);\n        \n        return (__bridge NSData *)cipher;\n    } else {\n        return nil;\n        \n    }\n}\n- (NSData*)decryptData:(NSData *)data {\n    \n    if(data && data.length){\n        \n        CFDataRef plainData = SecKeyCreateDecryptedData(privateKeyRef, kSecKeyAlgorithmECIESEncryptionStandardX963SHA256AESGCM, (CFDataRef)data, nil);\n        return  (__bridge NSData *)plainData;\n    }\n    else {\n        return nil;\n    }\n}
\n

The 'lookupPublicKeyRef' method below will lookup keychain for public key & 'lookupPrivateKeyRef' method search for the private key and return key if found.

\n
- (SecKeyRef) lookupPublicKeyRef\n{\n    OSStatus sanityCheck = noErr;\n    NSData *tag;\n    id keyClass;\n    \n    if (publicKeyRef != NULL) {\n        // if already resides in memory, return\n        return publicKeyRef;\n    }\n    tag = [kPublicKeyName dataUsingEncoding:NSUTF8StringEncoding];\n    keyClass = (__bridge id) kSecAttrKeyClassPublic;\n    \n    \n    NSDictionary *queryDict = @{\n        \n        (__bridge id) kSecClass : (__bridge id) kSecClassKey,\n        (__bridge id) kSecAttrKeyType : (__bridge id) kSecAttrKeyTypeEC,\n        (__bridge id) kSecAttrApplicationTag : tag,\n        (__bridge id) kSecAttrKeyClass : keyClass,\n        (__bridge id) kSecReturnRef : (__bridge id) kCFBooleanTrue\n    };\n    //else look key in keychain and return\n    sanityCheck = SecItemCopyMatching((__bridge CFDictionaryRef) queryDict, (CFTypeRef *) &publicKeyRef);\n    if (sanityCheck != errSecSuccess) {\n        NSLog(@"Error trying to retrieve key from server.  sanityCheck: %d", (int)sanityCheck);\n    }\n    \n    return publicKeyRef;\n}\n- (SecKeyRef) lookupPrivateKeyRef\n{\n    CFMutableDictionaryRef getPrivateKeyRef = newCFDict;\n    CFDictionarySetValue(getPrivateKeyRef, kSecClass, kSecClassKey);\n    CFDictionarySetValue(getPrivateKeyRef, kSecAttrKeyClass, kSecAttrKeyClassPrivate);\n    CFDictionarySetValue(getPrivateKeyRef, kSecAttrLabel, kPrivateKeyName);\n    CFDictionarySetValue(getPrivateKeyRef, kSecReturnRef, kCFBooleanTrue);\n    \n    OSStatus status = SecItemCopyMatching(getPrivateKeyRef, (CFTypeRef *)&privateKeyRef);\n    if (status == errSecItemNotFound)\n        return nil;\n    \n    return (SecKeyRef)privateKeyRef;\n}
\n

The following methods will actually deal with Secure Enclave to generate a private key and public key.

\n
- (bool) generatePasscodeKeyPair\n{\n    CFErrorRef error = NULL;\n    SecAccessControlRef sacObject = SecAccessControlCreateWithFlags(\n                                                                    kCFAllocatorDefault,\n                                                                    kSecAttrAccessibleAfterFirstUnlockThisDeviceOnly,\n                                                                    kSecAccessControlPrivateKeyUsage,\n                                                                    &error\n                                                                    );\n    \n    if (error != errSecSuccess) {\n        NSLog(@"Generating key pair, error: %@\\n", error);\n    }\n    \n    return [self generateKeyPairWithAccessControlObject:sacObject];\n}\n\n- (bool) generateKeyPairWithAccessControlObject:(SecAccessControlRef)accessControlRef\n{\n    // create dictionary of private key \n    CFMutableDictionaryRef accessControlDict = newCFDict;;\n#if !TARGET_IPHONE_SIMULATOR\n    \n    CFDictionaryAddValue(accessControlDict, kSecAttrAccessControl, accessControlRef);\n#endif\n    CFDictionaryAddValue(accessControlDict, kSecAttrIsPermanent, kCFBooleanTrue);\n    CFDictionaryAddValue(accessControlDict, kSecAttrLabel, kPrivateKeyName);\n    \n    // create dictionary for saving key into keychain\n    CFMutableDictionaryRef generatePairRef = newCFDict;\n#if !TARGET_IPHONE_SIMULATOR\n    \n    CFDictionaryAddValue(generatePairRef, kSecAttrTokenID, kSecAttrTokenIDSecureEnclave);\n#endif\n    CFDictionaryAddValue(generatePairRef, kSecAttrKeyType, kSecAttrKeyTypeEC);\n    CFDictionaryAddValue(generatePairRef, kSecAttrKeySizeInBits, (__bridge const void *)([NSNumber numberWithInt:256]));\n    CFDictionaryAddValue(generatePairRef, kSecPrivateKeyAttrs, accessControlDict);\n    \n    OSStatus status = SecKeyGeneratePair(generatePairRef, &publicKeyRef, &privateKeyRef);\n    \n    if (status != errSecSuccess){\n        NSLog(@"Error trying to retrieve key from server.  sanityCheck: %d", (int)status);\n        \n        return NO;\n    }\n    [self savePublicKeyFromRef:publicKeyRef];\n    return YES;\n}
\n

The private key is generated and stored in Secure Enclave which cannot be directly used. Whereas public key have to be stored manually in keychain by following method.

\n
- (bool) savePublicKeyFromRef:(SecKeyRef)publicKeyRef\n{   OSStatus sanityCheck = noErr;\n    NSData *tag;\n    id keyClass;\n    \n    \n    tag = [kPublicKeyName dataUsingEncoding:NSUTF8StringEncoding];\n    keyClass = (__bridge id) kSecAttrKeyClassPublic;\n    \n    \n    NSDictionary *saveDict = @{\n        \n        (__bridge id) kSecClass : (__bridge id) kSecClassKey,\n        (__bridge id) kSecAttrKeyType : (__bridge id) kSecAttrKeyTypeEC,\n        (__bridge id) kSecAttrApplicationTag : tag,\n        (__bridge id) kSecAttrKeyClass : keyClass,\n        (__bridge id) kSecValueData : (__bridge NSData *)SecKeyCopyExternalRepresentation(publicKeyRef,nil),\n        (__bridge id) kSecAttrKeySizeInBits : [NSNumber numberWithUnsignedInteger:256],\n        (__bridge id) kSecAttrEffectiveKeySize : [NSNumber numberWithUnsignedInteger:256],\n        (__bridge id) kSecAttrCanDerive : (__bridge id) kCFBooleanFalse,\n        (__bridge id) kSecAttrCanEncrypt : (__bridge id) kCFBooleanTrue,\n        (__bridge id) kSecAttrCanDecrypt : (__bridge id) kCFBooleanFalse,\n        (__bridge id) kSecAttrCanVerify : (__bridge id) kCFBooleanTrue,\n        (__bridge id) kSecAttrCanSign : (__bridge id) kCFBooleanFalse,\n        (__bridge id) kSecAttrCanWrap : (__bridge id) kCFBooleanTrue,\n        (__bridge id) kSecAttrCanUnwrap : (__bridge id) kCFBooleanFalse\n    };\n    sanityCheck = SecItemAdd((__bridge CFDictionaryRef) saveDict, (CFTypeRef *)&publicKeyRef);\n    if (sanityCheck != errSecSuccess) {\n        NSLog(@"Error trying to retrieve key from server.  sanityCheck: %d", (int)sanityCheck);\n        \n    }\n    \n    return publicKeyRef;\n}
\n

Demo

\n

Now I am creating ViewController.h and .m files. In viewDidLoad in .m file, having a string to be stored in UserDefaults. I will encrypt this string by a private key generated above and then store persistently encrypted data for later use.

\n
- (void)viewDidLoad {\n    [super viewDidLoad];\n    NSString *strDatatosave = @"example data to save";\n    NSString *bundleIdentifier = [[NSBundle mainBundle] bundleIdentifier];\n    NSString *strGroupID = [NSString stringWithFormat:@"group.%@",bundleIdentifier];\n    SecEnclaveWrapper *keychainItem = [[SecEnclaveWrapper alloc] init];\n    \n    NSData *encrypted = [keychainItem encryptData:[strDatatosave dataUsingEncoding:NSUTF8StringEncoding]];\n    NSString *strEncrypted = [[NSString alloc] initWithData:encrypted encoding:NSUTF8StringEncoding];\n    NSLog(@"encrypted string %@",strEncrypted);\n    \n    NSData *decrypted =[keychainItem decryptData:encrypted];\n    NSString *strDecrypted = [[NSString alloc] initWithData:decrypted encoding:NSUTF8StringEncoding];\n    \n    NSLog(@"decrypted string as real string%@",strDecrypted);\n\n}
\n

Conclusion

\n

In this blog, we learned about the basics of key generation via Secure Enclave and encryption and decryption using keys.\nBy default, key-pairs are generated in the Secure Enclave. The private key is available only at creation time and can not be obtained later as it is saved in Secure Enclave. Operations can be performed with it without exposing it to user code. Only Public Key will be stored and retrieved.

\n

You can find the complete repository link here

\n

Thanks for reading the blog. For detailed information and execution example of this blog, please refer to the video below:

\n\n","frontmatter":{"date":"October 13, 2020","updated_date":null,"description":"SecureEnclaveDemo is an xcode project containing helper named as SecEnclaveWrapper. You can use this wrapper in your project to encrypt/decrypt sensitive data using Secure Enclave. Let's understand more about in the blog.","title":"Secure Enclave in iOS App","tags":["ios","security","data","encryption","private key","xcode"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.5037593984962405,"src":"/static/e677a934323b29af4619ee797f0286b8/58556/CoverImage.webp","srcSet":"/static/e677a934323b29af4619ee797f0286b8/61e93/CoverImage.webp 200w,\n/static/e677a934323b29af4619ee797f0286b8/1f5c5/CoverImage.webp 400w,\n/static/e677a934323b29af4619ee797f0286b8/58556/CoverImage.webp 800w,\n/static/e677a934323b29af4619ee797f0286b8/210c1/CoverImage.webp 900w","sizes":"(max-width: 800px) 100vw, 800px"}}},"author":{"id":"Tanvi Jain","github":"tanvijn","avatar":null}}}},{"node":{"excerpt":"What is STL? STL stands for Standard Template Library. If you've used C++ even in small projects, you've likely already used STL - which is…","fields":{"slug":"/engineering/cpp-stl-containers/"},"html":"

What is STL?

\n

STL stands for Standard Template Library. If you've used C++ even in small projects, you've likely already used STL - which is a great thing! Using STL in C++ makes your code more expressive, simple, and easy to understand. This post will give you an overview of how STL works, some examples, and the basic knowledge you need to get started!

\n

STL Components

\n

Loosely speaking, the first components you'd typically understand and use of STL are Containers & Algorithms. Then there's also Iterators & Functors, but you should try to take them on one by one, in that order perhaps. This blog will expand a bit on STL Containers.

\n

Containers

\n

Suppose you are at your favorite cinema hall and it's the launch of a big movie. Since it's the launch, there are likely many people waiting in line to buy their tickets. Naturally, you join the queue at the back and wait for your turn. In the computing world, we have a queue too! This is a popular data structure. If you've had a Data Structures class before, you are most likely familiar with some other data structures as well. These are often used, so the STL provides a great implementation of all these data structures, otherwise known as containers.

\n

Take arrays, for example. Arrays are elements with the same type, stored in contiguous blocks of memory. In C++, you can use arrays as you would in C, like this:

\n
std::string students[10];\nstudents[0] = "Adam";
\n

But wait, STL provides a container for arrays too. It's available in the header <array>. Example usage of it would look like this:

\n
#include <iostream>\n#include <string>\n\nint main() {\n    std::array<std::string, 10> students;\n    students[0] = "Adam's Friend";\n    \n    cout << students[0] << endl;\n}
\n

So, what's the difference? Why should you use the STL Container class? The performance difference is negligible, but what makes the container classes better is that it is a class. A wrapper class around normal arrays, and offers some advantages like passing by values, bounds checking, etc. As a side note, you'd normally want to use an std::vector instead - which is a dynamically resizable array.

\n

Other examples

\n

Other containers in C++ include:

\n\n

STL - What next?

\n

Containers aren't the only part of STL. It is huge! You are encouraged to read up more on STL, as it makes your life easier in every manner! You don't need to reinvent the wheel. Next, you could try looking up the various algorithms contained in the STL. They're present in the header file <algorithm>. Good luck on your journey!

\n","frontmatter":{"date":"October 13, 2020","updated_date":null,"description":"Learn how Standard Template Library works in C++ with interactive examples and what you need to get started","title":"STL Containers & Data Structures in C++","tags":["C++","STL"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.5037593984962405,"src":"/static/4ec0001784cd81b020aea7e2bbf26abb/58556/cover.webp","srcSet":"/static/4ec0001784cd81b020aea7e2bbf26abb/61e93/cover.webp 200w,\n/static/4ec0001784cd81b020aea7e2bbf26abb/1f5c5/cover.webp 400w,\n/static/4ec0001784cd81b020aea7e2bbf26abb/58556/cover.webp 800w,\n/static/4ec0001784cd81b020aea7e2bbf26abb/99238/cover.webp 1200w","sizes":"(max-width: 800px) 100vw, 800px"}}},"author":{"id":"Aryan Rawlani","github":"aryanrawlani28","avatar":null}}}},{"node":{"excerpt":"Before we get into details of finding out optimal clusters, let's first see what the KMeans clustering algorithm is and some basics about it…","fields":{"slug":"/engineering/optimal-clusters-kmeans/"},"html":"

Before we get into details of finding out optimal clusters, let's first see what the KMeans clustering algorithm is and some basics about it.

\n

What is Clustering?

\n

Clustering is an unsupervised ML technique wherein we cluster the data to get insights from it. Clustering the data is quite essential for some business models and problems. It gives us conclusions on what is a cluster, i.e. data which is similar and in the form of cluster or groups.

\n
\n

Clustering is the process of dividing the entire data into groups (also known as clusters) based on the patterns in the data.

\n
\n

What is the KMeans clustering algorithm?

\n

It is an algorithm for clustering. We will be discussing this method with code in the further sections.

\n

Initial Imports :

\n
import pandas as pd\nimport numpy as np\nimport matplotlib.pyplot as plt\nfrom sklearn.cluster import KMeans\n%matplotlib inline
\n

Method :

\n

Now let's discuss the method behind finding out the right number of clusters on a K-Means clustering algorithm.\nSo we will learn how to decide what number of clusters to input into your K-Means algorithm.\nHere we've got a data science problem.\nWe've got only two variables, x and y coordinates.

\n

Now, if we run the K means clustering algorithm on this dataset with three clusters or with K pre-determine the clusters to be three, then the result will look something like this.

\n

\"initial\"

\n

We need a specific metric, we need a way to understand or evaluate how a certain number of clusters performs compared to a different number of clusters, and preferably, that metric should be quantifiable.

\n

So what kind of metric can we impose upon our clustering algorithm that will tell us something about the final result?\nThere is such a metric called the within-cluster sum of squares. (WCSS)

\n

\"Wcss\"

\n

So you can see here that it jumps from 8000 down to 3000, that's a massive change of 5000. Let's just call them units, 5000 units and then from 3000 as we increase the number of the close from 2 to 3, they jump from 3000 to 1000.

\n

Again quite a large drop and then from three to four what's going to happen is going to jump from 1000 to maybe eight hundred and from 800 to 600, 600 to 500 and so on so as you can see the first two improvements or first two changes from one cluster to two from two to three created some huge jumps or considerable drops in the WTS going forward The WCR says drops not substantially. And this is our hint at selecting the optimum optimal number of clusters; and the method we're going to use is the elbow method, and it is very visual. All you have to do is look at your chart and look for that change, or that's kind of like it does look like an ELBOW.

\n

Look for that elbow in your chart where the drop goes from being quite substantial to being not as significant not as proven is not as great, and therefore, that point in your chart will be the optimal number of clusters.

\n

In this case, it is indeed three clusters.

\n

That is the optimal number. And as you can imagine, this method is entirely arbitrary.\nSometimes, the situations are not as pronounced as the elbow might not be as evident as in this case, and therefore, somebody might pick one number of clusters. Someone else might come along and select a different number.

\n

CODE :

\n
from sklearn.cluster import KMeans\nwcss = []\n\nfor i in range(1, 11):\n\n  kmeans = KMeans(n_clusters = i, init = 'k-means++', random_state = 42)\n\n  kmeans.fit(X)\n  \n  wcss.append(kmeans.inertia_)\n\nplt.plot(range(1, 11), wcss)\n\nplt.title('The Elbow Method')\n\nplt.xlabel('Number of clusters')\n\nplt.ylabel('WCSS')\n\nplt.show()
\n","frontmatter":{"date":"October 12, 2020","updated_date":null,"description":null,"title":"Optimal clusters for KMeans Algorithm","tags":["Machine Learning"],"pinned":null,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.5037593984962405,"src":"/static/225782b978d81111592f1f839c6dc1e4/58556/cover.webp","srcSet":"/static/225782b978d81111592f1f839c6dc1e4/61e93/cover.webp 200w,\n/static/225782b978d81111592f1f839c6dc1e4/1f5c5/cover.webp 400w,\n/static/225782b978d81111592f1f839c6dc1e4/58556/cover.webp 800w,\n/static/225782b978d81111592f1f839c6dc1e4/b0b9b/cover.webp 1192w","sizes":"(max-width: 800px) 100vw, 800px"}}},"author":{"id":"Neeraj Ap","github":"NEERAJAP2001","avatar":null}}}}]},"markdownRemark":{"excerpt":"Identity is evolving, and developers are at the forefront of this transformation. Every day brings a new learning—adapting to new standards…","fields":{"slug":"/identity/developer-first-identity-provider-loginradius/"},"html":"

Identity is evolving, and developers are at the forefront of this transformation. Every day brings a new learning—adapting to new standards and refining approaches to building secure, seamless experiences.

\n

We’re here to support developers on that journey. We know how important simplicity, efficiency, and well-structured documentation are when working with identity and access management solutions. That’s why we’ve redesigned the LoginRadius website—to be faster, more intuitive, and developer-first in every way.

\n

The goal? Having them spend less time searching and more time building.

\n

What’s New and Improved on the LoginRadius Website?

\n

LoginRadius’ vision is to give developers a product that simplifies identity management so they can focus on building, deploying, and scaling their applications. To enhance this experience, we’ve spent the last few months redesigning our interface— making navigation more intuitive and reassuring that essential resources are easily accessible.

\n

Here’s a closer look at what’s new and why it’s important:

\n

A Developer-Friendly Dark Theme

\n

\"This

\n

Developers spend long hours working in dark-themed IDEs and terminals, so we’ve designed the LoginRadius experience to be developer-friendly and align with that preference.

\n

The new dark mode reduces eye strain, enhances readability, and provides a seamless transition between a coding environment and our platform. Our new design features a clean, modern aesthetic with a consistent color scheme and Barlow typography, ensuring better readability. High-quality graphics and icons are thoughtfully placed to enhance the content without adding visual clutter.

\n

So, whether you’re navigating our API docs or configuring authentication into your system, our improved interface will make those extended development hours more comfortable and efficient.

\n

Clear Categorization for LoginRadius Capabilities

\n

\"This

\n

We’ve restructured our website to provide a straightforward breakdown of our customer identity and access management platform capabilities, helping you quickly find what you need:

\n\n

This structured layout ensures you can quickly understand each capability and how it integrates into your identity ecosystem.

\n

Developer-First Navigation

\n

\"This

\n

We’ve been analyzing developer workflows to identify how you access key resources. That’s why we redesigned our navigation with one goal in mind: to reduce clicks and make essential resources readily available.

\n

The new LoginRadius structure puts APIs, SDKs, and integration guides right at the menu bar under the Developers dropdown so you can get started faster. Our Products, Solutions, and Customer Services are also clearly categorized, helping development teams quickly find the right tools and make informed decisions.

\n

Quick Understanding of Integration Benefits

\n

\"This

\n

Developers now have a clear view of the tech stack available with LoginRadius, designed to support diverse business needs.

\n

Our platform offers pre-built SDKs for Node.js, Python, Java, and more, making CIAM integration seamless across popular programming languages and frameworks.

\n

Over to You Now!

\n

Check out our revamped LoginRadius website and see how the improved experience makes it easier to build, scale, and secure your applications.

\n

Do not forget to explore the improved navigation and API documentation, and get started with our free trial today. We’re excited to see what you’ll build with LoginRadius!

\n","frontmatter":{"date":"February 21, 2025","updated_date":null,"description":"LoginRadius’ vision is to give developers a product that simplifies identity management so they can focus on building, deploying, and scaling their applications. To enhance this experience, we’ve redesigned our website interface, making navigation more intuitive and reassuring that essential resources are easily accessible.","title":"Revamped & Ready: Introducing the New Developer-First LoginRadius Website","tags":["Developer tools","API","Identity Management","User Authentication"],"pinned":true,"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.7857142857142858,"src":"/static/80b4e4fbe176a10a327d273504607f32/58556/hero-section.webp","srcSet":"/static/80b4e4fbe176a10a327d273504607f32/61e93/hero-section.webp 200w,\n/static/80b4e4fbe176a10a327d273504607f32/1f5c5/hero-section.webp 400w,\n/static/80b4e4fbe176a10a327d273504607f32/58556/hero-section.webp 800w,\n/static/80b4e4fbe176a10a327d273504607f32/99238/hero-section.webp 1200w,\n/static/80b4e4fbe176a10a327d273504607f32/7c22d/hero-section.webp 1600w,\n/static/80b4e4fbe176a10a327d273504607f32/1258b/hero-section.webp 2732w","sizes":"(max-width: 800px) 100vw, 800px"}}},"author":{"id":"Rakesh Soni","github":"oyesoni","avatar":"rakesh-soni.webp"}}}},"pageContext":{"limit":6,"skip":702,"currentPage":118,"type":"///","numPages":164,"pinned":"ee8a4479-3471-53b1-bf62-d0d8dc3faaeb"}},"staticQueryHashes":["1171199041","1384082988","2100481360","23180105","528864852"]}