如何在網頁加入google登入 auth

pipe

1. 申請 google 授權碼 (Auth Code)
說明文件

建立用戶端 ID 和用戶端密碼

如要建立用戶端 ID 和用戶端密鑰，請建立 Google API 控制台專案、設定 OAuth 用戶端 ID，並註冊 JavaScript 來源：

• 前往 Google API 控制台。
• 從專案下拉式選單中選取現有專案，或選取「Create a new project」建立新專案。
  注意： 請使用單一專案來保留應用程式的所有平台例項 (Android、iOS、網頁等)，每個例項都應有不同的用戶端 ID。
• 在側欄的「API 和服務」下方，選取「憑證」，然後按一下「設定同意畫面」。
  選擇電子郵件地址、指定產品名稱，然後按下「儲存」。
• 在「Credentials」分頁中，選取「Create credentials」下拉式清單，然後選擇「OAuth client ID」。
• 在「Application type」(應用程式類型) 下方，選取 [Web application] (網頁應用程式)。
  註冊應用程式可存取 Google API 的來源，如下所示。來源是指通訊協定、主機名稱和通訊埠的獨特組合。
  
  
  • 在「Authorized JavaScript origins」(已授權的 JavaScript 來源) 欄位中輸入應用程式的來源。您可以輸入多個來源，讓應用程式在不同的通訊協定、網域或子網域上執行。請勿使用萬用字元。在下方範例中，第二個網址可能是正式版網址。
  • 「已授權的重新導向 URI」欄位不需要值。Redirect URI 不適用於 JavaScript API。
  • 按下「Create」(建立) 按鈕，
    
    
    
• 在隨即顯示的「OAuth 用戶端」對話方塊中，複製用戶端 ID。用戶端 ID 可讓應用程式存取已啟用的 Google API。

  google登入 auth

  
  

2. 以 https://kingliwei.com 網域為例
建立 login.php

1. <?php
   
2. include "global.php";
   
3. session_start();        
   
4. // Google API 設定
   
5. $client_id = "your_id.apps.googleusercontent.com";
   
6. 
   
7. if (isset($_POST['credential'])) {
   
8.     $id_token = $_POST['credential'];
   
9.    
   
10.     // 改用 cURL 驗證，比 file_get_contents 更穩定
    
11.     $ch = curl_init();
    
12.     curl_setopt($ch, CURLOPT_URL, "https://oauth2.googleapis.com/tokeninfo?id_token=" . $id_token);
    
13.     curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
    
14.     curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false); // 若伺服器 SSL 憑證過舊，此行可避免驗證無效
    
15.     $response = curl_exec($ch);
    
16.     curl_close($ch);
    
17.    
    
18.     $user_data = json_decode($response, true);
    
19.     if (isset($user_data['email'])) {
    
20.         $email = addslashes($user_data['email']);
    
21.         
    
22.         // 檢查資料庫 (請確保 net_member 資料表有 email 欄位)
    
23.         $sql = "SELECT * FROM net_member WHERE email = '$email'";
    
24.         $query = $db->query($sql);
    
25.         $row = $db->fetch_array($query);
    
26. 
    
27.         if ($row) {
    
28.             // 登入成功：先設定 Session，最後再執行跳轉
    
29.             $_SESSION['username'] = $row['username'];
    
30.             $_SESSION['uid'] = $row['uid'];
    
31.             
    
32.             echo "<script>alert('Google 登入成功！');window.location='index.php';</script>";
    
33.             exit;
    
34.         } else {
    
35.             // 沒帳號，帶到註冊頁
    
36.             echo "<script>alert('尚未註冊，請先完成帳號綁定。');window.location='reg.php?email=$email';</script>";
    
37.             exit;
    
38.         }
    
39.     } else {
    
40.         echo "<script>alert('Google 驗證無效');history.go(-1);</script>";
    
41.         exit;
    
42.     }
    
43. }
    
44. 
    
45. $smarty->display('login.htm');
    
46. mysqli_close();
    
47. ?>

複製代碼

3. 建立 login.htm

1. <div id="g_id_onload"
   
2.                                          data-client_id="your_id.apps.googleusercontent.com"
   
3.                                          data-callback="handleCredentialResponse"
   
4.                                          data-ux_mode="popup"
   
5.                                          data-auto_prompt="false">
   
6.                                 </div>
   
7.                                 <div class="g_id_signin"
   
8.                                          data-type="standard"
   
9.                                          data-shape="rectangular"
   
10.                                          data-theme="outline"
    
11.                                          data-text="signin_with"
    
12.                                          data-size="large"
    
13.                                          data-logo_alignment="left">
    
14.                                 </div>
    
15. 
    
16. <script src="https://accounts.google.com/gsi/client" async defer></script>
    
17. 
    
18. <script>
    
19.   function handleCredentialResponse(response) {
    
20.     // 建立一個表單自動提交
    
21.     var form = document.createElement('form');
    
22.     form.setAttribute('method', 'post');
    
23.     form.setAttribute('action', 'login.php');
    
24. 
    
25.     var hiddenField = document.createElement('input');
    
26.     hiddenField.setAttribute('type', 'hidden');
    
27.     hiddenField.setAttribute('name', 'credential'); // 這裡要對應後端的 $_POST['credential']
    
28.     hiddenField.setAttribute('value', response.credential);
    
29. 
    
30.     form.appendChild(hiddenField);
    
31.     document.body.appendChild(form);
    
32.     form.submit();
    
33.   }
    
34. </script>

複製代碼

展示圖

google登入 auth