Web push notification using Python

Posted on by mushfiq

Building a web push should be straight forward. But while implementing it, I found the resources lacks and there is no straight forward guide to follow and implement it in your existing stack or form scratch. Which make sense as its still in early days. In this blog post, I would be covering step by step procedure to build a web push service. If you are implementing a push service from scratch or integrating it in your existing application, this blog post will help you to reach your goal. There will be following sections in this post:

  • How web push works
  • Building a push service
  • Browser supports
  • References

How web push works

On high level web push needs three parties/component to work. Those are:

  • Client side application: Get users permissions, get users subscription token and sends to the backend service.
  • Push Service: Validates push request coming from backend service and forward the push message to the appropriate browser.
  • Backend service: Persists users subscription information and initiate push sending.

Steps to send/receive push web push notification

  1. User accepts push permission and browser generate push subscription token via communicating with the Push API
  2.  Client app should send the subscription information to the backend service and backend service should be persisting the subscription information and use it to the next steps
  3. Backend push service initiate the push and send the payload to the specific push service (which is denoted in the users subscription information)
  4. Push service receives the push notification and forward it the specific user and browser display the notification

Backend service using python

We will be building a REST interface which will communicate with the client application and push service. It will store the subscription information of users and distribute VAPID  public key. VAPID is the short term for Voluntary Application Server Identification, the generated public key will be used via the client app.  We will need to develop following API endpoints:

  1. /subscription
    • GET – to get vapid public key
    • POST – to store subscription information
  2. /push
    • POST – will send push request to all users ( will be used for testing )

Generate the VAPIDs via following command:


openssl ecparam -name prime256v1 -genkey -noout -out vapid_private.pem
openssl ec -in vapid_private.pem -pubout -out vapid_public.pem

Create base64 encoded DER representation of the keys:


openssl ec -in ~/.ssh/vapid_private.pem -outform DER|tail -c +8|head -c 32|base64|tr -d '=' |tr '/+' '_-' >> private_key.txt

openssl ec -in ~/.ssh/vapid_private.pem -pubout -outform DER|tail -c 65|base64|tr -d '=' |tr '/+' '_-' >> public_key.txt

These VAPIDs keys will be used in the newly developed backend service. We will be using pywebpush library for sending the web push notification. We will be wrapping the push like below by using newly generated keys:

import os
from pywebpush import webpush, WebPushException

DER_BASE64_ENCODED_PRIVATE_KEY_FILE_PATH = os.getenv("DER_BASE64_ENCODED_PRIVATE_KEY_FILE_PATH")
DER_BASE64_ENCODED_PUBLIC_KEY_FILE_PATH = os.getenv("DER_BASE64_ENCODED_PUBLIC_KEY_FILE_PATH")

VAPID_PRIVATE_KEY = open(DER_BASE64_ENCODED_PRIVATE_KEY_FILE_PATH, "r+").readline().strip("\n")
VAPID_PUBLIC_KEY = open(DER_BASE64_ENCODED_PUBLIC_KEY_FILE_PATH, "r+").read().strip("\n")

VAPID_CLAIMS = {
"sub": "mailto:youremail"
}

def send_web_push(subscription_information, message_body):
    return webpush(
        subscription_info=subscription_information,
        data=message_body,
        vapid_private_key=VAPID_PRIVATE_KEY,
        vapid_claims=VAPID_CLAIMS
    )

Full service code can be found here as gist. Follow the gist readme for details about running the service.

Frontend application to test the backend service

Rather than writting an application form scratch lets use google push example client app. Which you will find here.
Use the 08-push-subscription-change version which is last part of step by step tutorial from Google. Put the VAPID public key in main.js in this variable applicationServerPublicKey. Client side application will use the public key to generate the subscription information. And send the public key which will be used by Push Service.

Putting it all together

Meanwhile pull the whole code from gist, install necessary packages and run it via following commands.


pip install -r requirements.txt

python api.py

Run following command to get the VAPID public key from the service via following command:


curl -X GET http://127.0.0.1:5000/subscription

It will return the public key like as key value pair. Copy the public key and paste it to frontend application as value of applicationServerPublicKey in main.js. 

