有没有一种简单的方法可以将谷歌登录按钮添加到 HTML 文件？
Posted
技术标签:
【中文标题】有没有一种简单的方法可以将谷歌登录按钮添加到 HTML 文件？【英文标题】：Is there a simple way to add a google sign in button to HTML files? 【发布时间】：2021-11-22 04:31:13 【问题描述】：我使用 Google OAuth 2.0 创建了一个 google 登录，我使用 Xamp 和 php 配置它来构建数据库，我在我的项目之外构建它，现在我想在我的项目中包含 google 登录按钮，但我一直得到错误。在我的本地主机上，我想先将它添加到我的文件中，然后在上传之前查看它在我的页面中的外观。下面是我的 index.php 文件
<?php
require_once('config.php');
require_once('core/controller.Class.php');
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="uft-8">
<meta name="viewport" content="width=device-width, inital-scale=1">
<title>Login with Google</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" >
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">
</head>
<body>
<div class="container" style="margin-top: 100px">
<?php
if(isset($_COOKIE["id"]) && isset($_COOKIE["sess"]))
$Controller = new Controller;
if($Controller -> checkUserStatus($_COOKIE["id"], $_COOKIE["sess"]))
echo $Controller -> printData(intval($_COOKIE["id"]));
echo '<a href="logout.php">Logout</a>';
else
echo "Error!";
else
?>
<img src="img/20210908_214559.jpg"
style="display: table; margin: 0 auto; max-width: 150px;">
<form action="" method=:POST>
<div class="form-group">
<label for="exampleInputEmail1">Email Address</label>
<input type="email" class="form-control" id="exampleInputEmail1"
placeholder="Enter email">
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1"
placeholder="Enter password">
</div>
<button type="submit" class="btn btn-primary">Login</button>
<button onClick="window.location = '<?php echo $login_url;?>'" type="button" class="btn btn-danger">Login with Google</button>
</div>
</form>
<?php ?>
</body>
</html>【问题讨论】：
【参考方案1】：您似乎希望收集 google 用户名和密码，然后将其传递给 google 身份验证引擎？这不是我实施解决方案的方式。 Google 提供instructions 用于集成他们的登录服务。 我建议遵循这些说明。这将需要以下文件：
-
包含 google 登录按钮的登录页面。您可以想象将其添加到您现有的任何页面中。相关代码为：
<div class="g-signin2" data-longtitle="true" data-onsuccess="onSignIn"></div>
-
一个 javascript 文件，其中包含 onSignIn 函数和一个 signOut 函数（如果需要）。此文件处理对成功登录页面的重定向，并传递您要从用户的 Google 帐户收集的属性。我正在使用 XMLHttpRequest，但如果您愿意，可以使用 POST。此页面包含用户成功登录后将被引导到的页面，在 xhr.onreadystatechange = function() 中设置：
function onSignIn(googleUser)
var profile = googleUser.getBasicProfile();
var id_token = googleUser.getAuthResponse().id_token;
// console.log('ID: ' + profile.getId()); // Do not send to your backend! Use an ID token instead.
var xhr = new XMLHttpRequest();
xhr.open('POST', 'includes/oauth.php');
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.onreadystatechange = function()
window.location = "../loggedin.php"; //Redirect to loggedin page on completion of oauth.php. Determine if new user or existing user and process accordingly
xhr.send('idtoken=' + id_token + '&googleId=' + profile.getId() + '&name=' + profile.getName() + '&imageURL=' + profile.getImageUrl() + '&email=' + profile.getEmail());
function signOut()
gapi.load('auth2', function()
gapi.auth2.init().then(function()
var auth2 = gapi.auth2.getAuthInstance();
auth2.signOut().then(function ()
document.location.href = 'includes/logout.php';
);
);
);
-
处理身份验证的文件（在我上面的 javascript 文件中称为 include/oauth.php）。注意 $leeway 的设置——这让我很伤心，因为我发现我的服务器上的时钟比 Google auth 服务器的时钟慢！）：
require_once '../vendor/autoload.php';
$jwt = new \Firebase\JWT\JWT; //Allow for discrepancies between server and auth times
$jwt::$leeway = 60;
$CLIENT_ID = "ENTER_YOUR_CLIENT_ID_HERE";
$client = new Google_Client(['client_id' => $CLIENT_ID]); // Specify the CLIENT_ID of the app that accesses the backend
$client->setRedirectUri("http://localhost/includes/oauth.php");
$client->addScope("email");
$client->addScope("profile");
if (isset($_POST['idtoken']))
$id_token = $_POST['idtoken'];
$attempt = 0;
do
try
$payload = $client->verifyIdToken($id_token);
$retry = false;
catch (Firebase\JWT\BeforeValidException $e)
error_log("JWT server time mismatch. Retry attempt: " . strval($attempt) . "Error: " . $e, 0);
$attempt++;
$retry = $attempt < 3;
while ($retry);
if ($payload)
$userid = $payload['sub'];
...
YOUR VALIDATION, SESSION SETTING, ETC. CODE HERE
...
else
// Invalid ID token
print("Invalid ID token");
else //Attempt to access this page directly, redirect to Google login page
$auth_url = $client->createAuthUrl();
header('Location: ' . filter_var($auth_url, FILTER_SANITIZE_URL));
-
登录成功后显示的页面。我在这里使用了一个插页式页面，因为经过身份验证的用户可能是我的站点的新用户并且需要创建个人资料，或者可能是现有用户并且想要进行他们的活动。我希望验证 SESSION 是否已启动，以及这是否包括成功的身份验证。
【讨论】：
我已经设置好了所有内容，config.php、controller.php、index.php、logout.php 甚至 google-api 供应商 autoload.php。我遇到的真正问题是，我在 xampp htdocs 中设置了这些，我不知道如何将它链接到我的文件，就像我将链接我的 css 和 javascript 一样。我需要一些帮助，我是这个后端的新手@MuppetDance以上是关于有没有一种简单的方法可以将谷歌登录按钮添加到 HTML 文件？的主要内容，如果未能解决你的问题，请参考以下文章