JavaScript 登入
參考資源
使用 JavaScript 的好處是程式處理的份量較少，壞處是容易受瀏覽器影響
--
OAuth 2.0 用戶端 ID
從程式需求看來需要一個 client_id 也就是 OAuth 用戶端 ID，請按照路徑：建立憑證 → OAuth 用戶端 ID
--
完整程式範例
頁面載入時必須先執行 startApp() 進行登入按鈕初始化，然後指定的 id (GoogleLogin) 就會點擊才有功能
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 |
<script src="https://apis.google.com/js/api:client.js"></script> <div id="GoogleLogin"> <a href="javascript:void(0);"><i class="fa fa-2x fa-google-plus-square"></i> Google 登入</a> </div> <script> var googleUser = {}; var startApp = function() { gapi.load('auth2', function(){ // Retrieve the singleton for the GoogleAuth library and set up the client. auth2 = gapi.auth2.init({ client_id: '41386xxxx-i3093ieo0htqxxxxxxxx.apps.googleusercontent.com' }); attachSignin(document.getElementById('GoogleLogin')); }); }; startApp(); // function attachSignin(element) { //console.log(element.id); auth2.attachClickHandler(element, {}, function(googleUser) { onSignIn(googleUser); }, function(error) { alert(JSON.stringify(error, undefined, 2)); }); } function onSignIn(googleUser) { // Useful data for your client-side scripts: var profile = googleUser.getBasicProfile(); $.ajax({ url: 'index.php?a=GoogleOauth&b=SignIn', type: 'post', dataType: 'json', data: { id: profile.getId(), Name: profile.getName(), Email: profile.getEmail(), ImageURL: profile.getImageUrl() }, success: function(json){ if ( json['Result'] ==true ){ window.localStorage.Token = json['Data']['Token']; window.sessionStorage.Token = json['Data']['Token']; } } }); console.log("ID: " + profile.getId()); // Don't send this directly to your server! console.log('Full Name: ' + profile.getName()); console.log('Given Name: ' + profile.getGivenName()); console.log('Family Name: ' + profile.getFamilyName()); console.log("Image URL: " + profile.getImageUrl()); console.log("Email: " + profile.getEmail()); // The ID token you need to pass to your backend: var id_token = googleUser.getAuthResponse().id_token; console.log("ID Token: " + id_token); } </script> |
--
PHP 後端登入
參考資源
- OAuth 2.0 Overview
- OpenID Connect
- [Oauth]使用 OAuth 2.0 存取 Google APIs(for Login)
- Authenticating with OAuth 2.0 for Google API Access with PHP
使用後台處理
流程
- 註冊 Google 會員帳號
- 進入 https://console.cloud.google.com/
- 登入連結 https://accounts.google.com/o/oauth2/auth?
- 使用者同意後取得 code
- 拿 code 去換 access_token, https://accounts.google.com/o/oauth2/token ， Google 回傳的是 json 格式
- 將 json decode 後，使用 https://www.googleapis.com/oauth2/v1/tokeninfo?access_token= 進行解讀
|
1 |
http://hoyo.idv.tw/Member/Gplus.php?code=4/W74UH1UYG52Hb_GKYyuvt4nc_sc5LN1w1R_vm6zKS1o# |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 |
<?php class Google { function __construct() { global $init; $this->db = $init->MemberPDO(); // $token_post = array( "code" => $_GET['code'], "client_id" => '41386861907-i3093ieo0htqj96rut34op8np229givs.apps.googleusercontent.com', "client_secret" => '3ez9_4R6V4o2m0BAPHHRXR0_', "redirect_uri" => 'https://member.hoyo.idv.tw/Google.php', "grant_type" => "authorization_code" ); // https://accounts.google.com/o/oauth2/token https://accounts.google.com/o/oauth2/token $ch = curl_init(); curl_setopt($ch, CURLOPT_URL, 'https://www.googleapis.com/oauth2/v4/token'); curl_setopt($ch, CURLOPT_POSTFIELDS, $token_post); // G+ 使用 POST curl_setopt($ch, CURLOPT_RETURNTRANSFER , 1); $response = curl_exec($ch); // 回傳 access_token curl_close($ch); //echo $response; $s = json_decode($response, true); print_r($s); $ch = curl_init(); curl_setopt($ch, CURLOPT_URL, 'https://www.googleapis.com/oauth2/v1/tokeninfo?access_token='. $s['access_token']); curl_setopt($ch, CURLOPT_RETURNTRANSFER , 1); $Get_info = curl_exec($ch); curl_close($ch); print_r($Get_info); } } new Google(); |
和 Facebook 不同的是，Google Plus 在用 code 換 access_token 時，使用 HTTP POST 丟值過去
|
1 2 3 4 5 6 7 8 9 10 11 |
stdClass Object ( [issued_to] => 41386861907-ifoai1gad8ptki6mqpucmm4b2g91nk8f.apps.googleusercontent.com [audience] => 41386861907-ifoai1gad8ptki6mqpucmm4b2g91nk8f.apps.googleusercontent.com [user_id] => 103373531557133723975 [scope] => https://www.googleapis.com/auth/userinfo.profile https://www.googleapis.com/auth/userinfo.email [expires_in] => 3598 [email] => pc@hoyo.idv.tw [verified_email] => 1 [access_type] => online ) |
--
544 total views, 3 views today