2

私はsenchatouchのネイティブアプリに取り組んでいます。初めて表示されるログインビューを作成したい。それを解決する方法の提案。

Activation.js

Ext.define('FOS.view.Activation', {
    extend: 'Ext.form.Panel',
    alias: "widget.activationview",
    requires: ['Ext.form.FieldSet', 'Ext.form.Password', 'Ext.Label', 'Ext.Img', 'Ext.util.DelayedTask'],
    config: {
        title: 'Login',
        items: [

            {
                xtype: 'label',
                html: 'Activation failed. Please enter the correct credentials.',
                itemId: 'activationFailedLabel',
                hidden: true,
                hideAnimation: 'fadeOut',
                showAnimation: 'fadeIn',
                style: 'color:#990000;margin:5px 0px;'
            },
            {
                xtype: 'fieldset',
                title: ' ',
                items: [
                    {
                        xtype: 'textfield',
                        placeHolder: 'Enter Agency Id',
                        itemId: 'agencyIdTextField',
                        name: 'agencyIdTextField',
            label: 'Agency Id',
                        labelWidth: '40%',
                        //required: true
                    },
                    {
                        xtype: 'textfield',
                        placeHolder: 'Enter App Id',
                        itemId: 'appIdTextField',
                        name: 'appIdTextField',
            label: 'App Id',
                        labelWidth: '40%',
                       // required: true
                    }
                ]
            },
            {
                xtype: 'button',
                itemId: 'activationButton',
                ui: 'action',
                padding: '10px',
                text: 'Activate'
            }
         ],
        listeners: [{
            delegate: '#activationButton',
            event: 'tap',
            fn: 'onActivationButtonTap'
        }]
    },
    onActivationButtonTap: function () {

        var me = this,
            agencyidField = me.down('#agencyIdTextField'),
            appidField = me.down('#appIdTextField'),
            label = me.down('#activationFailedLabel'),
            agencyid = agencyidField.getValue(),
            appid = appidField.getValue();

        label.hide();

        // Using a delayed task in order to give the hide animation above
        // time to finish before executing the next steps.
        var task = Ext.create('Ext.util.DelayedTask', function () {

            label.setHtml('');

            me.fireEvent('activationCommand', me, agencyid, appid);

            agencyidField.setValue('');
            appidField.setValue('');
        });

        task.delay(500);

    },
    showActivationFailedMessage: function (message) {
        var label = this.down('#activationFailedLabel');
        label.setHtml(message);
        label.show();
    }
});

Login.js

Ext.define('FOS.view.Login', {
    extend: 'Ext.form.Panel',
    alias: "widget.loginview",
    requires: ['Ext.form.FieldSet', 'Ext.form.Password', 'Ext.Label', 'Ext.Img', 'Ext.util.DelayedTask'],
    config: {
        title: 'Login',
        items: [

            {
                xtype: 'label',
                html: 'Login failed. Please enter the correct credentials.',
                itemId: 'signInFailedLabel',
                hidden: true,
                hideAnimation: 'fadeOut',
                showAnimation: 'fadeIn',
                style: 'color:#990000;margin:5px 0px;'
            },
            {
                xtype: 'fieldset',
                title: ' ',
                items: [
                    {
                        xtype: 'textfield',
                        placeHolder: 'Enter UserName',
                        itemId: 'userNameTextField',
                        name: 'userNameTextField',
            label: 'UserName',
                        labelWidth: '40%',
                        //required: true
                    },
                    {
                        xtype: 'passwordfield',
                        placeHolder: 'Enter Password',
                        itemId: 'passwordTextField',
                        name: 'passwordTextField',
            label: 'Password',
                        labelWidth: '40%',
                       // required: true
                    }
                ]
            },
            {
                xtype: 'button',
                itemId: 'logInButton',
                ui: 'action',
                padding: '10px',
                text: 'Log In'
            }
         ],
        listeners: [{
            delegate: '#logInButton',
            event: 'tap',
            fn: 'onLogInButtonTap'
        }]
    },
    onLogInButtonTap: function () {

        var me = this,
            usernameField = me.down('#userNameTextField'),
            passwordField = me.down('#passwordTextField'),
            label = me.down('#signInFailedLabel'),
            username = usernameField.getValue(),
            password = passwordField.getValue();

        label.hide();

        // Using a delayed task in order to give the hide animation above
        // time to finish before executing the next steps.
        var task = Ext.create('Ext.util.DelayedTask', function () {

            label.setHtml('');

            me.fireEvent('signInCommand', me, username, password);

            usernameField.setValue('');
            passwordField.setValue('');
        });

        task.delay(500);

    },
    showSignInFailedMessage: function (message) {
        var label = this.down('#signInFailedLabel');
        label.setHtml(message);
        label.show();
    }
});

