Instantly share code, notes, and snippets.

Embed
What would you like to do?
WordCamp Tokyo 2016 RestAPIとjQueryで作る最短アプリ開発 ~ITかあさん~
//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');
$(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){
});
}
<!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>
<!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>
//エラーメッセージと成功時のメッセージをセット
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){
});
}
<!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>
$(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