何如使用Ionic服务: 身份验证

ionic 的优势之一在于它在框架之上提供的服务。这包括用于验证您的应用程序用户、推送通知和分析的服务。在本系列中，我们将通过创建一个使用它们中的每一个的应用程序来了解这三个服务。

我们要查看的第一个服务是Auth 服务。这允许我们在 Ionic 应用程序中实现身份验证，而无需编写任何后端代码。或者，如果您已经有一个现有的身份验证系统，您也可以使用它。该服务支持以下身份验证方法：

• 电子邮件/密码：用户通过提供他们的电子邮件和密码进行注册。

• 社交登录：用户使用他们的社交媒体资料进行注册。目前包括 Facebook、Google、Twitter、Instagram、LinkedIn 和 GitHub。

• 自定义：使用现有的身份验证系统注册用户。 

在本教程中，我们将只介绍电子邮件/密码和 Facebook 社交登录。 

你将要创造什么

在我们继续之前，最好对我们将要创建的内容以及应用程序的流程有一个大致的了解。该应用程序将具有以下页面：

• 主页

• 注册页面

• 用户页面

主页

主页是应用程序的默认页面，用户可以使用他们的电子邮件/密码或他们的 Facebook 帐户登录。 

当用户点击 Login with Facebook按钮时，会显示类似以下的屏幕，一旦用户同意，用户就登录到应用程序：

注册页面

注册页面是用户可以通过输入电子邮件和密码进行注册的地方。Facebook 登录不需要任何注册，因为用户信息由 Facebook api提供。 

用户页面

最后一页是用户页面，只有在用户已经登录后才能看到。 

引导一个新的 Ionic 应用程序

现在您知道我们在做什么，让我们开始构建我们的应用程序吧！

首先，我们使用空白启动模板引导一个新的 Ionic 应用程序：

ionic start authApp blank

在新创建的authApp 文件夹中导航。这是项目的根目录。 

为了快速设置应用程序的 UI，我创建了一个GitHub存储库，您可以在其中找到起始源文件。下载 repo，在 starter 文件夹中导航，然后将 src文件夹复制到您刚刚创建的 Ionic 项目的根目录。这包含应用程序每个页面的模板文件。我将在后面的部分中更详细地向您解释每个文件的作用。

为项目提供服务，以便您可以在开发应用程序时立即看到您的更改：

ionic serve

创建一个离子帐户

由于我们将使用 Ionic 的后端来处理用户身份验证，因此我们需要一种方法来管理应用程序的用户。这就是 Ionic 帐户的用武之地。它允许您管理您的 Ionic 应用程序及其使用的服务。这包括管理 Auth 服务。您可以通过访问Ionic.io 注册页面来创建一个 Ionic 帐户 。

将应用程序连接到 Ionic 服务

接下来，导航到项目的根目录并安装 Ionic Cloud 插件：

npm install @ionic/cloud- angular --save

这个插件将允许应用程序轻松地与 Ionic 服务交互。

之后，您可以初始化应用程序以使用 Ionic 服务：

离ionic io init

这会提示您使用您的 Ionic 帐户登录。输入正确的登录详细信息后，命令行工具将自动在您的 Ionic 帐户下创建新的应用记录。此记录已连接到您正在开发的应用程序。 

 您可以通过打开项目根目录下的.io-config.json 文件和 ionic.config.json文件来验证此步骤是否有效。app_id 应该与分配给 Ionic 仪表板中新创建的应用程序的应用程序 ID 相同。

主页

在 src/pages/home 目录中导航以查看主页的文件。打开home.html 文件，您将看到以下内容：

<ion-header>
  <ion-navbar>
    <ion-title>
      Ionic2 Auth
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>

  <ion-list>

    <ion-item>
      <ion-label fixed>Email</ion-label>
      <ion-input type="email" [value]="email" [(ngModel)]="email"></ion-input>
    </ion-item>

    <ion-item>
      <ion-label fixed>Password</ion-label>
      <ion-input type="password" [value]="password" [(ngModel)]="password"></ion-input>
    </ion-item>

  </ion-list>

  <button ion-button full outline (click)='login("email");'>Login</button>

  <button ion-button full icon-left (click)='login("fb");'>
    <ion-icon name="logo-facebook"></ion-icon>Login with Facebook
  </button>
  <button ion-button clear (click)='signup();'>Don't have an account?</button>
</ion-content>

