AngularJSおよびFirebaseを使用したユーザー認証

前の記事で 、Firebaseについて説明しました。 今日は、AngularJSとFirebaseを使用してユーザー認証を整理した方法を説明します。

現時点では、私は暇なときに自分のプロジェクトに取り組んでいます。要するに、これはSPAアプリケーションのプロトタイプを作成するためのサービスです。もうすぐ詳しく説明できると思いますが、これまでのところは承認についてのみです。 なぜFirebaseを選んだのですか？ シンプルで、私は非常に怠zyなプログラマーであり、自転車を書くのは好きではありません。このサービスは、承認とユーザー登録などの既製のソリューションを提供します。

プロジェクトの基礎として、ngBoilerplateを使用しているため、特別な変更を必要としない、かなり成功したアセンブリであると考えています。 このアセンブリには、Twitter Bootstrap、Angular UI、Angular Bootstrap、Font Awesome、LESSがプリロードされています。 また、GruntとBowerによる素晴らしいチューニング。 クリーンなアプリケーションをインストールして実行するには、次のコマンドを実行するだけです。

$ git clone git://github.com/joshdmiller/ng-boilerplate $ cd ng-boilerplate $ sudo npm -g install grunt-cli karma bower $ npm install $ bower install $ grunt watch 

トピックから少し移動したものを続けます。 プロジェクトでは、認証モジュールを作成し、奇妙なことにAuthという名前を付けました。 実際には次のようになります。

 angular.module('Auth', [ 'firebase' ]) .service('AuthService', [ '$rootScope','$firebase', '$firebaseAuth', '$location', '$q', function AuthService( $rootScope, $firebase, $firebaseAuth, $location, $q ){ var firebaseObj = new Firebase('https://your-firebase-app.com/'); var userStorageKey = 'authUser'; var authUser = $.jStorage.get(userStorageKey) || { status:false, data: false }; return { createUserByEmail: function(email, password){ var deferred = $q.defer(); firebaseObj.createUser({ email : email, password : password }, function(error) { if (error === null) { deferred.resolve({ status: true }); } else { deferred.resolve({ status: false, error: error }); } }); return deferred.promise; }, signInUserByEmail: function(email, password){ var deferred = $q.defer(); firebaseObj.authWithPassword({ email : email, password : password }, function(error, data) { if (error === null) { // user authenticated with Firebase authUser = { status: true, data: data }; deferred.resolve(authUser); $.jStorage.set(userStorageKey, authUser); } else { deferred.resolve({ status: false, error: error }); } }); return deferred.promise; }, changeUserPass: function(email, password, newPassword){ firebaseObj.changePassword({ email : email, oldPassword : password, newPassword : newPassword }, function(error) { if (error === null) { console.log("Password changed successfully"); } else { console.log("Error changing password:", error); } }); }, resetAndSendPassword: function(email){ firebaseObj.resetPassword({ email : email }, function(error) { if (error === null) { console.log("Password reset email sent successfully"); } else { console.log("Error sending password reset email:", error); } }); }, deleteUser: function(email, password){ firebaseObj.removeUser({ email : email, password : password }, function(error) { if (error === null) { console.log("User removed successfully"); } else { console.log("Error removing user:", error); } }); }, getUserState:function(){ //console.info(Date(authUser.data.expires)); console.info(authUser); if(authUser.data){ var data = firebaseObj.getAuth(); authUser = { status: data ? true : false, data: (data == null) ? {} : data }; $.jStorage.set(userStorageKey, authUser); } return authUser.status; }, logOut: function(){ $firebaseAuth(firebaseObj).$unauth(); $.jStorage.deleteKey(userStorageKey); $rootScope.$userState = this.getUserState(); }, getAuthUser: function(){ return authUser.data; } }; }]) .directive('signInForm', [ '$rootScope', 'AuthService', '$location', function( $rootScope, AuthService, $location){ return{ restrict: 'A', templateUrl: 'auth/templates/sign-in.tpl.html', link: function(scope, element, attrs){ scope.userEmail = ''; scope.userPassword = ''; scope.userState = AuthService.getUserState(); scope.signInUserByEmail = function(){ AuthService.signInUserByEmail(scope.userEmail, scope.userPassword) .then(function(response){ scope.userState = AuthService.getUserState(); if(scope.userState) { alert('You are logged in'); $location.path('profile'); } else{ alert('Incorrect user email or password'); } }); }; } }; }]) .directive('signUpForm', [ '$rootScope', 'AuthService', '$location', function( $rootScope, AuthService, $location){ return{ restrict: 'A', templateUrl: 'auth/templates/sign-up.tpl.html', link: function(scope, element, attrs){ scope.userEmail = ''; scope.userPassword = ''; scope.facebookEnabled = false; scope.userState = AuthService.getUserState(); scope.isRegistered = false; scope.createUser = function(){ AuthService.createUserByEmail(scope.userEmail, scope.userPassword) .then(function(response){ if(response.status){ alert("Congratulations! You've successfully signed up. You can authorize"); scope.isRegistered = true; } else{ alert(response.error); } }); }; } }; }]) ; 

サービス（AuthService）と2つのディレクティブ（ログインフォームの1つはsignInForm、登録の2つはsignUpForm）の3つの部分で構成されます。 ディレクティブは特に重要ではありません。すべてが起こるサービスに興味があります。 サービス内には多くの機能があります。

• createUserByEmail-電子メールを使用して新しいユーザーを作成します
• signInByEmail-メールによるユーザー認証
• changeUserPass-パスワードを変更するための関数
• resetAndSendPasswordはパスワードを変更するための関数でもありますが、古いパスワードがリセットされ、新しいパスワードがユーザーに送信される点が異なります
• deleteUser-ユーザーの削除
• getUserState-ユーザーが許可されているかどうかを確認し、ステータスを返す関数
• logOutはログアウトです（キャップ​​に感謝）
• getAuthUser-許可されたユーザーのデータを返します。

ディレクティブでは、承認とユーザー登録の簡単な実装を見ることができます。

また、コードを見ると、jStorageを使用して許可ユーザーに関するデータを保存することにしたことがわかります。 彼が選択した理由は、それがシンプルであり、さまざまなブラウザー（IE6でも）で非常にサポートされているためです。

実際、Firebaseを使用してユーザーを承認/登録するために必要なのはこれだけです。 ソーシャルネットワーク（Google、Facebook、Twitter、GitHub）を使用して承認/登録を非常に簡単に追加することもできます。これは、Firebase Webサイトの管理ページに移動し、いくつかのチェックボックスをオンにして、アプリケーションのキーを指定するだけです。

もう何を書くべきか分からないので、コメントであなたの質問に答えたいです。 また、アドバイスや提案も非常にうれしく思います。