FlaskアプリケーションでのOAuth認証

この記事は、新しいFlask Mega-Tutorial（2018）記事シリーズのボーナスです。

著者は同じミゲルグリーンバーグです。 この記事は新しいものではありませんが、その関連性は失われていません。

blog.miguelgrinberg.com

OAuthテクノロジーは10年以上使用されており、インターネット視聴者の99％がOAuthをサポートするリソースの少なくとも1つにアカウントを持っています。 ほとんどすべてのリソースにサインインボタンがありますか？ Flaskマイクロフレームワークを使用してこれがどのように行われるかを見てみましょう。

多くのWebサイトでは、よく知られているソーシャルサービスのいずれかのユーザーアカウントを使用するサードパーティ認証サービスを使用して、ワンクリックで簡単に登録できます。 私の古いFlask Mega-Tutorialコースでは、これらのプロトコルの1つであるOpenIDを使用する方法を説明しました（現在は、 コメントトランスレーターの世界で使用されています ）。

この記事では、 OAuthプロトコルの概要を紹介します。最近では、 OpenIDが優先されるサードパーティ認証メカニズムとして置き換えられています。 また、Facebookでサインイン機能とTwitterでサインイン機能を実装する完全なFlaskアプリも紹介します。 これら2つの実装を例にとると、必要な他のOAuthプロバイダーを簡単に追加できます。

ご注意 翻訳者： ここでOAuthがどのように機能するかについてのリンクがさらに2つあります。

OAuthの簡単な紹介

OAuthを導入する最良の方法は、ログイン中に発生するイベントをリストすることです。

• フォーム送信の処理。 ユーザーはアプリケーションのホームページ（ http://www.example.comなど）に移動し、 「Facebookでサインイン」ボタンをクリックします。このボタンは、アプリケーションのルート（ http://www.example.com/authorize/facebookなど）にリンクします 。
• フェッチリクエストトークン（内部リクエスト）。 サーバーはリクエストを受信し、 Facebook OAuth認証URLへのリダイレクトで応答します。 すべてのOAuthプロバイダーは、ユーザーをリダイレクトするURLを文書化する必要があります。
  
  
  • リクエストは、 コンシューマキー （「アプリケーションログイン」）を渡し、リクエスト自体はコンシューマシークレット （「アプリケーションパスワード」）を使用して署名されます。これにより、偽造から保護されます。
  • 応答として、プロバイダーはリクエストトークンと呼ばれる「ガベージで満たされた」トークンを生成して返します。
• 承認にリダイレクトします（ブラウザのリダイレクト経由）。 ユーザーはFacebookにログインするように求められます（まだログインしていない場合）。 ユーザーが要求された情報を元のアプリケーションと共有する許可をFacebookに付与する必要がある場合、情報共有要求が提供されます。 これはすべてFacebook Webサイトで行われ、Facebookとユーザー間のプライベートトランザクションであり、アプリケーションは関与しません。
• アクセストークンの取得（内部リクエスト）。 ユーザーが情報交換要求を受け入れた後、Facebookは事前に構成されたコールバックURL（ http://www.example.com/callback/facebookなど）でアプリケーションにリダイレクトします 。 リダイレクトURLリクエスト行には、アプリケーションがユーザーに代わってFacebook APIにアクセスするために使用できる認証コードが含まれています。
• API（内部リクエスト）を呼び出します。 アプリケーションはFacebook APIを使用してユーザー情報を取得します。 特に興味深いのは、ログインするユーザーを登録した後、アプリケーションデータベースにユーザーを登録するために使用できる一意のユーザー識別子（ Shared Secret ）です。

アプリケーションとサードパーティサービス間の交換は簡単ではありませんが、ユーザーにとって必要なのはサードパーティのサイトに入り、アプリケーションを使用して情報を交換する許可を与えるだけなので、ユーザーにとっては非常に簡単です。

現在、2つのバージョンのOAuthプロトコルが使用されています。両方とも上記の一般的なプロセスに従っており、実装の違いもあります。 Twitterで使用されるOAuth 1.0aは、この2つの中で最も複雑です。 Facebookで使用されるOAuth 2は互換性のない改訂プロトコルであり、バージョン1.0aの複雑さのほとんどを排除し、暗号化にセキュアHTTPを使用しています。

