MyNote - クライアントのJavaScriptと Cognito ユーザー認証の連携
今回は、以下を実現します。
(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/ja_JP/sdk.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
window.fbAsyncInit = function() {
console.log('fbAsyncInit');
FB.init({
appId : '<facebook AppID>',
cookie : true, // enable cookies to allow the server to access
// the session
xfbml : true, // parse social plugins on this page
version : 'v2.8' // use version
});
if (g_fb) {
g_fb.checkLoginStatus();
} else {
console.log("g_fb is null");
}
};
function Facebook() {
var m_logInController = null;
this.init = function (logInController) {
console.log('facebook.init');
m_logInController = logInController;
};
this.checkLoginStatus = function() {
FB.getLoginStatus(function(response) {
statusChangeCallback(response);
});
}
function statusChangeCallback(response) {
console.log('statusChangeCallback');
console.log(response);
// The response object is returned with a status field that lets the
// app know the current login status of the person.
// Full docs on the response object can be found in the documentation
// for FB.getLoginStatus().
if (response.status === 'connected') {
// Logged into your app and Facebook.
console.log('Welcome! Fetching your information.... ');
FB.api('/me', function(response) {
console.log('Successful login for: ' + response.name);
document.getElementById('fb_status').innerHTML =
'Thanks for logging in, ' + response.name + '!';
});
// Check if the user logged in successfully.
if (m_logInController) {
m_logInController.logIn(response.authResponse);
}
} else if (response.status === 'not_authorized') {
// The person is logged into Facebook, but not your app.
document.getElementById('fb_status').innerHTML = 'Please log ' +
'into this app.';
if (m_logInController) {
m_logInController.logOut();
}
} else {
// The person is not logged into Facebook, so we're not sure if
// they are logged into this app or not.
document.getElementById('fb_status').innerHTML = 'Please log ' +
'into Facebook.';
if (m_logInController) {
m_logInController.logOut();
}
}
}
}
<div class="fb-login-button" data-max-rows="1" data-size="medium" data-show-faces="false" data-auto-logout-link="true" onlogin="g_fb.checkLoginStatus();"></div> <div id="fb_status"></div>
g_fb = new Facebook(); g_fb.init(g_cognito);
function statusChangeCallback(response) {
...
if (response.status === 'connected') {
...
if (m_logInController) {
m_logInController.logIn(response.authResponse);
}
} else if (response.status === 'not_authorized') {
...
if (m_logInController) {
m_logInController.logOut();
}
} else {
...
if (m_logInController) {
m_logInController.logOut();
}
}
this.logIn = function(credential) {
var params = {
IdentityPoolId: m_identityPoolId,
RoleArn: m_roleArn,
Logins: {
'graph.facebook.com' : credential.accessToken
}
};
AWS.config.credentials = new AWS.CognitoIdentityCredentials(params);
AWS.config.credentials.clearCachedId(); // これがないと、ユーザー切り替え時に。get が失敗する。
// Obtain AWS credentials
AWS.config.credentials.get(function(err){
if (err) {
console.log("credentials.get error:" + err);
if (m_logInCallback) {
m_logInCallback(false, "credentials.get error code:\n" + JSON.stringify(err, null, 2));
}
} else {
console.log("Cognito Identity Id: " + AWS.config.credentials.identityId);
if (m_logInCallback) {
m_logInCallback(true, AWS.config.credentials.identityId);
}
}
});
};
IAM ロールのポリシーで以下を行います。
{
"Version": "2012-10-17",
"Statement": [
{
"Effect": "Allow",
"Action": [
"dynamodb:BatchGetItem",
"dynamodb:BatchWriteItem",
"dynamodb:DeleteItem",
"dynamodb:GetItem",
"dynamodb:PutItem",
"dynamodb:Query",
"dynamodb:UpdateItem"
],
"Condition": {
"ForAllValues:StringEquals": {
"dynamodb:LeadingKeys": [
"${cognito-identity.amazonaws.com:sub}"
]
}
},
"Resource": [
"<DynamoDBのテーブルのARN>"
]
}
]
}
function initApp() {
...
g_dbControllerClientCognito = new DbControllerClientCognito();
g_dbControllerClientCognito.init();
g_doc.setDbController(g_dbControllerClientCognito);
var m_dynamoDB = null;
var m_dynamodbDoc = null;
var region = "<リージョン名>";
var endpoint = "https://dynamodb." + region + ".amazonaws.com";
var table = "Notes";
this.init = function() {
};
this.open = function() {
if (m_dynamoDB === null) {
console.log('open');
m_dynamoDB = new AWS.DynamoDB();
m_dynamoDB.config.update({
region: region,
endpoint: endpoint
});
m_dynamodbDoc = new AWS.DynamoDB.DocumentClient({service:m_dynamoDB});
}
};
this.getNoteList = function(userId, callback) {
console.log("userId", userId);
var params = {
TableName : table,
KeyConditionExpression: "user_id = :userId",
ExpressionAttributeValues: {
":userId": userId
}
};
console.log("query param ", JSON.stringify(params));
m_dynamodbDoc.query(params, function(err, data) {
if (err) {
var msg = JSON.stringify(err, null, 2);
console.log("Unable to query. Error:", msg);
callback(false, null, "faild to qurey:\n" + msg);
} else {
var notes = new Array();
console.log("Query succeeded.");
var itemSize = data.Items.length;
if (itemSize == 0) {
callback(true, "new", notes);
} else {
var replyCount = 0;
data.Items.forEach(function(item) {
replyCount++;
console.log(" -", JSON.stringify(item));
var note = {
user_id : item.user_id,
date_time : item.date_time,
text : item.text
};
notes.push(note);
if (replyCount >= itemSize) {
callback(true, "new", notes);
}
});
}
}
});
};
this.logOut = function() {
if (m_unauthUserId !== null) {
var params = {
IdentityPoolId: m_identityPoolId,
RoleArn: m_roleArn,
IdentityId: m_unauthUserId
};
AWS.config.credentials = new AWS.CognitoIdentityCredentials(params);
// Obtain AWS credentials
AWS.config.credentials.get(function(err){
if (err) {
console.log("credentials.get error:" + err);
if (m_logOutCallback) {
m_logOutCallback(false, "credentials.get error code:\n" + JSON.stringify(err, null, 2));
}
} else {
console.log("Unauthenticated Cognito Identity Id: " + AWS.config.credentials.identityId);
if (m_logOutCallback) {
m_logOutCallback(true, AWS.config.credentials.identityId);
}
}
});
} else {
var params = {
IdentityPoolId: m_identityPoolId,
RoleArn: m_roleArn
};
AWS.config.credentials = new AWS.CognitoIdentityCredentials(params);
AWS.config.credentials.clearCachedId(); // これがないと、ユーザー切り替え時に。get が失敗する。
// Obtain AWS credentials
AWS.config.credentials.get(function(err){
if (err) {
console.log("credentials.get error:" + err);
if (m_logOutCallback) {
m_logOutCallback(false, "credentials.get error code:\n" + JSON.stringify(err, null, 2));
}
} else {
console.log("Unauthenticated Cognito Identity Id: " + AWS.config.credentials.identityId);
if (m_logOutCallback) {
m_logOutCallback(true, AWS.config.credentials.identityId);
}
}
});
}
};
var StorageName = 'test.mynote-01'; var StorageVersion = '1.0'; var StorageKey_UNAUTH_USER_ID = 'unauth_user_id';
function initApp() {
console.log('initApp');
AWS.config = new AWS.Config({
region : g_region
});
g_cognito = new Cognito();
g_cognito.init(logInCallback, logOutCallback);
g_fb = new Facebook();
g_fb.init(g_cognito);
g_storage = new Storage(StorageName, StorageVersion);
g_storage.load();
g_doc = new MyNoteDoc();
g_doc.init();
g_doc.setStorage(g_storage);
g_view = new MyNoteView();
g_view.init(g_doc);
g_dbControllerClientCognito = new DbControllerClientCognito();
g_dbControllerClientCognito.init();
g_doc.setDbController(g_dbControllerClientCognito);
setStatusFromStorage();
}
function setStatusFromStorage() {
var unauthUserId = g_storage.getItem(StorageKey_UNAUTH_USER_ID);
if (unauthUserId !== null) {
g_cognito.setUnauthUserId(unauthUserId);
}
}
c:\projects\mynote>set DEBUG=mynote:* & npm start
> mynote@0.0.0 start c:\projects\mynote
> node ./bin/www
mynote:server Listening on port 3000 +0ms
http://localhost:3000 でローカルPCのサーバーにアクセスできます。
{
"Version":"2012-10-17",
"Statement": [{
"Sid": "Allow Public Access to All Objects",
"Effect": "Allow",
"Principal": "*",
"Action": "s3:GetObject",
"Resource": "arn:aws:s3:::作成したバケット名/*"
}
]
}
Facebook のアプリケーションで登録しているWebSite の URL も AWS S3 のURLに変更する必要があります。
ただし、Facebook では、WebSite の URL をドメインで判定しているようなので、AWS S3 の同じドメインのURLからでも、アクセス可能となるようです。
最終的に、S3 でWebSite を公開する場合は、別途ドメインを取得するのがよいと思います。
c:\projects>cd mynote c:\projects\mynote>npm install
var g_region = '<リージョン名>';
var m_roleArn = '<Role ARN>'; var m_identityPoolId = '<cognito identity pool id>';
var region = "<リージョン名>";