ios集成firebase

by Ryan Gordon

通过瑞安·戈登(Ryan Gordon)

如何使用Firebase将Google Login集成到Ionic应用程序中 (How to integrate Google Login into an Ionic app with Firebase)

A lot of apps these days need to maintain some form of user authentication. This helps users manage their accounts and store their info securely. But account creation can be a bad experience for some users. Some do not want to have another account on some website where they have to remember yet another password, because their uncle Mick recommended never using the same password.

如今，许多应用程序都需要维护某种形式的用户身份验证。 这可以帮助用户管理其帐户并安全地存储其信息。 但是，创建帐户对于某些用户而言可能是不好的体验。 有些人不想在某个网站上拥有另一个帐户，而在该网站上他们必须记住另一个密码，因为他们的叔叔米克建议不要使用相同的密码。

In the interest of improving the UX for these users, it’s helpful implement a way to sign in with accounts they already have such as Google, Facebook, or Github.

为了改善这些用户的UX，实现一种方法来登录他们已经拥有的帐户(例如Google，Facebook或Github)会很有帮助。

OAuth is how we can achieve this. Each of these providers and many others provide OAuth Authentication which we can use to sign these users in with their existing information. Furthermore, if a user likes to sign in with multiple providers, we can link one user account to one or more providers. This means that a user can sign in with either Google or Facebook and still access the same account in our system.

OAuth是我们可以实现这一目标的方法。 这些提供程序中的每一个以及许多其他提供程序都提供OAuth身份验证，我们可以使用这些身份验证将这些用户与他们的现有信息一起登录。 此外，如果用户喜欢使用多个提供商登录，我们可以将一个用户帐户链接到一个或多个提供商。 这意味着用户可以使用Google或Facebook登录并仍然访问我们系统中的同一帐户。

Do you just want the code instead of following the post? Check out the repo (and give it a star in you find it helpful)!

您只是想要代码，而不是关注帖子吗？ 查看回购协议 (并给它加星号，对您有帮助)！

To follow along with this tutorial , youll need both Node.js and Ionic installed.

要继续本教程，您需要同时安装Node.js和Ionic。

入门 (Getting started)

To install Ionic and Cordova (which for the moment is needed for plugins), run the following in terminal after installing Node:

要安装Ionic和Cordova(目前需要插件)，请在安装Node之后在终端中运行以下命令：

npm install -g ionic cordova

If you get EACCES: permission denied, you may need to run the command with sudo ?

如果获得EACCES：权限被拒绝，则可能需要使用sudo运行命令？

To create an app with Ionic, start <appname> <template>. For this, we’ll use a blank template as a starting point .

要使用Ionic创建应用，请启动<appname> <template>。 为此，我们将使用空白模板作为起点。

The code for Google signin will be put into a provider class which will be called by whichever page needs to use that sign in method.

Google登录代码将被放置到提供程序类中，该类将由需要使用该登录方法的任何页面调用。

ionic g provider auth

使用Firebase设置应用并获取凭据 (Setup app with Firebase and get credentials)

In order for firebase to work with both the native Android and iOS platforms, we’ll need to do two configurations for the app, each a little bit different.

为了使Firebase能够与本机Android和iOS平台一起使用，我们需要为该应用程序进行两项配置，每项配置都稍有不同。

For each device, we will need to configure the Google Sign In API.

对于每台设备，我们都需要配置Google登录API。

的iOS (iOS)

For iOS setup, you need to supply the bundle ID. This is the value in config.xml which is usually set to io.ionic.starter. Change that to whatever you like, and then that will be your bundle ID.

对于iOS设置，您需要提供捆绑包ID。 这是config.xml中的值，通常将其设置为io.ionic.starter。 将其更改为您喜欢的任何内容，然后将其作为您的捆绑包ID。

Make sure you don’t leave it as the default value.

确保不要将其保留为默认值。

After setup, you will get a GoogleService-Info.plist. Save this file to the root of the Ionic project folder. After performing these steps, your done! For iOS at least..

设置完成后，您将获得一个GoogleService-Info.plist。 将此文件保存到Ionic项目文件夹的根目录。 完成这些步骤后，您就完成了！ 至少适用于iOS。

