因此我在 Google Cloud 上设置了 Google 登录,但我还没有在后端实现其逻辑。我是否需要在后端实现逻辑才能看到 Google 登录小部件?因为我看不到它,所以我确定它创建了一个客户端 ID,我没有在设置中设置任何内容,是的,或者任何东西,所以也许我必须这样做?
我试图在小部件中显示 Google 标志,但我没有看到它。
这是我的代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Login Page</title>
<script src="https://accounts.google.com/gsi/client" async></script>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
.container {
background-color: white;
padding: 20px;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
text-align: center;
}
img {
border-radius: 50%;
width: 100px;
height: 100px;
object-fit: cover;
margin-top: 10px;
}
p {
color: #333;
margin: 10px 0;
}
a {
color: #007bff;
text-decoration: none;
font-weight: bold;
}
a:hover {
text-decoration: underline;
}
.g_id_signin {
margin-top: 20px;
}
</style>
</head>
<body>
<div class="container">
{% if request.session.user_data %}
<div>
<p>Hi {{ request.session.user_data.given_name }} 🙂</p>
<p>Your email is {{ request.session.user_data.email }}</p>
<img src="{{ request.session.user_data.picture }}" alt="User picture">
<p>Click here to <a href="/sign-out">Sign out</a></p>
</div>
{% else %}
<div>
<p>Hi there 🙂 </p>
<p>Click below to sign in with Google</p>
<div id="g_id_onload"
data-client_id="19752809892-j7huusq8tk032j615v78bij46fej8gs6.apps.googleusercontent.com"
data-context="signin"
data-ux_mode="redirect"
data-login_uri="http://127.0.0.1:8000/google-auth-reciever"
data-itp_support="true">
</div>
<div class="g_id_signin"
data-type="standard"
data-shape="rectangular"
data-theme="filled_blue"
data-text="signin_with"
data-size="large"
data-logo_alignment="left">
</div>
</div>
{% endif %}
</div>
</body>
</html>
是的,你需要实现逻辑,否则 jinja 功能将失败,尝试启用 Django 调试模式以获取更多详细信息,这里是这方面的一些信息