Navigate the browser to the Push lab application and click on “Enable Push Messaging”, a browser pop up will appear like below:

Click on “Allow” by which you will be giving permission to the application to show web push notification. And the client app will generate the PushSubscription object. Which we will need to send to the our backend service which will persists the information and use to send around a push notification.

It will generate the payload which should be sent to backend service via following curl request:

curl -X POST http://127.0.0.1:5000/push

The push will arrive right top of the screen something like below:

Browser supports push

While writing this blog post Chrome and Firefox only supports push. Here you can find latest supported browser lists.

Miscellaneous

On Mac while developing the backend service, openssl can throw exception while sending out push, cryptography library can not find appropriate version of openssl. Which looks like below:

Symbol not found: _EC_curve_nist2nid
Referenced from: /usr/local/opt/openssl/lib/libssl.1.0.0.dylib
Expected in: /usr/lib/libcrypto.dylib in /usr/local/opt/openssl/lib/libssl.1.0.0.dylib

To fix the issue we need to export openssl library path like below:


export DYLD_LIBRARY_PATH=/usr/local/opt/openssl/lib

Also I faced an issue with python cryptography library it can not find the right version of openssl and install cryptography based on inappropriate version.
To overcome that, I had to uninstall and install it again like below:

pip uninstall cryptography
LDFLAGS="-L/usr/local/opt/openssl/lib" pip install cryptography --no-use-wheel

References

  1. Google post details about how push works
  2. Firefox post web push API 
Advertisements

Building a micro service with Django, Docker.

Posted on by mushfiq

If you never wrote a micro service before but you know what is a micro service is, this post will introduce you by writing a μ-service. As it is a new “Buzz” floating around for last couple of years. Read details.

Micro service architecture has definitely many advantages over monolithic application, on the other hand it depends on several factors whether it make sense to go with micro service architecture or not. If you want to read more details about Micro service pattern and its pros and cons, please check this post for details. Specially micro service “Pros”, “Cons” section.

Let’s not get into the debate and start writing some code. In this post we will be doing the following:

  1. Building a REST API using Django (DRF)
  2. Docerize the newly developed REST API and run it via uwsgi

Step 1: Building the REST API using Django:

We will be using Django REST Framework (DRF). The API will be exposing data for Event Management company (imaginary) where the company uses the API to manage their events and performer. For sake of simplicity in our API we will be able to able Add new performers and events. And there will be listing endpoint where we will be listing recent events and associated performers name.

So lets write some code:

Django REST framework made easier to develop REST API on top of Django, all one need to do define serializers and the load query objects via Django models and thats it. DRF will take care rest of the staff. As the API is minimum and we are doing CRUD, in the serializers we need to extend serializers. Model and thats is. Finally Views.py looks like below:


class EventViewSet(viewsets.ModelViewSet):
   queryset = Event.objects.all()
   serializer_class = EventSerializer


class PersonViewSet(viewsets.ModelViewSet):
   queryset = Person.objects.all()
   serializer_class = PersonSerializer

Endpoints:


/event/

/event/:eventId

/person/

/person/:personId

You can checkout the codebase from here.

Step 2: Dockerized μ-service:

Lets checkout the Dockerfile for details:

In the Dockerfile from Line 1-11 we are cloning the repo, updating the working directory, installing dependencies . From line 13-19 we creating db through manage.py, loading dummy data and running uwsgi to serve the API.

Let’s run the docker file like below:

docker-machine start default #starting docker virtual machine named default
docker build -t mush/djmsc . #building docker image from the Docker file
docker run -d -p 8000:8000 mush/djmsc #running the newly build docker image

List the IP of the docker machine and then make a cURL request to check whether the REST API is up or not
like below:

api=$(docker-machine ip default) #returns in which IP docker-machine is running
curl $api:8000/person/?format=json | json_pp

And it returns json response like below:

api_response

You can pull the docker image from here and start your own container 🙂

Good read: Building Microservices

Dockerize your golang application.

Posted on by mushfiq

Playing with docker for last couple of projects. So far it’s good experience. In this post we will develop a REST API using Golang and then Dockerize the deployment. The REST API will be very basic with just a single endpoint. So we will cover the following section in the post:

  1. Developing minimal REST endpoint
  2. Coding a Docker file
  3. Running the Docker container with the API
  4. Finally will push the Docker image to a docker registry

