You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
236 lines
10 KiB
236 lines
10 KiB
<!DOCTYPE html>
|
|
<html>
|
|
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta cors />
|
|
</head>
|
|
|
|
<body>
|
|
<script src="https://code.jquery.com/jquery-3.5.1.js"
|
|
integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>
|
|
<div>
|
|
Facebook登入並取得用戶姓名、email：<input type="button" value="Facebook登入" onclick="FBLogin();" />
|
|
</div>
|
|
<div>
|
|
<!--留意用戶的此頁，你的App會被移除：https://www.facebook.com/settings?tab=applications-->
|
|
用戶刪除授權的App(撤銷登入)：<input type="button" value="Disconnect App" onclick="Del_FB_App()" />
|
|
</div>
|
|
<!--顯示用戶的姓名、email↓-->
|
|
<div id="content"></div>
|
|
<div class="fb-send-to-messenger" messenger_app_id="652292875353442" page_id="108355484239143"
|
|
data-ref="GG147118518581" color="blue" size="xlarge">
|
|
</div>
|
|
<div>---------------------------------------------------------------</div>
|
|
<div>PO文:
|
|
<input type="text" id="postMsg" value="測試用商品" />
|
|
<input type="button" value="發文" onclick="newPost();" />
|
|
<input type="button" value="清除"" onclick=" clear('postResult')" />
|
|
<div id="postResult"></div>
|
|
</div>
|
|
<div>---------------------------------------------------------------</div>
|
|
<div>抓指定PO文，已授權使用者名稱:
|
|
<input type="text" id="postID" value="202061134174478_206152100432048" />
|
|
<input type="button" value="取得" onclick="getPost();" />
|
|
<input type="button" value="清除"" onclick=" clear('getCommentResult')" />
|
|
<div id="getCommentResult"></div>
|
|
</div>
|
|
<div>---------------------------------------------------------------</div>
|
|
<div>發訊息給使用者:
|
|
<input type="text" id="userName" value="Yh Liu" />
|
|
<input type="text" id="toUserMsg" value="to User Msg" />
|
|
<input type="button" value="告訴他" onclick="pmToUser();" />
|
|
<input type="button" value="清除"" onclick=" clear('msgResult')" />
|
|
<div id="msgResult"></div>
|
|
</div>
|
|
</div>
|
|
<script type="text/javascript">
|
|
//應用程式編號，進入 https://developers.facebook.com/apps/ 即可看到
|
|
let FB_appID = "652292875353442";
|
|
|
|
// Load the Facebook Javascript SDK asynchronously
|
|
(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 = "https://connect.facebook.net/es_LA/sdk.js";
|
|
fjs.parentNode.insertBefore(js, fjs);
|
|
}(document, 'script', 'facebook-jssdk'));
|
|
|
|
window.fbAsyncInit = function () {
|
|
FB.init({
|
|
appId: FB_appID,//FB appID
|
|
cookie: true, // enable cookies to allow the server to access the session
|
|
xfbml: true, // parse social plugins on this page
|
|
version: 'v7.0' // use graph api version
|
|
});
|
|
FB.AppEvents.logPageView();
|
|
};
|
|
|
|
// Messenger-SDK
|
|
(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/en_US/messenger.Extensions.js";
|
|
fjs.parentNode.insertBefore(js, fjs);
|
|
}(document, 'script', 'Messenger'));
|
|
window.extAsyncInit = function () {
|
|
// the Messenger Extensions JS SDK is done loading
|
|
};
|
|
|
|
//使用自己客製化的按鈕來登入
|
|
function FBLogin() {
|
|
|
|
FB.getLoginStatus(function (res) {
|
|
console.log(`status:${res.status}`);//Debug
|
|
|
|
if (res.status === "connected") {
|
|
let userID = res["authResponse"]["userID"];
|
|
console.log("用戶已授權您的App，用戶須先revoke撤除App後才能再重新授權你的App");
|
|
console.log(`已授權App登入FB 的 userID:${userID}`);
|
|
GetProfile();
|
|
} else if (res.status === 'not_authorized' || res.status === "unknown") {
|
|
//App未授權或用戶登出FB網站才讓用戶執行登入動作
|
|
FB.login(function (response) {
|
|
|
|
//console.log(response); //debug用
|
|
if (response.status === 'connected') {
|
|
//user已登入FB
|
|
//抓userID
|
|
let userID = response["authResponse"]["userID"];
|
|
console.log(`已授權App登入FB 的 userID:${userID}`);
|
|
GetProfile();
|
|
|
|
} else {
|
|
// user FB取消授權
|
|
alert("Facebook帳號無法登入");
|
|
}
|
|
//"public_profile"可省略，仍然可以取得name、userID
|
|
}, { scope: 'email,pages_messaging,publish_to_groups,groups_access_member_info,public_profile' });
|
|
}
|
|
});
|
|
|
|
}
|
|
</script>
|
|
<script type="text/javascript">
|
|
const hostRoot = 'https://192.168.1.107:3002/'; // const hostRoot = 'http://localhost:3000/';
|
|
const APIURL = 'https://graph.facebook.com/v3.2/';
|
|
//取得用戶姓名、email
|
|
function GetProfile() {
|
|
document.getElementById('content').innerHTML = "";//先清空顯示結果
|
|
|
|
//FB.api()使用說明：https://developers.facebook.com/docs/javascript/reference/FB.api
|
|
//取得用戶個資
|
|
FB.api("/me", "GET", { fields: 'last_name,first_name,name,email' }, function (user) {
|
|
//user物件的欄位：https://developers.facebook.com/docs/graph-api/reference/user
|
|
if (user.error) {
|
|
console.log(response);
|
|
} else {
|
|
|
|
document.getElementById('content').innerHTML = JSON.stringify(user);
|
|
}
|
|
});
|
|
|
|
}
|
|
|
|
function newPost() {
|
|
var msg = $('#postMsg').val();
|
|
$.get(hostRoot + 'Groups?hub.verify_token=LG8YBDVaU0Wg47n7VUns66666g&hub.mode=subscribe&message=' + msg,
|
|
function (result) {
|
|
let msgEle = document.createElement('a');
|
|
msgEle.innerText = "成功:" + result.id;
|
|
msgEle.target = "_blank";
|
|
msgEle.href = 'https://www.facebook.com/' + result.id;
|
|
$("#postResult").append(msgEle);
|
|
$("#getCommentResult").append(document.createElement('br'));
|
|
}).fail(function (e) {
|
|
alert("失敗");
|
|
console.log(e);
|
|
});
|
|
}
|
|
|
|
// TODO:getPost
|
|
function getPost() {
|
|
var postID = $('#postID').val();
|
|
$.ajax({
|
|
url: hostRoot + 'Groups?hub.verify_token=LG8YBDVaU0Wg47n7VUns66666g&hub.mode=subscribe&postID=' + postID,
|
|
success: function (result) {
|
|
let data = JSON.parse(result);
|
|
if (data.hasOwnProperty("comments")) {
|
|
data.comments.data.forEach(e => {
|
|
if (e.from) {
|
|
let msgEle = document.createElement('a');
|
|
msgEle.innerText = "姓名:" + e.from.name + " " + "留言:" + e.message
|
|
$("#getCommentResult").append(msgEle);
|
|
$("#getCommentResult").append(document.createElement('br'));
|
|
}
|
|
});
|
|
}
|
|
|
|
}
|
|
}).fail(function (e) {
|
|
alert("失敗");
|
|
console.log(e);
|
|
});
|
|
}
|
|
|
|
function pmToUser() {
|
|
var userName = $('#userName').val();
|
|
var toUserMsg = $('#toUserMsg').val();
|
|
$.get(hostRoot + 'webhook?hub.verify_token=LG8YBDVaU0Wg47n7VUns66666g&hub.mode=subscribe&fullname=' + userName + '&reply=' + toUserMsg,
|
|
function (result) {
|
|
if (result === 'send') {
|
|
let msgEle = document.createElement('a');
|
|
msgEle.innerText = "send成功:" + Date.now();
|
|
$("#msgResult").append(msgEle);
|
|
}
|
|
}).fail(function (e) {
|
|
alert("失敗");
|
|
console.log(e);
|
|
});
|
|
}
|
|
|
|
function clear(name) {
|
|
$('#' + name).text('');
|
|
}
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<!--有些網站會做帳號和user FB帳號的綁定/解除綁定，或你想讓使用者刪除你的FB App，讓使用者下次可以切換不同FB帳號登入你的網站-->
|
|
<!--下面程式碼派得上用場-->
|
|
<script type="text/javascript">
|
|
|
|
//刪除使用者已授權你的FB App，好讓使用者下次重新授權你的FB App
|
|
//參考：https://stackoverflow.com/questions/6634212/remove-the-application-from-a-user-using-graph-api/7741978#7741978
|
|
//https://stackoverflow.com/questions/9050190/facebook-api-sdk-revoke-access
|
|
function Del_FB_App() {
|
|
|
|
FB.getLoginStatus(function (response) {//取得目前user是否登入FB網站
|
|
//debug用
|
|
console.log(response);
|
|
if (response.status === 'connected') {
|
|
//抓userID
|
|
//let userID = response["authResponse"]["userID"];
|
|
|
|
|
|
FB.api("/me/permissions", "DELETE", function (response) {
|
|
console.log("刪除結果");
|
|
console.log(response); //gives true on app delete success
|
|
//最後一個參數傳遞true避免cache
|
|
FB.getLoginStatus(function (res) { }, true);//強制刷新cache避免login status下次誤判
|
|
|
|
});
|
|
|
|
} else {
|
|
console.log("無法刪除FB App");
|
|
}
|
|
});
|
|
|
|
}
|
|
</script>
|
|
</body>
|
|
|
|
</html>
|