Vizzly

vizzly

Within my company, Bearer, the whole team is focused on helping developers that rely on third-party APIs. In 2019, our engineers developed a solution that eased how to integrate with any API that uses OAuth. It saved hours of engineering time when working with API integrations, by handling both the authentication strategy (with refresh tokens) as well as proxying the request. As we believe no developers should ever have to spend hours dealing with the ins and outs of integrating OAuth API, we’ve decided to fully open-source our tool. Introducing . Pizzly: The OAuth Integration Proxy What is Pizzly? is an OAuth Integrations Manager. It provides everything a developer needs to easily consume an OAuth-based API ( ). Pizzly aka an API that uses OAuth as the authentication method Most APIs now use the to authorize an application that wants to access a user's data. One of the main reasons is that OAuth provides the best user experience while being very secure. But one thing has been totally forgotten in the OAuth framework: the developer experience. OAuth framework It is much more difficult for a developer to use an OAuth based API than it is to use an API that relies on an API Key. Try timing yourself on how long it takes to integrate with two APIs. Let's see how long it takes to have your first successful request to the Stripe API compared to the Google Sheets API. It took me around 43 minutes and 19 seconds to perform an authenticated request to Google Sheets starting from scratch ( ). And only 5 minutes for Stripe ( ). source source We should change that. Pizzly aims to provide the best developer experience when using an  OAuth-based API. One of its power-features is that it completely handles  the OAuth-dance (including refreshing a token), meaning a developer can focus on requesting endpoints without spending hours dealing with  authentication. Here's the same test using Pizzly: It took me almost the same amount of time (5 min vs 7 min) to perform an authenticated request to the Google Sheets API compared with Stripe, starting from scratch with Pizzly. Again, here's the . And contrary to the previous test, using Pizzly means the token will be refreshed once expired. source How does it work? Pizzly provides multiple tools to help developers with their API integrations, including: an auth service - ; to handle the OAuth-dance a proxy - ; to make authenticated requests to an API a dashboard - ; to enable and configure APIs a JS library - to connect a user from your frontend. The two major services are Auth and Proxy: The auth service handles the OAuth-dance and generates what is called an authId each time a user has successfully authorized your OAuth application. The authId acts as a reference to the OAuth payload (i.e. access token and refresh token). While the access token and refresh token expire and change over time, the authId is always the same. Think of it as something like a user identity. The proxy service forwards HTTP requests to the third-party APIs. To authenticate the request, the developer sends the authId alongside. This tells the proxy service to transform the request and authenticate it with the right access token. In case it has expired, Pizzly will refresh the token and retry the request. Another great tool that Pizzly brings is the dashboard. The dashboard lets you configure your integrations, test them, and look at what's happening. How to use it? Pizzly is self-hosted, meaning you can install it on your machine or any platform-as-a-service (e.g. Heroku, AWS, etc.). Here's a guide on . how to get started Once installed, enable an API from the list and trigger a complete OAuth-dance in a few lines of code using the Pizzly JS library: pizzly = Pizzly({ : }) api = pizzly.integration( ) api
  .connect()
  .then( .log( , authId))
  .catch( .error( , error)) // Initialize Pizzly const new host "pizzly.example.org" const 'api' // Connect a user to an API ( ) => { authId } console "Sucessfully connected!" ( ) => error console "It failed!" When a user is successfully connected, you retrieve an authId that you can use to make authenticated requests to the API. Here's a cURL on how to make a request to the Google Sheets API to create a spreadsheet on the user's drive: curl -X POST /proxy/google-sheets/ \
 -H "Pizzly-Auth-Id: REPLACE-WITH-YOUR-AUTH-ID" No matter what your backend is running on (Ruby, Go, Node.js), send your requests to the proxy. It makes integrating APIs much faster. You can even perform your calls from your frontend, with the . JS client Some demo Some great project are already using Pizzly to handle the API requests: Airtable Shipping Block Push to Google Sheets GitHub fetch profile (tutorial) in or React Vue.js At , Pizzly is a full part of our API integrations flow, to manage Slack notifications for example. Psst. Bearer.sh How it can help you? Pizzly supports more than 50 APIs out-of-the-box. All you need to do is set your credentials and scopes in the dashboard. This list includes the most common APIs, such as: : Gmail, Microsoft Teams, Slack, Zoom; Communication APIs : Front, Hubspot, Salesforce, etc. CRM : BitBucket, GitHub, GitLab, etc. Developer tools : Xero, Sellsy, Zoho Books, etc. Finance APIs : Asana, Google Drive, Google Sheets, Jira, Trello, etc. Productivity : Facebook, LinkedIn, Reddit, etc. Social APIs and more... But that's not all. Each pre-configured API is a .json file located . So if you want an API that is not pre-configured yet, you can set up the configuration as a new .json file within that directory. If ever you feel like sharing, create a new PR to share your own configuration with the community. within the /integrations/ folder Built with Node.js ⚡️ - To handle the OAuth dance Passport.js - To manage requests to the database 📃 Knex - For the dashboard templating ⚙️ EJS Vanilla JavaScript - For some magic 🍦 Support us , Tweet, share among your friends, teams and contacts! Star the repo on GitHub You can also get in touch directly with me via email at or on Twitter . And if you really want to help us make Pizzly better, ! corentin@bearer.sh @frenchcooc contribute to the GitHub repo Previously published at https://blog.bearer.sh/introducing-pizzly-oauth-proxy/