此页面将询问用户他们的电子邮件和密码或使用他们的 Facebook 帐户登录。如果用户还没有账户，他们可以点击注册按钮进入注册页面。稍后我们将在进入登录部分时回到此页面的细节。我只是向您展示它，以便您可以看到导航到注册页面的代码。

接下来，打开home.ts 文件。目前，它只包含一些用于导航到注册和用户页面的样板代码。稍后，我们将返回此页面添加用于登录用户的代码。

用户注册

注册页面的布局可以在 src/ pages/signup-page/signup-page.html中找到。查看此文件，您会发现一个带有电子邮件字段和密码字段的简单表单。

接下来，我们看一下signup-page.ts 文件。

让我们分解一下。首先，它导入用于创建警报和加载器的控制器：

import { AlertController, LoadingController } from 'ionic-angular';

然后，它从云客户端导入所需的类：

import { Auth, UserDetails, IDetailedError } from '@ionic/cloud-angular';

• Auth处理用户注册、登录和注销 的服务。

• UserDetails 是用于在注册或登录用户时定义用户详细信息的类型。 

• IDetailedError 用于确定发生错误的确切原因。这使我们能够在发生错误时向用户提供用户友好的错误消息。 

声明用于存储用户输入的电子邮件和密码的变量。这应该与您在布局文件中为value 和ngModel 属性指定的名称相同。 

export class SignupPage {

  email: string;
  password: string;  constructor(public auth: Auth, public alertCtrl: AlertController, public loadingCtrl: LoadingController) {
    
  }
  
  register() {
    ...
  }

}

接下来是register方法，当按下注册按钮时调用该方法。让我们一起编写这个方法。 

首先它启动一个加载器，然后在五秒后自动关闭（这样万一出现问题，用户就不会看到永远旋转的加载动画）。

register() {
  let loader = this.loadingCtrl.create({
    content: "Signing you up..."
  });
  loader.present();

  setTimeout(() => {
    loader.dismiss();
  }, 5000);

接下来，让我们创建一个对象来存储用户详细信息：

  let details: UserDetails = {
    'email': this.email,
    'password': this.password
  };

最后，我们将从服务中调用该signup()方法Auth 并提供用户详细信息作为参数。这会返回一个承诺，我们用then(). 一旦从后端收到成功响应then()，您传递给的第一个函数 将被执行；否则，第二个函数将被执行。

 this.auth.signup(details).then((res) => {

    loader.dismiss(); //hide the loader
    let alert = this.alertCtrl.create({
      title: "You're registered!",      subtitle: 'You can now login.',
      buttons: ['OK']
    });
    alert.present(); //show alert box 

  }, (err: IDetailedError<string[]>) => {
      ...
  });

如果从 Ionic Auth 收到错误响应，我们将遍历错误数组并根据收到的错误类型构造错误消息。在这里您可以找到可能发生的身份验证注册错误列表。

  loader.dismiss();

  var error_message = '';
  for (let e of err.details) {
    if (e === 'conflict_email') {
	  error_message += "Email already exists. <br />";
	} else {
	  error_message += "Invalid credentials. <br />";
	}
  }

  let alert = this.alertCtrl.create({
	title: error_message,
	subTitle: 'Please try again.',
	buttons: ['OK']
  });
  alert.present();
}

完成后，您可以在浏览器中试用该应用程序。电子邮件/密码登录没有任何插件或硬件依赖项，因此您应该能够在浏览器中对其进行测试。然后，您可以在Ionic 应用程序仪表板的Auth选项卡中找到新注册的用户。

设置 Facebook 应用程序

下一步是设置应用程序，以便它可以处理本机 Facebook 登录。首先，您需要创建一个 Facebook 应用程序。您可以通过登录您的 Facebook 帐户，然后访问Facebook 开发者网站来做到这一点。从那里，创建一个新应用程序：

创建应用程序后，单击侧边栏上的添加产品 链接并选择Facebook 登录。默认情况下，这将打开快速启动屏幕。我们真的不需要那个，所以继续点击 Facebook 登录下方的设置链接。这应该会显示以下屏幕：

在这里，您需要启用Embedded Browser oauth Login 设置并添加 https://api.ionic.io/auth/integrations/facebook 为Valid OAuth redirect URIs的值。完成后保存更改。

