还有其他方法可以在Jina Django HTML模板中加载Google API吗?

问题描述 投票:0回答:1

因此我在 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>
python html django google-api
1个回答
0
投票
© www.soinside.com 2019 - 2024. All rights reserved.