OAuthプロバイダーに登録する

アプリケーションがサードパーティのOAuthプロバイダーを使用する前に、登録する必要があります。 FacebookとTwitterの場合、これはそれぞれの開発者サイトで行われ、これらのサイトのユーザーにアプリケーションを提示する「アプリ」を作成します。

Facebookアプリケーションはhttps://developer.facebook.comから作成できます 。

「開始」と「次へ」をクリックします。 その過程で、あなた自身に関するさまざまな情報を記入してください。

「Facebookでサインイン」を選択します







可能なアプリケーションのリストから、タイプ「WWW / Webサイト」を選択します。







アプリケーションのURLを指定します。これは、コンピューターで起動した場合、 http://localhost:5000



ます。

OAuth認証の例

以下のセクションでは、FacebookおよびTwitter認証を実装する比較的単純なFlaskアプリケーションについて説明します。

この記事ではアプリケーションの重要な部分を紹介しますが、完全なアプリケーションはGitHubリポジトリhttps://github.com/miguelgrinberg/flask-oauth-exampleで入手できます 。 この記事の最後に、実行方法を示します。

ユーザーモデル

サンプルアプリケーションのユーザーは、SQLAlchemyデータベースに保存されます。 アプリケーションは、 Flask-SQLAlchemy拡張機能を使用してデータベースを操作し、 Flask-Login拡張機能を使用して登録ユーザーを追跡します。

 from flask.ext.sqlalchemy import SQLAlchemy from flask.ext.login import LoginManager, UserMixin db = SQLAlchemy(app) lm = LoginManager(app) class User(UserMixin, db.Model): __tablename__ = 'users' id = db.Column(db.Integer, primary_key=True) social_id = db.Column(db.String(64), nullable=False, unique=True) nickname = db.Column(db.String(64), nullable=False) email = db.Column(db.String(64), nullable=True) @lm.user_loader def load_user(id): return User.query.get(int(id))
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

データベースには、ユーザーusers用の別のテーブルがあり、メインキーであるid



に加えて、3つの列が含まれています。

• social_id
  
  
  
  ：ログインに使用されるサードパーティ認証サービスからの一意の識別子を識別する文字列。

  
  
  
  
  
  
  

• nickname
  
  
  
  ：ユーザーのニックネーム。 すべてのユーザーに対して定義する必要があり、一意である必要はありません。

  
  
  
  
  
  
  

• email
  
  
  
  ：ユーザーのメールアドレス。 この列はオプションです。

  
  
  
  
  
  
  

UserクラスはFlask-LoginのUserMixin



を継承し、この拡張機能に必要なメソッドを提供します。 また、Flask-Loginに必要なuser_loader



コールバック関数は、ユーザーの主キーによってユーザーを読み込みます。

OAuthの実装

Python用のOAuthクライアントパッケージがいくつかあります。 この例では、 Rauthを使用することにしました 。 ただし、OAuthパッケージを使用する場合でも、プロバイダー認証には多くの側面があり、タスクが困難になります。

まず、広く使用されているOAuthプロトコルには2つのバージョンがあります。 ただし、同じバージョンのOAuthを使用しているプロバイダーの間でも、仕様の一部ではない多くの詳細があり、独自のドキュメントに従って行う必要があります。

このため、Flaskアプリケーションを一般的な方法で記述できるように、Rauthの上に抽象化レイヤーを実装することにしました。 以下は、特定のプロバイダー実装が記述される単純な基本クラスです。

 class OAuthSignIn(object): providers = None def __init__(self, provider_name): self.provider_name = provider_name credentials = current_app.config['OAUTH_CREDENTIALS'][provider_name] self.consumer_id = credentials['id'] self.consumer_secret = credentials['secret'] def authorize(self): pass def callback(self): pass def get_callback_url(self): return url_for('oauth_callback', provider=self.provider_name, _external=True) @classmethod def get_provider(self, provider_name): if self.providers is None: self.providers = {} for provider_class in self.__subclasses__(): provider = provider_class() self.providers[provider.provider_name] = provider return self.providers[provider_name] class FacebookSignIn(OAuthSignIn): pass class TwitterSignIn(OAuthSignIn): pass
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

OAuthSignIn