接下来，您需要将 Ionic Auth 连接到您刚刚创建的 Facebook 应用程序。转到您的Ionic 仪表板 并选择之前创建的应用程序（请参阅“将应用程序连接到 Ionic 服务”部分）。单击Settings 选项卡，然后 单击User Auth。在Social Providers下，单击Facebook 旁边的Setup按钮：

输入您之前创建的 Facebook 应用的 App ID 和 App Secret，然后点击Enable。 

安装 Facebook 插件

接下来，为 cordova 安装 Facebook 插件。与大多数插件不同，这需要您提供一些信息：Facebook 应用 ID 和应用名称。您可以从 Facebook 应用仪表板复制此信息。

cordova plugin add cordova-plugin-facebook4 
--save 
--variable APP_ID="YOUR FACEBOOK APP ID" 
--variable APP_NAME="YOUR FACEBOOK APP NAME"

配置 Facebook 服务

完成后，您需要做的最后一件事是回到您的项目，打开 src/app/app.module.ts 文件，然后从包中添加CloudSettings 和CloudModule服务cloud-angular ：

import { CloudSettings, CloudModule } from '@ionic/cloud-angular';

声明cloudSettings 对象。这包含app_id 您的 Ionic 应用程序的权限以及您想向应用程序用户询问的任何其他权限（范围）。默认情况下，这已经要求email and public_profile。 

const cloudSettings: CloudSettings = {
  'core': {
    'app_id': 'YOUR IONIC APP ID'
  },
  'auth': {
    'facebook': {
      'scope': []
    }
  }
};

如果您想向您的用户索取更多数据，您可以在此页面上找到权限列表：Facebook 登录权限。

接下来，让 Ionic 知道cloudSettings您刚刚添加的内容：

