angularjs - IONIC中的两步认证

首先，我不是专业人士，只是从IONIC框架开始。

我正在尝试完成身份验证，如上图所示。

我想做什么？

首先，在加载我的应用程序时，它会检查用户是否已登录。如果用户已登录，则他/她将被重定向到仪表板。

如果 用户未登录 ，则系统会检查用户是否在等待验证码。

如果用户正在等待验证码，则会显示输入验证表格。

否则，用户将被引导至INPUT用户名表格。

到目前为止我做了什么？

我为用户名输入，验证码和仪表板创建了3个控制器。我的服务处理与我的服务器的后端通信，并在本地存储上存储身份验证密钥和必要的用户凭据。
我在我的REST API中使用PHP SlimFramework。

我的问题

当离子应用程序加载时，如何检查用户是否已登录或正在等待验证码。

如何检查用户是否已登录

您可以通过检查本地存储中是否存在令牌密钥来检查用户是否已登录，如下所示：

    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;}
    };

这是用户身份验证服务的典型示例。在加载应用程序时，您检查授权令牌是否存在，如果不存在则表示用户已注销。

您还可以应用类似的技术来检查用户是否在等待验证码。

验证码技术

在为特定用户发送验证码后，您的数据库中可能会有一个字段设置为false。
用户获取代码并将其输入表单后，会根据数据库检查代码，如果有效，则会将verified字段标记为true。

您可能想要查看非常好的tutorial，了解如何在Ionic应用中处理身份验证。

如果您使用的是Ionic 2，可以查看全面的tutorial。 Auth0也很好地处理2-factor Authentication 。

我希望这有帮助！干杯！

IONIC中的两步认证

1 个答案: