Question

我正在使用Ionic 2 + Django rest API构建一个小应用程序。我希望将用户凭据安全地存储在手机的存储空间中，因此使用cordova-plugin-secure-storage。

当我在手机（iPhone）上运行应用程序时，出现此错误： plugin_not_installed 。（请参阅Login.html {{ status_storage }}）

有谁能请我提供一些指导我做错了什么？我对Ionic 2很新，所以任何线索都会非常感激！

提前谢谢。

的package.json：

{
  "name": "myApp",
  "version": "0.0.1",
  "author": "Ionic Framework",
  "homepage": "http://ionicframework.com/",
  "private": true,
  "scripts": {
    "clean": "ionic-app-scripts clean",
    "build": "ionic-app-scripts build",
    "lint": "ionic-app-scripts lint",
    "ionic:build": "ionic-app-scripts build",
    "ionic:serve": "ionic-app-scripts serve"
  },
  "dependencies": {
    "@angular/common": "4.1.3",
    "@angular/compiler": "4.1.3",
    "@angular/compiler-cli": "4.1.3",
    "@angular/core": "4.1.3",
    "@angular/forms": "4.1.3",
    "@angular/http": "4.1.3",
    "@angular/platform-browser": "4.1.3",
    "@angular/platform-browser-dynamic": "4.1.3",
    "@ionic-native/core": "3.12.1",
    "@ionic-native/secure-storage": "^4.1.0",
    "@ionic-native/splash-screen": "3.12.1",
    "@ionic-native/status-bar": "3.12.1",
    "@ionic/storage": "2.0.1",
    "cordova-browser": "^4.1.0",
    "cordova-plugin-console": "^1.0.5",
    "cordova-plugin-device": "^1.1.4",
    "cordova-plugin-secure-storage": "^2.6.8",
    "cordova-plugin-splashscreen": "^4.0.3",
    "cordova-plugin-statusbar": "^2.2.2",
    "cordova-plugin-whitelist": "^1.3.1",
    "ionic-angular": "3.6.0",
    "ionic-native": "^2.9.0",
    "ionic-plugin-keyboard": "^2.2.1",
    "ionicons": "3.0.0",
    "rxjs": "5.4.0",
    "sw-toolbox": "3.6.0",
    "zone.js": "0.8.12"
  },
  "devDependencies": {
    "@ionic/app-scripts": "2.1.3",
    "@ionic/cli-plugin-cordova": "1.5.0",
    "@ionic/cli-plugin-ionic-angular": "1.4.0",
    "ionic": "3.6.0",
    "typescript": "2.3.4"
  },
  "description": "An Ionic project",
  "cordova": {
    "plugins": {
      "cordova-plugin-console": {},
      "cordova-plugin-device": {},
      "cordova-plugin-splashscreen": {},
      "cordova-plugin-statusbar": {},
      "cordova-plugin-whitelist": {},
      "ionic-plugin-keyboard": {},
      "cordova-plugin-secure-storage": {}
    },
    "platforms": [
      "browser"
    ]
  }
}

Login.ts

import { Component } from '@angular/core';
import { NavController, Platform } from 'ionic-angular';

import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { ApiServiceProvider } from '../../providers/api-service/api-service';
import { SecureStorage } from '@ionic-native/secure-storage';


import { LoginPage } from '../login/login';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html',
  providers: [ApiServiceProvider, SecureStorage]
})
export class HomePage {
  public detect_platform: any;
  public status_storage: any;

  constructor(public navCtrl: NavController, public APIService: ApiServiceProvider, platform: Platform, private secureStorage: SecureStorage) {

    if (platform.is('cordova')) {
      this.detect_platform = 'I am on a Cardova platform'

      platform.ready().then(() => {
        this.secureStorage = new SecureStorage();
        this.secureStorage.create('myapp').then(
          () => {
            console.log('Storage is ready!');
            this.status_storage = 'I have created a storage!';
          }, error => this.status_storage = 'I have NOT created a storage!: ' + error
        )
      });
    } else {
      this.detect_platform = 'I am NOT on a Cardova platform'
    }
  }
}

的login.html

<ion-header>
  <ion-navbar>
    <ion-title>Home</ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <h2>Welcome to the first page!</h2>

<p> {{ detect_platform }} </p>

<p> {{ status_storage }} </p>

<div style="text-align: center">
  <button ion-button (click)="signIn()">Log ind</button>
</div>

</ion-content>

app.module.ts：

import { NgModule, ErrorHandler } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpModule } from '@angular/http';
import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular';
import { MyApp } from './app.component';

import { AboutPage } from '../pages/about/about';
import { ContactPage } from '../pages/contact/contact';
import { HomePage } from '../pages/home/home';
import { TabsPage } from '../pages/tabs/tabs';

import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';
import { ApiServiceProvider } from '../providers/api-service/api-service';
import { LoginPage } from '../pages/login/login';
import { LoginProvider } from '../providers/login/login';
import { SecureStorage } from '@ionic-native/secure-storage';

@NgModule({
  declarations: [
    MyApp,
    AboutPage,
    ContactPage,
    HomePage,
    TabsPage,
    LoginPage
  ],
  imports: [
    BrowserModule,
    HttpModule,
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    AboutPage,
    ContactPage,
    HomePage,
    TabsPage,
    LoginPage
  ],
  providers: [
    StatusBar,
    SplashScreen,
    {provide: ErrorHandler, useClass: IonicErrorHandler},
    ApiServiceProvider,
    SecureStorage,
    LoginProvider
  ]
})
export class AppModule {}

我使用以下示例作为灵感：

https://github.com/cfjedimaster/Cordova-Examples/tree/master/securestorage_ionicnative

https://ionicframework.com/docs/native/secure-storage/

Ionic 2安全存储 - ＆＃39; plugin_not_installed＆＃39;

0 个答案: