ANGULARJS & REALTIME #cloudparty – Bologna 2015 Gabriele Mittica – Corley srl
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