{"id":3228,"date":"2021-07-07T09:01:45","date_gmt":"2021-07-07T01:01:45","guid":{"rendered":"http:\/\/blog.hoyo.idv.tw\/?p=3228"},"modified":"2024-06-13T15:43:33","modified_gmt":"2024-06-13T07:43:33","slug":"hoyo-%e6%95%99%e4%bd%a0%e4%b8%b2-oauth-google-%e7%99%bb%e5%85%a5","status":"publish","type":"post","link":"https:\/\/blog.hoyo.idv.tw\/?p=3228","title":{"rendered":"Hoyo \u6559\u4f60\u4e32 OAuth - Google \u767b\u5165"},"content":{"rendered":"<h1>JavaScript \u767b\u5165<\/h1>\n<p>\u53c3\u8003\u8cc7\u6e90<\/p>\n<ul>\n<li><a href=\"https:\/\/developers.google.com\/identity\/sign-in\/web\/\" target=\"_blank\" rel=\"noopener\">Add Google Sign-In to Your Web App<\/a><\/li>\n<li><a href=\"https:\/\/developers.google.com\/identity\/sign-in\/web\/sign-in\">Integrate Google Sign-In<\/a><\/li>\n<\/ul>\n<p>\u4f7f\u7528 JavaScript \u7684\u597d\u8655\u662f\u7a0b\u5f0f\u8655\u7406\u7684\u4efd\u91cf\u8f03\u5c11\uff0c\u58de\u8655\u662f\u5bb9\u6613\u53d7\u700f\u89bd\u5668\u5f71\u97ff<\/p>\n<p>--<\/p>\n<h2>OAuth 2.0 \u7528\u6236\u7aef ID<\/h2>\n<ul style=\"color: #333333; font-style: normal;\">\n<li><a href=\"https:\/\/console.developers.google.com\/apis\/credentials\" target=\"_blank\" rel=\"noopener\">Google APIs - API \u548c\u670d\u52d9 -\u00a0\u6191\u8b49<\/a><\/li>\n<\/ul>\n<p>\u5f9e\u7a0b\u5f0f\u9700\u6c42\u770b\u4f86\u9700\u8981\u4e00\u500b\u00a0client_id \u4e5f\u5c31\u662f OAuth \u7528\u6236\u7aef ID\uff0c\u8acb\u6309\u7167\u8def\u5f91\uff1a\u5efa\u7acb\u6191\u8b49 \u2192 OAuth \u7528\u6236\u7aef ID<\/p>\n<p><a href=\"https:\/\/blog.hoyo.idv.tw\/wp-content\/uploads\/2021\/07\/20210706_120825.png\" data-rel=\"lightbox-image-0\" data-rl_title=\"\" data-rl_caption=\"\" title=\"\"><img loading=\"lazy\" class=\"alignnone size-medium wp-image-8507\" src=\"https:\/\/blog.hoyo.idv.tw\/wp-content\/uploads\/2021\/07\/20210706_120825-300x220.png\" alt=\"\" width=\"300\" height=\"220\" srcset=\"https:\/\/blog.hoyo.idv.tw\/wp-content\/uploads\/2021\/07\/20210706_120825-300x220.png 300w, https:\/\/blog.hoyo.idv.tw\/wp-content\/uploads\/2021\/07\/20210706_120825-768x564.png 768w, https:\/\/blog.hoyo.idv.tw\/wp-content\/uploads\/2021\/07\/20210706_120825-408x300.png 408w, https:\/\/blog.hoyo.idv.tw\/wp-content\/uploads\/2021\/07\/20210706_120825.png 1013w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a><\/p>\n<p>--<\/p>\n<h2>\u5b8c\u6574\u7a0b\u5f0f\u7bc4\u4f8b<\/h2>\n<p>\u9801\u9762\u8f09\u5165\u6642\u5fc5\u9808\u5148\u57f7\u884c startApp() \u9032\u884c\u767b\u5165\u6309\u9215\u521d\u59cb\u5316\uff0c\u7136\u5f8c\u6307\u5b9a\u7684 id (GoogleLogin) \u5c31\u6703\u9ede\u64ca\u624d\u6709\u529f\u80fd<\/p>\n<pre class=\"height-set:true lang:default decode:true\">&lt;script src=\"https:\/\/apis.google.com\/js\/api:client.js\"&gt;&lt;\/script&gt;\r\n&lt;div id=\"GoogleLogin\"&gt;\r\n    &lt;a href=\"javascript:void(0);\"&gt;&lt;i class=\"fa fa-2x fa-google-plus-square\"&gt;&lt;\/i&gt; Google \u767b\u5165&lt;\/a&gt;\r\n&lt;\/div&gt;\r\n&lt;script&gt;\r\n    var googleUser = {};\r\n    var startApp = function() {\r\n        gapi.load('auth2', function(){\r\n            \/\/ Retrieve the singleton for the GoogleAuth library and set up the client.\r\n            auth2 = gapi.auth2.init({\r\n                client_id: '41386xxxx-i3093ieo0htqxxxxxxxx.apps.googleusercontent.com'\r\n            });\r\n            attachSignin(document.getElementById('GoogleLogin'));\r\n        });\r\n    };\r\n\r\n    startApp();\r\n\r\n    \/\/\r\n    function attachSignin(element) {\r\n        \/\/console.log(element.id);\r\n        auth2.attachClickHandler(element, {}, function(googleUser) {\r\n            onSignIn(googleUser);\r\n        }, function(error) {\r\n            alert(JSON.stringify(error, undefined, 2));\r\n        });\r\n    }\r\n\r\n    function onSignIn(googleUser) {\r\n        \/\/ Useful data for your client-side scripts:\r\n        var profile = googleUser.getBasicProfile();\r\n\r\n        $.ajax({\r\n            url: 'index.php?a=GoogleOauth&amp;b=SignIn',\r\n            type: 'post',\r\n            dataType: 'json',\r\n            data: {\r\n                id: profile.getId(),\r\n                Name: profile.getName(),\r\n                Email: profile.getEmail(),\r\n                ImageURL: profile.getImageUrl()\r\n            },\r\n            success: function(json){\r\n\r\n                if ( json['Result'] ==true ){\r\n                    window.localStorage.Token = json['Data']['Token'];\r\n                    window.sessionStorage.Token = json['Data']['Token'];\r\n                }\r\n\r\n            }\r\n        });\r\n\r\n        console.log(\"ID: \" + profile.getId()); \/\/ Don't send this directly to your server!\r\n        console.log('Full Name: ' + profile.getName());\r\n        console.log('Given Name: ' + profile.getGivenName());\r\n        console.log('Family Name: ' + profile.getFamilyName());\r\n        console.log(\"Image URL: \" + profile.getImageUrl());\r\n        console.log(\"Email: \" + profile.getEmail());\r\n\r\n        \/\/ The ID token you need to pass to your backend:\r\n        var id_token = googleUser.getAuthResponse().id_token;\r\n        console.log(\"ID Token: \" + id_token);\r\n    }\r\n&lt;\/script&gt;<\/pre>\n<p><a href=\"https:\/\/blog.hoyo.idv.tw\/wp-content\/uploads\/2021\/07\/20210707_111519.png\" data-rel=\"lightbox-image-1\" data-rl_title=\"\" data-rl_caption=\"\" title=\"\"><img loading=\"lazy\" class=\"alignnone size-medium wp-image-8526\" src=\"https:\/\/blog.hoyo.idv.tw\/wp-content\/uploads\/2021\/07\/20210707_111519-300x209.png\" alt=\"\" width=\"300\" height=\"209\" srcset=\"https:\/\/blog.hoyo.idv.tw\/wp-content\/uploads\/2021\/07\/20210707_111519-300x209.png 300w, https:\/\/blog.hoyo.idv.tw\/wp-content\/uploads\/2021\/07\/20210707_111519-768x534.png 768w, https:\/\/blog.hoyo.idv.tw\/wp-content\/uploads\/2021\/07\/20210707_111519-1024x712.png 1024w, https:\/\/blog.hoyo.idv.tw\/wp-content\/uploads\/2021\/07\/20210707_111519-431x300.png 431w, https:\/\/blog.hoyo.idv.tw\/wp-content\/uploads\/2021\/07\/20210707_111519.png 1060w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a><\/p>\n<p>--<\/p>\n<h1>PHP \u5f8c\u7aef\u767b\u5165<\/h1>\n<p>\u53c3\u8003\u8cc7\u6e90<\/p>\n<ul>\n<li><a href=\"https:\/\/developers.google.com\/identity\/protocols\/OAuth2\" target=\"_blank\" rel=\"noopener\">OAuth 2.0 Overview<\/a><\/li>\n<li><a href=\"https:\/\/developers.google.com\/identity\/protocols\/OpenIDConnect\" target=\"_blank\" rel=\"noopener\">OpenID Connect<\/a><\/li>\n<li><a href=\"http:\/\/blog.johnsonlu.org\/php%e4%bd%bf%e7%94%a8-oauth-2-0-%e5%ad%98%e5%8f%96-google-apisfor-login\/\">[Oauth]\u4f7f\u7528 OAuth 2.0 \u5b58\u53d6 Google APIs(for Login)<\/a><\/li>\n<li><a href=\"http:\/\/www.jensbits.com\/2011\/12\/20\/authenticating-with-oauth-2-0-for-google-api-access-with-php\/\" target=\"_blank\" rel=\"noopener\">Authenticating with OAuth 2.0 for Google API Access with PHP<\/a><\/li>\n<\/ul>\n<p>\u4f7f\u7528\u5f8c\u53f0\u8655\u7406<\/p>\n<p>\u6d41\u7a0b<\/p>\n<ol>\n<li>\u8a3b\u518a Google \u6703\u54e1\u5e33\u865f<\/li>\n<li>\u9032\u5165\u00a0https:\/\/console.cloud.google.com\/<\/li>\n<li>\u767b\u5165\u9023\u7d50\u00a0https:\/\/accounts.google.com\/o\/oauth2\/auth?<\/li>\n<li>\u4f7f\u7528\u8005\u540c\u610f\u5f8c\u53d6\u5f97 code<\/li>\n<li>\u62ff code \u53bb\u63db access_token, https:\/\/accounts.google.com\/o\/oauth2\/token\u00a0\uff0c Google \u56de\u50b3\u7684\u662f json \u683c\u5f0f<\/li>\n<li>\u5c07 json decode \u5f8c\uff0c\u4f7f\u7528\u00a0https:\/\/www.googleapis.com\/oauth2\/v1\/tokeninfo?access_token= \u9032\u884c\u89e3\u8b80<\/li>\n<\/ol>\n<p>&nbsp;<\/p>\n<pre class=\"nums:false lang:default decode:true\">http:\/\/hoyo.idv.tw\/Member\/Gplus.php?code=4\/W74UH1UYG52Hb_GKYyuvt4nc_sc5LN1w1R_vm6zKS1o#<\/pre>\n<p>&nbsp;<\/p>\n<pre class=\"height-set:true lang:php decode:true \">&lt;?php\r\nclass Google\r\n{\r\n\r\n    function __construct()\r\n    {\r\n        global $init;\r\n        $this-&gt;db = $init-&gt;MemberPDO();\r\n\r\n        \/\/\r\n        $token_post = array(\r\n            \"code\" =&gt; $_GET['code'],\r\n            \"client_id\" =&gt; '41386861907-i3093ieo0htqj96rut34op8np229givs.apps.googleusercontent.com',\r\n            \"client_secret\" =&gt; '3ez9_4R6V4o2m0BAPHHRXR0_',\r\n            \"redirect_uri\" =&gt; 'https:\/\/member.hoyo.idv.tw\/Google.php',\r\n            \"grant_type\" =&gt; \"authorization_code\"\r\n        );\r\n\r\n        \/\/ https:\/\/accounts.google.com\/o\/oauth2\/token https:\/\/accounts.google.com\/o\/oauth2\/token\r\n        $ch = curl_init();\r\n        curl_setopt($ch, CURLOPT_URL, 'https:\/\/www.googleapis.com\/oauth2\/v4\/token');\r\n        curl_setopt($ch, CURLOPT_POSTFIELDS, $token_post); \/\/ G+ \u4f7f\u7528 POST\r\n        curl_setopt($ch, CURLOPT_RETURNTRANSFER , 1);\r\n        $response = curl_exec($ch); \/\/ \u56de\u50b3 access_token\r\n        curl_close($ch);\r\n\r\n        \/\/echo $response;\r\n\r\n        $s = json_decode($response, true);\r\n        print_r($s);\r\n        $ch = curl_init();\r\n        curl_setopt($ch, CURLOPT_URL, 'https:\/\/www.googleapis.com\/oauth2\/v1\/tokeninfo?access_token='. $s['access_token']);\r\n        curl_setopt($ch, CURLOPT_RETURNTRANSFER , 1);\r\n        $Get_info = curl_exec($ch);\r\n        curl_close($ch);\r\n\r\n        print_r($Get_info);\r\n\r\n    }\r\n}\r\n\r\nnew Google();<\/pre>\n<p>\u548c Facebook \u4e0d\u540c\u7684\u662f\uff0cGoogle Plus \u5728\u7528 code \u63db access_token \u6642\uff0c\u4f7f\u7528 HTTP <strong>POST<\/strong> \u4e1f\u503c\u904e\u53bb<\/p>\n<p>&nbsp;<\/p>\n<pre class=\"lang:default decode:true\">stdClass Object\r\n(\r\n    [issued_to] =&gt; 41386861907-ifoai1gad8ptki6mqpucmm4b2g91nk8f.apps.googleusercontent.com\r\n    [audience] =&gt; 41386861907-ifoai1gad8ptki6mqpucmm4b2g91nk8f.apps.googleusercontent.com\r\n    [user_id] =&gt; 103373531557133723975\r\n    [scope] =&gt; https:\/\/www.googleapis.com\/auth\/userinfo.profile https:\/\/www.googleapis.com\/auth\/userinfo.email\r\n    [expires_in] =&gt; 3598\r\n    [email] =&gt; pc@hoyo.idv.tw\r\n    [verified_email] =&gt; 1\r\n    [access_type] =&gt; online\r\n)\r\n<\/pre>\n<p>&nbsp;<\/p>\n<p>--<\/p>\n<div class=\"pvc_clear\"><\/div>\n<p class=\"pvc_stats all \" data-element-id=\"3228\" 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,128&nbsp;total views, &nbsp;1&nbsp;views today<\/p>\n<div class=\"pvc_clear\"><\/div>\n","protected":false},"excerpt":{"rendered":"<p>JavaScript \u767b\u5165 \u53c3...<\/p>\n<div class=\"pvc_clear\"><\/div>\n<p class=\"pvc_stats all \" data-element-id=\"3228\" 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,128&nbsp;total views, &nbsp;1&nbsp;views today<\/p>\n<div class=\"pvc_clear\"><\/div>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[31],"tags":[],"_links":{"self":[{"href":"https:\/\/blog.hoyo.idv.tw\/index.php?rest_route=\/wp\/v2\/posts\/3228"}],"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=3228"}],"version-history":[{"count":15,"href":"https:\/\/blog.hoyo.idv.tw\/index.php?rest_route=\/wp\/v2\/posts\/3228\/revisions"}],"predecessor-version":[{"id":8527,"href":"https:\/\/blog.hoyo.idv.tw\/index.php?rest_route=\/wp\/v2\/posts\/3228\/revisions\/8527"}],"wp:attachment":[{"href":"https:\/\/blog.hoyo.idv.tw\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=3228"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.hoyo.idv.tw\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=3228"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.hoyo.idv.tw\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=3228"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}