docker_loves_golang

Developing REST endpoint

For developing the REST API we are going to use Gin which is a HTTP web framework. It provides standard solutions/API for solving common problems using features like middleware support, Routing and standard convention of error management. But, sometime it make sense only using Go’s net/http can be used to develop any http based application but to avoid developing everything from scratch, Gin will give us a good starting point.

The REST API returns current time when in the route “/”. The code look like below:

In the main function we are declaring the Router for the API and passing the handler function associated with the endpoint. And in the handler method we are getting current time and passing it to Gin context.

Creating the Dockerfile

For Dockerizing the REST API lets develop the Dockerfile. We will use Golang official docker image because its used by many other developers and again we don’t need to do all the work of choosing an OS, pulling Golang setting up environment further steps.

In the Dockerfile we are using bare bone docker image scratch which is minimal base image.

In line 5, we are cloning the binary of the api.

In line 7 running the latest build and finally exposing the port of the docker container via EXPOSE 8080.

So far we developed the API with the endpoint and also coded the Docker file. Lets build the docker image and run the Docker container.

Running the docker container

In the local development machine we are using Docker-machine. So we need to follow following steps:

docker-machine start default
docker build -t mush/gondar .

docker build builds docker image (name of our docker image is gondar) for the container and then we need to run the image as a container with the following command:

docker images #to list current docker images
docker run -d -p 80:8080 mush/gondar

In line 2 we are running the newly build docker image and forwarding port from docker to host via -p. And we are good to go, our docker container is running and we can check it via a curl command like below:

api=$(docker-machine ip default) #getting IP of the docker machine host
curl $api:80

which returns current time as JSON response.

Pushing newly build Docker image

So the last step would be pushing the latest created Docker image to a registry, we will use docker hub.

First, we need to login to docker hub via following command:

docker login --username=yourhubusername --email=youremail@company.com

And then we need to push newly created Docker image via following command:

docker push mush/gondar

That’s it, we just created a REST API and also developed Docker image for deployment it as a container based service 🙂

Further reading:

Project to watch:

Access key based authentication in DRF (Django REST Framework)

Posted on by mushfiq

If you start developing a REST API, one of the fundamental requirements you will need to implement an authentication system. Which prevents any anonymous  user to expose your REST endpoint.

For developing REST API, I used to start from scratch by using Django/Flask, then I used Piston . And when the further development of Piston stopped, I started using Tastypie. Last year I was reading documentation of DRF and I realised, my next REST API I will develop on top of DRF. And since then I am using it. The documentation  is organised and it has a growing community around it.

So back to the point, in DRF you can have an access key based authentication system quickly without coding much configuration and code.

While authenticating an user via access key, the core idea is, we need to check whether there is any user exists with the provided access_key or not. And to return data or raising exception.

At the beginning, add a new file in your django app called “authentication.py“. To write custom authentication in DRF,  “BaseAuthentication” and then we need to override “authenticate” method. authenticate takes to django request object from which we will get the access key like request.get(“access_key”, None). The whole sub-class look like below:

And next step is to add it to our REST_FRAMEWORK settings in project settings (settings.py), like below:

 REST_FRAMEWORK = {
    'DEFAULT_AUTHENTICATION_CLASSES': (
        'apps.newspaper.authentication.AccessKeyAuthentication',
    )
}

To use it, we need to import it and apply it as a decorator like below:

from apps.newspaper.authentication import AccessKeyAuthentication
@api_view()
@authentication_classes((AccessKeyAuthentication, ))
def list_news(request):
   # your code goes here

And then call the endpoint like: /news?access_key=”ACCESS_KEY”. And it will return our REST output.

In this tutorial, in Subscriber model I have a field called which is “access_key”, you can use any other models/field for authentication checking.

This is the preferred way I mostly apply  authentication in DRF based REST API and then as the API grows I used to add more sophisticated authentication for the API. DRF also comes with token based authentication which is described in the docs briefly.

Further reading:
DRF Authentication Documentation

 

Enable CORS in bottle python

Posted on by mushfiq

