你可能已经使用了谷歌登录，以方便访问网站而不需要记住密码。至少我有 :)
我在想，谷歌登录可能很难实现。也许在过去是这样。但现在有了Firebasefirebase.google.com/。我们说事情有了变化。
演示网站的网址（可能无法使用
在本文结束时，你将能够。
- 创建一个简单的angular应用程序让用户登录。
- 创建一个简单的FastApi来连接你的应用程序和angular，这样你就可以实现自定义的业务逻辑。
- 使用google认证来保护你的API。
- 利用自动化的力量
你可以点击下面的链接来获取该应用程序的代码。
[1]github.com/kaiwork/fas…(Angular应用程序)
[2]github.com/kaiwork/fas…(Fast Api Server )
请注意，这只是出于教育目的。并作为一种_参考_。
我将假设你有一些基本的
[1] Angular, [2] Fast api, [3] Heroku 和 [4] Github知识。
[1]angular.io/( Angular网站 )
[2]fastapi.tiangolo.com/( Fast Api )
[3]www.heroku.com( Heroku )
[4]github.com/( Github )
为什么我们要使用谷歌登录？
[1] 我们不需要存储密码
[2] 用户不需要记住密码
[3] 谷歌将管理登录的安全方面。
第一步：创建angular网站。
[1] 进入angular.io/，按照开始的步骤进行操作。
[2] 创建你的网站......ng new 你应该看到像这样的东西。
[3] 我发现一个有用的库github.com/RaphaelJenn…。你可以按照说明来安装它。
在environment.ts中添加你的Firebase配置。要想获得Firebase配置，请进入项目设置
去创建一个web应用，你应该得到firebase的配置。它看起来应该是这样的
firebaseConfig: {
[4] 按照firebaseui-angular的文档。进入你的.html，加入以下内容。
<firebase-ui
(signInSuccessWithAuthResult)="successCallback($event)"
(signInFailure)="errorCallback($event)"></firebase-ui>
[5] 你应该看到这个
[6] 你可以实现你的登录功能，以获得我们将用于快速API认证的令牌。我使用本地存储来存储令牌，但你也可以使用其他类型的存储。
successCallback(signInSuccessData: FirebaseUISignInSuccessWithAuthResult) {
signInSuccessData.authResult.user?.getIdToken().then(function(idToken){
localStorage.setItem(“auth_token”,idToken);
});
this.router.navigate([‘main’]); // optional
this.toastr.success(“Sign in successful”); // optional
}
[7] 就这样，我们完成了网络应用程序的开发。
第二步：创建Fast API网站。
[1] 进入fastapi.tiangolo.com/，按照开始的步骤进行操作。
[2] 我发现一个有用的库github.com/tokusumi/fa…。你可以按照指示来安装它。
在写这篇文章的时候，有一个bug。只要做以下命令就可以解决这个问题了
pip install 'python-jose[cryptography]' - (1)
[3] 要进行设置，有几件事要做。
你将需要来自Firebase的证书文件（一个不同的文件）。在Firebase控制台中进入项目设置，选择服务账户。进入Firebase Admin SDK，生成一个新的私钥。
你应该看到像这样的东西。
{
[4] 你可以按照指南来进行设置。你可以参考firebase.google.com/docs/admin/…，以清楚地设置GOOGLE_APPLICATION_CREDENTIALS的os环境变量。
os.environ[‘GOOGLE_APPLICATION_CREDENTIALS’] = your cred file
app = FastAPI()
get_current_user = FirebaseCurrentUser(
project_id=”<your project id>”
)
@app.get(“/user/”)
def get_user(current_user: FirebaseClaims = Depends(get_current_user)):
“””An api to get current user data.
Args:
Valid ID Token
Returns:
A json response containing the user id of the current user
“””
# ID token is valid and getting user info from ID token
return {“id”: current_user.user_id}
[5] 就这样了。我们将继续进行部署。
第三步：托管Angular网站。
[1] 为此，我通过Firebase主机托管网站。
[2] 你可以按照firebase的步骤来托管你的网站。
第4步：托管快速API网站。
[1] 为此，我在Heroku上托管了Fast Api网站。
[2] 你可以按照Heroku的步骤来部署python应用程序。
[3] 以下是Procfile供参考
web: gunicorn -w 4 -k uvicorn.workers.UvicornWorker main:app
奖励：使用Github的CI
[1] 对于快速API网站。我利用了python应用程序的工作流程。
你可以把它与snyk.io/、www.codacy.com/，以获得更好的工作流程:)
[1] 对于Angular网站。我只是使用了默认的Firebase工作流程。
firebase init
请注意在angular.json中设置目录。
“architect”: {
“build”: {
“builder”: “@angular-devkit/build-angular:browser”,
“options”: {
“outputPath”: “public/”, # here need to edit to the directory
“index”: “src/index.html”,
“main”: “src/main.ts”,
“polyfills”: “src/polyfills.ts”,
“tsConfig”: “tsconfig.app.json”,
“inlineStyleLanguage”: “scss”,
“assets”: [
“src/favicon.ico”,
“src/assets”
],
继续前进
这只是一个例子，只是一个关于如何在你的网络应用中使用谷歌登录的开始。如果我们想在现实生活中生产网络应用，还有很多事情要做。
图示
下面是一个设置工作的图示
谢谢
在这个Google登录网站中使用了一些有用的库。
用谷歌登录创建FastApi-Angular网站》最初发表在《Nerd For Tech》杂志上，人们通过强调和回应这个故事来继续对话。
