原文转载自「刘悦的技术博客」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 mkcert

Mac 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