基本クラスは、各プロバイダーのサービスを実装するサブクラスが従わなければならない構造を定義します。 コンストラクターは、プロバイダーの名前と、それに割り当てられ、構成から取得されたアプリケーション識別子とシークレットコードを初期化します。 以下は、アプリケーション構成の例です（もちろん、これらのコードを独自のものに置き換える必要があります）。

 app.config['OAUTH_CREDENTIALS'] = { 'facebook': { 'id': '470154729788964', 'secret': '010cc08bd4f51e34f3f3e684fbdea8a7' }, 'twitter': { 'id': '3RzWQclolxWZIMq5LJqzRZPTl', 'secret': 'm9TEd58DSEtRrZHpz2EjrV9AhsBRxKMo8m3kuIZj3zLwzwIimt' } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

最上位には、このクラスでサポートされる2つの重要なイベントがあります。これらはすべてのOAuthプロバイダーに共通です。

• 認証プロセスの開始。 これを行うには、アプリケーションがプロバイダーのWebサイトにリダイレクトして、ユーザーがそこで認証できるようにする必要があります。 これは、 authorize()
  
  
  
  メソッドで表されます。
• 認証が完了すると、プロバイダーはアプリケーションをリダイレクトします。 これは、 callback()
  
  
  
  メソッドによって処理されcallback()
  
  
  
  。 プロバイダーはアプリケーションの内部メソッドに直接アクセスできないため、それを呼び出すURLにリダイレクトされます。 プロバイダーがリダイレクトする必要があるURLはget_callback_url()
  
  
  
  メソッドによって返され、プロバイダーの名前を使用して作成されるため、各プロバイダーは独自の専用ルートを取得します。

get_provider()



メソッドは、プロバイダー名を持つ正しいOAuthSignIn



インスタンスを見つけるために使用されます。 このメソッドは、イントロスペクションを使用してOAuthSignIn



すべてのサブクラスを検索し、それぞれのインスタンスを辞書に保存します。

Rauthを使用したOAuth認証

Rauthは、使用されるプロトコルのバージョンに応じて、クラスOAuth1Service



またはOAuth2Service



オブジェクトを持つOAuthプロバイダーを表します。 各プロバイダーのOAuthSignIn



サブクラスにこのクラスのオブジェクトを作成します。 FacebookおよびTwitterの実装を以下に示します。

 class FacebookSignIn(OAuthSignIn): def __init__(self): super(FacebookSignIn, self).__init__('facebook') self.service = OAuth2Service( name='facebook', client_id=self.consumer_id, client_secret=self.consumer_secret, authorize_url='https://graph.facebook.com/oauth/authorize', access_token_url='https://graph.facebook.com/oauth/access_token', base_url='https://graph.facebook.com/' ) class TwitterSignIn(OAuthSignIn): def __init__(self): super(TwitterSignIn, self).__init__('twitter') self.service = OAuth1Service( name='twitter', consumer_key=self.consumer_id, consumer_secret=self.consumer_secret, request_token_url='https://api.twitter.com/oauth/request_token', authorize_url='https://api.twitter.com/oauth/authorize', access_token_url='https://api.twitter.com/oauth/access_token', base_url='https://api.twitter.com/1.1/' )
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

OAuth 2を実装するFacebookでは、 OAuth2Service



クラスがOAuth2Service



ます。 サービスオブジェクトは、サービス名といくつかのOAuth固有の引数で初期化されます。 client_id



client_secret



とclient_secret



は、Facebook開発者サイトのアプリケーションに割り当てられたclient_secret



です。 Authorize_url



およびaccess_token_url



は、認証プロセス中に接続する必要があるアプリケーション用にFacebookによって定義されたURLです。 最後に、 base_url



は、認証の完了後にFacebook API呼び出しのプレフィックスURLを設定します。

TwitterはOAuth 1.0aを実装しているため、 OAuth1Service



クラスがOAuth1Service



ます。 OAuth 1.0aでは、識別コードとシークレットコードはconsumer_key



およびconsumer_secret



と呼ばれますが、OAuth 2プロトコルと機能が同じです。OAuth1プロトコルでは、プロバイダーは2つではなく3つのURLを表示する必要があります。追加のrequest_token_url



リクエストがあります。 name



およびbase_url



引数は、OAuth 2サービスで使用されるものと同じですTwitterは、 authorize_url



パラメーターに2つのパラメーターを提供することに注意してください。 上記のURL https://api.twitter.com/oauth/authorize



は、アプリケーションに毎回Twitterへのアクセスを許可する必要があるウィンドウをユーザーに表示するため、最も安全です。 このURLをhttps://api.twitter.com/oauth/authenticate



変更すると、Twitterが初めて許可を要求し、ユーザーがTwitterからログアウトするまで静かにアクセスを許可します。

URLのエントリポイントには標準化が存在しないことに注意してください; OAuthプロバイダーは、適切であると判断してそれらを定義します。 新しいOAuthプロバイダーを追加するには、これらのURLをドキュメントから取得する必要があります。

OAuth承認フェーズ

ユーザーが「...でログオン」リンクをクリックしてOAuth認証を開始すると、呼び出しは次のルートに従います。

 @app.route('/authorize/<provider>') def oauth_authorize(provider): if not current_user.is_anonymous(): return redirect(url_for('index')) oauth = OAuthSignIn.get_provider(provider) return oauth.authorize()
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

このルートでは、まずユーザーがログインしていないことを確認してから、プロバイダーに一致するOAuthSignIn



サブクラスを取得し、そのauthorize()



メソッドを呼び出してプロセスを開始します。 以下は、FacebookおよびTwitterのauthorize()



実装です。

 class FacebookSignIn(OAuthSignIn): # ... def authorize(self): return redirect(self.service.get_authorize_url( scope='email', response_type='code', redirect_uri=self.get_callback_url()) ) class TwitterSignIn(OAuthSignIn): # ... def authorize(self): request_token = self.service.get_request_token( params={'oauth_callback': self.get_callback_url()} ) session['request_token'] = request_token return redirect(self.service.get_authorize_url(request_token[0]))
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

FacebookなどのOAuth 2プロバイダーの場合、実装は単にrauth



サービスrauth



によって生成されたURLへのリダイレクトを発行しrauth



。 スコープはプロバイダーに依存します。この特定のケースでは、Facebookにユーザーのメールを提供するよう依頼します。 response_type = 'code'では、引数はアプリケーションがWebアプリケーションであることをoauthプロバイダーに伝えます（さまざまな認証プロセスに他の可能な値があります）。 最後に、redirect_uri引数は、認証の完了後にプロバイダーが呼び出す必要があるアプリケーションのルートを指定します。

OAuth 1.0プロバイダーは、もう少し複雑なプロセスを使用します。このプロセスでは、プロバイダーからリクエストトークンを受信します。リクエストトークンは2つのアイテムのリストで、最初のアイテムはリダイレクトの引数として使用されます。 コールバックで再び必要になるため、リクエストトークン全体がユーザーセッションに保存されます。

コールバックOAuthコールバックフェーズ

OAuthプロバイダーは、ユーザー認証後にアプリケーションにリダイレクトし、情報を交換する許可を与えます。 このコールバックを処理するルートを以下に示します。

 @app.route('/callback/<provider>') def oauth_callback(provider): if not current_user.is_anonymous(): return redirect(url_for('index')) oauth = OAuthSignIn.get_provider(provider) social_id, username, email = oauth.callback() if social_id is None: flash('Authentication failed.') return redirect(url_for('index')) user = User.query.filter_by(social_id=social_id).first() if not user: user = User(social_id=social_id, nickname=username, email=email) db.session.add(user) db.session.commit() login_user(user, True) return redirect(url_for('index'))
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

このルートは、 OAuthSignIn



プロバイダーOAuthSignIn



インスタンスを作成し、そのcallback()



メソッドを呼び出しcallback()



。 このメソッドには、プロバイダーとの認証を完了し、ユーザー情報を取得する機能があります。 戻り値は、一意の識別子（primary key id



と区別するためsocial_id



と呼ばれる）、ユーザーエイリアス、ユーザーのメールアドレスの3つの値を持つタプルです。 IDとエイリアスは必須ですが、このサンプルアプリケーションでは、Twitterがこの情報をアプリケーションと共有しないため、メールをオプションにしました。

ユーザーは、 social_id



フィールドによってデータベースで表示され、 social_id



ない場合は、プロバイダーから受信した情報を使用して新しいユーザーがデータベースに追加され、新しいユーザーが自動的に効果的に登録されます。 次に、ユーザーはFlask-Loginのlogin_user()



関数を使用してログインし、最終的にホームページにリダイレクトします。

FacebookおよびTwitterのOAuthプロバイダーのcallback()



メソッドの実装を以下に示します。

 class FacebookSignIn(OAuthSignIn): # ... def callback(self): def decode_json(payload): return json.loads(payload.decode('utf-8')) if 'code' not in request.args: return None, None, None oauth_session = self.service.get_auth_session( data={'code': request.args['code'], 'grant_type': 'authorization_code', 'redirect_uri': self.get_callback_url()}, decoder=decode_json ) me = oauth_session.get('me').json() return ( 'facebook$' + me['id'], me.get('email').split('@')[0], # Facebook does not provide # username, so the email's user # is used instead me.get('email') ) class TwitterSignIn(OAuthSignIn): # ... def callback(self): request_token = session.pop('request_token') if 'oauth_verifier' not in request.args: return None, None, None oauth_session = self.service.get_auth_session( request_token[0], request_token[1], data={'oauth_verifier': request.args['oauth_verifier']} ) me = oauth_session.get('account/verify_credentials.json').json() social_id = 'twitter$' + str(me.get('id')) username = me.get('screen_name') return social_id, username, None # Twitter does not provide email
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

callback()



メソッドは検証トークンを渡します。これは、アプリケーションがプロバイダーのAPIと通信するために使用できます。 OAuth 2の場合、これはcode



引数として発生しますが、OAuth 1.0aの場合はoauth_verifier



、両方ともクエリ文字列で指定されます。

このコードは、 rauthサービスオブジェクトからoauth_session



を取得するために使用されます 。

Facebook APIの最新バージョンでは、セッショントークンはJSON形式で返されることに注意してください。 このトークンに対してrauthが予期するデフォルトの形式は、クエリ文字列で指定する必要があります。 このため、JSONのコンテンツをデコードするdecoder



引数を追加する必要があります。 Python 2ではjson.loads



を渡すjson.loads



ですが、Python 3ではペイロードがjsonパーサーが理解できないバイトとして返されるため、追加の手順が必要です。 バイトから文字列への変換は、decode_json内部関数で実行されます。

oauth_session



オブジェクトを使用して、プロバイダーにAPI要求を提供できます。 ここでは、特定のプロバイダーが提供する必要があるユーザー情報を要求するために使用されます。 FacebookはユーザーIDとメールアドレスを提供しますが、ユーザー名は提供しません。そのため、アプリケーションのユーザー名はメールアドレスの左側から作成されます。 Twitterは識別子とユーザー名を提供しますが、メールをサポートしていないため、メールはNone



として返されます。

プロバイダーから受信したデータは、最後にview関数の3要素タプルとして返されます。 どちらの場合も、プロバイダーからのid



値は、返される前に«facebook $»



または«twitter $»



追加され、すべてのプロバイダーで一意になるように注意してください。 これはアプリケーションがデータベースにsocial_id



としてsocial_id



するものなので、同じid



2人の異なるユーザーに割り当てた2つのプロバイダーがアプリケーションデータベースで競合しないようにする必要があります。

おわりに

前述したように、サンプルアプリケーションでは、誰でもFacebookまたはTwitterアカウントを使用して登録およびログインできます。 このアプリケーションは、情報を入力せずにユーザーを登録する方法を示しています。ユーザーが行う必要があるのは、プロバイダーにログインして情報の共有を許可することだけです。

この例を試してみたい場合は、いくつかの準備手順に従う必要があります。

プロジェクトリポジトリのクローンまたはダウンロード： https : //github.com/miguelgrinberg/flask-oauth-example

仮想環境を作成し、 requirements.txtファイルのリストからパッケージをインストールします（Python 2.7または3.4を使用できます）。

「アプリ」をFacebookとTwitterに登録し、

上記のように。

FacebookおよびTwitterアプリのIDとシークレットコードを使用してapp.pyを編集します。

これらの手順を実行した後、 python app.pyを使用してアプリケーションを起動し、ブラウザーでhttp：// localhost ：5000を実行できます。

この記事がOAuthの分かりやすい説明に役立つことを願っています。

質問がある場合は、下に書いてください。

ミゲル