首页 > 其他分享 >fastapi集成google auth登录

fastapi集成google auth登录

时间：2024-01-21 10:47:19浏览次数：27  
标签：code fastapi auth GOOGLE google user Google 

title: fastapi集成google auth登录
banner_img: https://cdn.studyinglover.com/pic/2024/01/cabc8955c76fb9f396061cbbdd5aad58.png
index_img: https://cdn.studyinglover.com/pic/2024/01/ae35717c51d89eb88ab6852b4b00ef63.png
date: 2024-1-21 10:26:00
tags:
- google auth
- fastapi
- 后端

fastapi集成google auth登录

流程设计

1. 启动 Google 登录流程

  • 前端：用户点击 Google 登录按钮。
  • 请求：前端发起请求到 /user/login/google。

2. 后端处理 /user/login/google 请求

  • 后端生成一个重定向到 Google 认证服务器的 URL
  • 后端将此 URL 发送给前端。

3. 前端重定向

  • 前端接收到 URL 后，重定向用户到 Google 的登录页面。

4. 用户登录并授权

  • 用户在 Google 页面上授权你的应用。

5. Google 重定向回你的应用

  • Google 将用户重定向回你的应用，并在查询参数中附加一个授权码（code）。

6. 前端发送授权码

  • 前端：捕获此授权码并发送到 /user/auth/google?code=${code}。
  • 请求：POST /user/auth/google?code=${code}。

7. 后端处理 /user/auth/google?code=${code} 请求

  • 后端接收授权码，并使用它向 Google 请求访问令牌。
  • 使用此令牌，后端可以从 Google 获取用户信息（如用户名、邮箱等）。
  • 后端检查此用户是否已在数据库中。如果不在，创建一个新用户。
  • 后端生成一个会话或令牌（如 JWT），并将其发送回前端。

8. 前端接收令牌

  • 前端接收令牌并存储在本地（如 localStorage、sessionStorage 或 cookie 中）。

9. 前端使用令牌

  • 对于后续请求，前端将此令牌附加到请求的授权头中，以验证用户身份。

10. 后端验证令牌

  • 对于需要身份验证的后续请求，后端验证传入的令牌，以确认用户的身份。

获取google密钥

创建项目

