В моем родном приложении Ionic3 я уже установил и настроил плагин уникального идентификатора устройства Ionic Native.Однако, когда я попытался войти в систему, используя мою учетную запись в социальной сети (например, Twitter), на экране появилось сообщение «Ошибка привязки к устройству».
Моя версияуникального идентификатора устройства 1.3.2 на основе моего config.xml файла.
config.xml
<?xml version='1.0' encoding='utf-8'?>
<widget id="com.codelean.quickedit" version="0.0.1" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
<name>Quickedit</name>
<description />
<author email="hi@ionicframework" href="http://ionicframework.com/">Ionic Framework Team</author>
<content src="index.html" />
<access origin="*" />
<allow-intent href="http://*/*" />
<allow-intent href="https://*/*" />
<allow-intent href="tel:*" />
<allow-intent href="sms:*" />
<allow-intent href="mailto:*" />
<allow-intent href="geo:*" />
<allow-navigation href="mobilenotes://" />
<preference name="ScrollEnabled" value="false" />
<preference name="android-minSdkVersion" value="19" />
<preference name="BackupWebStorage" value="none" />
<preference name="SplashMaintainAspectRatio" value="true" />
<preference name="FadeSplashScreenDuration" value="300" />
<preference name="SplashShowOnlyFirstTime" value="false" />
<preference name="SplashScreen" value="screen" />
<preference name="SplashScreenDelay" value="3000" />
<platform name="android">
<allow-intent href="market:*" />
<icon density="ldpi" src="resources/android/icon/drawable-ldpi-icon.png" />
<icon density="mdpi" src="resources/android/icon/drawable-mdpi-icon.png" />
<icon density="hdpi" src="resources/android/icon/drawable-hdpi-icon.png" />
<icon density="xhdpi" src="resources/android/icon/drawable-xhdpi-icon.png" />
<icon density="xxhdpi" src="resources/android/icon/drawable-xxhdpi-icon.png" />
<icon density="xxxhdpi" src="resources/android/icon/drawable-xxxhdpi-icon.png" />
<splash density="land-ldpi" src="resources/android/splash/drawable-land-ldpi-screen.png" />
<splash density="land-mdpi" src="resources/android/splash/drawable-land-mdpi-screen.png" />
<splash density="land-hdpi" src="resources/android/splash/drawable-land-hdpi-screen.png" />
<splash density="land-xhdpi" src="resources/android/splash/drawable-land-xhdpi-screen.png" />
<splash density="land-xxhdpi" src="resources/android/splash/drawable-land-xxhdpi-screen.png" />
<splash density="land-xxxhdpi" src="resources/android/splash/drawable-land-xxxhdpi-screen.png" />
<splash density="port-ldpi" src="resources/android/splash/drawable-port-ldpi-screen.png" />
<splash density="port-mdpi" src="resources/android/splash/drawable-port-mdpi-screen.png" />
<splash density="port-hdpi" src="resources/android/splash/drawable-port-hdpi-screen.png" />
<splash density="port-xhdpi" src="resources/android/splash/drawable-port-xhdpi-screen.png" />
<splash density="port-xxhdpi" src="resources/android/splash/drawable-port-xxhdpi-screen.png" />
<splash density="port-xxxhdpi" src="resources/android/splash/drawable-port-xxxhdpi-screen.png" />
</platform>
<platform name="ios">
<allow-intent href="itms:*" />
<allow-intent href="itms-apps:*" />
<icon height="57" src="resources/ios/icon/icon.png" width="57" />
<icon height="114" src="resources/ios/icon/icon@2x.png" width="114" />
<icon height="40" src="resources/ios/icon/icon-40.png" width="40" />
<icon height="80" src="resources/ios/icon/icon-40@2x.png" width="80" />
<icon height="120" src="resources/ios/icon/icon-40@3x.png" width="120" />
<icon height="50" src="resources/ios/icon/icon-50.png" width="50" />
<icon height="100" src="resources/ios/icon/icon-50@2x.png" width="100" />
<icon height="60" src="resources/ios/icon/icon-60.png" width="60" />
<icon height="120" src="resources/ios/icon/icon-60@2x.png" width="120" />
<icon height="180" src="resources/ios/icon/icon-60@3x.png" width="180" />
<icon height="72" src="resources/ios/icon/icon-72.png" width="72" />
<icon height="144" src="resources/ios/icon/icon-72@2x.png" width="144" />
<icon height="76" src="resources/ios/icon/icon-76.png" width="76" />
<icon height="152" src="resources/ios/icon/icon-76@2x.png" width="152" />
<icon height="167" src="resources/ios/icon/icon-83.5@2x.png" width="167" />
<icon height="29" src="resources/ios/icon/icon-small.png" width="29" />
<icon height="58" src="resources/ios/icon/icon-small@2x.png" width="58" />
<icon height="87" src="resources/ios/icon/icon-small@3x.png" width="87" />
<icon height="1024" src="resources/ios/icon/icon-1024.png" width="1024" />
<splash height="1136" src="resources/ios/splash/Default-568h@2x~iphone.png" width="640" />
<splash height="1334" src="resources/ios/splash/Default-667h.png" width="750" />
<splash height="2208" src="resources/ios/splash/Default-736h.png" width="1242" />
<splash height="1242" src="resources/ios/splash/Default-Landscape-736h.png" width="2208" />
<splash height="1536" src="resources/ios/splash/Default-Landscape@2x~ipad.png" width="2048" />
<splash height="2048" src="resources/ios/splash/Default-Landscape@~ipadpro.png" width="2732" />
<splash height="768" src="resources/ios/splash/Default-Landscape~ipad.png" width="1024" />
<splash height="2048" src="resources/ios/splash/Default-Portrait@2x~ipad.png" width="1536" />
<splash height="2732" src="resources/ios/splash/Default-Portrait@~ipadpro.png" width="2048" />
<splash height="1024" src="resources/ios/splash/Default-Portrait~ipad.png" width="768" />
<splash height="960" src="resources/ios/splash/Default@2x~iphone.png" width="640" />
<splash height="480" src="resources/ios/splash/Default~iphone.png" width="320" />
<splash height="2732" src="resources/ios/splash/Default@2x~universal~anyany.png" width="2732" />
</platform>
<plugin name="cordova-plugin-advanced-http" spec="2.0.1" />
<plugin name="twitter-connect-plugin" spec="git+https://github.com/chroa/twitter-connect-plugin.git">
<variable name="FABRIC_KEY" value="a4387287f874e396294c0bf5186ee1bdfee00cd1" />
<variable name="TWITTER_KEY" value="(twitter key here)" />
<variable name="TWITTER_SECRET" value="(twitter secret here)" />
</plugin>
<plugin name="cordova-plugin-x-socialsharing" spec="5.4.1" />
<plugin name="cordova-plugin-whitelist" spec="^1.3.3" />
<plugin name="cordova-plugin-statusbar" spec="^2.4.2" />
<plugin name="cordova-plugin-splashscreen" spec="^5.0.2" />
<plugin name="cordova-plugin-ionic-webview" spec="^2.2.5">
<variable name="ANDROID_SUPPORT_ANNOTATIONS_VERSION" value="27.+" />
</plugin>
<plugin name="cordova-plugin-ionic-keyboard" spec="^2.1.3" />
<plugin name="cordova-clipboard" spec="^1.2.1" />
<plugin name="cordova-plugin-uniquedeviceid" spec="^1.3.2" />
<plugin name="cordova-plugin-screen-orientation" spec="3.0.1" />
<plugin name="cordova-plugin-telerik-imagepicker" spec="2.2.2">
<variable name="PHOTO_LIBRARY_USAGE_DESCRIPTION" value="your usage message" />
</plugin>
<plugin name="cordova-plugin-camera" spec="4.0.3" />
<plugin name="com.lampa.startapp" spec="6.1.6" />
<plugin name="cordova-plugin-file" spec="^6.0.1" />
<plugin name="cordova-plugin-crop" spec="0.4.0" />
<plugin name="com.telerik.plugins.nativepagetransitions" spec="0.6.5" />
<plugin name="cordova-plugin-device" spec="^2.0.2" />
<plugin name="com.paypal.cordova.mobilesdk" spec="3.5.0" />
<engine name="android" spec="7.1.2" />
<engine name="ios" spec="4.5.5" />
</widget>
И я уже поставилэтот плагин в мой app.module.ts файл.
app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { ErrorHandler, NgModule } from '@angular/core';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
import { SplashScreen } from '@ionic-native/splash-screen';
import { StatusBar } from '@ionic-native/status-bar';
import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';
import { LoadingPage } from '../pages/loading/loading';
import { LoginPage } from '../pages/login/login';
import { RegisterUserPage } from '../pages/register-user/register-user';
import { RecoverPasswordPage } from '../pages/recover-password/recover-password';
import { DashboardPage } from '../pages/dashboard/dashboard';
import { BuyWordsPage } from '../pages/buy-words/buy-words';
import { NewOrderPage } from '../pages/new-order/new-order';
import { ProfilePage } from '../pages/profile/profile';
import { NotificationSettingPage } from '../pages/notification-setting/notification-setting';
import { SocialNetworksPage } from '../pages/social-networks/social-networks';
import { MenuPage } from '../pages/menu/menu';
import { OrderHistoryPage } from '../pages/order-history/order-history';
import { PaymentHistoryPage } from '../pages/payment-history/payment-history';
import { ViewOrderPage } from '../pages/view-order/view-order';
import { HTTP } from '@ionic-native/http';
import { Clipboard } from '@ionic-native/clipboard';
import { UniqueDeviceID } from '@ionic-native/unique-device-id';
import { TwitterConnect } from '@ionic-native/twitter-connect';
import { SocialSharing } from '@ionic-native/social-sharing';
import { SuperTabsModule } from 'ionic2-super-tabs';
import { ApiProvider } from '../providers/api/api';
import { ImagePicker } from '@ionic-native/image-picker';
import { Camera, CameraOptions } from '@ionic-native/camera';
import { Crop } from '@ionic-native/crop';
import { File } from '@ionic-native/file';
//import { ScreenOrientation } from '@ionic-native/screen-orientation';
import { PayPal, PayPalPayment, PayPalConfiguration } from '@ionic-native/paypal';
import { Device } from '@ionic-native/device';
@NgModule({
declarations: [
MyApp,
HomePage,
LoadingPage,
LoginPage,
RegisterUserPage,
RecoverPasswordPage,
DashboardPage,
BuyWordsPage,
NewOrderPage,
ProfilePage,
NotificationSettingPage,
SocialNetworksPage,
MenuPage,
OrderHistoryPage,
PaymentHistoryPage,
ViewOrderPage
],
imports: [
BrowserModule,
IonicModule.forRoot(MyApp, {
tabsPlacement: 'top'
}),
SuperTabsModule
],
bootstrap: [IonicApp],
entryComponents: [
MyApp,
HomePage,
LoadingPage,
LoginPage,
RegisterUserPage,
RecoverPasswordPage,
DashboardPage,
BuyWordsPage,
NewOrderPage,
ProfilePage,
NotificationSettingPage,
SocialNetworksPage,
MenuPage,
OrderHistoryPage,
PaymentHistoryPage,
ViewOrderPage
],
providers: [
StatusBar,
SplashScreen,
HTTP,
Clipboard,
UniqueDeviceID,
TwitterConnect,
SocialSharing,
ApiProvider,
PayPal,
ImagePicker,
Camera,
Device,
Crop,
File,
//ScreenOrientation,
{provide: ErrorHandler, useClass: IonicErrorHandler}
]
})
export class AppModule {}
login.ts
import { Component } from '@angular/core';
import { IonicPage,
NavController,
NavParams,
AlertController,
ToastController } from 'ionic-angular';
import { RecoverPasswordPage } from '../recover-password/recover-password';
import { RegisterUserPage } from '../register-user/register-user';
import { DashboardPage } from '../dashboard/dashboard';
import { UniqueDeviceID } from '@ionic-native/unique-device-id';
import { TwitterConnect } from '@ionic-native/twitter-connect';
import { HomePage } from '../../pages/home/home';
import { ApiProvider } from '../../providers/api/api';
/**
* Generated class for the LoginPage page.
*
* See https://ionicframework.com/docs/components/#navigation for more info on
* Ionic pages and navigation.
*/
@IonicPage()
@Component({
selector: 'page-login',
templateUrl: 'login.html',
})
export class LoginPage {
//initialize api variables as empty value
grant_type = '';
email = '';
password = '';
deviceId = '';
login_type = '';
network_name = '';
network_id = '';
scope = '';
uuid = '';
constructor(public navCtrl: NavController,
public navParams: NavParams,
public alertCtrl: AlertController,
public toast: ToastController,
public quickeApi: ApiProvider,
private twitter: TwitterConnect,
private uniqueDeviceID: UniqueDeviceID) {
}
ionViewDidLoad() {
console.log('ionViewDidLoad LoginPage');
}
ionViewWillEnter() {
var handleDevIdSuccess = (uuid) => {
this.deviceId = uuid;
};
var handleDevIdFailure = (error) => {
this.alertCtrl.create({
title: 'ALERT',
subTitle: 'Error with Device ID',
buttons: ['Dismiss']
}).present();
};
this.uniqueDeviceID.get().then(handleDevIdSuccess).catch(handleDevIdFailure);
}
loginTw() { //twitter log in
this.grant_type = 'password';
this.network_name = 'twitter';
this.login_type = 'network';
this.scope = '*';
var onNetworkLoginSuccess = (response) => {
var result = JSON.parse(response.data);
// show alert if there is an error
if(result.errors.length !== 0)
{
this.alertCtrl.create({
title: 'ALERT',
subTitle: result.errors.join('. '),
buttons: ['Dismiss']
}).present();
return;
}
this.toast.create({
message: 'Log In Successful!',
duration: 3000,
position: 'bottom'
}).present();
// save the access token and then go to home page
this.quickeApi.setTokenType(result.token_type);
this.quickeApi.setAccessToken(result.access_token);
//this.navCtrl.push(DashboardPage);
this.navCtrl.push(HomePage);
return;
};
var onNetworkLoginFailure = (error) => {
this.alertCtrl.create({
title: 'ALERT',
subTitle: 'Twitter Login Failed',
buttons: ['Dismiss']
}).present();
};
var onTwSuccess = (response) => {
var data = {
'grant_type' : this.grant_type,
'client_id' : this.quickeApi.getClientId(),
'client_secret' : this.quickeApi.getClientSecret(),
'network_name' : this.network_name,
'network_id' : response.userName,
'scope' : this.scope,
'uuid' : this.deviceId,
'login_type' : this.login_type
};
this.quickeApi.login(data, onNetworkLoginSuccess, onNetworkLoginFailure);
};
var onTwError = (error) => {
this.alertCtrl.create({
title: 'ALERT',
subTitle: 'Twitter login failed. Please install the twitter app and login with your account.',
buttons: ['Dismiss']
}).present();
};
this.twitter.login().then(onTwSuccess, onTwError);
}
loginGp() {
}
loginFb() {
}
register() {
this.navCtrl.push(RegisterUserPage);
}
recoverPassword() {
this.navCtrl.push(RecoverPasswordPage);
}
login() {
this.grant_type = 'password';
this.login_type = 'email';
this.scope = '*';
var data = {
'grant_type' : this.grant_type,
'client_id' : this.quickeApi.getClientId(),
'client_secret' : this.quickeApi.getClientSecret(),
'email' : this.email,
'password' : this.password,
'scope' : this.scope,
'uuid' : this.deviceId,
'login_type' : this.login_type
};
var onLoginSuccess = (response) => {
var result = JSON.parse(response.data);
// show alert if there is an error
if(result.errors.length !== 0)
{
this.alertCtrl.create({
title: 'ALERT',
subTitle: result.errors.join('. '),
buttons: ['Dismiss']
}).present();
return;
}
this.toast.create({
message: 'Log In Successful!',
duration: 3000,
position: 'bottom'
}).present();
// save the access token and then go to home page
this.quickeApi.setTokenType(result.token_type);
this.quickeApi.setAccessToken(result.access_token);
//this.navCtrl.push(DashboardPage);
this.navCtrl.push(HomePage);
return;
};
var onLoginError = (error) => {
this.alertCtrl.create({
title: 'ALERT',
subTitle: 'Cannot Log In',
buttons: ['Dismiss']
}).present();
};
this.quickeApi.login(data, onLoginSuccess, onLoginError); //call API to user log in
}
}