11

Angular.js (Flask バックエンド Web アプリを使用) で OpenID ベースの認証を実装するにはどうすればよいですか?

Angular.js コードには、ここにある例のようなロジックを組み込む必要があるようです。

ただし、Flask 側にも OpenID 検証メカニズムが必要です。
バックエンドとフロントエンドの両方のロジックを記述する「推奨される」方法はありますか?
初心者向けの github の例やその他の関連リソースはありますか?

4

1 に答える 1

21

残念ながら、共有できるサンプル アプリケーションはありませんが、役に立つと思われる概要レベルの説明を次に示します。

AngularJS アプリがあることを少し忘れて、OpenID 認証交換がどのように機能するかを確認しましょう。

  1. ユーザーはログイン フォームに OpenID URL を入力し、サーバーに送信します
  2. サーバーは OpenID URL を取得し、OpenID プロバイダーへのリダイレクトで応答します。リダイレクトには、コールバック URL などのいくつかの引数が含まれています。
  3. OpenID プロバイダーは、ユーザーにログイン資格情報を入力し、サーバー アプリケーションとの ID の共有を許可するように求めます。
  4. OpenID プロバイダーは、ステップ 2 でコールバックとして指定された URL で、アプリケーションへのリダイレクトで応答し、ID、電子メール、ユーザー名などのユーザーに関する情報を利用できるようにします。
  5. サーバーにはユーザー情報があり、一意の ID、電子メール アドレス、またはその他の ID を使用して、独自のユーザー データベースでユーザーを見つけることができます。この時点で、ユーザーがアプリケーションに認識されていない場合は、新しいアカウントを作成できます。
  6. ユーザーがわかったので、サーバーはそのユーザーが誰であるかを記録する Cookie を書き込むことができますが、これは手順 5 の ID とは異なることに注意してください。OpenID プロバイダーから返された ID 情報は、ユーザーを見つけるのに役立ちました。これで、アプリケーションのコンテキストでユーザーの ID を記録できるようになりました。これは、データベースのユーザー ID、電子メール アドレスまたはユーザー名 (一意の場合)、またはユーザーに関する情報の一部のハッシュであるトークンの可能性があります。
  7. Cookie が書き込まれると、サーバーに送信される新しい要求ごとに、認証されたユーザーを識別するデータが付属します。

それでは、AngularJS をミックスに追加するとどうなるか見てみましょう。これを行うには多くの方法があることに注意してください。以下で説明するのは 1 つの可能性です。

Angular アプリが認証を必要とするサーバーにリクエストを発行した場合、サーバーはエラー コード 401 を返す必要があります。Angular アプリは、たとえば 401 を取得すると、ログイン フォームをポップアップできます。

しかし、ブラウザーのリダイレクトが必要なため、リッチ JS アプリケーションのコンテキストで OpenID 認証ダンスをすべて実行できるわけではありません。サーバー側アプリケーションは、少なくとも 3 つのルートをサポートする必要があります。

  • Angular アプリを提供するルート URL
  • OpenID 認証を開始する URL
  • OpenID プロバイダーへのコールバックとして送信される URL

したがって、ユーザーはルート URL に接続し、認証されていない状態で開始される AngularJS アプリを取得します。ある時点で、Angular アプリは、OpenID テキスト フィールドと送信ボタンを含むフォームを使用して、ユーザーにログインを求めるプロンプトを表示します。これらのフォーム フィールドは、コントローラーにアタッチされたクライアント側の Angular 要素ではなく、サーバーに投稿する通常の HTML フォームの一部である必要があります。フォームの「アクション」属性は、サーバーの OpenID ログイン ルートを指している必要があります。

ユーザーがログイン ボタンをクリックすると、サーバーが起動し、OpenID 認証を開始する要求を受け取ります。この時点で、上記の手順 1 ～ 5 は変更なしで実行されます。

ステップ 5 の最後で、サーバーはアプリケーションのデータベースでユーザーを見つけました。サーバーが現在できることは、ルート URL へのリダイレクトで応答して、Angular アプリを再起動することです。アプリを初期状態ではない状態で再起動する必要がある場合は、OpenID 認証プロセスを開始する前に、復元する状態をクライアント側のストレージ (Cookie など) に保存できます。

しかし、これだけでは不十分です。サーバーは、ログインしたユーザーに関する情報を Angular に渡す必要もあります。これを行う 1 つの方法は、リダイレクト URL のクエリ文字列にユーザーの一意の ID またはトークンを添付することです。これは、Angular アプリで実行できます。アクセス。これは、上記のステップ 6 で Cookie に入った ID と同じものになります。

これで Angular アプリが再起動され、必要に応じてその状態を復元でき、ログインしているユーザーを識別する ID またはトークンを取得できます。アプリがサーバーに Ajax 要求を行う必要がある場合、要求と共にこの ID またはトークンを送信します。サーバーはそれを検証し、無効であることが判明した場合、または有効期限があり期限切れであることが判明した場合は 401 を返すことができます。

リクエストで送信された ID が検証されると、リクエストを実行でき、レスポンスを Angular アプリに送り返すことができます。

ログアウト機能は、ユーザー ID/トークンを削除するだけでクライアント側に実装できるため、サーバーへの今後の要求は再度認証なしで送信されます。

非常に重要: ユーザー情報を含む Angular アプリと Flask サーバー間のすべての交換は、安全な HTTP 経由で行う必要があります。そうでない場合、ID またはトークンはプレーン テキストで送信されます。

于 2013-10-18T01:25:34.073 に答える