{"id":14448,"date":"2022-12-05T17:06:29","date_gmt":"2022-12-05T09:06:29","guid":{"rendered":"https:\/\/www.yimenapp.com\/kb-yimen\/?p=14448"},"modified":"2022-12-05T17:06:30","modified_gmt":"2022-12-05T09:06:30","slug":"%e5%ae%9e%e7%8e%b0qq%e4%b8%89%e6%96%b9%e6%8e%88%e6%9d%83%e7%99%bb%e5%bd%95%e6%95%99%e7%a8%8b-%e5%bc%80%e5%8f%91%e6%94%bb%e7%95%a5_client-side","status":"publish","type":"post","link":"https:\/\/www.yimenapp.com\/kb-yimen\/14448\/","title":{"rendered":"\u5b9e\u73b0QQ\u4e09\u65b9\u6388\u6743\u767b\u5f55\u6559\u7a0b \u5f00\u53d1\u653b\u7565_Client-side"},"content":{"rendered":"\n

\u5b9e\u73b0QQ\u4e09\u65b9\u6388\u6743\u767b\u5f55\u6559\u7a0b \u5f00\u53d1\u653b\u7565_Client-side<\/p>\n\n\n\n

\u672c\u5f00\u53d1\u653b\u7565\u9002\u7528\u4e8e\u4f7f\u7528Implicit Grant\u65b9\u5f0f\u83b7\u53d6Access Token\u7684\u6388\u6743\u9a8c\u8bc1\u6d41\u7a0b\uff0c\u9002\u7528\u4e8e\u9700\u8981\u901a\u8fc7\u5ba2\u6237\u7aef\u8bbf\u95ee\u7684\u65b9\u5f0f\uff0c\u4f8b\u5982\u9700\u8981\u901a\u8fc7\u6d4f\u89c8\u5668\u7684javascript\u4ee3\u7801\uff0c\u6216\u8005\u7535\u8111\/\u79fb\u52a8\u7ec8\u7aef\u4e0a\u7684\u5ba2\u6237\u7aef\u8bbf\u95ee\u65f6\u3002
\u9605\u8bfb\u672c\u5f00\u53d1\u653b\u7565\u524d\uff0c\u8bf7\u9605\u8bfb\u4f7f\u7528Implicit Grant\u65b9\u5f0f\u83b7\u53d6Access Token<\/a>\u4ee5\u4e86\u89e3\u8ba4\u8bc1\u6d41\u7a0b\u3002<\/p>\n\n\n\n

1. \u4f53\u9a8c\u4e00\u628a<\/h2>\n\n\n\n

1. \u6d4f\u89c8\u5668\u8bbf\u95ee\uff1ahttp:\/\/qzs.qq.com\/qzone\/openapi\/client.html<\/a>\u00a0\u3002
2. \u70b9\u51fb\u9875\u9762\u4e2d\u7684\u201c\u767b\u5f55\u201d\u6309\u94ae\uff1a
\"\"
3. \u5728\u5f39\u51fa\u7684\u767b\u5f55\u6846\u4e2d\u8f93\u5165QQ\u5e10\u53f7\u548c\u5bc6\u7801\uff1a
<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n


4. \u767b\u5f55\u6210\u529f\u540e\uff0c\u8df3\u8f6c\u5230\u6307\u5b9a\u7684\u56de\u8c03\u5730\u5740\uff0cURL\u4e2d\u5e26\u6709Access Token\uff1a
<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

2. \u5feb\u901f\u4e0a\u624b<\/h2>\n\n\n\n

\u51c6\u5907\u5de5\u4f5c<\/h3>\n\n\n\n

1. \u8bf7\u786e\u4fdd\u60a8\u7684\u7f51\u7ad9\u5df2\u7ecf\u63d0\u4ea4\u63a5\u5165QQ\u767b\u5f55<\/a><\/span>\u7684\u7533\u8bf7\uff0c\u5e76\u6210\u529f\u83b7\u53d6\u5230app<\/a><\/span>id\u548cappkey\u3002\u7533\u8bf7\u63a5\u5165<\/a>
2. \u8bf7\u5728\u4f60\u7684\u670d\u52a1\u5668\u4e0aping graph.qq.com \uff0c\u4fdd\u8bc1\u7f51\u7ad9\u548c\u4e92\u8054\u7684\u8fde\u63a5\u7545\u901a\u3002<\/p>\n\n\n\n

Step1\uff1a\u653e\u7f6eQQ\u767b\u5f55\u6309\u94ae<\/h3>\n\n\n\n

\u7f51\u7ad9\u9700\u8981\u4e0b\u8f7d\u201cQQ\u767b\u5f55\u201d\u6309\u94ae\u56fe\u7247\uff0c\u5e76\u6309\u7167UI\u89c4\u8303\u5c06\u6309\u94ae\u653e\u7f6e\u5728\u9875\u9762\u5408\u9002\u7684\u4f4d\u7f6e\u3002
\u6309\u94ae\u56fe\u6807\u4e0b\u8f7d<\/a>
\u6309\u94ae\u653e\u7f6e\u89c4\u8303<\/a><\/p>\n\n\n\n

Step2\uff1a\u83b7\u53d6Access Token<\/h3>\n\n\n\n

1. \u6253\u5f00\u6d4f\u89c8\u5668\uff0c\u8bbf\u95ee\u5982\u4e0b\u5730\u5740\uff08\u8bf7\u5c06client_id\uff0credirect_uri\uff0cscope\u7b49\u53c2\u6570<\/a>\u503c\u66ff\u6362\u4e3a\u4f60\u81ea\u5df1\u7684\uff09\uff1a<\/p>\n\n\n\n

https:\/\/graph.qq.com\/oauth2.0\/authorize?response_type=token&client_id=[YOUR_APPID]&redirect_uri=[YOUR_REDIRECT_URI]&scope=[THE_SCOPE]<\/a><\/p>\n\n\n\n

2. \u8df3\u8f6c\u767b\u5f55\u6388\u6743\u9875\uff0c\u5982\u4e0b\u56fe\u6240\u793a\uff1a
<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n


3. \u5982\u679c\u7528\u6237\u70b9\u51fb\u201c\u6388\u6743\u5e76\u767b\u5f55\u201d\uff0c\u5219\u6210\u529f\u8df3\u8f6c\u5230\u6307\u5b9a\u7684redirect_uri\uff0c\u5e76\u5728URL\u540e\u52a0\u201c#\u201d\u53f7\uff0c\u5e26\u4e0aAccess Token\u4ee5\u53caexpires_in\u7b49\u53c2\u6570\u3002\u5982\u679credirect_uri\u5730\u5740\u540e\u5df2\u7ecf\u6709\u201c#\u201d\u53f7\uff0c\u5219\u52a0\u201c&\u201d\u53f7\uff0c\u5e26\u4e0a\u76f8\u5e94\u7684\u8fd4\u56de\u53c2\u6570\u3002
\u4f8b\u5982\u56de\u8c03\u5730\u5740\u662f\uff1awww.qq.com\uff0c\u5219\u4f1a\u8df3\u8f6c\u5230\uff1a<\/p>\n\n\n\n

http:\/\/www.qq.com\/?#access_token=YOUR_ACCESS_TOKEN&expires_in=3600<\/p>\n\n\n\n

\u7279\u522b\u63d0\u793a<\/strong>\uff1a
1. \u8bf7\u6c42\u65f6\u4f20\u5165\u7684recirect_uri\u5fc5\u987b\u4e0e\u6ce8\u518c\u65f6\u586b\u5199\u7684\u56de\u8c03\u5730\u5740\u4e00\u81f4\uff0c\u7528\u6765\u8fdb\u884c\u7b2c\u4e09\u65b9\u5e94\u7528\u7684\u8eab\u4efd\u9a8c\u8bc1\u3002
2. \u53ef\u901a\u8fc7js\u65b9\u6cd5\uff1awindow.location.hash\u6765\u83b7\u53d6URL\u4e2d#\u540e\u7684\u53c2\u6570\u503c\uff0c\u8be6\u89c1\u4e0b\u9762\u7684\u793a\u4f8b\u4ee3\u7801\u3002
3. \u5efa\u8bae\u7528js\u8bbe\u7f6ecookie\u5b58\u50a8token\u3002

4. \u83b7\u53d6\u5230\u7684access token\u5177\u670930\u5929\u6709\u6548\u671f\uff0c\u7528\u6237\u518d\u6b21\u767b\u5f55\u65f6\u81ea\u52a8\u5237\u65b0\u3002<\/p>\n\n\n\n

Step3\uff1a\u4f7f\u7528Access Token\u6765\u83b7\u53d6\u7528\u6237\u7684OpenID<\/h3>\n\n\n\n

1. \u53d1\u9001\u8bf7\u6c42\u5230\u5982\u4e0b\u5730\u5740\uff08\u8bf7\u5c06access_token\u7b49\u53c2\u6570\u503c\u66ff\u6362\u4e3a\u4f60\u81ea\u5df1\u7684\uff09\uff1a<\/p>\n\n\n\n

https:\/\/graph.qq.com\/oauth2.0\/me?access_token=YOUR_ACCESS_TOKEN<\/a><\/p>\n\n\n\n

2. \u83b7\u53d6\u5230\u7528\u6237OpenID\uff0c\u8fd4\u56de\u5305\u5982\u4e0b\uff1a<\/p>\n\n\n\n

callback( {\"client_id\":\"YOUR_APPID\",\"openid\":\"YOUR_OPENID\"} );<\/pre>\n\n\n\n
Step4\uff1a\u4f7f\u7528Access Token\u4ee5\u53caOpenID\u6765\u8bbf\u95ee\u548c\u4fee\u6539\u7528\u6237\u6570\u636e<\/h3>\n\n\n\n
1. \u5efa\u8bae\u7f51\u7ad9\u5728\u7528\u6237\u767b\u5f55\u540e\uff0c\u5373\u8c03\u7528get_user_info<\/a>\u63a5\u53e3\uff0c\u83b7\u5f97\u8be5\u7528\u6237\u7684\u5934\u50cf\u3001\u6635\u79f0\u5e76\u663e\u793a\u5728\u7f51\u7ad9\u4e0a\uff0c\u4f7f\u7528\u6237\u4f53\u9a8c\u7edf\u4e00\u3002
2. \u8c03\u7528\u5176\u4ed6OpenAPI\uff0c\u4ee5\u8bbf\u95ee\u548c\u4fee\u6539\u7528\u6237\u6570\u636e\u3002\u6240\u6709OpenAPI\u8be6\u89c1API\u5217\u8868<\/a>\u3002
\u4ee5\u8c03\u7528get_user_info<\/a>\u63a5\u53e3\u4e3a\u4f8b\uff1a
\uff081\uff09\u53d1\u9001\u8bf7\u6c42\u5230get_user_info\u7684URL\uff08\u8bf7\u5c06access_token\uff0cappid\u7b49\u53c2\u6570\u503c\u66ff\u6362\u4e3a\u4f60\u81ea\u5df1\u7684\uff09\uff1a<\/p>\n\n\n\n
https:\/\/graph.qq.com\/user\/get_user_info?access_token=YOUR_ACCESS_TOKEN&oauth_consumer_key=YOUR_APP_ID&openid=YOUR_OPENID<\/a><\/p>\n\n\n\n
\uff082\uff09\u6210\u529f\u8fd4\u56de\u540e\uff0c\u5373\u53ef\u83b7\u53d6\u5230\u7528\u6237\u6570\u636e\uff1a<\/p>\n\n\n\n
{\n  \"ret\":0,\n   \"msg\":\"\",\n   \"nickname\":\"YOUR_NICK_NAME\",\n   ...\n}<\/pre>\n\n\n\n
3. \u793a\u4f8b\u4ee3\u7801<\/h2>\n\n\n\n
\u4e0b\u9762\u7ed9\u51fa\u4e86\u4e00\u4e2aJavaScript\u7684\u6837\u4f8b\uff08\u53ea\u9700\u8981\u6309\u7167\u6ce8\u91ca\u4fee\u6539\u90e8\u5206\u4ee3\u7801\u5373\u53ef\u8fd0\u884c\uff09<\/p>\n\n\n\n
  <html>\n     <head>\n        <title>Client Flow Example<\/title>\n     <\/head>\n     <body>\n        <script>\n           function callback(user)\n           {\n              var userName = document.getElementById('userName');\n              var greetingText = document.createTextNode('Greetings, '+ user.openid + '.');\n              userName.appendChild(greetingText);\n           }\n           \/\/\u5e94\u7528\u7684APPID\uff0c\u8bf7\u6539\u4e3a\u4f60\u81ea\u5df1\u7684\n            var appID = \"YOUR_APP_ID\";\n           \/\/\u6210\u529f\u6388\u6743\u540e\u7684\u56de\u8c03\u5730\u5740\uff0c\u8bf7\u6539\u4e3a\u4f60\u81ea\u5df1\u7684\n            var redirectURI = \"http:\/\/qzs.qq.com\/qzone\/openapi\/success.html\";\n           \/\/\u6784\u9020\u8bf7\u6c42\n           if (window.location.hash.length == 0)\n           {\n              var path = 'https:\/\/graph.qq.com\/oauth2.0\/authorize?';\n              var queryParams = ['client_id=' + appID,'redirect_uri=' + redirectURI,'\n              scope=' + 'get_user_info,list_album,upload_pic,add_feeds,do_like','response_type=token'];\n              var query = queryParams.join('&');\n              var url = path + query;\n              window.open(url);\n           }\n           else\n           {\n              \/\/\u83b7\u53d6access token\n              var accessToken = window.location.hash.substring(1);\n              \/\/\u4f7f\u7528Access Token\u6765\u83b7\u53d6\u7528\u6237\u7684OpenID\n              var path = \"https:\/\/graph.qq.com\/oauth2.0\/me?\";\n              var queryParams = [accessToken, 'callback=callback'];\n              var query = queryParams.join('&');\n              var url = path + query;\n              var script = document.createElement('script');\n              script.src = url;\n              document.body.appendChild(script);\n           }\n        <\/script>\n     <\/body>\n <\/html><\/pre>\n\n\n\n
4. \u4f7f\u7528JS SDK<\/h2>\n\n\n\n
\u4e3a\u4e86\u8ba9\u5e94\u7528\u66f4\u5feb\u63a5\u5165\uff0c\u817e\u8baf\u63d0\u4f9b\u4e86JS SDK\uff0c\u5e94\u7528\u53ea\u9700\u5f15\u5165js\u811a\u672c\uff0c\u518d\u8fdb\u884c\u5c11\u91cf\u7684\u4ee3\u7801\u4fee\u6539\uff0c\u5373\u53ef\u63a5\u5165QQ\u767b\u5f55\uff0c\u8fc7\u7a0b\u975e\u5e38\u7b80\u5355\u5feb\u901f\u3002
\u8be6\u89c1\uff1a
JS SDK\u4f7f\u7528\u8bf4\u660e<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
\u5b9e\u73b0QQ\u4e09\u65b9\u6388\u6743\u767b\u5f55\u6559\u7a0b \u5f00\u53d1\u653b\u7565_Client-side<\/p>\n","protected":false},"author":1,"featured_media":14452,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[654,632,45],"tags":[6874,84],"special":[69],"attr":[],"class_list":["post-14448","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-app34","category-app12","category-kaifangpingtai","tag-qq","tag-qqdenglu","special-qqopen","entry"],"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/www.yimenapp.com\/kb-yimen\/wp-json\/wp\/v2\/posts\/14448","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.yimenapp.com\/kb-yimen\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.yimenapp.com\/kb-yimen\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.yimenapp.com\/kb-yimen\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.yimenapp.com\/kb-yimen\/wp-json\/wp\/v2\/comments?post=14448"}],"version-history":[{"count":1,"href":"https:\/\/www.yimenapp.com\/kb-yimen\/wp-json\/wp\/v2\/posts\/14448\/revisions"}],"predecessor-version":[{"id":14453,"href":"https:\/\/www.yimenapp.com\/kb-yimen\/wp-json\/wp\/v2\/posts\/14448\/revisions\/14453"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.yimenapp.com\/kb-yimen\/wp-json\/wp\/v2\/media\/14452"}],"wp:attachment":[{"href":"https:\/\/www.yimenapp.com\/kb-yimen\/wp-json\/wp\/v2\/media?parent=14448"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.yimenapp.com\/kb-yimen\/wp-json\/wp\/v2\/categories?post=14448"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.yimenapp.com\/kb-yimen\/wp-json\/wp\/v2\/tags?post=14448"},{"taxonomy":"special","embeddable":true,"href":"https:\/\/www.yimenapp.com\/kb-yimen\/wp-json\/wp\/v2\/special?post=14448"},{"taxonomy":"attr","embeddable":true,"href":"https:\/\/www.yimenapp.com\/kb-yimen\/wp-json\/wp\/v2\/attr?post=14448"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}