MainMenu.js

Ext.define('FOS.view.MainMenu', {
    extend: 'Ext.Panel',
    requires: ['Ext.TitleBar'],
    alias: 'widget.mainmenuview',
    config: {
        layout: {
            type: 'fit'
        },
        items: [{
            xtype: 'titlebar',
            title: 'Main Menu',
            docked: 'top',
            items: [
                {
                    xtype: 'button',
                    text: 'Log Off',
                    itemId: 'logOffButton',
                    align: 'right'
                }
            ]
        }],
        listeners: [{
            delegate: '#logOffButton',
            event: 'tap',
            fn: 'onLogOffButtonTap'
        }]
    },
    onLogOffButtonTap: function () {
        this.fireEvent('onSignOffCommand');
    }
});

コントローラ

Ext.define('FOS.controller.Login', {
    extend: 'Ext.app.Controller',

   config: {
        refs: {
            loginView: 'loginview',
            mainMenuView: 'mainmenuview',
        activationView: 'activationview'
        },
        control: {
        activationView: {
                activationCommand: 'onActivationCommand'
            },
               loginView: {
                   signInCommand: 'onSignInCommand'
            },
            mainMenuView: {
                onSignOffCommand: 'onSignOffCommand'
            }
        }
    },

    // Session token

   // sessionToken: null,

    // Transitions
    getSlideLeftTransition: function () {
        return { type: 'slide', direction: 'left' };
    },

    getSlideRightTransition: function () {
        return { type: 'slide', direction: 'right' };
    },

onActivationCommand: function (view, agencyid, appid) {

        console.log('AgencyId: ' + agencyid + '\n' + 'AppId: ' + appid);

        var me = this,
            activationView = me.getActivationView();

        if (agencyid.length === 0 || appid.length === 0) {

            activationView.showActivationFailedMessage('Please enter your Agency Id and App Id.');
            return;
        }

        activationView.setMasked({
            xtype: 'loadmask',
            message: 'Activating...'
        });

            me.activationSuccess();     //Just simulating success.

    },

    activationSuccess: function () {
        console.log('Activated.');
        var activationView = this.getActivationView();
        loginView = this.getLoginView();
        activationView.setMasked(false);

        Ext.Viewport.animateActiveItem(loginView, this.getSlideLeftTransition());
    },

    onSignInCommand: function (view, username, password) {

        console.log('Username: ' + username + '\n' + 'Password: ' + password);

        var me = this,
            loginView = me.getLoginView();

        if (username.length === 0 || password.length === 0) {

            loginView.showSignInFailedMessage('Please enter your User Name and Password.');
            return;
        }

        loginView.setMasked({
            xtype: 'loadmask',
            message: 'Signing In...'
        });

      /*  Ext.Ajax.request({
            url: '../../services/login.ashx',
            method: 'post',
            params: {
                user: username,
                pwd: password
            },
            success: function (response) {

                var loginResponse = Ext.JSON.decode(response.responseText);

                if (loginResponse.success === "true") {
                    // The server will send a token that can be used throughout the app to confirm that the user is authenticated.
                    me.sessionToken = loginResponse.sessionToken;*/
                    me.signInSuccess();     //Just simulating success.
               /* } else {
                    me.singInFailure(loginResponse.message);
                }
            },
            failure: function (response) {
                me.sessionToken = null;
                me.singInFailure('Login failed. Please try again later.');
            }
        });*/
    },

    signInSuccess: function () {
        console.log('Signed in.');
        var loginView = this.getLoginView();
        mainMenuView = this.getMainMenuView();
        loginView.setMasked(false);

        Ext.Viewport.animateActiveItem(mainMenuView, this.getSlideLeftTransition());
    },
/*
    singInFailure: function (message) {
        var loginView = this.getLoginView();
        loginView.showSignInFailedMessage(message);
        loginView.setMasked(false);
    },*/

    onSignOffCommand: function () {

        var me = this;

       /* Ext.Ajax.request({
            url: '../../services/logoff.ashx',
            method: 'post',
            params: {
                sessionToken: me.sessionToken
            },
            success: function (response) {

                // TODO: You need to handle this condition.
            },
           failure: function (response) {

                // TODO: You need to handle this condition.
            }
        });*/

        Ext.Viewport.animateActiveItem(this.getLoginView(), this.getSlideRightTransition());
    }
});

app.js

//<debug>
Ext.Loader.setPath({
    'Ext': 'touch/src',
    'FOS': 'app'
});
//</debug>

