通过Onsen UI使您的Cordova应用程序更进一步

在本教程的第一部分中 ，我们研究了如何使用Onsen UI开始进行移动应用程序开发，设计用户登录和注册页面。 在本教程中，我们将使这些页面正常运行。 我们将利用Firebase作为该应用程序的后端。 在Onsen UI中，我们可以同时使用jQuery和AngularJS进行开发。 在本教程中，我们将使用AngularJS。

该教程的源代码可在GitHub上获得 。

入门

下载或克隆第一个教程源代码。 安装所有必需的依赖项，如下所示：

git clone https://github.com/sitepoint-examples/OnsenUI--Part1
cd OnsenUI--Part1
npm install
npm install -g gulp
gulp serve

将浏览器指向http://localhost:8901/index.html ，您应该会看到我们在第一个教程中设计的应用程序。 您还可以像在第一个教程中一样使用android模拟器来运行该应用程序。

实施登录

让我们开始为应用程序定义一个控制器。 如果打开/OnsenUI--Part1/www/js/app.js您应该看到已经定义了一个控制器。

(function() {
    'use strict';
    var module = angular.module('app', ['onsen']);

    module.controller('AppController', function($scope) {
      // more to come here
    });

})();

首先，我们将验证用户名和密码是否为空值。 如果验证存在任何问题，我们将显示一个带有验证消息的模式窗口。 否则，我们将针对Firebase数据库进行身份验证。

让我们在控制器AppController定义一个称为SignIn的方法，如下所示：

$scope.data = [];

$scope.SignIn = function() {
    var user = $scope.data.username;
    var pass = $scope.data.password;
    if (user && pass) {
        // success logic
    } else {
        // failure logic
    }
};

添加ngModel指令中的用户名和密码输入文本框index.html如下图所示：

<input ng-model="data.username" type="text" placeholder="Username" class="text-input text-input--transparent" style="margin-top:8px; width: 100%;" />
<input ng-model="data.password" type="password" placeholder="Password" class="text-input text-input--transparent" style="margin-top:8px; width: 100%;" />

接下来，我们将使用Onsen UI的ons-modal组件显示验证弹出窗口。 将以下html代码添加到登录ons-page （应该在第92行附近）。

<ons-modal var="modal">
    <br>
    <br>Invalid Username or Password.
    <br>
</ons-modal>

现在，将模式显示代码添加到SignIn的失败逻辑中，替换// failure logic注释：

modal.show();

将模式隐藏代码添加到我们刚刚添加的HTML的ng-click事件中，如下所示：

<ons-modal var="modal" ng-click="modal.hide()">
    <br>
    <br>Invalid Username or Password.
    <br>
</ons-modal>

将ngClick指令添加到“登录”按钮，如下所示：

<ons-button id="btnSignIn" modifier="large" ng-click="SignIn()">
    SignIn
</ons-button>

启动服务器，然后使用空的用户名或密码单击登录按钮。 将会出现模态验证消息。 单击弹出窗口中的任意位置，它将消失。

这是上述代码的演示示例。

现在，让我们针对Firebase验证用户名和密码。 要开始使用Firebase，您需要注册一个免费帐户。 一旦注册并登录，您将获得一个firebase url，在我的情况下是：

https://burning-fire-1723.firebaseio.com/

在index.html包括以下脚本：

<script type='text/javascript' src='https://cdn.firebase.com/js/client/1.0.17/firebase.js'></script>
<script type='text/javascript' src='https://cdn.firebase.com/js/simple-login/1.6.1/firebase-simple-login.js'></script>

首先，我们需要使用Firebase网址创建一个Firebase实例。 然后使用此FirebaseSimpleLogin实例创建一个FirebaseSimpleLogin实例。 将此代码放在app.js的module.controller定义之后：

var firebaseRef = new Firebase('https://burning-fire-1723.firebaseio.com');

var auth = new FirebaseSimpleLogin(firebaseRef, function(error, user) {
    if (!error) {
        if (user) {
            // On success authentication
            console.log(user);
        }
    }
});

在SignIn函数内部，我们将验证用户名和密码，如下所示，将当前函数替换为以下代码：

$scope.SignIn = function() {
    var user = $scope.data.username;
    var pass = $scope.data.password;
    if (user && pass) {
        // success logic
        auth.login('password', {
            email: user,
            password: pass
        });
    } else {
        // failure logic
        modal.show();
    }
};

