使用Onsen UI將您的Cordova應用程序進一步

本教程在第一部分構建，在該部分中，我們使用Onsen UI創建了用於登錄和註冊頁面的用戶界面。 現在，我們將使用AngularJS和Firebase作為後端添加功能。 完整的源代碼可在GitHub上找到。

>

密鑰概念：

• 本教程演示了Onsen UI如何與Firebase結合使用，啟用有效的移動應用程序開發，專門創建功能性用戶身份驗證。 AngularJS增強了交互性和響應能力。 為輸入驗證和Firebase身份驗證提供了分步說明，包括firebase設置，實例創建和
>用於用戶身份驗證。 成功的身份驗證將用戶重定向到主頁。
• FirebaseSimpleLogin教程涵蓋了基於Firebase的用戶註冊，包括電子郵件/密碼驗證，使用
>的用戶創建以及在成功註冊後重定向到登錄頁面。 錯誤處理包括無效輸入的模態彈出窗口。
• auth.createUser

入門：

克隆教程的源代碼並安裝依賴項：>

>在

上訪問該應用程序或使用Android Emulator。

<code class="language-bash">git clone https://github.com/sitepoint-examples/OnsenUI--Part1
cd OnsenUI--Part1
npm install
npm install -g gulp
gulp serve</code>

>實現登錄： http://localhost:8901/index.html >文件。 我們將通過登錄邏輯來增強它：

添加

>中的用戶名和密碼輸入字段的指令：

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

>驗證消息的模態被添加到

<code class="language-javascript">(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)
    });

})();</code>

>（圍繞第92行）：>

ng-model登錄按鈕的index.html事件觸發

：

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

>

index.html

> firebase Integration：

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

登記為firebase帳戶並獲取您的firebase URL（例如ng-click）。 在SignIn()>中包括firebase和firebase簡單登錄腳本

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

創建>中的firebase實例和a

實例：>

記住要在firebase Console中啟用電子郵件和密碼身份驗證。

> https://your-firebase-app.firebaseio.comindex.html主頁和註銷：

<code class="language-html">
</code>

創建FirebaseSimpleLogin：app.js

在

<code class="language-javascript">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
    }
});</code>

實現註冊：

>在註冊頁面中的電子郵件和密碼字段中添加指令：

home.html在

中創建

<code class="language-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></code>

>：

> logout app.js>

指令到註冊按鈕：

<code class="language-javascript">$scope.logout = function() {
    auth.logout();
    $scope.data = [];
    myNavigator.popPage();
    $scope.$apply(); // Ensure Angular updates the view
};</code>

<code class="language-bash">git clone https://github.com/sitepoint-examples/OnsenUI--Part1
cd OnsenUI--Part1
npm install
npm install -g gulp
gulp serve</code>

添加模態以進行註冊驗證錯誤，類似

結論： 該增強教程使用Onsen UI，AngularJS和Firebase提供了功能齊全的登錄和註冊系統。 請記住要查閱Onsen UI文檔以進行進一步的組件探索。 FAQ部分已被簡短省略，因為它與核心代碼實施無關。

以上是使用Onsen UI將您的Cordova應用程序進一步的詳細內容。更多資訊請關注PHP中文網其他相關文章！