このチュートリアルは、最初の部分に基づいて構(gòu)築され、OnSen UIを使用してサインインおよびサインアップページのユーザーインターフェイスを作成しました。 次に、AngularJSとFireBaseをバックエンドとして使用して機(jī)能を追加します。 完全なソースコードはGitHubで利用できます

重要な概念：

このチュートリアルは、Firebaseと組み合わせて、効率的なモバイルアプリ開(kāi)発、特に機(jī)能的なユーザー認(rèn)証の作成を可能にする方法を示しています。 Angularjsは、対話性と応答性を高めます

Firebaseセットアップ、インスタンス作成、ユーザー認(rèn)証用の

など、入力検証とFirebase認(rèn)証のためにステップバイステップの命令が提供されています。 認(rèn)証を成功させると、ユーザーをホームページにリダイレクトします
• チュートリアルでは、登録が成功した後、電子メール/パスワードの検証、
を使用したユーザー作成、サインインページへのリダイレクトなど、Firebaseベースのユーザー登録をカバーしています。 エラー処理には、無(wú)効な入力のモーダルポップアップが含まれます
• FirebaseSimpleLogin
始めましょう：
• auth.createUser
チュートリアルのソースコードをクローンし、依存関係をインストールしてください：

アプリにアクセスするか、Androidエミュレータを使用してください。

サインインの実裝：

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

ファイルにはAngularJSコントローラーが含まれています。 サインインロジックで強(qiáng)化します：http://localhost:8901/index.html

：のユーザー名とパスワードの入力フィールドに

ディレクティブを追加します

/OnsenUI--Part1/www/js/app.js検証メッセージのモーダルが

（92行目の周り）に追加されます：

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

})();

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統(tǒng)合：

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

ng-clickFireBaseアカウントに登録し、FireBase URLを取得します（例：SignIn()）。 FirebaseとFirebaseの簡(jiǎn)単なログインスクリプトを

：

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

に含める

FireBaseインスタンスとインスタンスを作成します：

：

https://your-firebase-app.firebaseio.com index.html FireBaseコンソールで電子メールとパスワードの認(rèn)証を有効にすることを忘れないでください。

<??>
<??>

ホームページとログアウト：

FirebaseSimpleLogin app.jscreate

：

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

関數(shù)を：に追加します

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

：で関數(shù)を作成します

サインアップボタンにng-modelディレクティブを追加します：

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

サインインモーダルと同様のサインアップ検証エラーのモーダルを追加します。

結(jié)論：

この拡張されたチュートリアルは、Onsen UI、AngularJS、およびFirebaseを使用した完全に機(jī)能的なサインインおよびサインアップシステムを提供します。 さらなるコンポーネント探索については、Onsen UIドキュメントを參照してください。 FAQSセクションは、コアコードの実裝とはほとんど関係のないため、簡(jiǎn)潔に省略されています。

以上がOnsen UIでCordovaアプリをさらに進(jìn)めますの詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國(guó)語(yǔ) Web サイトの他の関連記事を參照してください。