AngularJS: how to use AWS cloud and realtime services

ANGULARJS & REALTIME

#cloudparty – Bologna 2015

Gabriele Mittica – Corley srl

FrontEnd BackEnd

HTML/JS REST PHP

MySQL / Mongo

HTTP

HTML/JSS AWS

CLOUD

The goal is use cloud services with no backend dependencies

• With AngularJS and cloud based

services we can interact directly

between clients

Signup to AWS on aws.amazon.com

Now we can use the JS/Browser AWS SDK

Paste in your HTML:

<script src="https://sdk.amazonaws.com/js/aws-sdk-2.0.0-rc6.min.js"></script>

available on http://aws.amazon.com/javascript

Configure with your IAM credentials:

<script>

AWS.config.update({accessKeyId: 'akid', secretAccessKey: 'secret'});

AWS.config.region = ‘eu-west-1'; //set your preferred region

</script>

Client

Storage

Nosql DB

Notification

Code

Now we can use directly cloud services…

Our keys (primarily the secret one) are exposed.

Bad guys (backend developers?) could use our

keys for malicious intents!

<?php

use Aws\S3\S3Client;

$client = S3Client::factory(array(

'key' => 'our key',

'secret' => 'our key'

));

while(true) {

$result = $client->putObject(array(

'Bucket' => ’myBucket’,

'Key' => 'data.txt',

'Body' => ‘Give me a million dollars!'

));

}

Usually we have an indetity provider that

check our credentials.

Client

Storage

DB

Other services…

PHP Token

INTRODUCING AWS COGNITO

How it works:

Cloud

Google FB OpenID Amazon

Cognito

CLIENT

The client gets role by cognito after

social login

Create a project with Google Cloud

Enable Google+ API

Create Client ID

Set trusted domains

Get app id and keys

<p> <button google-signin client-id='{{ googleId }}'></button>

</p>

AWS: create a Cognito identity pool

Create auth & unauth roles

Link Google app to identity pool

Set cognito in app config()

crAwsProvider.setCognito({

AccountId: '728936874646',

IdentityPoolId: 'eu-west-1:716e19…6-86f2ba1f1d9f',

RoleArnUnauth: 'arn:aws:iam::728…appUnauth_DefaultRole',

RoleArnAuth: 'arn:aws:iam::728…appAuth_DefaultRole'

});

Auth or UnAuth?

Cognito gives us a role, both for auth and unauth scenarios. Cognito shares data across clients under same identity

App starts

Cognito starts

Get Unauth

Role

Login with G+

Get Auth Role

Pusher is a cloud based service for realtime connections between clients

Final conf with PUSHER, G+, AWS

.config(['crAwsProvider', function config(crAwsProvider){

crAwsProvider.setCognito({

AccountId: '728936874646',

IdentityPoolId: 'eu-west-1:716e19a5-32f0-47b6-8e36-86f2ba1f1d9f',

RoleArnUnauth: 'arn:aws:iam::7289366xxxappUnauth_DefaultRole',

RoleArnAuth: 'arn:aws:iam::728936874xxxxAuth_DefaultRole'

});

}])

.value("config", {

google: {

"clientId":"1449487xaqmguf8nuukt5pdnas33ss"

},

pusher: {

"appKey": "fa94738e1c672c0e3",

"channel": "private-beer-stream",

"authEndpoint": "http://localhost/php-pusher-test/auth"

}

})

Using PUSHER:

.run(['$rootScope', '$pusher', 'config', function run($rootScope,

$pusher, config){

//start pusher client

var client = new Pusher(config.pusher.appKey, {

authEndpoint: config.pusher.authEndpoint });

window.pusher = $pusher(client);

//subscribe to private channel

window.pusherChannel = window.pusher.subscribe(config.pusher.channel);

//waiting for events

window.pusher.bind('client-new-post', function(data) {

$rootScope.$broadcast('new-post', data);

});

//trigger events after local event binding

window.pusherChannel.bind('pusher:subscription_succeeded',

function() {

$rootScope.$on('beer-changed', function(event, data) {

window.pusherChannel.trigger('client-new-post', data);

});

});

THANK YOU! @gabrielemittica

#cloudparty