To access data of the REST API from other domain API should have CORS enabled for the website. Like most of all framework Bottle by default does not set CORS header. To enable it, following decorator can be used:

In the API response header “Access-Control-Allow-Origin” will be added. As per our example, it will be Access-Control-Allow-Origin: example.com.  To enable it for any website you can set it as “*”.   There is an interesting discussion whether to set it * or not.

Google places PHP API client.

Posted on by mushfiq

Google have an API to provide data related place which is call “Google Places”. You can search to the api using different name of the location and also can append services (e.g Burger in Newyork) and it returns matched you keyword, location.

Last year I wrote a wrapper on PHP on top of the API to access it from PHP application.  Used Composer for the first time, as dependency manager for the wrapper.

google_places_berlin

To use it set the configuration (update the API key of you google place account) and you are ready to go.

Feel free to fork it and contribute 🙂

Node.js script to make a zip archive

Posted on by mushfiq

While working in a node.js project, I had an use case where user will have to query based on days and query result will be pdf filtered by  the date range. And I have to create a directory of pdf files and return it as a zip file for the user.

As there are many modules related to zip, I tried couple of the active modules but none was meeting my requirements. And some of those modules has different bugs/issues which were open at that time. After different try/error and going through most of the zip modules, I used archiver.  And below a sample how it worked.

 

After cloning the gist make sure you have files to zip and run the script like below:

node_archiver

Happy coding 🙂

Python script to download Google spreadsheet.

Posted on by mushfiq

I like to automate tasks, I think every software engineer like that, right? After all thats our job. I wrote the following script for downloading google spreadsheet as csv. Just got it when I was going through my old code base, hopefully it would help someone else too.

To run the script you have to install gdata python module.

 

You have to run the script like below:


python gdooc.py spread_sheet_id#gid=tab_id

For example check the following screenshot:

cmd

 

And after downloading you will have the csv file in the same directory, currently the document id is being used as name of the csv file, you can change it as you want.

Happy Coding 🙂

Attaching new EBS volume in AWS EC2 instance.

Posted on by mushfiq

Amazon AWS plus EC2 logo_scaled

In AWS, EC2 by default provide 8GB space, in a past project I had to extend the size of one of my development instance as the data was growing fast. From AWS console add new EBS volume. Then attach it to your instance by AWS console and log into you EC2 instance via ssh.

Run following command:


sudo fdisk -l

which will show list of volumes with the newly added volume as unpartitioned. Something like below:

Screen Shot 2012-09-19 at 1_up_2

Then next step is to build the file system of new EBS volume using unix command mkfs. Like below:


sudo mkfs -t ext4 /dev/xvdf

Screen Shot 2012-09-19 at 1_mkfs

Next you have to mount it in your desired path,  e.g. /mnt/ebs1. Run following command:


sudo mount /dev/xvdf /mnt/ebs1

Then add an entry into /etc/fstab. it would be something like this:


"/dev/xvdf  /mnt/ebs1 ext4 defaults 1 1"

There are facts if you add the EBS volume to your /etc/fstab and some how if there are  issue (like file system corruption, unavailability of zone  etc ) with the volume during booting the instance it will not be booted. Because while booting your system will look for the entry and when its not available the whole instance is down. Check AWS forum post for details.

And also check this whole SO discussion to resolve this issue in alternative way ( using a script for example).

Check following docs if you are more interested about the unix commands that used in this post.

fdisk, mount and unmount  and mkfs.

Serving static files using Restify

Posted on by mushfiq

I was working with Node.js for building a REST API. For REST API module I was using restify. The restify is a simple and yet powerful node module. One of the use case of the API was, I had to serve static file for specific routing. I went through the docs and tried different things but couldn’t figure yet out at first. After hustling for hours,  me and Christian started to go deep into it and figured it out!

So in my case the configuration was  something like this


server.get(/.*/, restify.serveStatic({
    'directory': 'static_content',
    'default': 'index.html'
 }));

When restify internally resolve the path, it looks for ‘static_content/index.html’.

I have coded a very basic application to show it works, sample application looks like below:

In this sample application the static content (index.html) is in the same root as server.js as why ‘directory’: ‘.’.

Use package.json to install necessary module and start playing 🙂