Our New Open Source OAuth Integrations Manager

I'm 99% sure that you've already used an OAuth based API. > 👉 If you signed up with your GitHub account on Hackernoon, you've used the GitHub API using their implementation of OAuth2. Every time you sign-in with Google (or Facebook) on a website, you are using OAuth2 as well. OAuth (especially OAuth2) is now everywhere, probably because it's the best authentication framework in terms of user experience (UX). The user clicks on a button, grants permission, and . voilà But in terms of developer experience (DX), OAuth is... tricky. Especially for beginners. Why? Probably because it introduces a lot of new concepts at once (see comments below). Today, I'll showcase something that we're proud of at Bearer.sh, , which helps with OAuth by focusing exclusively on the DX. I'm not saying that it makes OAuth great again for developers, but you get the idea. Pizzly Let's see how it looks like 👉 Curious about how you can do it on your application? Here's a full guide. The Vue.js skeleton To learn how to use an OAuth based API, we need a Vue.js skeleton. And the least that we need is an app that consumes an API endpoint using OAuth2. As you probably have a GitHub account, we will use that API, but you can easily switch to any other API that uses OAuth2 (Slack, Salesforce, ...) or OAuth1 (Twitter, Trello, ...). The GitHub API provides a handy endpoint ( ) to list all the repositories that a user has starred. This endpoint accepts authentication, so it looks like a good use case. /user/starred Here's how the application will look like: Latest repositories starred {{repository.name}} Whoa, such empty! Connect to GitHub <!DOCTYPE html> < > html < > body < = > div id "app" < = > main v-if "user" < > h1 </ > h1 < > ul < = > li v-for "repository in repositories" < = = > a :href "repository.html_url" target "_blank" </ > a </ > li </ > ul < = > p v-if "repositories.length === 0" </ > p </ > main < > div v-else < @ = > button click.prevent "connect" </ > button </ > div </ > div  < = > script src "https://cdn.jsdelivr.net/npm/pizzly-js@v0.2.7/dist/index.umd.min.js" </ > script  < = > script src "https://cdn.jsdelivr.net/npm/vue/dist/vue.js" </ > script < > script app = Vue({
        el: ,
        data: {
          user: ,
          repositories: []
        }
      }) var new '#app' null </ > script </ > body </ > html It's a very basic Vue.js application that displays the content of repositories[] when the user variable is set. Otherwise, it asks the user to connect to GitHub. The authentication part As said, we gonna use , an open-source project that handles OAuth dances, without headaches. It provides a method that triggers an authentication flow from your frontend. No need to deal with a backend, it's fully handled from the front. Pizzly .connect() Let's see how to update the skeleton above to use with Pizzly: app = Vue({ : , : { : , : []
  }, : { .$pizzly = Pizzly({ : , : }); }, : { : { .$pizzly
        .integration( )
        .connect()
        .then( .connectSuccess)
        .catch( .connectError);
    }, : { .user = data.authId; .log( )
    }, : { .error(err)
      alert( )
    }
  }
}); var new el "#app" data user null repositories mounted ( ) function // Here we initialize Pizzly. this new host "pushtogsheet.herokuapp.com" publishableKey "pope8Qy8qfYyppnHRMgLMpQ8MuEUKDGeyhfGCj" // I'm using my own instance of Pizzly which is hosted on Heroku. // Create yours for free and in a few clicks by following // https://github.com/Bearer/Pizzly#getting-started methods connect ( ) function // Here, we create a new method // that "connect" a user to GitHub this 'github' this this connectSuccess ( ) function data // On success, we update the user object this console 'Successfully logged in!' connectError ( ) function err console "Something went wrong. Look at the logs." That's it. A few lines of code in your application and you are ready to handle any OAuth based API 💪. The configuration part Pizzly is a self-hosted OAuth manager. This means that you need to host it somewhere, for example on Heroku (it takes 30 seconds). Once hosted somewhere, you can access Pizzly's dashboard, which is where you configure your GitHub integration. And ! voilà What's next? You now know how to authenticate a user towards any OAuth based API using a Vue.js application. It's easily adaptable to . No need to create backend routes or understand every single concepts of OAuth. Pizzly takes care of that for you (and for the experts, Pizzly automatically refreshes the ). all the most famous APIs access_token Again, to have a full understanding of the code and share your thoughts/questions in the comments below 👇 have a look at the CodePen Previously published at https://dev.to/bearer/how-to-use-an-oauth-based-api-in-vue-js-1elo

Stories, News & Mentions about VIZZLY

Vizzly’s Stories on HackerNoon