Javascript OpenID認証ウィジェット

約6か月前、私はOpenIDとそれに関連するすべてに非常に興味がありました。 当時の私の主な仕事は、OpenID関連の仕様、フォーラム、ブログ、ハブポストをゆっくり読むことでした。

この間に受けたすべての知識は、私が実際に働いている会社のプロジェクトで 「具体化」されました

OpenID仕様とそのその他の拡張機能(SREG、AX)およびアドオンを検討して、さまざまな認証方法と拡張機能の仕様を「昼夜」に費やしたくない他の開発者を支援するために、APIレイヤーを備えたJavaScriptウィジェットを開発するというアイデアを思いつきました。

実際にそれについてさらに。

このウィジェットは何をしますか?


ウィジェットのタスクセットはシンプルで、OpenIDを介してエンドユーザー認証インターフェイスにシンプルで理解しやすいものを提供しました。 同時に、ウィジェットは本質的にOpenID認証のコンシューマーです。

OpenIDという用語がすべての一般的なインターネットユーザーになじみのないことは誰もが知っています。 そのため、ウィジェットUIには最小限の用語があります。

起こったことは次のとおりです。
画像画像画像

ウィジェットの仕組みと使用方法


上で述べたように、ウィジェットはUIだけでなく、機能するコンシューマーでもあります。 彼はユーザー認証プロセスを完全に自分で行い、 シンプルなAPIを介して最終サイト(それを使用する)と通信します

ウィジェットの使用は簡単で、次のHTMLコードをページにインストールするだけです。

<script src= "http://loginza.ru/js/widget.js" type= "text/javascript" ></script>
<a href= "https://loginza.ru/api/widget?token_url=[RETURN_URL]" id= "loginza" > OpenID</a>


* This source code was highlighted with Source Code Highlighter .


ユーザーの承認後、彼はtoken_urlパラメーターで指定された[RETURN_URL]ページにリダイレクトされます。 一意のトークンがPOSTでこのページに送信されます。これは、承認されたユーザープロファイルを取得するために必要です(プロファイルデータはSREG OpenID拡張を介して「 プル 」されます)。

プロファイルを取得するには、URLに対してサーバー間リクエストを行う必要があります。

  http://loginza.ru/api/authinfo?token=[TOKEN_KEY_VALUE] 

[TOKEN_KEY_VALUE]はPOSTで受信した秘密鍵です。

プロファイルデータの形式は、承認に合格したユーザーデータを含むJSON配列です。 例:

{ "identity" : "http:\/\/admin.loginza.ru\/" , "provider" : "http:\/\/loginza.ru\/server\/" ,
"name" :{ "full_name" : "\u0421\u0435\u0440\u0433\u0435\u0439 \u0421\u0435\u0440\u0433\u0435\u0439" },
"nickname" : "admin" , "email" : "admin@loginza.ru" , "gender" : "M" , "dob" : "1985-01-31" }


* This source code was highlighted with Source Code Highlighter .


実際、OpenIDユーザーにプロファイルデータの読み込みを許可するこのようなシンプルで機能的な方法は、非常にシンプルであることが判明しました。

藤堂



おわりに


開発者からのフィードバック、このバージョンのウィジェットの有用性についての意見やフィードバックを受け取りたいので、私は自分の仕事を批判します。 このウィジェットでOpenID以外の他の種類の認証(Vkontakte、Twitter、Windows Liveなど)のサポートを接続して、アイデアを開発する価値がありますか。

ウィジェット自体が動作しているのを見たい人、今ではベータモードで使用さています。

UPD(5月5日):
本日(5月5日)JavaScriptウィジェットOpenID Loginzaが更新されたことをお知らせします。 次の修正と機能が追加されました。

1.認証ウィジェットにVkontakte OpenAPIサポートを実装しました 。 VKontakteのユーザープロファイルは、他のプロバイダーの選択と同様に、正規化された形式(単一の形式)で送信されます。

2.これで、JavaScript Loginzaウィジェットへのリンクをいくつか作成できるようになりました。このために、必要なリンクでパラメーターclass = "loginza"を指定します。

3. Loginzaログインに大文字が含まれている場合、他のサイトのOpenID認証に問題がありました。 修正され、時計のように動作するようになりました。

4.承認のセキュリティが強化され、 httpsが使用されるようになりました。

UPD(7月11日):
多くの人が待っている待望の機能を追加しました:
-provider_setパラメーター-Loginzaウィジェットの許可プロバイダーのセットを担当します。

ユーザーが使用できるプロバイダーのボタンのセットを制限したり、ユーザーの順序を変更したりする必要がある場合は、ウィジェットリンクのhrefアドレスでこのパラメーターを使用します。 ボタンの順序は、providers_setパラメーターのプロバイダーの順序に対応します。

Source: https://habr.com/ru/post/J89944/


All Articles