メールの紛失によるユーザーアカウントの確認とパスワードのリセットの送信にうんざりしていませんか？
ユーザーは、登録フォームに記入するチャーターを残しますか？
あなたのサイトの訪問者は、FacebookまたはVkontakteにアカウントを持っていますか？
個人データを保存したくないですか？
ユーザーはユーザー名とパスワードの入力にうんざりしていませんか？
ユーザーは「ログイン」ボタンさえクリックするのが面倒です。
これがstackoverflowでどのように行われているかを見て、同じものを望んでいますか？
以下は、サイトへのアクセスを控えめで、自動で、特別な費用なしで行う方法です。
彼らが問題を取り除くことを決めたら-一度にすべて。
メールによる紛失によるユーザーアカウントの確認とパスワードのリセットは送信されません。
登録フォームを削除します。
個人データは保存しません。
ログインフォームとパスワードを削除します。
出口は1つしかありません。OpenIDまたはOAuthを使用してサイトにログインする方法です。 すべてのユーザーがFacebookまたはVkontakteに登録していることが確実な場合、以下で説明する方法が適しています。
FacebookおよびVkontakteでOAuthを介してユーザーを認証できるようにするには、開発者向けのセクションの適切なページに移動し、サイトのドメイン名を正しく示す独自のアプリケーションを作成する必要があります。 Facebookでは、複数の名前を同時に指定できるため、localhostでの開発が簡単になります。
そこから便利なのは、FacebookのAppIDとVkontakteの「アプリケーションID」だけです。覚えておいてください。 ローカルマシンで開発する場合は、2つのVkontakteアプリケーションを作成し、そのうちの1つをローカルホストとして指定する必要があります。
各サイトから1つずつ、2つのスクリプトをダウンロードし、それぞれをロードした後、いくつかのアクションを実行する必要があります。 しかし、できるだけ早くすべてを行いたいわけではなく、カバーした素材を統合するために、コールバック関数を備えた並列ブートローダーを使用します 。
//Facebook yepnope({ load: ['//connect.facebook.net/ru_RU/all.js'], complete: function(){ FB.init({appId: ' AppID Facebook', xfbml: true, cookie: true, oauth: true}) FB.Event.subscribe('auth.statusChange', facebook_auth) } }) function facebook_auth(response) { if (response.authResponse) { var uid = response.authResponse.userID; var token = response.authResponse.accessToken; $.get("/auth/facebook?token="+token+"&uid="+uid, function(data, status){ $('.loggingin').removeClass('loggingfb') if(status == 'success') $('#logins .fb').append($('<span>'+data+'</span>')) }) } else $('.loggingin').removeClass('loggingfb') } // yepnope({ load: ['//vkontakte.ru/js/api/openapi.js'], complete: function(){ if(location.href.match(/localhost/)) VK.init({apiId: ' ID localhost'}) else VK.init({apiId: ' ID '}) VK.Auth.getLoginStatus(vk_auth, true) } }) function vk_auth(response) { if (response.status === 'connected') { var uid = response.session.mid var sid = response.session.sid var name = response.session.user.first_name + ' ' + response.session.user.last_name $.get("/auth/vk?sid="+sid+"&uid="+uid+"&name="+name, function(data, status){ $('.loggingin').removeClass('loggingvk') if(status == 'success') $('#logins .vk').append($('<span>'+data+'</span>')) }) } else $('.loggingin').removeClass('loggingvk') }
入力をクリックすることを練習するための2つのオプション、1つ目-2つのウィンドウを同時に開くこと、2つ目-別々に。
$('.login').click(function(){ FB.login(function(){}, {scope : 'user_relationships,publish_stream,offline_access'}) VK.Auth.login(vk_auth, 1027) return false })
$('.login .vk').click(function(){ VK.Auth.login(vk_auth, 1027) return false }) $('.login .fb').click(function(){ FB.login(function(){}, {scope : 'user_relationships,publish_stream,offline_access'}) return false })
さて、少しのHTMLにより、何が起きているのかを少し視覚化することができます。
<body> <div id="fb-root"></div> <div class="top"> <div id="logins"> <div class="login"> <span id="not_logged_in"> <span class="loggingin loggingfb loggingvk"> <img src="/images/loading.gif" /> </span> <span> <a></a> </span> </span> <span class="fb"> <img class="nano" src="/images/facebook.png" /> <span class="name"></span> </span> <span class="vk"> <img class="nano" src="/images/vkontakte.png" /> <span class="name"></span> </span> </div> </div> ...
そして、それに少しのCSS。
#logins { float: right; margin-top: -10px; padding: .5em; background-color: #ffffaa; cursor: pointer; border: 1px solid #eeeeaa; border-radius: 0 0 5px 5px; } #logins a {text-decoration: none; } #logins .prompt span {padding: .5em; } #logins span {font-weight: bold; } #not_logged_in, #logins .vk, #logins .fb {margin: .5em; } .loggedinvk.loggedinfb #not_logged_in {display: none; } .loggedinvk .inputs_not_logged, .loggedinfb .inputs_not_logged {display: none; } .loggingin {display: none; padding-right: .5em; } .loggingin.loggingfb, .loggingin.loggingvk {display: inline; } .add .inputs {display: none; } .loggedinvk .add .inputs, .loggedinfb .add .inputs {display: block; }
最後に何を得たのか、どのように機能するのか
興味深いことはすべてクライアント側で起こります。 ユーザーが最初にサイトにアクセスし、FacebookおよびVkontakteからサイトに関する自分の情報を提供することに同意していない場合、ログインボタンが表示されます。 しばらくして、FacebookとVkontakteが自動的にログインしようとすると、img loading.gifが消え、ユーザーは入力をクリックできます。 その結果、彼はすぐに2つのポップアップウィンドウを開き、サイトごとに1つ、アクセスを許可するように要求します。
ユーザーが同意を表明するとすぐに、facebook_authおよびvk_authメソッドが呼び出され、ユーザーの一意の識別子（および彼の名前）がアドレス/ auth / vkおよび/ auth / facebookでサイトに送信されます。
最も興味深い有用なことは、FacebookおよびVkontakteの情報へのサイトへのアクセスを既に許可しているユーザーが次にサイトにアクセスするときに発生します。 少し回すと、loading.gifが消え、facebook_authとvk_authが呼び出されますが、今回はユーザーの介入なしで、これが必要なことです。 つまり、ユーザーはWebサイトに再入力（ログイン）するためのアクションを実行する必要はありません。 また、登録（プライマリエントリ）の場合、ソーシャルネットワークからサイトへの情報の使用に同意するだけで十分です。
ここで実際の例を見ることができます （ 注意深く、ページに投稿できますが、 Facebookの 許可ダイアログでこの許可を削除できます ）。 ここでは、Facebookのみに切り捨てられます。 Habraffektは我慢しません、我慢してください。 ソースコードは、githubへのリンク上に完全にあります。