ios集成firebase_如何使用Firebase將Google Login集成到Ionic應用程序中

ios集成firebase

by Ryan Gordon

通過瑞安·戈登(Ryan Gordon)

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文件。下載此文件并將其保存到項目的根目錄。保持安全！

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狀態的任何頁面的構造函數中。

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