You should now see the following UI and have your Plist file downloaded and ready to use.

现在，您应该看到以下UI，并下载了Plist文件并可以使用。

安卓系统 (Android)

The process for adding Google sign into the Android platform is almost identical, with one extra requirement. To get started, head to this link, and start creating your Android app.

将Google标牌添加到Android平台的过程几乎相同，但有一个额外的要求。 首先，请转到此链接 ，然后开始创建您的Android应用。

It’s important to note that for building to Android (and also for using this plugin) you will need to install the Android build tools version 19.1.0 or higher.

请务必注意，要构建到Android(以及使用此插件)，您将需要安装Android构建工具版本19.1.0或更高版本。

取得钥匙？ (Acquiring the key ?)

Once the build tools are installed and you’ve confirmed this, the keystore should be available to get the SHA-1 value we need for the Android part of the process. The keystore is used to hold the signing keys you use for the apps you build.

一旦安装了构建工具并确认了这一点，就可以使用密钥库来获取过程中Android部分所需的SHA-1值。 密钥库用于保存用于构建的应用程序的签名密钥。

Run this command in the terminal to acquire the SHA-1 value need:

在终端中运行以下命令以获取所需的SHA-1值：

keytool -exportcert -list -v -alias androiddebugkey -keystore ~/.android/debug.keystore

Important: This will be different from the keystore you would use if you are taking the app into production. Stop at this point and reflect — will you release this? It may be wise to use the release keystore if so.

重要提示 ：这与将应用程序投入生产时将使用的密钥库不同。 到此为止停止思考，您会释放吗？ 如果这样的话，使用发布密钥库可能是明智的。

After this step, head to this link, and add your Android project.

完成此步骤后，请转到此链接 ，然后添加您的Android项目。

Make sure again that you have changed the config.xml ‘id’ value for your project so that it is no longer io.ionic.starter .

再次确保更改了项目的config.xml'id'值，以使其不再是io.ionic.starter 。

It will ask for the SHA-1 value we got from terminal. Input it and you’ll be given the option to download a google-services.json file. Download this file and save it to the root of your project. Keep it safe!

它将要求我们从终端获得的SHA-1值。 输入它，您将可以选择下载google-services.json文件。 下载此文件并将其保存到项目的根目录。 保持安全！

将Google登录安装到您的代码库 (Installing Google Sign-in to your codebase)

One of the good things about Ionic is its documentation. It has docs available for most of the plugins and components. The Google Sign-in docs for Ionic can be found here.

Ionic的优点之一是其文档。 它具有可用于大多数插件和组件的文档。 可在此处找到 Ionic的Google登录文档。

Run these commands in the terminal to add the plugin to the project.

在终端中运行这些命令以将插件添加到项目中。

$ ionic cordova plugin add cordova-plugin-googleplus --variable REVERSED_CLIENT_ID=myreversedclientid
$ npm install --save @ionic-native/google-plus

At this stage, you have the iOS and Android Google Sign-in API configured. You have two config files (one for each platform) and two plugins installed and ready to use.

在此阶段，您已经配置了iOS和Android Google登录API。 您有两个配置文件(每个平台一个)和两个已安装并可以使用的插件。

配置Firebase (Configuring Firebase)

Firebase will be the host for the OAuth sign-ins like Google plus. Before it can be used in the project, you need to set up the project in Firebase. If you have never done this before, head to this post on how to setup a Firebase config and initialize Firebase itself.

Firebase将成为OAuth登录(如Google plus)的主机。 您必须先在Firebase中设置项目，然后才能在项目中使用它。 如果您以前从未这样做过，请转至这篇文章，了解如何设置Firebase配置和初始化Firebase本身。

At the very minimum, you need to have these packages installed:

至少，您需要安装以下软件包：

npm install angularfire2 firebase

使用插件 (Using the plugin)

The first step will be to setup a listener which will react to events, such as when a user logs in or out. If a sign in event occurs, the user object will contain credentials for that user such as their name and avatar picture.

第一步将是设置一个侦听器，该侦听器将对事件做出React，例如用户登录或注销时。 如果发生登录事件，则用户对象将包含该用户的凭据，例如其名称和头像图片。

