Leon

Posted on Nov 25, 2021 • Originally published at editor.leonh.space

以 Authlib 實現 OAuth 1 的 Twitter 登入

#oauth #twitter #authlib #python

雖然 Twitter 在台灣一直不是主流，不過在國外 Twitter 是可以與 FB 相抗衡的平台之一，而目前主流的第三方認證機制 OAuth 最初也是由 Twitter 設計的，不過相較於 LINE、Google、FB 都已經採用 OAuth 2 標準做為第三方登入的機制，反而 Twitter 是少數還在用 OAuth 1 的業者，這裡我們會用 Authlib 套件來實做 Twitter 登入，並且簡單講講 OAuth 1 的認證流程（複雜的我也講不了）。

OAuth 1

這裡的 OAuth 1 主要是參考 Twitter 的文件而來，畢竟現在似乎只剩下 Twitter 還在用 OAuth 1 了⋯⋯吧？！

我們從大流程講起，從用戶按下「Sign in with Twitter」開始，會進行下面的程序：

用戶在我們的 app 按下「Sign in with Twitter」
我們的 app 對 Twitter 發送一個 callback 網址及請求一組 request token
Twitter 回覆 request token 以及認可 callback 網址
將用戶重導到 Twitter 的認證頁面
用戶授權我們的 app 取得他的 access token
Twitte 回覆同樣的 request token 以及一個 request token verifier 給我們的 app
用戶從 Twitter 的認證頁被重導到 callback 網址
我們的 app 發送 request token 和 request token verifier 給 Twitter 要求用他們取得 access token
Twitter 回覆 access token 與 access token secret
我們的 app 把用戶導向會員頁面

也可以配圖看，順便伸展一下脖子：

走這一大段路，最終要拿到的就是 access token，但得先拿到 request token 和 request token secret，而 request token secret 又得透過用戶認證取得，取得後再拿 request token & request token secret 向 Twitter 取得 access token。

雖然寫起來彷彿經歷千辛萬苦，但實際上整個過程不超過十秒，如同滄海一粟，稍縱即逝。

上面的流程實際上是簡化過的版本，真正 post 來 post 的去的資料要複雜的多，並且還要用 HMAC-SHA1 編碼的簽名做防偽，幸好各大語言早就都有 OAuth 套件可以直接使用，省去自己造輪子的功夫，所以我們不求甚解的直接跳到使用套件的部份。（技術債 + 1、time to market - 3，划算）

對於 OAuth 1 細節有興趣的朋友，推薦這篇〈OAuth 1.0 簡介〉。

以 Authlib 實現 Twitter 登入

第一步是文書作業，到 Twitter Developer Portal 開立專案，啟用 3-legged OAuth，取得 Twitter API Key 以及 Twitter API Secret Key，這組 API key 在前面的 OAuth 1 流程稱為 consumer key，這種名稱不一致的情況在下文會持續發生，一個物件在 OAuth、Twitter、Authlib 內各自表述，就像台灣中國九二會談一樣毫無共識。

下面的表格整理了三者命名的對應，希望不要被這些混亂的命名搞亂。

OAuth 命名	Twitter 命名	Authlib 命名	用途
Service Provider	Twitter	OAuth Server	提供 OAuth 認證的平台
Consumer	App	OAuth Client	向 OAuth server 要求認證的 app
Consumer Key	API Key	Client ID	存取 Twitter API
Consumer Secret	API Secret Key	Client Secret	產生 HMAC-SHA1 防偽簽名
Callback	Callback URL	Redirct URI	用戶認證後 Twitter 把用戶導向 app 的網址

Authlib 是 Python 的套件，同時支援 OAuth 1 與 OAuth 2，它可以讓我們的 app 有 OAuth server 或 OAuth client 的能力，OAuth server 指的是像 Twitter 這樣提供第三方登入服務的角色，又稱為 OAuth service provider，而 OAuth client 則是我們的 app，又稱為 OAuth consumer，這也是我們持有的 API key 被稱為 consumer key 的原因。

下文開始 Authlib 實現 Twitter 登入，以下的程式碼都執行在 Python shell 內，並且程式碼經過排版便於閱讀。

引入 authlib 元件及定義一些基礎參數：

from authlib.integrations.requests_client import OAuth1Session

client_id: str      = 'my_client_id'        # TWITTER_API_KEY
client_secret: str  = 'my_client_secret'    # TWITTER_API_SECRET_KEY

client: OAuthSession = OAuth1Session(
    client_id       = client_id,
    client_secret   = client_secret
)

我們會用這個 client 與 Twitter API 做交流。上面的 client_id 與 client_secret 的值比較正規的做法應該用 python-dotenv 隱藏起來，但這裡就不講究那麼多了。

用 client 去向 Twitter API 取得 request_token：

request_token_url: str = 'https://api.twitter.com/oauth/request_token'
request_token:dict = client.fetch_request_token(url=request_token_url)

print(request_token)

# request_token
{
    'oauth_token'               : 'my_oauth_token',
    'oauth_token_secret'        : 'my_auth_token_secret',
    'oauth_callback_confirmed'  : 'true'
}

注意到在流程圖有提到要求 request token 時要傳送一個 callback URL，但是在此並沒有指定，Twitter 會用 Twitter Developer Portal 內的 Callback URLs 的第一個值，所以不用在程式內指定，想在程式內指定也是可以的，以 staging 環境為例：

from authlib.integrations.requests_client import OAuth1Session

client_id: str      = 'my_client_id'        # TWITTER_API_KEY
client_secret: str  = 'my_client_secret'    # TWITTER_API_SECRET_KEY
redirect_uri        = 'https://staging.example.com/auth/twitter'

client: OAuthSession = OAuth1Session(
    client_id       = client_id,
    client_secret   = client_secret,
    redirect_uri    = redirect_uri
)

不過這裡的 redirect_uri 的網址也還是得要事先登錄到 Twitter Developer Portal 的 Callback URLs，否則是會被 Twitter API 阻擋的。

和 Twitter API 的交互之所以看起來這麼簡單是 Authlib 的功勞，它幫我們做掉了 OAuth 1 要求的其他欄位的值以及生成防偽簽章的苦工，只留下真正必要的參數給我們填入。

用剛拿到的 request_token 去組出一個 Twitter 用戶認證網址：

oauth_token: str = request_token['oauth_token']
oauth_token_secret: str = request_token['oauth_token_secret']

authenticate_url: str = 'https://api.twitter.com/oauth/authenticate'

client.create_authorization_url(
    url             = authenticate_url,
    request_token   = oauth_token
)

# Authorization URL
'https://api.twitter.com/oauth/authenticate?oauth_token=my_oauth_token'

得到 authorization URL 後，把用戶導過去，用戶會看到 Twitter 的認證畫面：

用戶按下 Sing In 後，Twitter 會把用戶重導到我們指定的 callback URL，並附上我們的 oauth_token 與 oauth_verifier。

假設我們的 app 在 Twitter Developer Portal 登錄的 callback URL 是 https://example.com/auth/twitter，Twitter 導引用戶回來時會在 callback URL 後附加 oauth_token 與 oauth_verifier 兩個參數，因此收到的請求是這樣的：

resp_url: str = 'https://example.com/auth/twitter?oauth_token=my_oauth_token&oauth_verifier=my_oauth_verifier'

再拿 oauth_token 與 oauth_verifier 去向 Twitter API 要 access token：

client.parse_authorization_response(resp_url)
access_token_url: str = 'https://api.twitter.com/oauth/access_token'
token: dict = client.fetch_access_token(access_token_url)

print(token)

# token
{
    'oauth_token'       : 'user_oauth_token',
    'oauth_token_secret': 'user_oauth_token_secret',
    'user_id'           : 'user_user_id',
    'screen_name'       : 'user_screen_name'
}

注意，最後拿到的 oauth_token 和 oauth_token_secret 是代表那位用戶的，而在此之前和 Twitter API 交互的 oauth_token 是屬於我們的 app 的，名字一樣但意義不同。

最後拿到的代表用戶的 oauth_token、oauth_token_secret、user_id、screen_name 應該存入我們自己的會員資料庫內，做為後續認證之用，但要注意的是不要拿 screen_name 辨識用戶，因為 Twitter 的用戶名是可以改的。

有了用戶授權給我們的 access token，除了讓我們做第三方登入外，也可以拿 access token 去做其他的應用，例如獲得用戶帳號的其它資料，用的是 verify_credentials 這支 API：

twitter_account_verify_credentials_uri = 'https://api.twitter.com/1.1/account/verify_credentials.json'

resp = client.get(
    url     = twitter_account_verify_credentials_uri,
    params  = {'skip_status': True}
)

print(resp.json())

# resp.json()
{
    ...
    'protected': False,
    'friends_count': 5,
    'favourites_count': 9,
    'utc_offset': None,
    'time_zone': None,
    'geo_enabled': False,
    'verified': False,
    'statuses_count': 7,
    'lang': None,
    'contributors_enabled': False,
    'is_translator': False,
    'is_translation_enabled': False,
    'profile_background_tile': False,
    'profile_use_background_image': True,
    'has_extended_profile': True,
    'default_profile': True,
    'default_profile_image': False,
    'following': False,
    'follow_request_sent': False,
    'notifications': False,
    'translator_type': 'none',
    'suspended': False,
    'needs_phone_verification': False,
    ...
}

