使用Onsen UI将您的Cordova应用程序进一步

本教程在第一部分构建，在该部分中，我们使用Onsen UI创建了用于登录和注册页面的用户界面。 现在，我们将使用AngularJS和Firebase作为后端添加功能。 完整的源代码可在GitHub上找到。

>

密钥概念：

• 本教程演示了Onsen UI如何与Firebase结合使用，启用有效的移动应用程序开发，专门创建功能性用户身份验证。 AngularJS增强了交互性和响应能力。 为输入验证和Firebase身份验证提供了分步说明，包括firebase设置，实例创建和
>用于用户身份验证。 成功的身份验证将用户重定向到主页。
• FirebaseSimpleLogin教程涵盖了基于Firebase的用户注册，包括电子邮件/密码验证，使用
>的用户创建以及在成功注册后重定向到登录页面。 错误处理包括无效输入的模态弹出窗口。
• auth.createUser

入门：

克隆教程的源代码并安装依赖项：>

>在

上访问该应用程序或使用Android Emulator。

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 >文件。 我们将通过登录逻辑来增强它：

添加

>中的用户名和密码输入字段的指令：

> /OnsenUI--Part1/www/js/app.js

>验证消息的模态被添加到

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

    module.controller('AppController', function($scope) {
        $scope.data = [];

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

        // ... (rest of the controller)
    });

})();

>（围绕第92行）：>

ng-model登录按钮的index.html事件触发

：

<input ng-model="data.username" type="text" placeholder="Username" ... />
<input ng-model="data.password" type="password" placeholder="Password" ... />

>

index.html

> firebase Integration：

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

登记为firebase帐户并获取您的firebase URL（例如ng-click）。 在SignIn()>中包括firebase和firebase简单登录脚本

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

创建>中的firebase实例和a

实例：>

记住要在firebase Console中启用电子邮件和密码身份验证。

> https://your-firebase-app.firebaseio.comindex.html主页和注销：

<🎜>
<🎜>

创建FirebaseSimpleLogin：app.js

在

var firebaseRef = new Firebase('YOUR_FIREBASE_URL');
var auth = new FirebaseSimpleLogin(firebaseRef, function(error, user) {
    if (!error && user) {
        $scope.username = user.email;
        myNavigator.pushPage('home.html', { animation: 'slide' });
        $scope.$apply(); // Ensure Angular updates the view
    }
});

实现注册：

>在注册页面中的电子邮件和密码字段中添加指令：

home.html在

中创建

<ons-template id="home.html">
    <ons-page>
        <!-- ... content ... -->
        <ons-icon icon="ion-log-out" ng-click="logout()">Logout</ons-icon>
    </ons-page>
</ons-template>

>：

> logout app.js>

指令到注册按钮：

$scope.logout = function() {
    auth.logout();
    $scope.data = [];
    myNavigator.popPage();
    $scope.$apply(); // Ensure Angular updates the view
};

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

添加模态以进行注册验证错误，类似

结论： 该增强教程使用Onsen UI，AngularJS和Firebase提供了功能齐全的登录和注册系统。 请记住要查阅Onsen UI文档以进行进一步的组件探索。 FAQ部分已被简短省略，因为它与核心代码实施无关。

以上是使用Onsen UI将您的Cordova应用程序进一步的详细内容。更多信息请关注PHP中文网其他相关文章！