RSS

CORS Debug Page

0 Comments | This entry was posted on May 01 2019

I have been building RESTful API’s for years in many teams and with every project we seem to encounter a CORS issue. CORS is an acronym for Cross Origin Resource Sharing and it often comes into play with RESTful API’s and single page software applications build with frontend frameworks such as AngularJs or ReactJs.

CORS is something your browser will use to prevent it from making requests to a location it doesn’t have permission to access. The browser tests the permission by first sending a OPTIONS type request to the server and checks the special CORS headers. If the headers are present and valid for the domain that the application is hosted on, the app will then make the actual request to the API.

However if the API is not configured properly, it may not respond with the valid CORS headers, preventing the application from working. Sometimes the frontend web application may be at fault. It can be difficult getting to the root of the problem.

The API developer may use a tool such as Postman to test his API as s/he creates it but this will not make CORS requests as it’s not cross origin and therefore any CORS issue on a given endpoint may go unnoticed.

The CORS Debug Page is a stand-alone page that a developer can use to isolate the problem by either proving that the API works with a cross origin request or fails. Load the page in your browser and fill in the required fields including the endpoint in question and hit submit.

To better understand what is happening, open up the network Activity Monitor in the browser tools and watch the requests and their responses. If the request is successful it shows that the webapp is probably at fault. If it doesn’t succeed then the API is likely at fault.

Download or fork the project on Github.

Building RESTful APIs with Yii2

0 Comments | This entry was posted on Sep 21 2015

I have been building an API with Yii2 for the last four months and and I’m really enjoying it. The developers of Yii have done a tremendous job putting together a framework that makes building applications both fun and fast. The API is to be used by iOS and Android apps as well as a web app (Angular JS) to facilitate phone calls and messages, among other things.

Many of Yii’s strengths come from the clever and well thought-out design that makes common tasks incredibly easy to implement and more complex tasks easy to build whilst keeping the code and structure of your application clean. Some of my favourite attributes to see are:

RESTful services

Building a RESTful service is incredibly quick to build by calling the inbuilt scaffolding tool. It will read the database table to build the model, and also views if you’re building a traditional website. Then with just a few changes in the controller you can start creating, reading, updating and deleting records through your browser.

Behaviours

Attaching a behaviour to a component or controller is similar to extending a class but gives you more control and can act on events. Yii2 has a collection of behaviours that are built in but allows you to create your own. Two built-in behaviors that I’m using are Authenticator and CORS.

Authenticator behaviour: This behaviour allows you to easily implement common authentication models such as HTTP Basic Auth and OAuth. But I was able to add a custom authentication module to the auth behaviour to meet our unique rrequirements.

CORS behaviour: CORS (Cross Origin Resource Sharing) is a standard that allows browsers to make Javascript requests to servers that the Javascript files themselves weren’t server from. This is generally not possible due to security issues. CORS can be quite complicated and can cause major headaches but Yii2 allows you to simply include the behaviour to a controller and the API will respond with the required headers to each CORS request from the browser.

Custom authentication

Yii2 has a great solution for Authentication and has the common ones, such as OAuth and Basic Http Auth built in. But it also quite simple to add your own authentication if need be. The requirements for us was to allow each user to connect to the API with multiple devices. Therefore each device is required to send its individual token for each request made to the API. Yii2 makes this quite trivial.

Testing

Yii makes it easy to use use test databases and environment variables which makes testing easy. My solution was to setup an alias domain (env.myapi.test) for each environment. When Yii receives a request on a domain ending with .test it will use test variables and database to run my tests and not pollute the dev or prod data with test data. Every API endpoint is tested and it’s very reassuring watching the tests that you have not broken any endpoints when new features are added.

Integrating Campaign Monitor API With WordPress

1 Comment | This entry was posted on May 04 2011

One of the most enjoyable things in software development is combining different tools or datasets together into one application. Sometimes this is done to build interesting mashups or more usually to automate an otherwise manual task. Is the case of using the Campaign Monitor API is to prevent having to do a repetitive task manually.

The project I have been working on for the last two weeks is a WordPress blog that allows site visitors to subscribe to a section (or category) of the site to be notified when a new post has been added. As with this project it is expected to have many hundreds or thousands of subscribers, it is not feasible to send mail directly from the web server because of the overhead and the potential of having the server black listed by spam prevention services. Therefore Campaign Monitor was chosen to send any new post notifications out to the subscribers via the API.

The Campaign Monitor API is very easy to use and does nearly everything that is possible through the normal web based interface.  For this solution there were three API calls required to achieve the necessary task, 1. add new subscribers to a list; 2. create a new campaign for each new post; and 3. send the campaign to the subscribers in the list.

A WordPress plugin was created to display a form to populate required Campaign Monitor values such as client and list Ids and to define the functions that will execute the tasks. The tasks are broken down as follows:

  1. A new client list was first added manually to the Campaign Manager client. In the site, new subscribers were already being saved to the WordPress wp_users table. A new function was created and called from this block of code to add subscribers to the specified list.
  2. Each time a new post is created, a hook is used to call a function that gathers that post information and creates a new campaign which is assigned to the existing list. However, before this is done a new html campaign (edm) is created from a template but populated with the post’s title and URL so that the link can be clicked in the receivers email client. This URL is supplied in the API call when creating the new campaign.
  3. After the campaign has been created, another function is been called to send it of to all those in the subscriber list.

And it’s done. The API is simple to use and requires little effort to get started. It can be downloaded from Github in 5 popular web development languages and is supplied with sample code. Each call to update or read from the API is achieved with just a handful of lines and can be sent and received in either XML or JSON. The documentation is clear and intuitive.

For more information, visit the website.