我们已使用auth.login针对Firebase数据库对用户名和密码进行身份验证。 身份验证成功后，用户将登录。

为了启用身份验证过程，请首先登录Firebase并打开您当前正在使用的应用程序。 在左侧菜单中，点击Login & Auth 。 在“ Email & Password标签下，选中“ Enable Email & Password Authentication 。

使用用户名和密码将新用户添加到firebase数据库。 现在，运行该应用程序，然后尝试使用新的用户名和密码登录。 检查浏览器控制台，该控制台将使用户登录成功的用户身份验证。

这是上述代码的演示示例。 尝试使用用户名sam@sam.com和密码sam登录。

接下来，成功登录用户后，我们会将用户重定向到home.html 。 使用以下代码创建一个名为home.html的新文件。

<ons-template id="home.html">
    <ons-page>
        <ons-toolbar>

            <div class="center">Welcome</div>
            <div class="right">

                <ons-icon icon="ion-log-out" size="40px" title="Logout" style="cursor:pointer;" ng-click="logout()"></ons-icon>

            </div>
        </ons-toolbar>

        <div style="text-align: center">
            <br />
            <ons-page>

                <p style="padding-top: 100px; color: #999; text-align: center">Welcome Home {{username}}!!</p>

            </ons-page>
        </div>
    </ons-page>
</ons-template>

添加一个名为logout的新方法，如下所示：

$scope.logout = function() {
    auth.logout();         // logging out the firebase
    $scope.data = [];      // clearing user data
    myNavigator.popPage(); // redirecting to sign in page
};

现在修改FirebaseSimpleLogin回调，如下所示：

var auth = new FirebaseSimpleLogin(firebaseRef, function(error, user) {
    if (!error) {
        if (user) {
            $scope.username = user.email;
            myNavigator.pushPage('home.html', {
                animation: 'slide'
            });
        }
    }
});

我们使用ons-navigator进行页面导航。 myNavigator.pushPage用于导航到home.html页面。

这是上述代码的演示示例。

实施注册

我们还将使用firebase实现注册功能。 在注册页面中，我们目前有三个输入字段用于注册。 我们将仅使用电子邮件和密码，因为这是Firebase用户注册所需的全部。

首先，将ngModel指令添加到两个字段中，如下所示：

<ons-list-item>
    <input type="text" placeholder="Email Address" ng-model="reg.email" class="text-input text-input--transparent" style="margin-top:58px; width: 100%;">
</ons-list-item>

<ons-list-item>
    <input type="text" ng-model="reg.pass" placeholder="Password" class="text-input text-input--transparent" style="margin-top:8px; width: 100%;">
</ons-list-item>

在AppController创建一个SignUp方法，该方法将验证电子邮件和密码是否为空值。 使用auth.create方法来注册新用户，如下所示：

$scope.reg = [];
$scope.SignUp = function() {
    var email = $scope.reg.email;
    var password = $scope.reg.pass;
    auth.createUser(email, password, function(error, user) {
        if (!error) {
            myNavigator.popPage();
        } else {
            alert('error');
        }
    });
};

如下所示，将ngClick指令添加到“注册”按钮：

<ons-button modifier="large" ng-click="SignUp()">
    Sign Up
</ons-button>

在用户未输入电子邮件或密码的情况下，向“注册”页面添加新的模式。 外观如下：

<ons-modal ng-click="modal.hide()" var="modal">
    <br>
    <br>Enter Email Address and Password.
    <br>
</ons-modal>

修改注册功能，如下所示：

$scope.SignUp = function() {
    var email = $scope.reg.email;
    var password = $scope.reg.pass;
    if (email && password) {
        auth.createUser(email, password, function(error, user) {
            if (!error) {
                myNavigator.popPage();
            } else {
                alert('error');
            }
        });
    } else {
        modal.show();   // to show validation pop up message
    }
};

现在重新启动应用程序，然后尝试注册。 成功注册后，它将导航到“登录”页面。 尝试使用新凭据登录，您应该已经登录。

以下是上述登录和注册功能的演示。

结论

在本教程中，我们使用Onsen UI框架和Firebase作为后端实现了登录和注册功能。

看一下Onsen UI提供的其他组件数量。 有关Onsen UI框架的深入研究，请参阅官方文档 。

请在下面的评论中告诉我们您的想法！

From: https://www.sitepoint.com/taking-cordova-app-onsen-ui/