バックエンド

SSOボタンを作成する方法–Flaskログインチュートリアル

多くの場合、ユーザーがデータを保存したり、独自のプロファイルを作成したり、機密リソースへのアクセスを制限したりするために、アプリケーションにはログイン機能が必要です。最新のアプリでは、ユーザーは、メールの確認、パスワードのリセット、多要素認証などの標準的なログイン関連機能を期待しています。これらの機能は必要ですが、正しく理解するのは簡単ではなく、通常はアプリの主な業務ではありません。

ユーザー側では、さらに別の電子メールとパスワードのペアを作成して記憶する必要があるため、長い登録プロセスを実行したくない場合があります。適切なパスワードマネージャーがないと、ユーザーは同じパスワードを再利用する傾向があり、セキュリティの面でひどいものになります。

シングルサインオン（SSO）、主にユーザーには次のように知られています ソーシャルメディアでログイン ボタンは、この問題の解決策として発明されました。ユーザーにとって、別の面倒な登録プロセスを経ないことは簡単でした。企業にとって、ユーザーの摩擦を取り除くことは常に大きな勝利です。開発者、ログイン関連のすべての機能が追加されました委任 IDプロバイダー（Facebook、Google、Twitterなど）に送信されます。つまり、コードが少なくなります。あなたのアプリは単に信頼ユーザーIDを検証する仕事をするIDプロバイダー。

SSOは通常、OpenId Connect（OIDC）またはSAMLプロトコルを利用しています。 SAMLは主にエンタープライズアプリケーションで使用されます。 OIDCはOAuth2の上に構築され、FacebookやGoogleなどのソーシャルIDプロバイダーによって使用されます。この投稿では、OIDC / OAuth2プロトコルに焦点を当てます。

このFlaskログインチュートリアルでは、SimpleLoginとFacebookをIDプロバイダーとしてFlaskアプリケーションにSSOログインボタンを追加するためのステップバイステップガイドを作成します。これは外部ライブラリを使用せずに実行できますが、OAuthの複雑さを単純化するために、リクエスト-OAuthlib 、OAuthプロバイダーを統合するためのライブラリ。 SSOを最初から実装することに興味がある場合は、チェックアウトしてください。 SSOログインの実装–生の方法 。

この記事の最後に、次のページがあるFlaskアプリが必要です。

ログインボタンを備えたホームページ
ログインに成功すると、ユーザーは名前、メールアドレス、アバターなどの情報を見ることができるユーザー情報ページ

このチュートリアルのすべてのコードは、にあります。フラスコ-ソーシャルログイン-リポジトリの例。

デモは次のURLでも入手できます。ここに。上のコードを自由にリミックスしてくださいグリッチ。

ギリシャの金融危機の説明

ステップ1：ブートストラップフラスコアプリ

インストールflaskおよびRequests-OAuthlib。 virtualenvも使用できますまたはpipenv環境を隔離します。

pipインストールフラスコrequests_oauthlib

作成app.pyホームページにログインボタンを表示するルート：

import flask app = flask.Flask(__name__) @app.route('/') def index(): return '''  Login  ''' if __name__ == '__main__': app.run(debug=True)

このアプリを実行して、すべてが正常に機能していることを確認しましょう。

python app.py

http：// localhost：5000を開くと、このページが表示されます。完全なコードはオンです step1.py 。

ステップ2：IDプロバイダーの資格情報

現在、数百（数千ではないにしても）のIDプロバイダーがあり、最も人気のあるプロバイダーはFacebook、Google、GitHub、Instagramです。この投稿では、 SimpleLogin 開発者に優しいという理由で選ばれました。ただし、同じコードがどのOAuth2IDプロバイダーでも機能します。（免責事項：私はたまたまSimpleLoginの共同創設者であり、それを使用することを決定した要因となった可能性があります。）

に向かってください SimpleLogin アカウントをまだお持ちでない場合は作成し、[開発者]タブで新しいアプリを作成します。

アプリの詳細ページで、AppIDとAppSecretをコピーして、可変環境に保存してください。 OAuthの用語では、クライアントとは実際にはサードパーティのアプリ、つまりアプリを意味します。これらの値をコードに直接入れることはできますが、認証情報を環境変数に保存することをお勧めします。これは、 12の要因。

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

app.pyで、ファイルの先頭にこれらの行を追加して、client idを取得してください。およびclient secret。

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

これらのOAuthURLもapp.pyの上に追加してくださいこれは次のステップで使用されます。これらは、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 。

ユーザーがログインボタンをクリックすると、次のようになります。

ユーザーは、IDログインプロバイダーの承認ページにリダイレクトされ、ユーザーが自分の情報をアプリと共有するかどうかを尋ねられます。
ユーザーが承認すると、codeとともにアプリのページにリダイレクトされます。アプリがaccess tokenと交換するために使用するURL内これにより、後でサービスプロバイダーからユーザー情報を取得できます。

したがって、2つのルートが必要です：a loginユーザーをIDプロバイダーとcallbackにリダイレクトするルートcodeを受信するルートそしてそれをaccess tokenと交換します。コールバックルートは、ユーザー情報の表示も担当します。

@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   
  Home  '''

ログインボタンをクリックすると、次のフローが表示されます。完全なコードはにあります step3.pyのGitHub 。

Facebook、Google、Twitterのログインの設定は少し複雑で、SSLの設定や適切なスコープの選択などの追加の手順が必要です。これらはこの記事の範囲を超えています。

洗練されたUIとは別に、Facebookの統合で最も難しいのは、新しいバージョンのFacebook SDKではローカルのプレーンHTTPが許可されていないため、HTTPSでWebアプリをローカルに提供する方法を見つけることかもしれません。使用をお勧めします Ngrok 、クイックHTTPSURLを持つ無料のツール。

ステップ1：Facebookアプリを作成する

に向かってください https://developers.facebook.com 新しいアプリを作成します。

ステップバイステップの初心者のためのangularjsチュートリアル

次に、次の画面で「Facebookログインの統合」を選択します。

ステップ2：FacebookOAuth資格情報

左側の「設定/基本」をクリックして、 アプリID そして アプリの秘密 。それらは実際にはOAuthですclient-idおよびclient-secret。

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 ''' Login with Facebook '''

アプリが背後で提供されている場合ngrok ngrok http 5000を使用するコマンドを実行するには、現在のURLをngrokURLに設定する必要があります。

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

必ずURLを追加してください https://abcdefgh.ngrok.io/fb-callback Facebookのログイン/設定に有効なOAuthリダイレクトURI設定：

パフォーマンスの投資収益率

ユーザーのメールにアクセスするには、emailを追加する必要がありますにscope：

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)

callback 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 = 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   
  Home  '''

これで、[Facebookでログイン]をクリックすると、フロー全体を実行できるようになります。

完全なコードはオンです facebook.py 。

結論

おめでとうございます。SSOログインがFlaskアプリに正常に統合されました。

簡単にするために、このチュートリアルでは、次のような他のOAuthの概念については触れていません。範囲そして状態、クロスサイトリクエストフォージェリ攻撃から防御するために重要です。また、この記事で説明されていないデータベースにユーザー情報を保存する必要があるかもしれません。

また、アプリは本番環境でhttpsで提供する必要があります。これは、今日、暗号化しましょう。

ハッピーOAuthing！

基本を理解する

Flaskでログインページを作成するにはどうすればよいですか？

Flaskのログインページは基本的にHTMLページです。 Flaskでログインを処理する際に注意が必要なのは、ユーザーのログイン状態をセッションに保存することです。これは通常、flask-login拡張機能によって処理されます。この拡張機能には、認証されたユーザーへのアクセスを制限する便利なlogin_requiredデコレータも付属しています。

シングルサインオンとはどういう意味ですか？

シングルサインオンを使用すると、ユーザーは1回だけログインして、複数のアプリケーションにアクセスできます。企業ユーザーの場合、これは通常、アプリケーションポータルの形式になります。プライベートユーザーにとって、SSOの最も一般的な形式は、おそらく[Facebookでログイン]ボタンです。

シングルサインオンとは何ですか？どのように機能しますか？

シングルサインオンは、認証が「IDプロバイダー」と呼ばれる別の当事者に「委任」されるシステムです。アプリケーションとIDプロバイダー間の通信は、通常、SAMLプロトコル（主に企業環境で使用）またはOIDC / OAuth2（主にコンシューマー環境で使用）によって処理されます。

シングルサインオンの利点は何ですか？

シングルサインオンは、ユーザーとアプリケーション開発者の両方に利点をもたらします。ユーザーはさらに別のパスワードを覚えておく必要がなく、サインインは迅速です。開発者は、認証関連の機能を実装したり、ユーザーの電子メール/パスワードを保存することによるセキュリティへの影響について心配したりする必要はありません。

OAuthはシングルサインオンですか？

OAuthは、アプリケーションがユーザーリソースにアクセスする方法を指示する承認プロトコルです。「認証」プロトコルであるOIDC（OpenID Connect）は、OAuthの上にレイヤーとして作成されます。 SAMLを使用するOIDCは、通常、シングルサインオンを強化するプロトコルです。

SSOをどのようにテストしますか？

SSOをテストするにはIDプロバイダーが必要です。何千ものIDプロバイダーがあり、それらのほとんどはOIDCに準拠しています。ソーシャルデータ固有のデータ（Facebookフィード、Twitterフィードなど）を必要としないアプリケーションの場合、SimpleLoginをIDプロバイダーとして使用すると、「開発者に優しい」ため、迅速なソリューションになります。