Ext.application({
    controllers: ["Login"],

    name: 'FOS',

    requires: [
        'Ext.MessageBox'
    ],

    views: ['Activation','Login','MainMenu'],



    icon: {
        '57': 'resources/icons/Icon.png',
        '72': 'resources/icons/Icon~ipad.png',
        '114': 'resources/icons/Icon@2x.png',
        '144': 'resources/icons/Icon~ipad@2x.png'
    },

    isIconPrecomposed: true,

    startupImage: {
        '320x460': 'resources/startup/320x460.jpg',
        '640x920': 'resources/startup/640x920.png',
        '768x1004': 'resources/startup/768x1004.png',
        '748x1024': 'resources/startup/748x1024.png',
        '1536x2008': 'resources/startup/1536x2008.png',
        '1496x2048': 'resources/startup/1496x2048.png'
    },

    launch: function() {
        // Destroy the #appLoadingIndicator element
        Ext.fly('appLoadingIndicator').destroy();

        // Initialize the main view

    Ext.Viewport.add([
         { xtype: 'activationview'},
             { xtype: 'mainmenuview' },
         { xtype: 'loginview' }
     ]);
    },

    onUpdated: function() {
        Ext.Msg.confirm(
            "Application Update",
            "This application has just successfully been updated to the latest version. Reload now?",
            function(buttonId) {
                if (buttonId === 'yes') {
                    window.location.reload();
                }
            }
        );
    }
});

このアクティベーションビューを1回だけ表示したい。Webサービスはまだ利用できません。

4

1 に答える 1

7

基本的に、探しているのは、ほとんどの Web サイトやネイティブ アプリで利用できる、 Remember MeまたはSSO (シングル サインオン) 機能に似たものです。私自身、最近アプリの 1 つでこれが必要でした。

sencha では、HTML5 ストレージを使用できます。ユーザーが正常にログインしたら、ログイン ステータス、アクセス トークン、ユーザー ID などの特定のユーザー詳細を HTML5 データベースに保存します。最大 5MB のデータを簡単に保存できます。また、sencha は webkit などの最新の Web ブラウザーで実行されるため、その API を使用して何かを行うことができます。

要するに、アプリでユーザー ID、ログイン ステータス、アクセス トークンなどのさまざまなフィールドを持つモデルを作成しました。たとえば、次のようなモデルを持つことができます-

Ext.define('MyApp.model.Userinfo',{
    extend:'Ext.data.Model',
    config:{
        identifier: 'uuid',
        store:'MyApp.store.Userinfo',
        fields:[                 
           {name: 'id', type: 'string' },
           {name: 'userid', type: 'string' },
           {name:'login_status',type:'string'},
           {name:'access_token',type:'string'}
        ]    
    }        
});

要件に応じてフィールドの数を追加し、各フィールドに適したタイプを選択できます。ただし、モデルには一意の識別子が必要です。ST2.0 を使用identifier:'uuid'すると、ストレージに一意の識別子を割り当てることができます。

それからストアが来ます、それは次のようになります-

Ext.define('MyApp.store.Userinfo',{
   extend:'Ext.data.Store',   
   config:{
       model:'MyApp.model.Userinfo',
       autoLoaded:true,
       autoLoad: true,
       autoSave:true,
       proxy:{
           type:'localstorage',
           id:'userinfo'
       }
   }
});

最後に、ログインが成功したら、ローカルストレージにデータを追加できます-

  var userInfoData=Ext.getStore('Userinfo');                                
  userInfoData.removeAll();
  userInfoData.getProxy().clear();
  userInfoData.add({userid:'user_id_to_store',login_status:"true",access_token:'generated_access_token'});
  userInfoData.sync();

最後に、 で、app.jsこの localstorage へのエントリを確認し、アクセス トークンの信頼性を検証します。したがって、launchメソッドでは、

var userInfoData=Ext.getStore('Userinfo');              
if(null!=userInfoData.getAt(0)){
    var status = userInfoData.getAt(0).get('login_status');
    var user_id=userInfoData.getAt(0).get('userid');
    var access_token = userInfoData.getAt(0).get('access_token');   

    //validate access token, check user id and status and load your next view that comes after login    

}else{
    // if reached here, that means user is not logged in.
    // load your login view.  
}

コード全体を読んで編集できませんでした。しかし、これは私が使用しているもので、今のところ問題なく動作しています。アプリと要件に従って簡単に変更できます。

知らせ

このコードは 1 年以上前のものです。そのため、最新の ST バージョン (未テスト) では動作しない可能性があります。でも考え方は同じです。乾杯。:)

于 2013-02-01T19:27:24.813 に答える