firebase使用_如何使用Firebase和Ionic开发出色的Facebook登录流程

firebase使用

by Ryan Gordon

通过瑞安·戈登(Ryan Gordon)

如何使用Firebase和Ionic开发出色的Facebook登录流程 (How to develop a great Facebook login flow with Firebase and Ionic)

It’s helpful to use social sign-ins with Ionic for your users who would rather not create and remember another username:password combination. Instead, you can allow users to sign in with accounts they already own. You don’t need to store hashed passwords to compare, you don’t have to handle sending sign up emails, and you don’t need to reset passwords. The user’s chosen provider will handle all of this for you.

对于不想创建和记住另一个用户名：密码组合的用户，使用带有Ionic的社交登录会很有帮助。 相反，您可以允许用户使用他们已经拥有的帐户登录。 您无需存储散列密码进行比较，无需处理发送注册电子邮件，也无需重置密码。 用户选择的提供者将为您处理所有这一切。

Do you want just check out the code instead of following the post? Please give the repo a star in you find it helpful!

您是否只想查看代码而不是关注该帖子？ 请给回购加星号，对您有帮助！

Some of this post will be very similar to the other tutorials on my page. If you have ionic and Node installed and have a project setup, you can jump to the code here .

这篇文章中的某些内容将与我页面上的其他教程非常相似。 如果您已经安装了ionic和Node并已进行了项目设置，则可以跳至此处的代码。

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

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

To install ionic and cordova, which for the moment is needed for plugins, run the following in your 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运行命令。

Create an app with ionic start <appname> <template>. For this, use a blank template as a starting point.

使用离子开始<appname> <template>创建一个应用程序。 为此，请使用空白模板作为起点。

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

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

ionic g provider auth

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

In order for Firebase to work with the Facebook platform, we will need to perform three steps:

为了使Firebase与Facebook平台配合使用，我们需要执行三个步骤：

— Setup a new App in the Facebook developer’s portal

-在Facebook开发人员门户中设置新应用

— Setup Facebook sign-in on Firebase

-在Firebase上设置Facebook登录

— Implement the sign-in flow

—实施登录流程

Facebook开发人员门户 (Facebook Developer’s Portal)

The Facebook Developers Portal is an interface to all of the developer tools and APIs available. It is what we’ll use to setup the sign-in API on Facebook’s side.

Facebook Developers Portal是所有可用的开发人员工具和API的接口。 这就是我们将用来在Facebook端设置登录API的工具。

Choose a name and a contact email for your app. The contact email may be shown to users, so make sure it’s professional.

为您的应用选择名称和联系电子邮件。 联系人电子邮件可能会显示给用户，因此请确保它是专业的。

After this, the app will be created in facebook and we can add the plugin to our application!

之后，将在facebook中创建该应用程序，我们可以将插件添加到我们的应用程序中！

There will be two plugins needed. The cordova plugin designed to work with Facebook natively, and a wrapper for it.

将需要两个插件。 cordova插件旨在与Facebook一起使用，并为其提供包装。

$ ionic plugin add cordova-plugin-facebook4 --variable APP_ID="123456789" --variable APP_NAME="myApplication"

You’ll need to replace the values or APP_ID and APP_NAME for your real credentials. You can find both of those inside your Facebook Developer’s Dashboard.

您需要将值或APP_ID和APP_NAME替换为您的真实凭据。 您可以在Facebook开发人员的仪表板中找到这两个文件。

The other plugin will allow us to work with the first one, through TypeScript.

另一个插件将允许我们通过TypeScript使用第一个插件。

npm install --save @ionic-native/facebook

Now we have the plugin installed and wired up to the Facebook console.

现在，我们已经安装了插件并将其连接到Facebook控制台。

There are two final steps for this: selecting which platforms we will use on the FB Developer Portal and importing in the app.module.

最后有两个步骤：选择我们将在FB Developer Portal上使用的平台，并导入app.module。

在FB门户中选择平台 (Selecting Platforms in FB portal)

Our app is created, however we need to specify which apps can use our sign-in API. This is done by adding platforms with a bundle ID we specify.

我们的应用已创建，但是我们需要指定哪些应用可以使用我们的登录API。 这是通过添加具有我们指定的捆绑包ID的平台来完成的。

To begin click Add Platform, select either Android or iOS. Both platforms will need to know the generated ID of your app when it is in deployment.