首先前往Google Cloud Console ( https://console.cloud.google.com/ ) 并创建一个新项目（如果尚未创建），然后在“API 和服务 > 仪表板”部分中启用“Google+ API”。你会在这样一个界面。

image.png

如果找不到的话，请先找到初始页面，选择一个项目，然后你会看到这样一个页面image.png

创建OAuth权限

按照如图顺序点击
image.png

进入之后就到了前面的页面，然后点击 OAuth权限请求页面

image.png
接下来我们会进入注册应用界面，首先填入的应用名称还有你的邮箱
image.png
在最下面填上你的开发者信息，保存并继续
image.png

一路向下，可以填入一些限制，我就直接继续了。下面添加测试用户，填入google账号的邮箱即可
image.png
保存，在摘要再检查一遍以后保存创建即可。接下来你会看到这样的页面，这样子我们的OAuth就设置好了。
image.png

创建凭据

我们下面创建应用，点击凭据
image.png
点击创建凭据
image.png
选择OAuth客户端ID
image.png

选择应用类型web应用
image.png

填写名称，已获授权的 JavaScript 来源，已获授权的重定向 URI。已获授权的 JavaScript 来源 写的是你的开发，测试还有正式环境的域名，例如http://localhost:8000。已获授权的重定向 URI 写的是你的重定向地址例如http://localhost:8000/user/auth/google

image.png

你会看到这样一个页面，保存你的客户端 ID和客户端密钥
image.png

代码实践

创建一个.env文件
image.png

我们创建一个fastapi的后端

from fastapi import FastAPI, Depends
from fastapi.security import OAuth2PasswordBearer
from fastapi.middleware.cors import CORSMiddleware

import requests
from jose import jwt
import os
from dotenv import load_dotenv

load_dotenv()


app = FastAPI()

app.add_middleware(
    CORSMiddleware,
    allow_origins=["*"],  # Allows all origins
    allow_credentials=True,
    allow_methods=["*"],  # Allows all methods
    allow_headers=["*"],  # Allows all headers
)


# Replace these with your own values from the Google Developer Console
GOOGLE_CLIENT_ID = os.environ.get("GOOGLE_CLIENT_ID")
GOOGLE_CLIENT_SECRET = os.environ.get("GOOGLE_CLIENT_SECRET")
GOOGLE_REDIRECT_URI = "http://localhost:8000/auth/google"


@app.get("/login/google")
async def login_google():
    return {
        "url": f"https://accounts.google.com/o/oauth2/auth?response_type=code&client_id={GOOGLE_CLIENT_ID}&redirect_uri={GOOGLE_REDIRECT_URI}&scope=openid%20profile%20email&access_type=offline"
    }

@app.get("/auth/google")
async def auth_google(code: str):
    token_url = "https://accounts.google.com/o/oauth2/token"
    data = {
        "code": code,
        "client_id": GOOGLE_CLIENT_ID,
        "client_secret": GOOGLE_CLIENT_SECRET,
        "redirect_uri": GOOGLE_REDIRECT_URI,
        "grant_type": "authorization_code",
    }
    response = requests.post(token_url, data=data)
    access_token = response.json().get("access_token")
    user_info = requests.get("https://www.googleapis.com/oauth2/v1/userinfo", headers={"Authorization": f"Bearer {access_token}"})
    print(user_info.json())
    return user_info.json()

if __name__ == "__main__":
    import uvicorn
    uvicorn.run(app, host="0.0.0.0", port=8000)

同时我们需要一个前端，这里我们只有一个按钮来用于google登陆

<!DOCTYPE html>
<html>
<head>
    <title>Login with Google</title>
    <script>
        async function handleLogin() {
            const response = await fetch('http://localhost:8000/login/google');
            const data = await response.json();
            window.location.href = data.url;
        }

        async function handleRedirect() {
            const urlParams = new URLSearchParams(window.location.search);
            const code = urlParams.get('code');
            if (code) {
                const response = await fetch(`http://localhost:8000/auth/google?code=${code}`);
                const userData = await response.json();
                document.getElementById('user-info').textContent = JSON.stringify(userData, null, 2);
            }
        }
    </script>
</head>
<body onl oad="handleRedirect()">
    <button onclick="handleLogin()">Login with Google</button>
    <pre id="user-info"></pre>
</body>
</html>

点击按钮你会进入平时你看到的google登陆的流程，流程成功后你会在前端页面看到用户的信息

就像这样

{"id":"13","email":"[email protected]","verified_email":true,"name":"a ","given_name":"a","family_name":"a","picture":"https://lh3.googleusercontent.com/a/ACLXM=s96-c","locale":"zh-CN"}

同时后端也会在控制台打印出这个信息，我们已经成功通过了google的身份验证。我们可以再将他结合到自己的程序中

标签：code,fastapi,auth,GOOGLE,google,user,Google
From： https://www.cnblogs.com/studyinglover/p/17977581

相关文章

  • Google用AI替代广告销售工作只是开始……
    关注卢松松，会经常给你分享一些我的经验和观点。前几天Google不是裁员3万人吗，其中有一个信息值得关注：就是Google的广告部门的部分员工，也被裁员了。当然这不新鲜的，主要原因是Google的广告业务正在转向AI驱动了，AI是裁员广告部门的最重要原因。比如GoogleAds产品这个大家都知道，是一款......
  • fastapi项目 09-阿里云服务部署fastapi项目
    安装docker按照官方文档的流程来。1.卸载旧版本yumremovedocker\docker-client\docker-client-latest\docker-common\docker-latest\docker-latest-logrotate\......
  • 谷歌云 | 企业如何高效处理服务中断？Google Cloud 全面推出个性化服务状态监测
    当云服务发生故障时，理解原因和影响至关重要，这样您才能制定行动方案并作出有效响应。去年8月，谷歌云推出了个性化服务状态监测，提供有关谷歌云服务中断时快速、透明和可操作的沟通，帮助企业更有效地应对事件昨日，谷歌云宣布，包括计算引擎、云存储、所有云网络产品、BigQuery和GoogleK......
  • 像 Google SRE 一样 OnCall
    在GoogleSRE的著作《Google运维解密》(原作名：SiteReliabilityEngineering:HowGoogleRunsProductionSystems)中，GoogleSRE的关键成员们几乎不惜用了三个章节的篇幅描述了在Google他们是如何OnCall的。GoogleSRE实践中，有一个广为人知的理念：减少琐事，用软件工程的方......
  • 性能调优：深入理解 FastAPI 并发请求处理
    在当今的数字化世界中，网络用户对于高速响应和持续连接的诉求日益显著。这促使了基于Python构建的FastAPI一、开始使用FastAPI在开始之前，请先确认已经安装了FastAPI。可以通过以下pip命令进行安装：1pipinstallfastapi建设一个基础的FastAPI应用来实例化并发请求处理非常直......
  • fastapi接收图片文件
    #api接口，主函数importbase64importioimportcv2importosimporttimefromPILimportImageimportnumpyasnpfromfastapiimportFastAPI,HTTPExceptionimportuvicornapp=FastAPI()##############################################@app.post("/upload......
  • HttpWebRequest -- 一个很坑的401 UnAuthorization的解决方法
    昨天，一个新的客户在CallRestfulAPI的时候，出现了401UnAuthorization的错误。查看解决方法，有下面几个原因会导致这个问题：检查 ServicePointManager.SecurityProtocol 设置，并设置 ServicePointManager.ServerCertificateValidationCallback 以至少返回 true（以接......
  • Google的Jax框架的JAX-Triton目前只能成功运行在TPU设备上（使用Pallas为jax编写kernel
    使用Pallas为jax编写kernel扩展，需要使用JAX-Triton扩展包。由于Google的深度学习框架Jax主要是面向自己的TPU进行开发的，虽然也同时支持NVIDIA的GPU，但是支持力度有限，目前JAX-Triton只能在TPU设备上正常运行，无法保证在GPU上正常运行。该结果使用kaggle上的TPU和GPU进行测试获得。......
  • Json转换工具类（基于google的Gson和阿里的fastjson）
    在项目之中我们经常会涉及到字符串和各种对象的转换，为此特地整理了一下常用的转换方法一、基于com.google.code.gson封装的json转换工具类 1.在pom.xml文件里面引入gson的依赖<dependency><groupId>com.google.code.gson</groupId><arti......
  • Google的jax框架在TPU上的循环控制 —— 向量计算设备的循环结构控制
    相关：https://jax.readthedocs.io/en/latest/pallas/tpu.html向量计算设备，如：GPU、TPU等，都是通过向量计算来进行加速的，因此在这类设备中进行向量计算的计算单元是成百上千的，但是进行结构控制的电路单元比较少，可以基本认为在向量设备中进行流程控制是标量的，而不是向量的，也就是说......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99