{"id":2280,"date":"2015-10-02T16:50:01","date_gmt":"2015-10-02T08:50:01","guid":{"rendered":"http:\/\/blog.hoyo.idv.tw\/?p=2280"},"modified":"2021-07-07T09:06:45","modified_gmt":"2021-07-07T01:06:45","slug":"%e4%bd%bf%e7%94%a8-facebook-google-%e9%80%b2%e8%a1%8c%e7%b6%b2%e7%ab%99%e6%9c%83%e5%93%a1%e8%aa%8d%e8%ad%89","status":"publish","type":"post","link":"https:\/\/blog.hoyo.idv.tw\/?p=2280","title":{"rendered":"Hoyo \u6559\u4f60\u4e32 OAuth - facebook JavaScript \u767b\u5165"},"content":{"rendered":"<h2>\u53c3\u8003\u8cc7\u6e90<\/h2>\n<ul>\n<li><a href=\"https:\/\/developers.facebook.com\/docs\/facebook-login\/web?locale=zh_TW\" target=\"_blank\" rel=\"noopener\">\u642d\u914d JavaScript SDK \u7684\u7db2\u9801\u7248\u300cFacebook \u767b\u5165\u300d<\/a><\/li>\n<\/ul>\n<p>\u6e2c\u8a66\u4e2d\u51fa\u73fe\u901a\u8a0a\u5931\u6557\u7684\u60c5\u6cc1\u6642\uff0c\u8acb\u628a\u64cb\u5ee3\u544a\u5916\u639b\u505c\u6b62\uff0c\u4e0d\u904e\u64cb\u7684\u5176\u5be6\u5c31\u662f\u5ee3\u544a\uff0c\u4e0d\u6703\u5f71\u97ff\u767b\u5165\u529f\u80fd<\/p>\n<p><a href=\"https:\/\/blog.hoyo.idv.tw\/wp-content\/uploads\/2015\/10\/20210706_152225.png\" data-rel=\"lightbox-image-0\" data-rl_title=\"\" data-rl_caption=\"\" title=\"\"><img loading=\"lazy\" class=\"alignnone size-medium wp-image-8509\" src=\"https:\/\/blog.hoyo.idv.tw\/wp-content\/uploads\/2015\/10\/20210706_152225-300x190.png\" alt=\"\" width=\"300\" height=\"190\" srcset=\"https:\/\/blog.hoyo.idv.tw\/wp-content\/uploads\/2015\/10\/20210706_152225-300x190.png 300w, https:\/\/blog.hoyo.idv.tw\/wp-content\/uploads\/2015\/10\/20210706_152225-768x486.png 768w, https:\/\/blog.hoyo.idv.tw\/wp-content\/uploads\/2015\/10\/20210706_152225-474x300.png 474w, https:\/\/blog.hoyo.idv.tw\/wp-content\/uploads\/2015\/10\/20210706_152225.png 954w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a><\/p>\n<p>--<\/p>\n<h2>\u53d6\u4e0d\u5230 Email<\/h2>\n<ul>\n<li><a class=\"question-hyperlink\" href=\"https:\/\/stackoverflow.com\/questions\/21221336\/fb-javascript-api-not-returning-email-despite-using-the-scope-variable\" target=\"_blank\" rel=\"noopener\">FB Javascript API not returning email despite using the scope variable<\/a><\/li>\n<li><a href=\"https:\/\/developers.facebook.com\/docs\/facebook-login\/overview\" target=\"_blank\" rel=\"noopener\">\u300cFacebook \u767b\u5165\u300d\u7e3d\u89bd<\/a><\/li>\n<\/ul>\n<pre class=\"lang:default decode:true\">\u61c9\u7528\u7a0b\u5f0f\u4e0d\u9700\u8981\u63d0\u4ea4 Facebook \u5be9\u67e5\uff0c\u5373\u53ef\u5411\u7528\u6236\u8981\u6c42\u4ee5\u4e0b\u5169\u9805\u6b0a\u9650\uff1a\r\npublic profile\r\nemail<\/pre>\n<p>\u6240\u4ee5 Email \u4e26\u4e0d\u9700\u8981\u53e6\u5916\u7533\u8acb\u6b0a\u9650\uff0c\u5c07 FB.api('\/me') \u4fee\u6539\u5c31\u597d\u4e86<\/p>\n<pre class=\"lang:default decode:true\">FB.api('\/me?fields=email,name', function(response) {\r\n    console.log(response);\r\n});<\/pre>\n<p>--<\/p>\n<h2>\u5b8c\u6574\u7a0b\u5f0f\u7bc4\u4f8b<\/h2>\n<pre class=\"lang:default decode:true\">&lt;!DOCTYPE html&gt;\r\n&lt;html lang=\"zh-tw\"&gt;\r\n&lt;head&gt;\r\n    &lt;title&gt;\u81c9\u66f8 JavaScript SDK \u767b\u5165 by Hoyo&lt;\/title&gt;\r\n    &lt;meta charset=\"UTF-8\"&gt;\r\n&lt;\/head&gt;\r\n&lt;body&gt;\r\n&lt;script&gt;\r\n    function statusChangeCallback(response) {  \/\/ Called with the results from FB.getLoginStatus().\r\n        console.log(response);                   \/\/ The current login status of the person.\r\n        if (response.status === 'connected') {   \/\/ Logged into your webpage and Facebook.\r\n            testAPI();\r\n        }\r\n    }\r\n\r\n    function checkLoginState() {               \/\/ Called when a person is finished with the Login Button.\r\n        FB.getLoginStatus(function(response) {   \/\/ See the onlogin handler\r\n            statusChangeCallback(response);\r\n        });\r\n    }\r\n\r\n    window.fbAsyncInit = function() {\r\n        FB.init({\r\n            appId      : '330758555207817',\r\n            cookie     : true,                     \/\/ Enable cookies to allow the server to access the session.\r\n            xfbml      : true,                     \/\/ Parse social plugins on this webpage.\r\n            version    : 'v11.0'           \/\/ Use this Graph API version for this call.\r\n        });\r\n\r\n        FB.getLoginStatus(function(response) {   \/\/ Called after the JS SDK has been initialized.\r\n            statusChangeCallback(response);        \/\/ Returns the login status.\r\n        });\r\n    };\r\n\r\n    function testAPI() {\r\n        FB.api('\/me?fields=email,name', function(response) {\r\n            console.log(response);\r\n            \/\/ document.getElementById('status').innerHTML =\r\n            \/\/     'Thanks for logging in, ' + response.name + '!';\r\n        });\r\n    }\r\n\r\n    function fb_login(){\r\n        FB.getLoginStatus(function(response) {\r\n            if (response.status === 'connected') {\r\n                console.log(response);\r\n            } else {\r\n                FB.login(function(response) {\r\n                }, {scope: 'public_profile,email'});\r\n            }\r\n        });\r\n    }\r\n\r\n    function fb_logout(){\r\n        FB.getLoginStatus(function(response) {\r\n            if (response.status === 'connected') {\r\n                FB.logout();\r\n            }\r\n        });\r\n    }\r\n&lt;\/script&gt;\r\n\r\n&lt;button type=\"button\" onclick=\"fb_login()\"&gt;\u767b\u5165&lt;\/button&gt;\r\n&lt;button type=\"button\" onclick=\"fb_logout()\"&gt;\u767b\u51fa&lt;\/button&gt;\r\n\r\n&lt;!-- Load the JS SDK asynchronously --&gt;\r\n&lt;script async defer crossorigin=\"anonymous\" src=\"https:\/\/connect.facebook.net\/en_US\/sdk.js\"&gt;&lt;\/script&gt;\r\n&lt;\/body&gt;\r\n&lt;\/html&gt;<\/pre>\n<p>--<\/p>\n<div class=\"pvc_clear\"><\/div>\n<p class=\"pvc_stats all \" data-element-id=\"2280\" style=\"\"><i class=\"pvc-stats-icon medium\" aria-hidden=\"true\"><svg aria-hidden=\"true\" focusable=\"false\" data-prefix=\"far\" data-icon=\"chart-bar\" role=\"img\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 512 512\" class=\"svg-inline--fa fa-chart-bar fa-w-16 fa-2x\"><path fill=\"currentColor\" d=\"M396.8 352h22.4c6.4 0 12.8-6.4 12.8-12.8V108.8c0-6.4-6.4-12.8-12.8-12.8h-22.4c-6.4 0-12.8 6.4-12.8 12.8v230.4c0 6.4 6.4 12.8 12.8 12.8zm-192 0h22.4c6.4 0 12.8-6.4 12.8-12.8V140.8c0-6.4-6.4-12.8-12.8-12.8h-22.4c-6.4 0-12.8 6.4-12.8 12.8v198.4c0 6.4 6.4 12.8 12.8 12.8zm96 0h22.4c6.4 0 12.8-6.4 12.8-12.8V204.8c0-6.4-6.4-12.8-12.8-12.8h-22.4c-6.4 0-12.8 6.4-12.8 12.8v134.4c0 6.4 6.4 12.8 12.8 12.8zM496 400H48V80c0-8.84-7.16-16-16-16H16C7.16 64 0 71.16 0 80v336c0 17.67 14.33 32 32 32h464c8.84 0 16-7.16 16-16v-16c0-8.84-7.16-16-16-16zm-387.2-48h22.4c6.4 0 12.8-6.4 12.8-12.8v-70.4c0-6.4-6.4-12.8-12.8-12.8h-22.4c-6.4 0-12.8 6.4-12.8 12.8v70.4c0 6.4 6.4 12.8 12.8 12.8z\" class=\"\"><\/path><\/svg><\/i> &nbsp;1,085&nbsp;total views<\/p>\n<div class=\"pvc_clear\"><\/div>\n","protected":false},"excerpt":{"rendered":"<p>\u53c3\u8003\u8cc7\u6e90 \u642d\u914d JavaScr...<\/p>\n<div class=\"pvc_clear\"><\/div>\n<p class=\"pvc_stats all \" data-element-id=\"2280\" style=\"\"><i class=\"pvc-stats-icon medium\" aria-hidden=\"true\"><svg aria-hidden=\"true\" focusable=\"false\" data-prefix=\"far\" data-icon=\"chart-bar\" role=\"img\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 512 512\" class=\"svg-inline--fa fa-chart-bar fa-w-16 fa-2x\"><path fill=\"currentColor\" d=\"M396.8 352h22.4c6.4 0 12.8-6.4 12.8-12.8V108.8c0-6.4-6.4-12.8-12.8-12.8h-22.4c-6.4 0-12.8 6.4-12.8 12.8v230.4c0 6.4 6.4 12.8 12.8 12.8zm-192 0h22.4c6.4 0 12.8-6.4 12.8-12.8V140.8c0-6.4-6.4-12.8-12.8-12.8h-22.4c-6.4 0-12.8 6.4-12.8 12.8v198.4c0 6.4 6.4 12.8 12.8 12.8zm96 0h22.4c6.4 0 12.8-6.4 12.8-12.8V204.8c0-6.4-6.4-12.8-12.8-12.8h-22.4c-6.4 0-12.8 6.4-12.8 12.8v134.4c0 6.4 6.4 12.8 12.8 12.8zM496 400H48V80c0-8.84-7.16-16-16-16H16C7.16 64 0 71.16 0 80v336c0 17.67 14.33 32 32 32h464c8.84 0 16-7.16 16-16v-16c0-8.84-7.16-16-16-16zm-387.2-48h22.4c6.4 0 12.8-6.4 12.8-12.8v-70.4c0-6.4-6.4-12.8-12.8-12.8h-22.4c-6.4 0-12.8 6.4-12.8 12.8v70.4c0 6.4 6.4 12.8 12.8 12.8z\" class=\"\"><\/path><\/svg><\/i> &nbsp;1,085&nbsp;total views<\/p>\n<div class=\"pvc_clear\"><\/div>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[180],"tags":[179],"_links":{"self":[{"href":"https:\/\/blog.hoyo.idv.tw\/index.php?rest_route=\/wp\/v2\/posts\/2280"}],"collection":[{"href":"https:\/\/blog.hoyo.idv.tw\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.hoyo.idv.tw\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.hoyo.idv.tw\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.hoyo.idv.tw\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=2280"}],"version-history":[{"count":31,"href":"https:\/\/blog.hoyo.idv.tw\/index.php?rest_route=\/wp\/v2\/posts\/2280\/revisions"}],"predecessor-version":[{"id":8521,"href":"https:\/\/blog.hoyo.idv.tw\/index.php?rest_route=\/wp\/v2\/posts\/2280\/revisions\/8521"}],"wp:attachment":[{"href":"https:\/\/blog.hoyo.idv.tw\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2280"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.hoyo.idv.tw\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=2280"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.hoyo.idv.tw\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=2280"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}