This piece of code should be in the constructor of either the home.ts in this project or any page where you want to track the status of AuthState.

这段代码应位于该项目中的home.ts或您要跟踪AuthState状态的任何页面的构造函数中。

Google登录代码 (Google Login Code)

You’ve made it this far. Doot doot! ?.

到目前为止，您已经做到了。 ot！ ？

The final part of getting users signed in is the actual Google auth flow itself.

使用户登录的最后一部分是实际的Google身份验证流程本身。

You need to test this part on a device, as the Ionic Native plugin uses Cordova which requires building onto a device.

您需要在设备上测试此部分，因为Ionic Native插件使用Cordova，这需要在设备上构建。

The pattern we are aiming for is setting up the functions to return promises. Then, if we need to, we can perform some action with the result.

我们旨在的模式是设置函数以返回承诺。 然后，如果需要，我们可以对结果执行一些操作。

If the sign-in is successful, then we will get a credential from the result and sign in the user to our Firebase.

如果登录成功，则我们将从结果中获取证书并将用户登录到我们的Firebase。

Lastly, depending on how it goes, we will either resolve or reject the promise. This will trigger either the .then or .catch clause anywhere this function is called.

最后，根据进展情况，我们将解决或拒绝承诺。 这将在调用此函数的任何地方触发.then或.catch子句。

In the home.ts, this googleLogin function can be called with a .then and .catch clause, and the result will be passed accordingly in case we need to do anything with it.

在home.ts中，可以使用.then和.catch子句调用此googleLogin函数，并在需要进行任何处理时相应地传递结果。

When the sign-in is completed, the onAuthStateChanged listener will be triggered and the user information will be updated on the page.

登录完成后，将触发onAuthStateChanged侦听器，并在页面上更新用户信息。

Google Plus sign-in is now wired up to Firebase and working on the device. If you plan to take this app into production, as noted you’ll need to redo a few things and use a different keystore for release.

Google Plus登录现在已连接到Firebase并可以在设备上使用。 如前所述，如果您打算将此应用程序投入生产，则需要重做一些事情，并使用其他密钥库进行发布。

结论 (Conclusion)

In this article, we have set up the Google Sign-in API and worked through a cross platform solution for signing users into our Firebase with Google Plus.

在本文中，我们设置了Google Sign-in API，并通过跨平台解决方案来使用Google Plus将用户登录到我们的Firebase。

Although there is a lot of configuration required between Google Developers Console and Firebase, the benefit is that our users can now sign into any web app we build with their existing Google accounts.

尽管Google Developers Console和Firebase之间需要进行大量配置，但好处是我们的用户现在可以登录到使用现有Google帐户构建的任何Web应用程序。

This post is the first of a number I plan to write for Firebase / Ionic sign-ins.

这篇文章是我计划为Firebase / Ionic登录撰写的第一篇文章。

If you want access to the code, here again is a link to the repo :

如果您想访问代码，这里再次是指向仓库的链接：

Ryan-Gordon/Ionic-FirestarterIonic-Firestarter - Ionic Firestarter is a open source project showcasing different Firebase features implemented in…github.com

Ryan-Gordon / Ionic-Firestarter Ionic-Firestarter-Ionic Firestarter是一个开源项目，展示了在 github.com中 实现的不同Firebase功能。

Want some similar posts on Ionic ? Here is a couple other posts I’v done:

想要有关Ionic的类似帖子？ 这是我完成的其他几篇文章：

How to dynamically theme your Ionic application and make your users happyDesigning a sleek color scheme for your mobile application can be time consuming. Why not let the user choose their own…

如何为Ionic应用程序动态设置主题并使用户感到满意 为移动应用程序设计时尚的配色方案可能会很耗时。 为什么不让用户选择自己的…

Alternative Sign in Methods for Firebase with IonicIn my other posts on Firebase sign ins, a focus has been put on Social providers. The main point of this emphasis is to…medium.com

使用Ionic进行Firebase的替代登录方法 在我关于Firebase登录的其他文章中，重点关注了社交提供程序。 这种强调的重点是... medium.com

翻译自: https://www.freecodecamp.org/news/how-to-integrate-google-login-into-an-ionic-app-with-firebase-41cb69234919/

ios集成firebase