{"id":24417,"date":"2024-11-21T14:08:26","date_gmt":"2024-11-21T06:08:26","guid":{"rendered":"https:\/\/fwq.ai\/blog\/24417\/"},"modified":"2024-11-21T14:08:26","modified_gmt":"2024-11-21T06:08:26","slug":"%e6%9e%84%e5%bb%ba%e5%85%b7%e6%9c%89%e5%bc%ba%e5%a4%a7%e7%a4%be%e4%ba%a4%e5%aa%92%e4%bd%93%e6%95%b4%e5%90%88%e7%9a%84%e7%bd%91%e7%ab%99%ef%bc%9awebman%e7%9a%84%e7%a4%be%e4%ba%a4%e5%aa%92%e4%bd%93","status":"publish","type":"post","link":"https:\/\/fwq.ai\/blog\/24417\/","title":{"rendered":"\u6784\u5efa\u5177\u6709\u5f3a\u5927\u793e\u4ea4\u5a92\u4f53\u6574\u5408\u7684\u7f51\u7ad9\uff1aWebman\u7684\u793e\u4ea4\u5a92\u4f53\u5e94\u7528\u6307\u5357"},"content":{"rendered":"<p><img decoding=\"async\" src=\"https:\/\/img.php.cn\/upload\/article\/000\/887\/227\/169197877979659.jpg\" class=\"aligncenter\" title=\"\u6784\u5efa\u5177\u6709\u5f3a\u5927\u793e\u4ea4\u5a92\u4f53\u6574\u5408\u7684\u7f51\u7ad9\uff1aWebman\u7684\u793e\u4ea4\u5a92\u4f53\u5e94\u7528\u6307\u5357\u63d2\u56fe\" alt=\"\u6784\u5efa\u5177\u6709\u5f3a\u5927\u793e\u4ea4\u5a92\u4f53\u6574\u5408\u7684\u7f51\u7ad9\uff1aWebman\u7684\u793e\u4ea4\u5a92\u4f53\u5e94\u7528\u6307\u5357\u63d2\u56fe\" \/><\/p>\n<p>\u6784\u5efa\u5177\u6709\u5f3a\u5927\u793e\u4ea4\u5a92\u4f53\u6574\u5408\u7684\u7f51\u7ad9\uff1aWebman\u7684\u793e\u4ea4\u5a92\u4f53\u5e94\u7528\u6307\u5357<\/p>\n<p>\u5f15\u8a00\uff1a<br \/>\u5728\u5f53\u4eca\u6570\u5b57\u5316\u65f6\u4ee3\uff0c\u793e\u4ea4\u5a92\u4f53\u7684\u5f71\u54cd\u529b\u8d8a\u6765\u8d8a\u5927\u3002 \u62e5\u6709\u4e00\u4e2a\u80fd\u591f\u6574\u5408\u5404\u79cd\u793e\u4ea4\u5a92\u4f53\u5e73\u53f0\u7684\u7f51\u7ad9\u5c06\u4e3a\u7528\u6237\u63d0\u4f9b\u66f4\u597d\u7684\u4f53\u9a8c\u3002 \u672c\u6587\u5c06\u4ecb\u7ecd\u5982\u4f55\u6784\u5efa\u4e00\u4e2a\u5177\u6709\u5f3a\u5927\u793e\u4ea4\u5a92\u4f53\u6574\u5408\u529f\u80fd\u7684\u7f51\u7ad9, \u6211\u4eec\u5c06\u4ee5\u4e00\u4e2a\u540d\u4e3aWebman\u7684\u793a\u4f8b\u5e94\u7528\u4e3a\u4f8b\u8fdb\u884c\u6f14\u793a\u3002<\/p>\n<ol>\n<li>\u8bbe\u8ba1\u7f51\u7ad9\u7ed3\u6784<br \/>\u5728\u6784\u5efaWebman\u4e4b\u524d\uff0c\u9996\u5148\u9700\u8981\u8bbe\u8ba1\u7f51\u7ad9\u7684\u6574\u4f53\u7ed3\u6784\u3002\u6211\u4eec\u9700\u8981\u521b\u5efa\u4e00\u4e2a\u7528\u6237\u754c\u9762\uff0c\u901a\u8fc7\u8be5\u754c\u9762\u7528\u6237\u53ef\u4ee5\u767b\u5f55\u5e76\u8fde\u63a5\u5230\u6240\u9700\u7684\u793e\u4ea4\u5a92\u4f53\u5e73\u53f0\u3002 \u8fd9\u4e9b\u5e73\u53f0\u53ef\u80fd\u5305\u62ecFacebook\u3001Twitter\u3001Instagram\u7b49\u3002 \u6211\u4eec\u5c06\u4f7f\u7528HTML\u3001CSS\u548cJavaScript\u6765\u8bbe\u8ba1\u548c\u5b9e\u73b0\u8fd9\u4e2a\u7f51\u7ad9\u3002<\/li>\n<\/ol>\n<p>\u4ee5\u4e0b\u662f\u4e00\u4e2a\u7b80\u5316\u7684\u8bbe\u8ba1\u793a\u4f8b\uff1a<\/p>\n<pre>\n\n\n  &lt;title&gt;Webman&lt;\/title&gt;&lt;style&gt;\n    \/* CSS \u6837\u5f0f *\/\n  &lt;\/style&gt;&lt;h1&gt;Webman - \u793e\u4ea4\u5a92\u4f53\u6574\u5408\u5e94\u7528&lt;\/h1&gt;\n  \n  <\/pre>\n<p>  \u767b\u5f55\u540e\u590d\u5236          <\/p>\n<ol>\n<li>\u5b9e\u73b0\u7528\u6237\u767b\u5f55\u529f\u80fd<br \/>\u63a5\u4e0b\u6765\uff0c\u6211\u4eec\u5c06\u5b9e\u73b0\u7528\u6237\u767b\u5f55\u529f\u80fd\u3002 \u5728\u793a\u4f8b\u5e94\u7528\u4e2d\uff0c\u6211\u4eec\u5047\u8bbe\u7528\u6237\u53ef\u4ee5\u901a\u8fc7\u63d0\u4f9b\u7528\u6237\u540d\u548c\u5bc6\u7801\u6765\u767b\u5f55\uff0c\u5e76\u4e14\u6210\u529f\u767b\u5f55\u540e\uff0c\u7528\u6237\u5c06\u80fd\u591f\u8fde\u63a5\u5230\u4e0d\u540c\u7684\u793e\u4ea4\u5a92\u4f53\u5e73\u53f0\u3002<\/li>\n<\/ol>\n<p>\u4ee5\u4e0b\u662f\u793a\u4f8b\u5e94\u7528\u7684\u767b\u5f55\u8868\u5355\uff1a<\/p>\n<pre><\/pre>\n<p>  \u767b\u5f55\u540e\u590d\u5236      \u767b\u5f55  <\/p>\n<p>\u63a5\u4e0b\u6765\uff0c\u5728JavaScript\u4ee3\u7801\u4e2d\u6dfb\u52a0\u4ee5\u4e0b\u4ee3\u7801\u6765\u5904\u7406\u767b\u5f55\u8868\u5355\u7684\u63d0\u4ea4\u4e8b\u4ef6\uff1a<\/p>\n<pre>document.getElementById('login-form').addEventListener('submit', function(event) {\n  event.preventDefault();\n\n  var username = document.getElementById('username-input').value;\n  var password = document.getElementById('password-input').value;\n\n  \/\/ \u5728\u8fd9\u91cc\u5904\u7406\u7528\u6237\u767b\u5f55\u903b\u8f91\n\n  \/\/ \u8fde\u63a5\u5230\u793e\u4ea4\u5a92\u4f53\u5e73\u53f0\u7684\u4ee3\u7801\n\n});<\/pre>\n<p>  \u767b\u5f55\u540e\u590d\u5236   <\/p>\n<ol>\n<li>\u8fde\u63a5\u5230\u793e\u4ea4\u5a92\u4f53\u5e73\u53f0<br \/>\u5728\u7528\u6237\u6210\u529f\u767b\u5f55\u540e\uff0c\u6211\u4eec\u5c06\u4f7f\u7528\u793e\u4ea4\u5a92\u4f53\u5e73\u53f0\u7684API\u6765\u8fde\u63a5\u5230\u4e0d\u540c\u7684\u8d26\u6237\u3002\u4e0d\u540c\u7684\u5e73\u53f0\u53ef\u80fd\u6709\u4e0d\u540c\u7684\u8ba4\u8bc1\u548c\u6388\u6743\u8fc7\u7a0b\u3002<\/li>\n<\/ol>\n<p>\u4ee5\u4e0b\u662f\u4e00\u4e2a\u4f7f\u7528Facebook API\u8fde\u63a5\u5230\u7528\u6237\u8d26\u6237\u7684\u793a\u4f8b\u4ee3\u7801\uff1a<\/p>\n<pre>\/\/ \u5728\u8fd9\u91cc\u5904\u7406\u7528\u6237\u767b\u5f55\u903b\u8f91\n\n\/\/ \u8fde\u63a5\u5230\u793e\u4ea4\u5a92\u4f53\u5e73\u53f0\u7684\u4ee3\u7801\nFB.login(function(response) {\n  if (response.authResponse) {\n    var accessToken = response.authResponse.accessToken;\n\n    \/\/ \u4f7f\u7528 accessToken \u8fdb\u884c\u540e\u7eed\u64cd\u4f5c\uff0c\u4f8b\u5982\u83b7\u53d6\u7528\u6237\u4fe1\u606f\u3001\u53d1\u5e03\u5185\u5bb9\u7b49\u7b49\n\n    \/\/ \u5728 connected-accounts \u5143\u7d20\u4e2d\u6dfb\u52a0\u8fde\u63a5\u8d26\u6237\u7684\u6807\u8bb0\n    var connectedAccounts = document.getElementById('connected-accounts');\n    connectedAccounts.innerHTML += '&lt;div&gt;\u5df2\u8fde\u63a5\u5230 Facebook&lt;\/div&gt;';\n  } else {\n    console.log('\u7528\u6237\u672a\u6388\u6743\u8fde\u63a5\u5230 Facebook');\n  }\n}, { scope: 'public_profile,email' });<\/pre>\n<p>  \u767b\u5f55\u540e\u590d\u5236   <\/p>\n<p>\u7c7b\u4f3c\u5730\uff0c\u6211\u4eec\u53ef\u4ee5\u4f7f\u7528Twitter API\u3001Instagram API\u7b49\u6765\u8fde\u63a5\u5230\u5176\u4ed6\u793e\u4ea4\u5a92\u4f53\u5e73\u53f0\u3002<\/p>\n<ol>\n<li>\u6574\u5408\u4e0d\u540c\u793e\u4ea4\u5a92\u4f53\u5e73\u53f0\u7684\u529f\u80fd<br \/>\u4e00\u65e6\u7528\u6237\u8fde\u63a5\u5230\u4e86\u4e0d\u540c\u7684\u793e\u4ea4\u5a92\u4f53\u5e73\u53f0\uff0c\u6211\u4eec\u53ef\u4ee5\u4f7f\u7528\u76f8\u5e94\u7684API\u6765\u83b7\u53d6\u7528\u6237\u4fe1\u606f\u3001\u53d1\u5e03\u5185\u5bb9\u3001\u83b7\u53d6\u6d88\u606f\u7b49\u7b49\u3002<\/li>\n<\/ol>\n<p>\u4f8b\u5982\uff0c\u4ee5\u4e0b\u662f\u901a\u8fc7Facebook API\u83b7\u53d6\u7528\u6237\u4fe1\u606f\u7684\u793a\u4f8b\u4ee3\u7801\uff1a<\/p>\n<pre>FB.api('\/me', function(response) {\n  var name = response.name;\n  var email = response.email;\n\n  \/\/ \u5c06\u7528\u6237\u4fe1\u606f\u663e\u793a\u5728\u7528\u6237\u754c\u9762\u4e0a\n});<\/pre>\n<p>  \u767b\u5f55\u540e\u590d\u5236   <\/p>\n<p>\u7c7b\u4f3c\u5730\uff0c\u6211\u4eec\u53ef\u4ee5\u4f7f\u7528\u5176\u4ed6\u5e73\u53f0\u7684API\u6765\u83b7\u53d6\u76f8\u5e94\u7684\u529f\u80fd\u3002<\/p>\n<p>\u7ed3\u8bba\uff1a<br \/>\u901a\u8fc7\u8fd9\u7bc7\u6587\u7ae0\uff0c\u6211\u4eec\u5b66\u4e60\u4e86\u5982\u4f55\u6784\u5efa\u4e00\u4e2a\u5177\u6709\u5f3a\u5927\u793e\u4ea4\u5a92\u4f53\u6574\u5408\u7684\u7f51\u7ad9\u3002\u6211\u4eec\u4e86\u89e3\u4e86\u5982\u4f55\u8bbe\u8ba1\u754c\u9762\u3001\u5b9e\u73b0\u7528\u6237\u767b\u5f55\u529f\u80fd\uff0c\u5e76\u4f7f\u7528\u5404\u79cd\u793e\u4ea4\u5a92\u4f53\u5e73\u53f0\u7684API\u8fdb\u884c\u8fde\u63a5\u548c\u6574\u5408\u3002\u901a\u8fc7\u5408\u7406\u5730\u4f7f\u7528\u8fd9\u4e9b\u529f\u80fd\uff0c\u6211\u4eec\u53ef\u4ee5\u63d0\u4f9b\u4e00\u4e2a\u529f\u80fd\u9f50\u5168\u7684\u793e\u4ea4\u5a92\u4f53\u5e94\u7528\uff0c\u5e2e\u52a9\u7528\u6237\u66f4\u597d\u5730\u7ba1\u7406\u548c\u63a7\u5236\u81ea\u5df1\u7684\u793e\u4ea4\u5a92\u4f53\u8d26\u6237\u3002 \u540c\u65f6\uff0c\u6211\u4eec\u8fd8\u5c55\u793a\u4e86\u4e00\u4e9b\u793a\u4f8b\u4ee3\u7801\u6765\u5e2e\u52a9\u8bfb\u8005\u66f4\u597d\u5730\u7406\u89e3\u5b9e\u73b0\u7684\u8fc7\u7a0b\u3002\u5e0c\u671b\u672c\u7bc7\u6587\u7ae0\u80fd\u5bf9\u90a3\u4e9b\u60f3\u8981\u6784\u5efa\u7c7b\u4f3c\u5e94\u7528\u7684\u8bfb\u8005\u6709\u6240\u5e2e\u52a9\u3002<\/p>\n<p>\u4ee5\u4e0a\u5c31\u662f\u6784\u5efa\u5177\u6709\u5f3a\u5927\u793e\u4ea4\u5a92\u4f53\u6574\u5408\u7684\u7f51\u7ad9\uff1aWebman\u7684\u793e\u4ea4\u5a92\u4f53\u5e94\u7528\u6307\u5357\u7684\u8be6\u7ec6\u5185\u5bb9\uff0c\u66f4\u591a\u8bf7\u5173\u6ce8\u7c73\u4e91\u5176\u5b83\u76f8\u5173\u6587\u7ae0\uff01<\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u6784\u5efa\u5177\u6709\u5f3a\u5927\u793e\u4ea4\u5a92\u4f53\u6574\u5408\u7684\u7f51\u7ad9\uff1aWebman\u7684\u793e\u4ea4\u5a92\u4f53\u5e94\u7528\u6307\u5357 \u5f15\u8a00\uff1a\u5728\u5f53\u4eca\u6570\u5b57\u5316\u65f6\u4ee3\uff0c\u793e\u4ea4\u5a92\u4f53\u7684\u5f71\u54cd\u529b\u8d8a\u6765\u8d8a\u5927\u3002 \u62e5\u6709\u4e00\u4e2a\u80fd\u591f\u6574\u5408\u5404\u79cd\u793e\u4ea4\u5a92\u4f53\u5e73\u53f0\u7684\u7f51\u7ad9\u5c06\u4e3a\u7528\u6237\u63d0\u4f9b\u66f4\u597d\u7684\u4f53\u9a8c\u3002 \u672c\u6587\u5c06\u4ecb\u7ecd\u5982\u4f55\u6784\u5efa\u4e00\u4e2a\u5177\u6709\u5f3a\u5927\u793e\u4ea4\u5a92\u4f53\u6574\u5408\u529f\u80fd\u7684\u7f51\u7ad9, \u6211\u4eec\u5c06\u4ee5\u4e00\u4e2a\u540d\u4e3aWebman\u7684\u793a\u4f8b\u5e94\u7528\u4e3a\u4f8b\u8fdb\u884c\u6f14\u793a\u3002 \u8bbe\u8ba1\u7f51\u7ad9\u7ed3\u6784\u5728\u6784\u5efaWebman\u4e4b\u524d\uff0c\u9996\u5148\u9700\u8981\u8bbe\u8ba1\u7f51\u7ad9\u7684\u6574\u4f53\u7ed3\u6784\u3002\u6211\u4eec\u9700\u8981\u521b\u5efa\u4e00\u4e2a\u7528\u6237\u754c\u9762\uff0c\u901a\u8fc7\u8be5\u754c\u9762\u7528\u6237\u53ef\u4ee5\u767b\u5f55\u5e76\u8fde\u63a5\u5230\u6240\u9700\u7684\u793e\u4ea4\u5a92\u4f53\u5e73\u53f0\u3002 \u8fd9\u4e9b\u5e73\u53f0\u53ef\u80fd\u5305\u62ecFacebook\u3001Twitter\u3001Instagram\u7b49\u3002 \u6211\u4eec\u5c06\u4f7f\u7528HTML\u3001CSS\u548cJavaScript\u6765\u8bbe\u8ba1\u548c\u5b9e\u73b0\u8fd9\u4e2a\u7f51\u7ad9\u3002 \u4ee5\u4e0b\u662f\u4e00\u4e2a\u7b80\u5316\u7684\u8bbe\u8ba1\u793a\u4f8b\uff1a &lt;title&gt;Webman&lt;\/title&gt;&lt;style&gt; \/* CSS \u6837\u5f0f *\/ &lt;\/style&gt;&lt;h1&gt;Webman &#8211; \u793e\u4ea4\u5a92\u4f53\u6574\u5408\u5e94\u7528&lt;\/h1&gt; \u767b\u5f55\u540e\u590d\u5236 \u5b9e\u73b0\u7528\u6237\u767b\u5f55\u529f\u80fd\u63a5\u4e0b\u6765\uff0c\u6211\u4eec\u5c06\u5b9e\u73b0\u7528\u6237\u767b\u5f55\u529f\u80fd\u3002 \u5728\u793a\u4f8b\u5e94\u7528\u4e2d\uff0c\u6211\u4eec\u5047\u8bbe\u7528\u6237\u53ef\u4ee5\u901a\u8fc7\u63d0\u4f9b\u7528\u6237\u540d\u548c\u5bc6\u7801\u6765\u767b\u5f55\uff0c\u5e76\u4e14\u6210\u529f\u767b\u5f55\u540e\uff0c\u7528\u6237\u5c06\u80fd\u591f\u8fde\u63a5\u5230\u4e0d\u540c\u7684\u793e\u4ea4\u5a92\u4f53\u5e73\u53f0\u3002 \u4ee5\u4e0b\u662f\u793a\u4f8b\u5e94\u7528\u7684\u767b\u5f55\u8868\u5355\uff1a \u767b\u5f55\u540e\u590d\u5236 \u767b\u5f55 \u63a5\u4e0b\u6765\uff0c\u5728JavaScript\u4ee3\u7801\u4e2d\u6dfb\u52a0\u4ee5\u4e0b\u4ee3\u7801\u6765\u5904\u7406\u767b\u5f55\u8868\u5355\u7684\u63d0\u4ea4\u4e8b\u4ef6\uff1a document.getElementById(&#8216;login-form&#8217;).addEventListener(&#8216;submit&#8217;, function(event) { event.preventDefault(); var username = document.getElementById(&#8216;username-input&#8217;).value; var password = document.getElementById(&#8216;password-input&#8217;).value; \/\/ \u5728\u8fd9\u91cc\u5904\u7406\u7528\u6237\u767b\u5f55\u903b\u8f91 \/\/ \u8fde\u63a5\u5230\u793e\u4ea4\u5a92\u4f53\u5e73\u53f0\u7684\u4ee3\u7801 }); \u767b\u5f55\u540e\u590d\u5236 \u8fde\u63a5\u5230\u793e\u4ea4\u5a92\u4f53\u5e73\u53f0\u5728\u7528\u6237\u6210\u529f\u767b\u5f55\u540e\uff0c\u6211\u4eec\u5c06\u4f7f\u7528\u793e\u4ea4\u5a92\u4f53\u5e73\u53f0\u7684API\u6765\u8fde\u63a5\u5230\u4e0d\u540c\u7684\u8d26\u6237\u3002\u4e0d\u540c\u7684\u5e73\u53f0\u53ef\u80fd\u6709\u4e0d\u540c\u7684\u8ba4\u8bc1\u548c\u6388\u6743\u8fc7\u7a0b\u3002 \u4ee5\u4e0b\u662f\u4e00\u4e2a\u4f7f\u7528Facebook API\u8fde\u63a5\u5230\u7528\u6237\u8d26\u6237\u7684\u793a\u4f8b\u4ee3\u7801\uff1a \/\/ \u5728\u8fd9\u91cc\u5904\u7406\u7528\u6237\u767b\u5f55\u903b\u8f91 \/\/ \u8fde\u63a5\u5230\u793e\u4ea4\u5a92\u4f53\u5e73\u53f0\u7684\u4ee3\u7801 FB.login(function(response) { if (response.authResponse) { var [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[16],"tags":[],"class_list":["post-24417","post","type-post","status-publish","format-standard","hentry","category-16"],"_links":{"self":[{"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/posts\/24417","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/comments?post=24417"}],"version-history":[{"count":0,"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/posts\/24417\/revisions"}],"wp:attachment":[{"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/media?parent=24417"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/categories?post=24417"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/tags?post=24417"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}