Last active
September 16, 2016 22:33
-
-
Save chihirokaasan/0bf13cb4ee7eaf2443fb8d54acfa89d5 to your computer and use it in GitHub Desktop.
WordCamp Tokyo 2016 RestAPIとjQueryで作る最短アプリ開発 ~ITかあさん~
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
//hook access_token | |
add_action('wo_set_access_token','wo_process_example'); | |
function wo_process_example( $data ){ | |
if( isset( $data ) ){ | |
} | |
// do something without the data | |
} | |
do_action('wo_endpoint_user_authenticated', array( $token ) ); | |
function add_allow_header( $headers ) { | |
if ( ! is_admin() ) { | |
$headers['Access-Control-Allow-Origin'] = 'http://www.kaasan.info'; | |
$headers['Access-Control-Allow-Credentials'] = 'true'; | |
return $headers; | |
} | |
} | |
add_filter( 'wp_headers', 'add_allow_header'); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
$(document).ready(function(){ | |
getUserPost(); | |
}); | |
//アクセストークンからUserIDを取得 | |
function getUserPost(){ | |
$.ajax({ | |
type: 'GET', | |
url: 'https://it-girl.info/oauth/me', | |
data:{ | |
access_token:$.cookie("access_token"), | |
client_id:'Your client_id', | |
client_secret:'Your client_secret' | |
}, | |
dataType: 'json', | |
}) | |
.done(function(data, status, jqXHR){ | |
console.log($.cookie("access_token")); | |
console.log(data.ID); | |
get_posts(data.ID); | |
}) | |
.fail(function(jqXHR, status, error){ | |
console.log(jqXHR); | |
$("#message").html('<div class="alert alert-danger" role="alert"><span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span><span class="sr-only">Error:</span>User not found.</div>');//PHPからJSON形式で返ってくる場合 | |
}) | |
.always(function(jqXHR, status){ | |
}); | |
} | |
//User IDから投稿を取得する | |
function get_posts($user_id){ | |
$.ajax({ | |
type: 'GET', | |
url: 'https://it-girl.info/wp-json/wp/v2/posts/', | |
data:{ | |
author:$user_id | |
}, | |
dataType: 'json', | |
}) | |
.done(function(data, status, jqXHR){ | |
$.each(data, function(index, value) { | |
console.log(value); | |
$("#post_list").append('<li class="list-group-item"><a href="post_comment.html?post_id=' + value.id + '">' + value.title.rendered + '</a></li>'); | |
}); | |
}) | |
.fail(function(jqXHR, status, error){ | |
console.log(jqXHR); | |
$("#message").html('<div class="alert alert-danger" role="alert"><span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span><span class="sr-only">Error:</span>User not found.</div>');//PHPからJSON形式で返ってくる場合 | |
}) | |
.always(function(jqXHR, status){ | |
}); | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html lang="en"> | |
<head> | |
<meta charset="utf-8"> | |
<meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
<meta name="description" content=""> | |
<meta name="author" content=""> | |
<title> | |
RestAPIとjQueryで作る最短アプリ開発 | |
</title> | |
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" | |
rel="stylesheet"> | |
<link href="css/screen-e49f9b284d.css" rel="stylesheet"> | |
</head> | |
<body> | |
<div class="navbar navbar-inverse navbar-fixed-top"> | |
<div class="container"> | |
<div class="navbar-header"> | |
<button type="button" class="navbar-toggle" id="triggerLink"> | |
<span class="icon-bar"></span> | |
<span class="icon-bar"></span> | |
<span class="icon-bar"></span> | |
</button> | |
<a class="navbar-brand" href="#">WordCamp Tokyo2016</a> | |
</div> | |
<div class="navbar-collapse collapse" id="navigation"> | |
<ul class="nav navbar-nav"> | |
<li class="active"> | |
<a href="http://www.kaasan.info/sample/wordcamp_tokyo2016/login.html">login</a> | |
</li> | |
<li> | |
<a href="http://www.kaasan.info/sample/wordcamp_tokyo2016/posts.html">Your Posts</a> | |
</li> | |
</ul> | |
</div> | |
<!--/.navbar-collapse --> | |
</div> | |
</div> | |
<!-- Main jumbotron for a primary marketing message or call to action | |
--> | |
<div class="alert"> | |
</div> | |
<div class="container"> | |
<h1> | |
Let's First Login | |
</h1> | |
<div id="errorMess"></div> | |
<div class="form-group"> | |
<label> | |
User Name | |
</label> | |
<input type="text" class="form-control" id="login_id"> | |
</div> | |
<div class="form-group"> | |
<label> | |
Password | |
</label> | |
<input type="text" class="form-control" id="login_password"> | |
</div> | |
<p> | |
This is a OAuth 2.0 sample login application. | |
<br> | |
Nobody makes login accounts. | |
</p> | |
<p class="btn btn-primary btn-lg" id="login_bt"> | |
Login | |
</p> | |
</div> | |
<div class="container"> | |
<!-- Example row of columns --> | |
<hr> | |
<footer> | |
<p> | |
<a href="http://www.kaasan.info/"> | |
© ITkaasan 2016</a> | |
</p> | |
</footer> | |
</div> | |
<!-- /container --> | |
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" | |
> | |
</script> | |
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js" | |
> | |
</script> | |
<script src="js/screen-e49f9b284d.js"></script> | |
<script type="text/javascript" src="js/jquery-cookie/src/jquery.cookie.js"></script> | |
<script src="js/token_redirect.js"></script> | |
</body> | |
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html lang="en"> | |
<head> | |
<meta charset="utf-8"> | |
<meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
<meta name="description" content=""> | |
<meta name="author" content=""> | |
<title> | |
RestAPIとjQueryで作る最短アプリ開発 | |
</title> | |
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" | |
rel="stylesheet"> | |
<link href="css/screen-e49f9b284d.css" rel="stylesheet"> | |
</head> | |
<body> | |
<div class="navbar navbar-inverse navbar-fixed-top"> | |
<div class="container"> | |
<div class="navbar-header"> | |
<button type="button" class="navbar-toggle" id="triggerLink"> | |
<span class="icon-bar"></span> | |
<span class="icon-bar"></span> | |
<span class="icon-bar"></span> | |
</button> | |
<a class="navbar-brand" href="#">WP REST API</a> | |
</div> | |
<div class="navbar-collapse collapse" id="navigation"> | |
<ul class="nav navbar-nav"> | |
<li class="active"> | |
<a href="http://www.kaasan.info/sample/wordcamp_tokyo2016/login.html">login</a> | |
</li> | |
<li> | |
<a href="http://www.kaasan.info/sample/wordcamp_tokyo2016/posts.html">Your Posts</a> | |
</li> | |
</ul> | |
</div> | |
<!--/.navbar-collapse --> | |
</div> | |
</div> | |
<!-- Main jumbotron for a primary marketing message or call to action | |
--> | |
<div class="container"> | |
<h1> | |
Your posts | |
</h1> | |
<p id="post_content"></p> | |
<div id="message"></div> | |
<div id="comment_error"></div> | |
<h2> | |
Comments | |
</h2> | |
<ul class="list-group" id="comment_list"> | |
</ul> | |
<div id="post_comment" style="display:none"> | |
<div class="page-header"> | |
<h3>comment</h3> | |
</div> | |
<div class="form-group"> | |
<label> | |
comment | |
</label> | |
<input type="text" id="comment_text" class="form-control"> | |
</div> | |
<p> | |
<a class="btn btn-primary btn-lg" id="comment_btn">Post<br></a> | |
</p> | |
</div> | |
</div> | |
<div class="container"> | |
<!-- Example row of columns --> | |
<hr> | |
<footer> | |
<p> | |
<a href="http://www.kaasan.info/"> | |
© ITkaasan 2016</a> | |
</p> | |
</footer> | |
</div> | |
<!-- /container --> | |
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" | |
> | |
</script> | |
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js" | |
> | |
</script> | |
<script src="js/screen-e49f9b284d.js"></script> | |
<script type="text/javascript" src="js/jquery-cookie/src/jquery.cookie.js"></script> | |
<script src="js/post_comment.js"></script> | |
</body> | |
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
//エラーメッセージと成功時のメッセージをセット | |
var loginErrorMessage = "<div class='alert alert-danger' role='alert'><span class='glyphicon glyphicon-exclamation-sign' aria-hidden='true'></span><span class='sr-only'>Error:</span>Please login:To post comment needs to login</div>"; | |
var commentSuccessMessage = "<div class='alert alert-success' role='alert'><strong>Success</strong><p>Comment Post</p></div></div>"; | |
var commentError = "<div class='alert alert-danger' role='alert'><span class='glyphicon glyphicon-exclamation-sign' aria-hidden='true'></span><span class='sr-only'>Error:</span>Comment Error</div>"; | |
var param = getParam(); | |
get_post(param.post_id); | |
get_comment(param.post_id); | |
//urlパラメータを分解する処理 | |
function getParam() { | |
var url = location.href; | |
parameters = url.split("?"); | |
params = parameters[1].split("&"); | |
var paramsArray = []; | |
for ( i = 0; i < params.length; i++ ) { | |
neet = params[i].split("="); | |
paramsArray.push(neet[0]); | |
paramsArray[neet[0]] = neet[1]; | |
} | |
return paramsArray; | |
} | |
//パラメータから投稿IDを取得 投稿を表示する | |
function get_post($post_id){ | |
$.ajax({ | |
type: 'GET', | |
url: 'https://it-girl.info/wp-json/wp/v2/posts/'+param.post_id, | |
dataType: 'json', | |
}) | |
.done(function(data, status, jqXHR){ | |
console.log(data.content.rendered); | |
$("h1").html(data.title.rendered); | |
$("#postdate").html(data.date); | |
$("#post_content").html(data.content.rendered); | |
if(userInfo.status == 200) { | |
$("#post_comment").show();//ログイン取得でコメント投稿フォームを表示 | |
} else { | |
$("#message").html(loginErrorMessage); | |
} | |
}) | |
.fail(function(jqXHR, status, error){ | |
$("#message").html('post NOT Found');//PHPからJSON形式で返ってくる場合 | |
}) | |
.always(function(jqXHR, status){ | |
}); | |
} | |
//ajaxはresponseをreturnを受け取れないのでここでresponseを取らない | |
var userInfo = $.ajax({ | |
type: 'POST', | |
url: 'https://it-girl.info/oauth/me', | |
data:{ | |
access_token:$.cookie("access_token"), | |
client_id:'client_id', | |
client_secret:'client_secret' | |
}, | |
dataType: 'json' | |
}); | |
//クリックをして投稿 | |
$('#comment_btn').on('click', function(event) { | |
//ログイン中のユーザーを取得 | |
var Userobj = (new Function("return " + userInfo.responseText))(); | |
console.log(Userobj); | |
$.ajax({ | |
type: 'POST', | |
url: 'https://it-girl.info/wp-json/wp/v2/comments', | |
data:{ | |
author_name:Userobj.user_login, | |
post:param.post_id, | |
content:$('#comment_text').val() | |
}, | |
dataType: 'json' | |
}).done(function(json){ | |
$("#message").html(commentSuccessMessage); | |
}).fail(function(json){ | |
$("#message").html(commentError); | |
}); | |
}); | |
//コメントを取得 | |
function get_comment($post_id){ | |
$.ajax({ | |
type: 'GET', | |
url: 'https://it-girl.info/wp-json/wp/v2/comments/', | |
data:{ | |
post:$post_id | |
}, | |
dataType: 'json', | |
}) | |
.done(function(data, status, jqXHR){ | |
$.each(data, function(index, value) { | |
console.log(value); | |
$("#comment_list").append('<li class="list-group-item"><strong>' + value.author_name +'</strong>:' + value.content.rendered + '</li>'); | |
}); | |
}) | |
.fail(function(jqXHR, status, error){ | |
$("#comment_error").html('<div class="alert alert-danger" role="alert"><span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span><span class="sr-only">Error:</span>Not found.</div>'); | |
}) | |
.always(function(jqXHR, status){ | |
}); | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html lang="en"> | |
<head> | |
<meta charset="utf-8"> | |
<meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
<meta name="description" content=""> | |
<meta name="author" content=""> | |
<title> | |
RestAPIとjQueryで作る最短アプリ開発 | |
</title> | |
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" | |
rel="stylesheet"> | |
<link href="css/screen-e49f9b284d.css" rel="stylesheet"> | |
</head> | |
<body> | |
<div class="navbar navbar-inverse navbar-fixed-top"> | |
<div class="container"> | |
<div class="navbar-header"> | |
<button type="button" class="navbar-toggle" id="triggerLink"> | |
<span class="icon-bar"></span> | |
<span class="icon-bar"></span> | |
<span class="icon-bar"></span> | |
</button> | |
<a class="navbar-brand" href="#">WP REST API</a> | |
</div> | |
<div class="navbar-collapse collapse" id="navigation"> | |
<ul class="nav navbar-nav"> | |
<li class="active"> | |
<a href="http://www.kaasan.info/sample/wordcamp_tokyo2016/login.html">login</a> | |
</li> | |
<li> | |
<a href="http://www.kaasan.info/sample/wordcamp_tokyo2016/posts.html">Your Posts</a> | |
</li> | |
</ul> | |
</div> | |
<!--/.navbar-collapse --> | |
</div> | |
</div> | |
<!-- Main jumbotron for a primary marketing message or call to action | |
--> | |
<div class="container"> | |
<h1> | |
Your posts | |
</h1> | |
<p>Please make access token. </p> | |
<ul class="list-group" id="post_list"> | |
</ul> | |
</div> | |
<div class="container"> | |
<!-- Example row of columns --> | |
<hr> | |
<footer> | |
<p> | |
<a href="http://www.kaasan.info/"> | |
© ITkaasan 2016</a> | |
</p> | |
</footer> | |
</div> | |
<!-- /container --> | |
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" | |
> | |
</script> | |
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js" | |
> | |
</script> | |
<script src="js/screen-e49f9b284d.js"></script> | |
<script type="text/javascript" src="js/jquery-cookie/src/jquery.cookie.js"></script> | |
<script src="js/get_post.js"></script> | |
</body> | |
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
$(document).ready(function(){ | |
$("#login_bt").click(function(event){ | |
//フォームが通常の動きをしないように | |
event.preventDefault(); | |
//初期化 | |
$("#ajax_result").empty(); | |
loginToken(); | |
}); | |
}); | |
function loginToken(){ | |
var username = $('#login_id').val(); | |
var passwd = $('#login_password').val(); | |
$.ajax({ | |
type: 'POST', | |
url: 'https://it-girl.info/oauth/token', | |
data:{ | |
username:username, | |
password:passwd, | |
grant_type:'password', | |
client_id:'your client_id', | |
client_secret:'your client_secret' | |
}, | |
dataType: 'json', | |
}) | |
.done(function(data, status, jqXHR){ | |
$.cookie("access_token", data.access_token, { expires: 7 });//cookie保存期間 | |
var url = '/sample/wordcamp_tokyo2016/posts.html'; | |
$( location ).attr("href", url); | |
}) | |
.fail(function(jqXHR, status, error){ | |
$("#errorMess").html("<div class='alert alert-danger' role='alert'><span class='glyphicon glyphicon-exclamation-sign' aria-hidden='true'></span><span class='sr-only'>Error:</span>The username or password you entered is incorrect.</div>"); | |
console.log(jqXHR); | |
}) | |
.always(function(jqXHR, status){ | |
}); | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment