如何创建SSO按钮– Flask登录教程 _SSO

本文概述

第1步：Bootstrap Flask应用
步骤2：身分提供者凭证
步骤3：登录重定向
用Facebook登录
总结

【如何创建SSO按钮– Flask登录教程】应用程序通常需要登录功能, 以便用户可以保存数据, 创建自己的配置文件, 或者仅仅是为了限制对敏感资源的访问。在现代应用中, 用户希望具有与登录相关的标准功能, 例如电子邮件验证, 密码重置或多因素身份验证。这些功能虽然必要, 但不容易正确使用, 通常也不是应用程序的主要业务。
在用户方面, 他们可能不想经过冗长的注册过程, 因为他们需要创建并记住另一个电子邮件和密码对。如果没有适当的密码管理器, 则用户往往会重复使用相同的密码, 这在安全性方面很糟糕。
发明了单点登录(SSO)(通常被用户称为使用社交媒体按钮登录)作为解决此问题的方法。对于用户来说, 不经历另一个痛苦的注册过程很容易。对于企业而言, 消除用户的摩擦始终是一个巨大的胜利-对于开发人员而言, 所有与登录相关的功能现在都委派给了身份提供商(Facebook, Google, Twitter等), 这意味着更少的代码！你的应用程序仅信任身份提供者执行其验证用户身份的工作。
SSO通常由OpenId Connect(OIDC)或SAML协议提供动力。 SAML通常用于企业应用程序中。 OIDC建立在OAuth2之上, 并被Facebook, Google等社交身份提供商使用。在本文中, 我们将重点介绍OIDC / OAuth2协议。
在此Flask登录教程中, 我们将编写分步指南, 以使用SimpleLogin和Facebook作为身份提供者的SSO登录按钮添加到Flask应用程序中。无需使用任何外部库即可完成此操作, 但是为了简化OAuth的复杂性, 我们将使用Requests-OAuthlib(用于集成OAuth提供程序的库)。如果你有兴趣从头开始实施SSO, 请查看” 实施SSO登录” –原始方法。
在本文的结尾, 你应该拥有一个包含以下页面的Flask应用程序：

具有登录按钮的主页
用户信息页面, 成功登录后, 用户将能够看到诸如姓名, 电子邮件和头像之类的信息

该教程的所有代码都可以在flask-social-login-example存储库中找到。
此处也提供了演示。随意在Glitch上重新混合代码。
第1步：Bootstrap Flask应用安装flask和Requests-OAuthlib。你也可以使用virtualenv或pipenv隔离环境。
pip安装烧瓶requests_oauthlib
创建app.py以及在主页上显示登录按钮的路由：

import flaskapp = flask.Flask(__name__)@app.route("/") def index(): return """ < a href="http://www.srcmini.com/login"> Login< /a> """if __name__ == '__main__': app.run(debug=True)

让我们运行此应用并验证一切正常：

python app.py

打开http：// localhost：5000时, 你应该看到此页面。完整代码在step1.py上。

文章图片
步骤2：身分提供者凭证当前有数百个(如果不是数千个)身份提供者, 其中最受欢迎的是Facebook, Google, GitHub和Instagram。在本篇文章中, 选择SimpleLogin的原因是它易于开发。但是, 相同的代码将适用于任何OAuth2身份提供程序。 (免责声明：我恰好是SimpleLogin的联合创始人, 哎呀, 这可能是我决定使用它的一个因素。)
如果你还没有一个帐户, 请转到SimpleLogin并创建一个帐户, 然后在” 开发人员” 标签中创建一个新应用。
在应用程序详细信息页面上, 请复制你的AppID和AppSecret并将其保存到变量环境中。在OAuth术语中, 客户端实际上是指第三方应用程序, 即你的应用程序。我们可以将这些值直接放在代码中, 但是将凭据保存到环境变量中是一种很好的做法。这也是” 十二个因素” 中的第三个因素。

文章图片

export CLIENT_ID={your AppID} export CLIENT_SECRET={your AppSecret}

在app.py中, 请将这些行添加到文件顶部以获取客户端ID和客户端密码。

import os CLIENT_ID = os.environ.get("CLIENT_ID") CLIENT_SECRET = os.environ.get("CLIENT_SECRET")

还要在下一步将要使用的app.py顶部添加这些OAuth URL。它们也可以在OAuth端点页面上复制。

AUTHORIZATION_BASE_URL = "https://app.simplelogin.io/oauth2/authorize" TOKEN_URL = "https://app.simplelogin.io/oauth2/token" USERINFO_URL = "https://app.simplelogin.io/oauth2/userinfo"

由于我们现在不担心担心设置SSL, 因此请告诉Requests-OAuthlib使用纯HTTP可以：

# This allows us to use a plain HTTP callback os.environ["OAUTHLIB_INSECURE_TRANSPORT"] = "1"

像往常一样, 此步骤的代码在step2.py上。
步骤3：登录重定向当用户单击登录按钮时：

用户将被重定向到身份登录提供者授权页面, 询问用户是否要与你的应用共享他们的信息。
在用户批准后, 它们将被重定向回你应用程序上的页面, 以及URL中的代码, 你的应用程序将使用该代码来交换访问令牌, 从而使你以后可以从服务提供商处获取用户信息。

因此, 我们需要两条路由：将用户重定向到身份提供者的登录路由, 以及接收代码并将其交换为访问令牌的回调路由。回调路由还负责显示用户信息。

@app.route("/login") def login(): simplelogin = requests_oauthlib.OAuth2Session( CLIENT_ID, redirect_uri="http://localhost:5000/callback" ) authorization_url, _ = simplelogin.authorization_url(AUTHORIZATION_BASE_URL) return flask.redirect(authorization_url)@app.route("/callback") def callback(): simplelogin = requests_oauthlib.OAuth2Session(CLIENT_ID) simplelogin.fetch_token( TOKEN_URL, client_secret=CLIENT_SECRET, authorization_response=flask.request.url ) user_info = simplelogin.get(USERINFO_URL).json() return f""" User information: Name: {user_info["name"]} Email: {user_info["email"]} Avatar < img src="http://www.srcmini.com/{user_info.get('avatar_url')}"> < a href="http://www.srcmini.com/"> Home< /a> """

单击登录按钮将带你完成以下流程。完整的代码可以在GitHub的step3.py上找到。

文章图片
用Facebook登录 Facebook, Google和Twitter登录的设置有点复杂, 并且需要其他步骤, 例如设置SSL或选择正确的范围。这些超出了本文的范围。
除了复杂的用户界面外, 集成Facebook最困难的部分可能是找到一种在本地HTTPS上为你的Web应用提供服务的方法, 因为新版本的Facebook SDK不允许使用本地纯HTTP。我建议使用Ngrok(一种免费工具)来获取快速的HTTPS URL。
步骤1：建立Facebook应用程式
请前往https://developers.facebook.com并创建一个新应用：

文章图片
然后在下一个屏幕上选择” 集成Facebook登录” ：

文章图片
步骤2：Facebook OAuth凭证
单击左侧的” 设置/基本” , 然后复制App ID和App Secret。它们实际上是OAuth客户端ID和客户端秘密。

文章图片
更新client-id和client-secret。

export FB_CLIENT_ID={your facebook AppId} export FB_CLIENT_SECRET={your facebook AppSecret}

更新AUTHORIZATION_BASE_URL和TOKEN_URL：

FB_AUTHORIZATION_BASE_URL = "https://www.facebook.com/dialog/oauth" FB_TOKEN_URL = "https://graph.facebook.com/oauth/access_token"

主页：

@app.route("/") def index(): return """ < a href="http://www.srcmini.com/fb-login"> Login with Facebook< /a> """

步骤3：登录和回调端点
如果使用ngrok http 5000命令在ngrok后面提供了应用程序, 则需要将当前URL设置为ngrok URL。

# Your ngrok url, obtained after running "ngrok http 5000" URL = "https://abcdefgh.ngrok.io"

请确保将URL https://abcdefgh.ngrok.io/fb-callback添加到你的Facebook登录/设置, 有效的OAuth重定向URI设置：

文章图片
为了访问用户电子邮件, 你需要在范围内添加电子邮件：

FB_SCOPE = ["email"]@app.route("/fb-login") def login(): facebook = requests_oauthlib.OAuth2Session( FB_CLIENT_ID, redirect_uri=URL + "/fb-callback", scope=FB_SCOPE ) authorization_url, _ = facebook.authorization_url(FB_AUTHORIZATION_BASE_URL) return flask.redirect(authorization_url)

回调路线稍微复杂一点, 因为Facebook需要进行合规性修复：

from requests_oauthlib.compliance_fixes import facebook_compliance_fix@app.route("/fb-callback") def callback(): facebook = requests_oauthlib.OAuth2Session( FB_CLIENT_ID, scope=FB_SCOPE, redirect_uri=URL + "/fb-callback" ) # we need to apply a fix for Facebook here facebook = facebook_compliance_fix(facebook) facebook.fetch_token( FB_TOKEN_URL, client_secret=FB_CLIENT_SECRET, authorization_response=flask.request.url, ) # Fetch a protected resource, i.e. user profile, via Graph API facebook_user_data = http://www.srcmini.com/facebook.get("https://graph.facebook.com/me?fields=id, name, email, picture{url}" ).json() email = facebook_user_data["email"] name = facebook_user_data["name"] picture_url = facebook_user_data.get("picture", {}).get("data", {}).get("url") return f""" User information: Name: {name} Email: {email} Avatar < img src="http://www.srcmini.com/{picture_url}"> < a href="http://www.srcmini.com/"> Home< /a> """

现在, 当单击” 使用Facebook登录” 时, 你应该可以浏览整个流程。

文章图片
完整代码在facebook.py上。
总结恭喜, 你已成功将SSO登录集成到Flask应用中！
为了简单起见, 本教程没有提及其他OAuth概念, 例如范围和状态, 它们对于防范跨站点请求伪造攻击非常重要。你可能还需要将用户信息存储在本文未涉及的数据库中。
该应用还需要在生产时通过https进行投放, 而今天通过Let’ s Encrypt可以轻松完成。
OAuthing快乐！