プロトタイプOpenIDプロバイダーウィジェット

OpenID認証をWebサイトに統合する方法を書いたことがあります。 それはサーバー側についてでした。

今、私はUI部分について話している-プロバイダーを選択するためのウィジェット。



私はプロジェクトのクライアントライブラリとしてプロトタイプを選択しました。最初にしたことは、グーグルが既成のソリューションを検索することでした。 私は1つを見つけることができましたが、jQueryのみ-code.google.com/p/openid-selector



そのため、OpenIDセレクターを自分で作成するしかありませんでした。 それが起こったことです



画像



ここからソースを入手できますcode.google.com/p/openid-for-prototype



ウィジェットの外観は、cssを使用して完全にカスタマイズできます。



コードには、セレクターに表示されるプロバイダーのリストがあります。



var OpenIDProviders = {



openid: {

name: 'OpenID',

label: ' OpenID.',

url: 'http://'

},

yandex: {

name: 'Yandex',

url: 'http://yandex.ru'

},

google: {

name: 'Google',

url: 'https://www.google.com/accounts/o8/id'

},








不要なものを削除するだけで、例として追加する必要があります。



Googleコードプロジェクトには接続の例がありますが、これはほんの1行のコードです。



一般に、 スタートアップを親切にしたい人は誰でも、必要に応じてこのスクリプトを使用したり、変更したりできます。



All Articles