Login mit Ionischen-und material-design

Ich habe eine Ionische Projekt mit seitlichen Menü und alle.
Jetzt möchte ich hinzufügen, dass in einfacher Art und Weise und die Anmeldung Coole form, wie
http://ionicmaterial.com/
Aber das Problem, das ich sehe keine Beispiele, wie in spannendes Projekt, es wird legen Sie das login-Formular die erste und nach, dass eine Umleitung an normalen Seite.
Mein Projekt sieht wie folgt aus:

app.config(function ($stateProvider, $urlRouterProvider) {
    $stateProvider

        .state('app', {
            url: "/app",
            abstract: true,
            templateUrl: "templates/menu.html",
            controller: 'AppCtrl'
        })
        .state('app.placeslists', {
            url: "/placeslists",
            views: {
                'menuContent': {
                    templateUrl: "templates/placeslists.html",
                    controller: 'PlaceslistsCtrl'
                }
            }
        })

Wie kann ich die login-Seite mit Authentifizierung (token) ist, dass Sie zuerst geladen, und wie kann ich das material für die login-Seite einfach Weg.

Dank!!!

InformationsquelleAutor Vitaly Menchikovsky | 2015-04-18
  1. 9

    Für die Durchführung anmelden, Sie müssten diese Dinge

    1. Ein Login-Status
    2. Ein Login-Template
    3. Logik, um Ihre token

    JS:

     $stateProvider
            .state('Login', {
                url: "/Login",
                templateUrl: "app/templates/Login.html"
            })

    HTML:

    <ion-view view-title="Login" align-title="left">
    <ion-content style="background: url(img/login.jpg) center; background-size: cover;">
        <div class="hero no-header flat">
            <div class="content">
                <div class="app-icon"></div>
                <h1>Thronester</h1>
            </div>
        </div>
        <div class="list">
            <ion-md-input placeholder="Username" highlight-color="balanced" type="text" ng-model='user.username'></ion-md-input>
            <ion-md-input placeholder="Password" highlight-color="energized" type="password" ng-model='user.password'></ion-md-input>
        </div>
        <div class="padding">
            <button ui-sref="app.profile" class="button button-full button-assertive ink">Login</button>
        </div>
        <div class="button-bar social-login">
            <button class="button button-small button-border icon-left ion-social-google button-assertive-900" ng-click='DoLogin(user)'>Login</button>
            
        </div>
    </ion-content>
</ion-view>

    In Ihrer Funktion DoLogin, würden Sie brauchen, zu behandeln, schlagen Sie Ihre API für login, und erhalten Sie Ihre token. Würden Sie speichern diese token. Ich benutze SQLlite-plugin zum speichern der token in einem token-Tabelle. Es gibt verschiedene Möglichkeiten, die Speicherung von token.

    1. SQLite-plugin
    2. Lokale Speicherung
    3. WebSQL
    4. Datei ngCordova

    und viele mehr, kann ich Ihnen ein code-snippet mit SQLlite.

    JS:

    var DB = window.sqlitePlugin.openDatabase({name: "Token.db", location: 1})

var CreateQuery = 'CREATE TABLE IF NOT EXISTS Token (id integer primary key, access_token TEXT)'

var InsertQuery = 'INSERT INTO Token (access_token) VALUES (?)'
var selectQuery = 'SELECT access_token FROM Token WHERE id = 1'


var Token = //the token you get from your server, make a $http resquest and get it

    
    
$cordovaSQLite.execute( DB,CreateQuery ).then(function () {
     //table created  
})


$cordovaSQLite.execute(DB, InsertQuery, [Token]).then(function(){
 //token inserted into table
})


$cordovaSQLite.execute(DB, selectQuery).then(function (res) {
      //getting token from table
      $rootScope.TokenFromTable =  res.rows.item(0).access_token;
  })

    Nicht nur das kopieren und einfügen aus dem code (es wird nicht funktionieren), würden Sie brauchen, bauen Sie die Logik auf, wo dieser code in welcher Reihenfolge.

    Nachdem Sie erhalten haben, das authToken, Sie können es als eine gemeinsame Kopfzeile für alle $http-Anforderungen, und wenn der Benutzer klickt auf logout, einfach die Tabelle löschen, oder löschen Sie die DB. ( gehen durch die blogs im link)

    InformationsquelleAutor Karan Kumar
  2. 1

    können Sie neue login-Zustand in app.js die Last login.html und controller und laden Sie es per defalut wie:

    .state('login', {
    url: '/login',
    templateUrl: 'templates/login.html',
    controller: 'LoginCtrl'
    })

    //wenn keiner der oben genannten Staaten sind aufeinander abgestimmt, so verwenden Sie dies als fallback
    $urlRouterProvider.andernfalls('/login');

    und im login-controller, wenn Sie sich erfolgreich anmelden, dann können Sie leiten es an jeder Seite mit $Status.go('app.placeslists'); geladen werden, die regulären Seiten.

    • können Sie bitte Beispiele bewiesen, wie material-design zu tun, wie login-Seite mit dieser Benutzeroberfläche?
    InformationsquelleAutor Waqas Khan
  3. 1

    Fand ich am Ende alle info mit demos
    finden Sie auch in:
    https://github.com/zachsoft/Ionic-Material

    InformationsquelleAutor Vitaly Menchikovsky
Schreibe einen Kommentar