共计 4569 个字符，预计需要花费 12 分钟才能阅读完成。
原文转载自「刘悦的技术博客」https://v3u.cn/a_id_174
提起社交，就不得不说马克·扎克伯格（Mark Zuckerberg）一手开办的社交网络(FaceBook)。进入 2020 年，FaceBook 的寰球用户数曾经冲破了 30 亿，这是什么概念？寰球人口大概 70 亿，除开中国 14 亿，还有 56 亿。国外市场是四倍于中国的潜在市场，扣除短期内有上网限度的人群，那也是两倍以上。站在寰球视角看问题，说微信、支付宝偏安一隅，其实也并不为过。所以为你的平台集成寰球最大用户基数的社交登录零碎，显然能够为你带来更多的潜在用户，本次咱们应用当红炸子鸡 FastAPI 框架来集成 FaceBook 的三方登录。
首先在 https://developers.facebook.c…，并且创立一个利用：
输出一个利用名称
创立胜利之后，须要加利用 id（appid）和利用秘钥记录下来，之后会用到：
这之后增加产品，抉择 FaceBook 登录，并且进行设置，将回调网址配置好，这是登录胜利后跳转回网址的地址：
这里须要留神的是，FaceBook 官网对安全性要求很高，它要求三方的利用强制应用 HTTPS 协定，而个别状况下本地环境的解决方案就是应用自签证书，所以这里应用一种更加简略敌对的形式生成本地 https 证书，并且信赖自签 CA 的计划——mkcert。
mkcert 是一个应用 go 语言编写的生成本地自签证书的小程序，具备跨平台，应用简略，反对多域名，主动信赖 CA 等一系列不便的个性可供本地开发时疾速创立 https 环境应用。
装置形式也非常简单，因为 Go lang 的动态编译和跨平台的个性，官网提供各平台预编译的版本，间接下载到本地，给可执行权限 (Linux/Unix 须要) 就能够了。Github 地址:https://github.com/FiloSottil…
如果是 Win10 平台，能够应用 Chocolatey 来装置：
choco install mkcertMac os 平台则能够应用 Homebrew，十分不便：
brew install mkcert装置胜利之后，运行命令将 CA 证书退出本地可信 CA：
mkcert -install在 Win10 的可信 CA 列表能够找到该证书:
同理在 Mac OS 的证书列表同样也能够找到:
接下来咱们就能够生成自签证书了，比方本地通过 localhost 或者 127.0.0.1 来拜访你的 web 利用：
mkcert localhost 127.0.0.1 ::1会主动生成：
liuyue:blog liuyue$ mkcert localhost 127.0.0.1 ::1
Created a new local CA at "/Users/liuyue/Library/Application Support/mkcert" ????
Warning: the local CA is not installed in the system trust store! ⚠️
Warning: the local CA is not installed in the Firefox trust store! ⚠️
Warning: the local CA is not installed in the Java trust store! ⚠️
Run "mkcert -install" to avoid verification errors ‼️
Created a new certificate valid for the following names ????
- "localhost"
- "127.0.0.1"
- "::1"
The certificate is at "./localhost+2.pem" and the key at "./localhost+2-key.pem" ✅能够看到胜利生成了 localhost+2.pem 证书文件和 localhost+2-key.pem 私钥文件。
编写 main.py 用来运行 FastAPI 服务：
from user import router
from fastapi import FastAPI, Request
from fastapi.responses import HTMLResponse
from fastapi.staticfiles import StaticFiles
from fastapi.templating import Jinja2Templates
from model import database
app = FastAPI()
app.mount("/static", StaticFiles(directory="static"), name="static")
templates = Jinja2Templates(directory="templates")
app.include_router(router)
@app.on_event("startup")
async def startup():
await database.connect()
@app.on_event("shutdown")
async def shutdown():
await database.disconnect()
@app.get("/")
def read_root():
return {"Hello": "World"}当初将证书和私钥文件拷贝到你的 FastAPI 我的项目目录中，启动我的项目，这里启动时须要指定证书：
uvicorn main:app --ssl-keyfile localhost+2-key.pem --ssl-certfile localhost+2.pem拜访 https://localhost:8000/，留神这里的协定要写为 https
能够看到 chrome 浏览器曾经认为这个网络服务是平安的了。
因为咱们当初曾经平安部署了本地服务，就能够持续操作 FaceBook 了，编写 login.html 作为登录页面：
<html>
<head>
<script async defer crossorigin="anonymous" src="https://connect.facebook.net/zh_CN/sdk.js#xfbml=1&version=v8.0&appId=337974204227205&autoLogAppEvents=1" nonce="BBgy4tba"></script>
<script>
function login() {FB.login(function(response){console.log(response);
});
}
</script>
</head>
<body>
<h1>Facebook 社交登录 </h1>
<div class="fb-login-button" data-size="large" data-button-type="continue_with" data-layout="default" data-auto-logout-link="false"
data-onlogin="login" data-use-continue-as="false" data-width=""></div>
</body>
</html>登录页面中须要将代码里的 appid 改为你本人的自建利用的 id。
将 login.html 放入到 FastAPI 我的项目的 static 目录，随后拜访它:https://localhost:8000/static/login.html
留神这里拜访页面也必须采纳 https 协定，之后点击按钮，用你的 FaceBook 账号登录：
如果登录胜利，FaceBook 会将回调的用户 id 以及 accesstoken 返回给以后页面，前端只有进行获取就能够了：
个别状况下，前端获取到秘钥之后，后端须要对其进行验证，用来避免有人进行篡改或者应用其余利用的 appid 来进行申请。
这里咱们编写一个后端的视图，用来验证用户 token:
@router.get("/checklogin/")
async def check_login():
res = requests.get("https://graph.facebook.com/debug_token?access_token=337974204227205%7Cdc75d0a1fb30f2952db3a6a39e3f0ac0&input_token=EAAEzYsBi3oUBAHQQ9w7jSW95FcZBflMnib1cHUpf9eMBnuSvNcvvg31oKtIGoZA9kYtpq3OLMNSgY01ErgZA21PDRqdz7APrdZAXFJ9k43TnJXH8ZADb9Cjr2JEevZCdPpyTOpsZBvxE7RC63JjxZBr60iNQjWlfwwGBqdS2knhXBebpWGezrkg5WLRuBaUi3IdZBIBozQp1KMdDUmNWyR365")
res = json.loads(str(res.text))
return res这里须要留神的是 User-token 为用户登录的 token（就是下面用户登录返回的 accessToken），App-token 是由 appId 和 appSecret 拼接而成，格局为 {appId}%7C{appSecret}，%7C 就是 |urlencode 之后的编码。
拜访 FastAPI 地址：https://localhost:8000/checklogin/
能够看到验证胜利，咱们能够将 access_token 存到后盾即可，当前获取用户信息的时候就间接调用。
紧接着咱们就编写接口用 token 来换取用户信息：
@router.get("/getinfo/")
async def userinfo():
res = requests.get("https://graph.facebook.com/v8.0/1583917368454739?access_token=EAAEzYsBi3oUBAHQQ9w7jSW95FcZBflMnib1cHUpf9eMBnuSvNcvvg31oKtIGoZA9kYtpq3OLMNSgY01ErgZA21PDRqdz7APrdZAXFJ9k43TnJXH8ZADb9Cjr2JEevZCdPpyTOpsZBvxE7RC63JjxZBr60iNQjWlfwwGBqdS2knhXBebpWGezrkg5WLRuBaUi3IdZBIBozQp1KMdDUmNWyR365")
res = json.loads(str(res.text))
return res这里的含意就是获取用户 id 为 1583917368454739 的用户信息，拜访：https://localhost:8000/getinfo/
用户信息轻松获取，更多的用户接口能够参照官网文档：https://developers.facebook.c…
结语：FaceBook 三方登录的流程并不简单，本篇次要是联合 Go lang 的 mkcert 库来生成自签证书以及 FastAPI 作为后端服务来实现本地模仿登录，这样就毋庸每次都在线上生产环境进行测试了。最初奉上 FastAPI 的我的项目地址：https://gitee.com/QiHanXiBei/…_blog
原文转载自「刘悦的技术博客」https://v3u.cn/a_id_174