當然能拿到的資料僅限於用戶在 Twitter 認證頁同意授權給我們的部份，另外在 Twitter Developer Portal 也要對額外要求的用戶資料目的提交給 Twitter 審查，以最基本的用戶 email 為例，就要提供 terms of service 和 privacy policy 給 Twitter 才能取得。

Authlib 和 Web 框架的整合

前面的範例是以 Authlib 做為 OAuth client 實做 OAuth 1 流程的程式碼，目的是親自實證 OAuth 1 的交互流程，而在真實的 web 後端應用場景，Authlib 有更好的與 web 框架整合好的 API 可以使用，目前 Authlib 已有與 Starlette、FastAPI、Flask、Django 的整合模組。

以 Starlette 為例，一個最陽春的 Starlette web app 大概長這樣：

from starlette.applications import Starlette
from starlette.requests import Request

app = Starlette()

先幫它加上 authlib 的元件及初始化：

from starlette.applications import Starlette
from starlette.requests import Request
from authlib.integrations.starlette_client import OAuth

app = Starlette()
oauth = OAuth()

再加上 OAuth server 的各個基本 API 網址：

from starlette.applications import Starlette
from starlette.requests import Request
from authlib.integrations.starlette_client import OAuth

app = Starlette()
oauth = OAuth()

oauth.register(
    name                    = 'twitter',
    api_base_url            = 'https://api.twitter.com/1.1/',
    request_token_url       = 'https://api.twitter.com/oauth/request_token',
    request_token_params    = None,
    access_token_url        = 'https://api.twitter.com/oauth/access_token',
    access_token_params     = None,
    authorize_url           = 'https://api.twitter.com/oauth/authenticate',
    aurhorize_params        = None,
    client_id               = 'my_client_id',
    client_secret           = 'my_client_secret',
    client_kwargs           = None,
)

因為 OAuth 1 是標準化的協議，所以必然會有 request_token_url、access_token_url、authorize_url，也必然會有 client_id、client_secret 兩個值，儘管命名可能不一樣。

再次提醒，client_id、client_secret 的值應該要放在 .env 內，這裡只是示範才省略。

加上兩個 route，一個是讓用戶按下 Sign in with Twitter 的網址，一個是讓 Twitter callback 回來的網址：

from starlette.applications import Starlette
from starlette.requests import Request
from authlib.integrations.starlette_client import OAuth

app = Starlette()
oauth = OAuth()

oauth.register(
    name                    = 'twitter',
    api_base_url            = 'https://api.twitter.com/1.1/',
    request_token_url       = 'https://api.twitter.com/oauth/request_token',
    request_token_params    = None,
    access_token_url        = 'https://api.twitter.com/oauth/access_token',
    access_token_params     = None,
    authorize_url           = 'https://api.twitter.com/oauth/authenticate',
    aurhorize_params        = None,
    client_id               = 'my_client_id',
    client_secret           = 'my_client_secret',
    client_kwargs           = None,
)

@app.route('/login/twitter')
async def login_via_twitter(request: Request):
    twitter = oauth.create_client('twitter')
    redirect_uri = request.url_for('authorize_twitter')
    return await twitter.authorize_redirect(request, redirect_uri)

@app.route('/auth/twitter')
async def authorize_twitter(request: Request):
    twitter = oauth.create_client('twitter')
    token = await twitter.authorize_access_token(request)
    user = await twitter.parse_id_token(request, token)
    return user

Authlib 對 web 框架的整合封裝度更高，前面我們還要手動照 OAuth 1 流程跑，取得 request token 什麼的，這裡完全不用，一個 authorize_redirect() 就把拿 request token 和導引用戶到 Twitter 認證頁的工作全做掉了，後面的 callback 網址收到 Twitter 導回來的用戶也是一個函式 authorize_access_token() 搞定前面手動拿 token 交換來交換去的工作，真心感謝 Authlib 大大，祝 Authlib 大大好人一生平安。

最後，Authlib 有用到 Starlette 的 session middleware 管理用戶從我們的 app 跳轉到 Twitter 又跳回來的 session，所以再把 session middleware 加進來：

from starlette.applications import Starlette
from starlette.requests import Request
from starlette.middleware.sessions import SessionMiddleware
from authlib.integrations.starlette_client import OAuth

app = Starlette()
app.add_middleware(SessionMiddleware, secret_key="㊙️")

oauth = OAuth()

oauth.register(
    name                    = 'twitter',
    api_base_url            = 'https://api.twitter.com/1.1/',
    request_token_url       = 'https://api.twitter.com/oauth/request_token',
    request_token_params    = None,
    access_token_url        = 'https://api.twitter.com/oauth/access_token',
    access_token_params     = None,
    authorize_url           = 'https://api.twitter.com/oauth/authenticate',
    aurhorize_params        = None,
    client_id               = 'my_client_id',
    client_secret           = 'my_client_secret',
    client_kwargs           = None,
)

@app.route('/login/twitter')
async def login_via_twitter(request: Request):
    twitter = oauth.create_client('twitter')
    redirect_uri = request.url_for('authorize_twitter')
    return await twitter.authorize_redirect(request, redirect_uri)

@app.route('/auth/twitter')
async def authorize_twitter(request: Request):
    twitter = oauth.create_client('twitter')
    token = await twitter.authorize_access_token(request)
    user = await twitter.parse_id_token(request, token)
    return user

這裡是以 Starlette 做示範，在其他的 web 框架上也差不多，三招搞定 OAuth client：

register()
authorize_redirect()
authorize_access_token()

如果是以 Starlette 為基礎的 FastAPI，那上面那塊程式碼更是可以幾乎完全套用。

前後端分離下的 OAuth 1 流程

上面我們談到 web 後端的 OAuth 1 流程，如果把前後端分離的狀況也考慮進來，那流程會更複雜：

流程如下：

用戶在前端按下「Sign in with Twitter」後，後端向 Twitter 索取 request token 並得到 Twitter 認證頁的網址，把 Twitter 認證頁網址丟給前端，前端把用戶導到 Twitter 認證頁。
用戶在 Twitter 認證頁按下 Sign In，Twitter 把用戶導到我們指定的 callback URL，並得到 request token verifier，前端把 request token verifier 傳給後端，後端拿 request token 和 request token verifier 向 Twitter 索取用戶的 access token。
得到用戶的 access token 後，後端產生自己的 bearer token 交給前端，至此用戶登入完畢，爾後前端發送到後端的請求都附上 bearer token 識別身份，這裡的 bearer token 是 OAuth 2 的 bearer token，也就是說在我們的前端和後端之間，又走了最陽春的 OAuth 2 的認證機制，這部分並非本文的重點，在此點到為止，後續有機會再分享此處的細節。

這個流程的特點是 consumer key、consumer secret、request token secret、access token 都保留在後端，暴露到前端的則有 request token 和 request token verifier，因此：

整套 OAuth 1 流程中，用於簽名防偽的主角是 consumer secret，它是始終只在後端的，可以保障前端即使被植入惡意程式碼也無法自行對 Twitter 溝通。
用戶的 access token 也只在後端，同樣的保障了 access token 被盜的風險。
最後用於前後端認證的是我們自己發行的 bearer token（JWT），同樣的，它也有簽名防偽的機制，後端得以驗證前端的請求是否被竄改過，藉此保證了前端請求的真實性。

然而上述的流程並非唯一選項，有人也把和 Twitter OAuth 1 交互的部份都做在前端，這部份可以參閱〈Demystifying authentication with FastAPI and a frontend〉。

結語

雖然 Authlib 把 OAuth 複雜的細節封裝成很簡單的三大函式，但對不了解 OAuth 1 流程的開發者來說，恐怕會陷入知其然卻不知期所以然的狀態，所以很不幸的，還是得回頭去認識 OAuth 1 的交互流程。

另外本篇的最開頭有提到，Twitter 是目前僅存仍在使用 OAuth 1 的大戶，而從 Twitter 開發人員的網站上也可以看到，Twitter 正在逐步向 OAuth 2 遷移，所以本文很有可能再過一季就會成為廢文，屆時再也沒有 OAuth 1 應用的場景，在花時間閱讀前請謹慎評估，雖然你已經看到最末了。

DEV Community

以 Authlib 實現 OAuth 1 的 Twitter 登入

OAuth 1

以 Authlib 實現 Twitter 登入

Authlib 和 Web 框架的整合

前後端分離下的 OAuth 1 流程

結語

Top comments (0)

Read next

Safeguarding AI with Llama Guard: Ethical AI Development

AI enthusiasm #4 - Your stable diffusion chatbot🐠

Exploring Multicollinearity: Strategies for Detecting and Managing Correlated Predictors in Regression Analysis

Why I think Python is a Great first Language