@NgModule({
  declarations: [
    MyApp,
    HomePage,
    SignupPage
  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp),
    CloudModule.forRoot(cloudSettings) // <--add this
  ],
  ...

稍后，当您将其他社交提供者添加到您的应用程序时，将遵循类似的过程。

登录用户

现在是时候返回主页并进行一些更改了。html模板已经有了我们需要的一切，所以我们只需要更新脚本。继续打开src/pages/home/home.ts 文件。在文件的顶部，除了您之前已经拥有的内容之外，还导入以下内容：

import { NavController, AlertController, LoadingController } from 'ionic-angular';
import { Auth, FacebookAuth, User, IDetailedError } from '@ionic/cloud-angular';
import { UserPage } from '../user-page/user-page';

在构造函数中，确定用户当前是否登录。如果用户已经登录，我们会自动导航到用户页面。 

export class HomePage {
  
  //declare variables for storing the user and email inputted by the user
  email: string;
  password: string;

  constructor(public navCtrl: NavController, public auth: Auth, public facebookAuth: FacebookAuth, public user: User, public alertCtrl: AlertController, public loadingCtrl: LoadingController) {
    if (this.auth.isAuthenticated()) {
      this.navCtrl.push(UserPage);
    }
  }
    
  ...
}

接下来，当按下登录按钮时，我们首先显示加载动画。

login(type) {

    let loader = this.loadingCtrl.create({
      content: "Logging in..."
    });

    loader.present();

    setTimeout(() => {
      loader.dismiss();
    }, 5000);

    ...
}

正如您在前面的src/pages/home/home.html 文件中看到的那样，一个表示按下了哪个登录按钮（电子邮件/密码登录按钮或 Facebook 登录按钮）的字符串被传递给该 login() 函数。这使我们能够确定要执行的登录代码。如果类型为'fb'，则表示按下了 Facebook 登录按钮，因此我们调用服务的login() 方法FacebookAuth 。

if(type == 'fb'){
  this.facebookAuth.login().then((res) => {

    loader.dismiss();
    this.navCtrl.push(UserPage);

  }, (err) => {
    //hide the loader and navigate to the user page
    loader.dismiss();
    let alert = this.alertCtrl.create({
      title: "Error while logging in to Facebook.",
      subTitle: 'Please try again.',
      buttons: ['OK']
    });
    alert.present();

  });
}

否则，按下电子邮件/密码登录按钮，我们应该使用登录表单中输入的详细信息登录用户。

else{ 
  let details: UserDetails = {
    'email': this.email,
	'password': this.password
  };

  this.auth.login('basic', details).then((res) => {

	loader.dismiss();
	this.email = '';
	this.password = '';
	this.navCtrl.push(UserPage);

  }, (err) => {

	loader.dismiss();
	this.email = '';
	this.password = '';
	let alert = this.alertCtrl.create({
	  title: "Invalid Credentials.",
	  subTitle: 'Please try again.',
	  buttons: ['OK']
	});
	alert.present();

  });

查看home.ts文件的最终版本，看看它应该是什么样子。

用户页面

最后一页是用户页面。 

src/pages/user-page/user-page.html中的布局显示用户的个人资料照片及其用户名。如果用户使用他们的电子邮件/密码注册，则用户名将是用户的电子邮件地址，个人资料照片将是 Ionic 分配的默认个人资料照片。另一方面，如果用户使用 Facebook 注册，他们的个人资料照片将是他们的 Facebook 个人资料照片，他们的用户名将是他们的全名。

接下来，查看 user-page.ts 文件。 

在ionic-angular 包下，我们正在导入Platform 除 NavController. 这用于获取有关当前设备的信息。它也有监听硬件事件的方法，比如android中的硬件后退按钮被按下的时候。

import { NavController, Platform } from 'ionic-angular';

对于cloud-angular 包，我们需要Auth、FacebookAuth和User 服务：

import { Auth, FacebookAuth, User } from '@ionic/cloud-angular';

在类构造函数中，确定用户是使用他们的电子邮件/密码用户还是他们的 Facebook 帐户登录。 在此基础上填写username 和。photo然后，在其下方，指定按下硬件后退按钮时要执行的功能。registerBackButtonAction() 接受两个参数：要执行的函数和优先级。 如果应用程序中有多个这些，则只会执行最高优先级。但由于我们只需要在这个屏幕中使用它，我们只需输入1. 

export class UserPage {

  public username;
  public photo;

  constructor(public navCtrl: NavController, public auth: Auth, public facebookAuth: FacebookAuth, public user: User, public platform: Platform) {

    if(this.user.details.hasOwnProperty('email')){
      this.username = this.user.details.email;
      this.photo = this.user.details.image;
    }else{
      this.username = this.user.social.facebook.data.full_name;
      this.photo = this.user.social.facebook.data.profile_picture;
    }

    this.platform.registerBackButtonAction(() => {
      this.logoutUser.call(this);
    }, 1);

  }
}

该logoutUser() 方法包含用于注销用户的逻辑。它所做的第一件事是确定用户是否实际登录。如果用户已登录，我们确定该用户是 Facebook 用户还是电子邮件/密码用户。 

这可以通过检查对象email 下的属性来完成user.details 。如果此属性存在，则表示该用户是电子邮件/密码用户。因此，如果不是这样，我们假设它是 Facebook 用户。调用该logout() 方法Auth 并FacebookAuth 清除应用程序的当前用户。 

logoutUser() {

    if (this.auth.isAuthenticated()) {
	  if(this.user.details.hasOwnProperty('email')){
	    this.auth.logout();
	  }else{
	    this.facebookAuth.logout();
	  }
	}

	this.navCtrl.pop(); //go back to home page
}

在设备上运行应用程序

现在我们可以试用我们的应用程序了！首先，设置平台并构建调试 apk：

ionic platform add android
ionic build android

要使 Facebook 登录正常工作，您需要将 apk 文件的哈希值提供给 Facebook 应用程序。您可以通过执行以下命令来确定哈希：

keytool 
-list 
-printcert 
-jarfile [path_to_your_apk] | grep -Po "(?<=SHA1:) .*" | xxd -r -p | openssl base64

接下来，转到您的 Facebook 应用程序基本设置页面，然后单击 屏幕底部的添加平台按钮。选择Android 作为平台。然后，您将看到以下表格：

填写Google Play Package Name 和Key Hashes。您可以将任何您想要的值作为Google Play 包名称的值， 只要它遵循与 Google Play 中的应用程序相同的格式（例如com.ionicframework.authapp316678）。对于Key Hashes，您需要放入之前返回的哈希值。完成后不要忘记点击保存更改 。

完成后，您现在可以将android-debug.apk 从 platforms/android/build/outputs/apk 文件夹复制到您的设备，安装它，然后运行。

结论和后续步骤

而已！在本教程中，您学习了如何使用 Ionic Auth 服务在您的 Ionic 应用程序中轻松实现身份验证。我们在本教程中使用了电子邮件/密码身份验证和 Facebook 登录，但还有其他选项，您也应该很容易将它们添加到您的应用程序中。