IONICの2ステップ認証

Question

Authentication Flow Chart

最初は私はプロではなく、ちょうどIONICフレームワークから始まりました。

私は上記の画像のように認証を達成しようとしています。

私は何をしようとしていますか？

まず、私のアプリを読み込む際に、ユーザがログインしているかどうかを確認します。ユーザーがログインしている場合、Dashboardにリダイレクトされます。 ユーザーがログインしていない

場合ユーザーは認証コードを待っている場合、システムがチェックします。

のユーザーがを待っている場合、INPUT確認フォームが表示されます。

それ以外の場合、ユーザーはINPUT username formに転送されます。

これまで行ってきたことはありますか？

ユーザー名入力、確認コード、ダッシュボード用に3つのコントローラを作成しました。私のサービスは、サーバーとのバックエンド通信を処理し、認証キーと必要なユーザー資格情報をローカルストレージに保存します。
私はREST APIにPHP SlimFrameworkを使用しています。

私の質問

1. どのようにユーザーがログインしているか検証コード、イオンアプリの負荷を待っているかどうかをチェックします。
   

Answer 1

ユーザーがログインしている場合は、トークンキーがそうのようなローカルストレージに存在するかどうかをチェックすることによって確認することができますどのようにユーザーがログインしている場合

チェック：

 
    angular.module('starter') 

    .service('AuthService', function($q, $http, USER_ROLES) { 
     var LOCAL_TOKEN_KEY = 'yourTokenKey'; 
     var username = ''; 
     var isAuthenticated = false; 
     var role = ''; 
     var authToken; 

    function loadUserCredentials() { 
     var token = window.localStorage.getItem(LOCAL_TOKEN_KEY); 
     if (token) { 
      useCredentials(token); 
     } 
    } 

    function storeUserCredentials(token) { 
     window.localStorage.setItem(LOCAL_TOKEN_KEY, token); 
     useCredentials(token); 
    } 

    function useCredentials(token) { 
     username = token.split('.')[0]; 
     isAuthenticated = true; 
     authToken = token; 

     if (username == 'admin') { 
      role = USER_ROLES.admin 
     } 
     if (username == 'user') { 
      role = USER_ROLES.public 
     } 

     // Set the token as header for your requests! 
     $http.defaults.headers.common['X-Auth-Token'] = token; 
    } 

    function destroyUserCredentials() { 
     authToken = undefined; 
     username = ''; 
     isAuthenticated = false; 
     $http.defaults.headers.common['X-Auth-Token'] = undefined; 
     window.localStorage.removeItem(LOCAL_TOKEN_KEY); 
    } 

    var login = function(name, pw) { 
    return $q(function(resolve, reject) { 
     if ((name == 'admin' && pw == '1') || (name == 'user' && pw == '1')) { 
     // Make a request and receive your auth token from your server 
     storeUserCredentials(name + '.yourServerToken'); 
     resolve('Login success.'); 
     } else { 
     reject('Login Failed.'); 
     } 
    }); 
    }; 

    var logout = function() { 
     destroyUserCredentials(); 
    }; 

    var isAuthorized = function(authorizedRoles) { 
     if (!angular.isArray(authorizedRoles)) { 
      authorizedRoles = [authorizedRoles]; 
     } 
     return (isAuthenticated && authorizedRoles.indexOf(role) !== -1); 
    }; 

     loadUserCredentials(); 

     return { 
     login: login, 
     logout: logout, 
     isAuthorized: isAuthorized, 
     isAuthenticated: function() {return isAuthenticated;}, 
     username: function() {return username;}, 
     role: function() {return role;} 
    }; 

これは、ユーザー認証サービスの典型的な例です。ここでは、アプリケーションの読み込み時に、認可されたトークンが存在するかどうかを確認します。そうでない場合は、ユーザーがログアウトしたことを意味します。

同様の手法を適用して、ユーザーが確認コードを待っているかどうかを確認することもできます。

検証コード技術

1. 検証コードは、特定のユーザーのために送り出された後falseに設定され、データベース内のフィールドがあるかもしれません。
2. ユーザーがコードを取得してフォームに入力すると、そのコードをデータベースと照合し、有効であればverifiedフィールドをtrueとマークします。

あなたのIonicアプリで認証を処理する方法については、この非常に良いtutorialをチェックしてください。

Ionic 2を使用している場合は、この総合tutorialを確認することができます。 Auth0も2-factor Authenticationを本当にうまく処理します。

こちらがお役に立てば幸いです。乾杯！