Fusio

Fusio as backend API for an AngularJS app

In this tutorial we build a small todo app using AngularJS and Fusio as backend to store the entries. The code of this sample is also available on GitHub. In this example we use AngularJS. The API which we build is also available at the demo and the default deploy configuration contains already this example.

Build the deploy configuration
routes:
  "/todo/:todo_id":
    version: 1
    methods:
      GET:
        public: true
        response: Todo
        action: Fusio\Custom\Action\Todo\Row
      DELETE:
        public: false
        request: Passthru
        response: Todo-Message
        action: Fusio\Custom\Action\Todo\Delete
  "/todo":
    version: 1
    methods:
      GET:
        public: true
        response: Fusio\Custom\Action\Todo\Collection
        action: Todo-List
      POST:
        public: false
        request: Todo
        response: Todo-Message
        action: Fusio\Custom\Action\Todo\Insert
schema:
  Todo: !include resources/schema/todo/entity.json
  Todo-Collection: !include resources/schema/todo/collection.json
  Todo-Message: !include resources/schema/todo/message.json
connection:
  Default-Connection:
    class: Fusio\Adapter\Sql\Connection\SqlAdvanced
    config:
      url: "sqlite:///${dir.cache}/todo-app.db"
migration:
  Default-Connection:
    - resources/sql/v1_schema.sql
Deploy the endpoint

After deployment the API is available the at the endpoints /todo and /todo/:todo_id. Now we need to build the frontend client.

php bin/fusio deploy
Authentication

We use the AngularJS satellizer module to provide login and registration functionality.

todoApp.config(function($authProvider) {
  $authProvider.baseUrl = '/app/';
  $authProvider.loginUrl = fusio_url + 'consumer/login';
  $authProvider.signupUrl = fusio_url + 'consumer/register';
});

Beside the normal login we could also setup other login provider i.e. GitHub or Google. Therefor you need to configure the provider at satellizer:

$authProvider.google({
  url: 'consumer/provider/google',
  clientId: '' // Google Client ID
});

Also you need to set the app secret to the Fusio backend settings. So that Fusio can handle the automatic creation of the client account.

Get Todo entries

We use a simple function to retrieve all todo entries from the backend API. Since the endpoint is public we dont need authorization. Also we convert the insert date to a local date string.

$scope.getTodos = function() {
  $http.get(fusio_url + 'todo')
    .then(function(response){
      $scope.todos = response.data.entry.map(function(entry){
        entry.insertDate = new Date(entry.insertDate).toLocaleString();
        return entry;
      });
    })
    .catch(function(response){
      $scope.response = response.data;
    });
};
Insert Todo entry

To insert entries we configure the Authorization header. Then we post the complete todo object as json to the endpoint.

$scope.insertTodo = function() {
  var config = {};
  if ($auth.isAuthenticated()) {
    config.headers = {};
    config.headers['Authorization'] = 'Bearer ' + $auth.getPayload().sub;
  }

  $http.post(fusio_url + 'todo', $scope.todo, config)
    .then(function(response){
      $scope.response = response.data;
      $scope.todo = {
        title: ""
      };
      $scope.getTodos();
    })
    .catch(function(response){
      $scope.response = response.data;
    });
};
Delete Todo entry

To delete an entry we also need to configure the Authorization header and send an DELETE request to the endpoint. After successful deletion we reload the todo list.

$scope.removeTodo = function(todo) {
  var config = {};
  if ($auth.isAuthenticated()) {
    config.headers = {};
    config.headers['Authorization'] = 'Bearer ' + $auth.getPayload().sub;
  }

  $http.delete(fusio_url + 'todo/' + todo.id, config)
    .then(function(response){
      $scope.response = response.data;

      $scope.getTodos();
    })
    .catch(function(response){
      $scope.response = response.data;
    });
};
Conclusion

In this example we have build a small AngularJS app which uses Fusio as backend API. It shows how simply you can build a complete AngularJS app with authentication using Fusio as backend.