要开始单击添加平台，请选择Android或iOS。 这两个平台都需要在部署时知道您的应用程序生成的ID。

The ID value found at the top of your config.xml will be used for both the Google Play store package name and the BundleID.

在config.xml顶部找到的ID值将用于Google Play商店软件包名称和BundleID。

Don’t forget to also import the plugin in your app.module.ts and specify it as a provider for the project.

不要忘记也将插件导入到app.module.ts并将其指定为项目的提供者。

在Firebase上设置Facebook登录 (Setup Facebook sign-in on Firebase)

Setting up the sign-in within Firebase will be the easiest task. Once the app is created on the FB developer’s portal, it will have an APPID and an APPSECRET. These two values are needed to link Firebase to our Facebook app.

在Firebase中设置登录将是最简单的任务。 在FB开发人员的门户上创建该应用程序后，它将具有一个APPID和一个APPSECRET。 这两个值是将Firebase链接到我们的Facebook应用程序所必需的。

Once these values are input, click enable and that’s it!

输入这些值后，单击启用即可。

实施登录流程 (Implement the sign-in flow)

After all of the configuration, we have made it to the fun part: coding the thing and testing it!

完成所有配置后，我们就进入了有趣的部分：编写代码并进行测试！

Provided you have been following, the two Facebook Ionic plugins are now installed and the app is setup in Firebase and FB Dev Portal.

如果您一直在关注，则现在已安装了两个Facebook Ionic插件，并且已在Firebase和FB Dev Portal中设置了该应用程序。

Before we can use the plugin in our code, we must import it and bring it into scope with the constructor. After this we are free to use the plugin anywhere in this provider.

在我们的代码中使用该插件之前，我们必须将其导入并将其与构造函数一起使用。 之后，我们可以免费使用该提供程序中任何位置的插件。

import { Facebook } from '@ionic-native/facebook';

@Injectable()

export class AuthProvider {
    
constructor(private googlePlus: GooglePlus, private facebook:Facebook) {
    
}

The code for the login itself will seem very familiar if you’ve seen the other posts. What we are doing here is using the native Facebook plugin to do a sign-in flow. If it’s succesful, take the provided authresponse and sign into Firebase.

如果您已经看过其他文章，则登录本身的代码将看起来非常熟悉。 我们在这里使用的是本地Facebook插件来执行登录流程。 如果成功，请使用提供的身份验证响应并登录Firebase。

This function can be called anywhere in the app by importing the auth provider. The intended way to use this will be that some page (such as home.ts) will have AuthProvider in scope. When the user clicks a FB login button, we will delegate the login to our AuthProvider.

通过导入身份验证提供程序，可以在应用程序中的任何位置调用此功能。 使用此功能的预期方式是，某些页面(例如home.ts )将在范围内具有AuthProvider。 当用户单击FB登录按钮时，我们会将登录委托给AuthProvider。

Now when this function is called, a native Facebook UI will pop up asking for sign-in. Or if the user is already signed in it’ll just ask for OAuth permission — and thats it! We get a token back which we can use to make a credential, and this credential is then used to sign into Firebase.

现在，当调用此函数时，将弹出一个本地Facebook UI，要求登录。 或者，如果用户已经登录，则只要求获得OAuth许可-就这样！ 我们获得了令牌，可以用来创建证书，然后使用该证书登录Firebase。

结论 (Conclusion)

In this article, we have setup the Facebook sign-in API and worked through a cross platform solution for signing users into our Firebase with Facebook.

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

Same as the Google Sign-In, there was some confirguration needed (although not as much). Now the benefit is that our users can sign into any web apps we build with their existing Facebook accounts. If you followed the first article too, then the app now has Google and Facebook sign-in!

与Google登录相同，需要一些配置(尽管不是很多)。 现在的好处是，我们的用户可以登录使用我们现有的Facebook帐户构建的任何Web应用程序。 如果您也遵循了第一篇文章，那么该应用程序现在可以登录Google和Facebook！

All the code for this tutorial (and all my other tutorials) can be found here. I am aiming to implement as many of the Firebase features as I can, and YES I am looking for contributors!

可以在此处找到本教程的所有代码(以及我的所有其他教程)。 我的目标是尽可能多地实现Firebase功能，是的，我正在寻找贡献者！

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…

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

翻译自: https://www.freecodecamp.org/news/how-to-develop-a-great-facebook-login-flow-with-firebase-and-ionic-656a295c4fe9/

firebase使用