65.9K
CodeProject 正在变化。 阅读更多。
Home

Ionic 2 与 Firebase：OAuth 2 登录

Nayan Choudhary
starIconstarIconstarIconemptyStarIconemptyStarIcon

3.00/5 (2投票s)

2017 年 2 月 23 日

CPOL

4分钟阅读

viewsIcon

14295

如何正确进行身份验证并避免错误 12501

引言

本指南介绍如何在Android上使用Firebase验证Google用户。

背景

虽然许多人都写过类似的指南，但他们都没有解释一个关键点——即使按照每一步操作，为什么仍然会看到12501身份验证错误。这里有一个可以帮助你的逐步指南：https://ionicthemes.com/tutorials/about/ionic2-google-login。我将解释缺少的部分，即在Android上登录时抛出错误12501的原因。

我必须解释为什么使用我的这种方法。我没有使用Firebase插件进行登录，虽然这应该是常规做法。Cordova的Firebase插件在Web身份验证方面运行良好，但在Android上却无法正常工作。在我写这篇指南时，Firebase团队已经承认了这个问题，并且他们表示正在努力解决这个问题。在此之前，我将继续使用Cordova插件，它可以在Android环境中工作，但在Web浏览器中不行。

假设

我将使用Ionic 2 CLI。我假设你已经

  • 安装了NodeJS。
  • 添加了对Cordova的支持。
  • 安装了Java JDK并将其添加到PATH环境变量中。
  • 安装了Android SDK并将其添加到PATH环境变量中。

基本步骤

在Android环境中使用Firebase验证Google用户的Ionic 2应用程序，必须经过一个配置Firebase项目的步骤。如果你最近尝试创建一个Ionic 2项目并连接到Firebase，你就会知道。对于新手来说，以下是在成功创建运行项目。

  1. 创建Ionic 2项目 - 这是绝对的开始。我使用以下命令创建一个新项目：
    ionic start MyProject blank --v2
    我使用了一个空白项目模板。

    在这个阶段，你可能想使用以下命令检查输出：
    cd MyProject
ionic serve
  2. 添加Android平台 - 使用CLI，
    ionic platform add android
    这很重要，因为本教程只针对Android平台。
  3. 添加Cordova插件 - 让我们回到项目。我们需要一个Cordova插件来向用户显示在Android设备上配置的设备帐户。这个插件是cordova-plugin-googleplus。要通过CLI将其添加到你的项目中，请键入
    cordova plugin add cordova-plugin-googleplus
  4. 创建Firebase项目 - 现在我们访问https://console.firebase.google.com。使用你选择的帐户创建一个Firebase项目（如果尚未创建）。项目创建后，点击“身份验证”选项。你需要设置一个登录方法。转到“登录方法”选项卡，然后点击“Google”。
    .
    你必须启用此选项，并复制“Web客户端ID”代码，可以通过展开“Web SDK配置”来查看。
    .
    这用于访问项目。
  5. 登录 - 我添加了一个Ionic 2提供程序，它为我在项目中使用API提供了功能。我将其命名为`login-service`。
    ionic g provider login-service
    我向其中添加了一个名为`nativeLogin`的方法。
    nativeLogin(): Promise<any> {
    let self = this;

    return GooglePlus.login({
        'scopes': 'profile email',
        'webClientId': CLIENT_ID, // This is the web client ID that you copied earlier.
        'offline': true
    })
    .then(userData => {
        // Do your stuff... like, 'self.events.publish(LOGGED_IN_EVENT_ID, userData);'
    });
}

    确保你添加了代码来捕获抛出的异常或错误。这些都是基本的代码内容。

让Firebase知道你的应用程序

所以，让我们回到你的项目的firebase控制台。当你看到项目的概述时，选择“将Firebase添加到你的Android应用”选项。这将打开一个模态对话框，需要填写一些信息。让我们看看。

打开你`MyProject`项目中的`config.xml`文件。复制`widget`节点的`id`。它可能看起来像`com.ionicframework.myprojectXXXXXX`。将此ID复制到Firebase项目弹出对话框中的包名称字段。

然后复制`widget`下`name`节点中的文本。这是你的应用名称。

最后，也是最重要的一点：SHA-1。现在，如果你不知道，你的Android应用必须使用密钥签名才能发布。对于最终发布版本，请遵循官方Google文档。但现在，因为我们正在调试，我们需要从调试密钥存储区获取SHA-1密钥。在Windows操作系统中，转到用户配置文件文件夹，

cd /d "%USERPROFILE%\.android"

运行命令

keytool -list -keystore debug.keystore

`debug.keystore`是调试器使用的密钥存储文件的文件名。它可能会提示你输入密码，按Enter键。如果密码无效，请尝试密码“android”。（如果仍然无效，你必须在Google上搜索此密码问题。）如果密码被接受，则`keytool`工具将转储有关密钥存储区的信息。你必须在“证书指纹”中找到SHA1。复制SHA1值，并将其粘贴到Firebase弹出对话框中的“调试签名证书 SHA-1（可选）”字段中。

要点是必须将SHA1值提供给Firebase项目，因为你正在创建Android应用程序（即使它是作为Web应用程序创建的），并且与该项目交互的所有Android应用程序都必须提供它们的SHA-1密钥。如果你的应用使用另一个SHA-1密钥（如发布版本中可能出现的情况），则必须将该密钥添加到签名证书列表中。如果你跳过此步骤，则你的登录过程可能会抛出错误代码为12501的异常。

历史

  1. 2017年2月22日 - 初始版本
© . All rights reserved.