原文轉(zhuǎn)載自「劉悅的技術(shù)博客」https://v3u.cn/a_id_174
提起社交，就不得不說馬克·扎克伯格（Mark Zuckerberg）一手創(chuàng)辦的社交網(wǎng)絡(luò)(FaceBook)叼屠。進(jìn)入2020年侦高，F(xiàn)aceBook的全球用戶數(shù)已經(jīng)突破了30億抵代，這是什么概念？全球人口大約70億，除開中國(guó)14億贯被，還有56億。國(guó)外市場(chǎng)是四倍于中國(guó)的潛在市場(chǎng)，扣除短期內(nèi)有上網(wǎng)限制的人群彤灶，那也是兩倍以上看幼。站在全球視角看問題，說微信幌陕、支付寶偏安一隅桌吃，其實(shí)也并不為過。所以為你的平臺(tái)集成全球最大用戶基數(shù)的社交登錄系統(tǒng)苞轿，顯然可以為你帶來更多的潛在用戶茅诱，本次我們使用當(dāng)紅炸子雞FastAPI框架來集成FaceBook的三方登錄。
首先在https://developers.facebook.com/上面注冊(cè)開發(fā)者賬號(hào)搬卒，并且創(chuàng)建一個(gè)應(yīng)用：
輸入一個(gè)應(yīng)用名稱
創(chuàng)建成功之后瑟俭，需要加應(yīng)用id（appid）和應(yīng)用秘鑰記錄下來，之后會(huì)用到：
這之后添加產(chǎn)品契邀，選擇FaceBook登錄摆寄，并且進(jìn)行設(shè)置，將回調(diào)網(wǎng)址配置好坯门，這是登錄成功后跳轉(zhuǎn)回網(wǎng)址的地址：
這里需要注意的是微饥，F(xiàn)aceBook官方對(duì)安全性要求很高，它要求三方的應(yīng)用強(qiáng)制使用HTTPS協(xié)議古戴，而一般情況下本地環(huán)境的解決方案就是使用自簽證書欠橘，所以這里使用一種更加簡(jiǎn)單友好的方式生成本地https證書，并且信任自簽CA的方案——mkcert现恼。
mkcert是一個(gè)使用go語言編寫的生成本地自簽證書的小程序肃续，具有跨平臺(tái)，使用簡(jiǎn)單叉袍，支持多域名始锚，自動(dòng)信任CA等一系列方便的特性可供本地開發(fā)時(shí)快速創(chuàng)建https環(huán)境使用。
安裝方式也非常簡(jiǎn)單喳逛，由于Go lang的靜態(tài)編譯和跨平臺(tái)的特性瞧捌，官方提供各平臺(tái)預(yù)編譯的版本，直接下載到本地润文，給可執(zhí)行權(quán)限(Linux/Unix需要)就可以了姐呐。Github地址:https://github.com/FiloSottile/mkcert
如果是Win10平臺(tái)，可以使用Chocolatey來安裝：
choco install mkcert
Mac os平臺(tái)則可以使用Homebrew转唉，非常方便：
brew install mkcert
安裝成功之后皮钠，運(yùn)行命令將CA證書加入本地可信CA：
mkcert -install
在Win10的可信CA列表可以找到該證書:
同理在Mac OS的證書列表同樣也可以找到:
接下來我們就可以生成自簽證書了，比如本地通過localhost或者127.0.0.1來訪問你的web應(yīng)用：
mkcert localhost 127.0.0.1 ::1
會(huì)自動(dòng)生成：
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用來運(yùn)行FastAPI服務(wù)：
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"}
現(xiàn)在將證書和私鑰文件拷貝到你的FastAPI項(xiàng)目目錄中麦轰，啟動(dòng)項(xiàng)目乔夯，這里啟動(dòng)時(shí)需要指定證書：
uvicorn main:app --ssl-keyfile localhost+2-key.pem --ssl-certfile localhost+2.pem
訪問 https://localhost:8000/，注意這里的協(xié)議要寫為https
可以看到chrome瀏覽器已經(jīng)認(rèn)為這個(gè)網(wǎng)絡(luò)服務(wù)是安全的了款侵。
由于我們現(xiàn)在已經(jīng)安全部署了本地服務(wù)末荐，就可以繼續(xù)操作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改為你自己的自建應(yīng)用的id新锈。
將login.html放入到FastAPI項(xiàng)目的static目錄甲脏，隨后訪問它:https://localhost:8000/static/login.html
注意這里訪問頁面也必須采用https協(xié)議，之后點(diǎn)擊按鈕妹笆，用你的FaceBook賬號(hào)登錄：
如果登錄成功块请，F(xiàn)aceBook會(huì)將回調(diào)的用戶id以及accesstoken返回給當(dāng)前頁面，前端只要進(jìn)行獲取就可以了：
一般情況下拳缠，前端獲取到秘鑰之后墩新，后端需要對(duì)其進(jìn)行驗(yàn)證，用來防止有人進(jìn)行篡改或者使用其他應(yīng)用的appid來進(jìn)行請(qǐng)求窟坐。
這里我們編寫一個(gè)后端的視圖海渊，用來驗(yàn)證用戶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/
可以看到驗(yàn)證成功徙菠，我們可以將access_token存到后臺(tái)即可讯沈，以后獲取用戶信息的時(shí)候就直接調(diào)用。
緊接著我們就編寫接口用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.com/docs/graph-api/reference/user/
結(jié)語：FaceBook三方登錄的流程并不復(fù)雜，本篇主要是結(jié)合Go lang的mkcert庫來生成自簽證書以及FastAPI作為后端服務(wù)來實(shí)現(xiàn)本地模擬登錄脸秽，這樣就無須每次都在線上生產(chǎn)環(huán)境進(jìn)行測(cè)試了。最后奉上FastAPI的項(xiàng)目地址：https://gitee.com/QiHanXiBei/fastapi_blog
原文轉(zhuǎn)載自「劉悅的技術(shù)博客」 https://v3u.cn/a_id_174
