AngularJS: how to use AWS cloud and realtime services
-
Upload
corley-srl -
Category
Software
-
view
619 -
download
2
Transcript of AngularJS: how to use AWS cloud and realtime services
![Page 1: AngularJS: how to use AWS cloud and realtime services](https://reader030.fdocuments.net/reader030/viewer/2022032422/55a926741a28abd7578b4617/html5/thumbnails/1.jpg)
ANGULARJS & REALTIME
#cloudparty – Bologna 2015
Gabriele Mittica – Corley srl
![Page 2: AngularJS: how to use AWS cloud and realtime services](https://reader030.fdocuments.net/reader030/viewer/2022032422/55a926741a28abd7578b4617/html5/thumbnails/2.jpg)
FrontEnd BackEnd
HTML/JS REST PHP
MySQL / Mongo
HTTP
![Page 3: AngularJS: how to use AWS cloud and realtime services](https://reader030.fdocuments.net/reader030/viewer/2022032422/55a926741a28abd7578b4617/html5/thumbnails/3.jpg)
HTML/JSS AWS
CLOUD
The goal is use cloud services with no backend dependencies
![Page 4: AngularJS: how to use AWS cloud and realtime services](https://reader030.fdocuments.net/reader030/viewer/2022032422/55a926741a28abd7578b4617/html5/thumbnails/4.jpg)
• With AngularJS and cloud based
services we can interact directly
between clients
![Page 5: AngularJS: how to use AWS cloud and realtime services](https://reader030.fdocuments.net/reader030/viewer/2022032422/55a926741a28abd7578b4617/html5/thumbnails/5.jpg)
Signup to AWS on aws.amazon.com
![Page 6: AngularJS: how to use AWS cloud and realtime services](https://reader030.fdocuments.net/reader030/viewer/2022032422/55a926741a28abd7578b4617/html5/thumbnails/6.jpg)
![Page 7: AngularJS: how to use AWS cloud and realtime services](https://reader030.fdocuments.net/reader030/viewer/2022032422/55a926741a28abd7578b4617/html5/thumbnails/7.jpg)
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>
![Page 8: AngularJS: how to use AWS cloud and realtime services](https://reader030.fdocuments.net/reader030/viewer/2022032422/55a926741a28abd7578b4617/html5/thumbnails/8.jpg)
Client
Storage
Nosql DB
Notification
Code
Now we can use directly cloud services…
![Page 9: AngularJS: how to use AWS cloud and realtime services](https://reader030.fdocuments.net/reader030/viewer/2022032422/55a926741a28abd7578b4617/html5/thumbnails/9.jpg)
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!'
));
}
![Page 10: AngularJS: how to use AWS cloud and realtime services](https://reader030.fdocuments.net/reader030/viewer/2022032422/55a926741a28abd7578b4617/html5/thumbnails/10.jpg)
Usually we have an indetity provider that
check our credentials.
Client
Storage
DB
Other services…
PHP Token
![Page 11: AngularJS: how to use AWS cloud and realtime services](https://reader030.fdocuments.net/reader030/viewer/2022032422/55a926741a28abd7578b4617/html5/thumbnails/11.jpg)
INTRODUCING AWS COGNITO
![Page 12: AngularJS: how to use AWS cloud and realtime services](https://reader030.fdocuments.net/reader030/viewer/2022032422/55a926741a28abd7578b4617/html5/thumbnails/12.jpg)
How it works:
Cloud
Google FB OpenID Amazon
Cognito
CLIENT
The client gets role by cognito after
social login
![Page 13: AngularJS: how to use AWS cloud and realtime services](https://reader030.fdocuments.net/reader030/viewer/2022032422/55a926741a28abd7578b4617/html5/thumbnails/13.jpg)
Create a project with Google Cloud
![Page 14: AngularJS: how to use AWS cloud and realtime services](https://reader030.fdocuments.net/reader030/viewer/2022032422/55a926741a28abd7578b4617/html5/thumbnails/14.jpg)
Enable Google+ API
![Page 15: AngularJS: how to use AWS cloud and realtime services](https://reader030.fdocuments.net/reader030/viewer/2022032422/55a926741a28abd7578b4617/html5/thumbnails/15.jpg)
Create Client ID
![Page 16: AngularJS: how to use AWS cloud and realtime services](https://reader030.fdocuments.net/reader030/viewer/2022032422/55a926741a28abd7578b4617/html5/thumbnails/16.jpg)
Set trusted domains
![Page 17: AngularJS: how to use AWS cloud and realtime services](https://reader030.fdocuments.net/reader030/viewer/2022032422/55a926741a28abd7578b4617/html5/thumbnails/17.jpg)
Get app id and keys
![Page 18: AngularJS: how to use AWS cloud and realtime services](https://reader030.fdocuments.net/reader030/viewer/2022032422/55a926741a28abd7578b4617/html5/thumbnails/18.jpg)
<p> <button google-signin client-id='{{ googleId }}'></button>
</p>
![Page 19: AngularJS: how to use AWS cloud and realtime services](https://reader030.fdocuments.net/reader030/viewer/2022032422/55a926741a28abd7578b4617/html5/thumbnails/19.jpg)
AWS: create a Cognito identity pool
![Page 20: AngularJS: how to use AWS cloud and realtime services](https://reader030.fdocuments.net/reader030/viewer/2022032422/55a926741a28abd7578b4617/html5/thumbnails/20.jpg)
![Page 21: AngularJS: how to use AWS cloud and realtime services](https://reader030.fdocuments.net/reader030/viewer/2022032422/55a926741a28abd7578b4617/html5/thumbnails/21.jpg)
Create auth & unauth roles
![Page 22: AngularJS: how to use AWS cloud and realtime services](https://reader030.fdocuments.net/reader030/viewer/2022032422/55a926741a28abd7578b4617/html5/thumbnails/22.jpg)
Link Google app to identity pool
![Page 23: AngularJS: how to use AWS cloud and realtime services](https://reader030.fdocuments.net/reader030/viewer/2022032422/55a926741a28abd7578b4617/html5/thumbnails/23.jpg)
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'
});
![Page 24: AngularJS: how to use AWS cloud and realtime services](https://reader030.fdocuments.net/reader030/viewer/2022032422/55a926741a28abd7578b4617/html5/thumbnails/24.jpg)
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
![Page 25: AngularJS: how to use AWS cloud and realtime services](https://reader030.fdocuments.net/reader030/viewer/2022032422/55a926741a28abd7578b4617/html5/thumbnails/25.jpg)
![Page 26: AngularJS: how to use AWS cloud and realtime services](https://reader030.fdocuments.net/reader030/viewer/2022032422/55a926741a28abd7578b4617/html5/thumbnails/26.jpg)
Pusher is a cloud based service for realtime connections between clients
![Page 27: AngularJS: how to use AWS cloud and realtime services](https://reader030.fdocuments.net/reader030/viewer/2022032422/55a926741a28abd7578b4617/html5/thumbnails/27.jpg)
![Page 28: AngularJS: how to use AWS cloud and realtime services](https://reader030.fdocuments.net/reader030/viewer/2022032422/55a926741a28abd7578b4617/html5/thumbnails/28.jpg)
![Page 29: AngularJS: how to use AWS cloud and realtime services](https://reader030.fdocuments.net/reader030/viewer/2022032422/55a926741a28abd7578b4617/html5/thumbnails/29.jpg)
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"
}
})
![Page 30: AngularJS: how to use AWS cloud and realtime services](https://reader030.fdocuments.net/reader030/viewer/2022032422/55a926741a28abd7578b4617/html5/thumbnails/30.jpg)
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);
});
});
![Page 31: AngularJS: how to use AWS cloud and realtime services](https://reader030.fdocuments.net/reader030/viewer/2022032422/55a926741a28abd7578b4617/html5/thumbnails/31.jpg)
![Page 32: AngularJS: how to use AWS cloud and realtime services](https://reader030.fdocuments.net/reader030/viewer/2022032422/55a926741a28abd7578b4617/html5/thumbnails/32.jpg)
THANK YOU! @gabrielemittica
#cloudparty