firebase登录验证

Authentication allows us to secure our apps, or limit access for non-user members. Authentication can also be used, for example, to limit access to a paid service or specific service.

身份验证使我们能够保护我们的应用程序安全,或限制非用户成员的访问权限。 身份验证也可以用于例如限制对付费服务或特定服务的访问。

That's just one example of how authentication can be in your app. Today we will add authentication to a React Native app using Firebase.

那只是在您的应用程序中如何进行身份验证的一个示例。 今天,我们将使用Firebase将身份验证添加到React Native应用程序。

1安装react-native-firebase (1 Installing react-native-firebase)

The first thing we do is install and initialize Firebase inside our app. In React Native we need to use a Firebase Container for React Native. We are going to use react-native-firebase.

我们要做的第一件事是在应用程序内部安装并初始化Firebase。 在React Native中,我们需要为Fire Native使用Firebase容器。 我们将使用react-native-firebase 。

If you are about to start a new React Native app from scratch and you would like to use Firebase, you are lucky - you can install react-native-firebase pre-integrated using the React Native CLI.

如果您将要从头开始一个新的React Native应用程序,并且想使用Firebase,那么您很幸运-您可以安装使用React Native CLI预集成的react-native-firebase。

//
npx @react-native-community/cli init --template=@react-native-firebase/template authenticationFirebase
//** source: https://invertase.io/oss/react-native-firebase/quick-start/new-project

Then just install the pod for iOS by running the following command inside the root directory of your app.

然后,只需在应用程序的根目录中运行以下命令,即可为iOS安装pod。

cd ios && pod install

If you are having issues installing a new project with Firebase please refer to react-native-firebase docs

如果您在使用Firebase安装新项目时遇到问题,请参阅react-native-firebase文档

将react-native-firebase添加到现有项目 (Adding react-native-firebase to an existing project)

Install the react-native-firebase package using yarn or npm

使用yarn或npm安装react-native-firebase软件包

yarn add @react-native-firebase/app

or:

要么:

npm install @react-native-firebase/app

Then install pods for iOS.

然后安装iOS的Pod。

shell cd ios && pod install

shell cd ios && pod install

运行应用 (Running the app)

For iOS, there are two ways to do it: I personally use Xcode, as it gives me a clear idea if something went wrong and the build failed.

对于iOS,有两种方法可以实现:我个人使用Xcode,因为它可以使我清楚地知道出了什么问题并且构建失败。

Always make sure the package is running - hit yarn start to start the app.

始终确保程序包正在运行- yarn startyarn start以启动应用程序。

The second way to run the app on iOS is running the react-native run-ios command - and that's it.

在iOS上运行应用程序的第二种方法是运行react-native run-ios命令-就是这样。

添加Firebase凭证 (Adding firebase credentials)

This step requires us to create a new project in the Firebase console .

此步骤需要我们在Firebase控制台中创建一个新项目。

After creating a new project on the dashboard page select add Firebase to iOS app. This will show you the steps to add credentials to iOS like below.

在仪表板页面上创建新项目后,选择将Firebase添加到iOS应用 。 这将向您显示将凭证添加到iOS的步骤,如下所示。

It consists of a few steps :

它包括几个步骤:

  • Download the GoogleService-info.plist file and put it inside the iOS folder within your project.

    下载GoogleService-info.plist文件,并将其放在项目中的iOS文件夹中。

  • Initialize Firebase

    初始化Firebase

对于Android (For Android)

Android has a different setup for Firebase. In project settings in the Firebase console select add Firebase to Android.

Android为Firebase设置了不同的设置。 在Firebase控制台的项目设置中,选择“ 将Firebase添加到Android”

You can put any name you like in the app name input - just make sure it conforms to the Firebase requirements. Then click Register.

您可以在应用程序名称输入中输入您喜欢的任何名称-只需确保它符合Firebase要求即可。 然后单击注册

After that, you need to download the google-services.json file and put it within the android/app folder.

之后,您需要下载google-services.json文件并将其放在android / app文件夹中。

Then the next step is to initialize the Android SDK.

然后,下一步是初始化Android SDK。

The last step is to apply the Firebase plugin inside: android/app/build.gradle .

最后一步是在内部应用Firebase插件: android/app/build.gradle

apply plugin: 'com.google.gms.google-services'

If you have any issues running the steps above you can always refer to the Firebase docs or react-native-firebase websites.

如果您在执行上述步骤时遇到任何问题,可以随时参考Firebase文档或react-native-firebase网站。

Now that we are done with the integration, the next step is to implement Firebase functions to create users and sign in in React Native.

现在我们完成了集成,下一步是实现Firebase函数以创建用户并登录React Native。

添加登录,登录 (Adding SignIn, Login)

This phase is simple: just some React and JavaScript code to call Firebase functions. I'm going to create a simple UI for Login and SignUp (this is not necessary for this tutorial so you can skip this step).

这个阶段很简单:只需一些React和JavaScript代码即可调用Firebase函数。 我将为“登录”和“注册”创建一个简单的UI(本教程不需要这样做,因此您可以跳过此步骤)。

I will put the full source code at the end of article *

我将完整的源代码放在文章的结尾*

We will use the createUserWithEmailAndPassword function to sign up for a new user. I already implemented all the validation on the form - we just need to call this function to create a user.

我们将使用createUserWithEmailAndPassword函数来注册新用户。 我已经在表单上实现了所有验证-我们只需要调用此函数来创建用户。

When the user presses the Continue button, __doSignUp will be called and the code looks like this:

当用户按下继续按钮时,将调用__doSignUp ,代码如下所示:

const __doSignUp = () => {if (!email) {setError("Email required *")setValid(false)return} else if (!password && password.trim() && password.length > 6) {setError("Weak password, minimum 5 chars")setValid(false)return} else if (!__isValidEmail(email)) {setError("Invalid Email")setValid(false)return}__doCreateUser(email, password)
}const __doCreateUser = async (email, password) => {try {let response = await auth().createUserWithEmailAndPassword(email, password)if (response) {console.log(tag, "												

firebase登录验证_如何使用Firebase通过三步向身份验证本机添加身份验证相关推荐

  1. firebase 推送_如何使用Firebase向Web应用程序添加推送通知?

    firebase 推送 by Leonardo Cardoso 由莱昂纳多·卡多佐(Leonardo Cardoso) 如何使用Firebase向Web应用程序添加推送通知? (How to add ...

  2. 双闭环可逆直流脉宽pwm调速系统设计及matlab仿真验证_,双闭环可逆直流脉宽PWM调速系统设计及MATLAB仿真验证-课程设计.doc...

    双闭环可逆直流脉宽PWM调速系统设计及MATLAB仿真验证-课程设计 成都理工大学工程技术学院课程设计 PAGE PAGE 1 双闭环可逆直流脉宽PWM调速系统设计 及MATLAB仿真验证 专 业:电 ...

  3. 双闭环可逆直流脉宽pwm调速系统设计及matlab仿真验证_,双闭环可逆直流脉宽PWM调速系统设计及MATLAB仿真验证.doc...

    . PAGE 双闭环可逆直流脉宽PWM调速系统设计 及MATLAB仿真验证 专 业:电力传动 学 号:201020305139 姓 名:杨 耀 指导老师:王笑宇 目录 TOC \o "1-3 ...

  4. ai皮肤检测分数_智能AI皮肤检测仪三步走话术

    智能 AI 皮肤检测仪三步走话术 第一步:仪器介绍 话术: 某某小姐,您好!我们现在用了是 德国进口智能 AI 皮肤检测仪 给您的皮肤做拍照 测试. 我们这台仪器是国外引起的一台专业皮肤定量分析仪器, ...

  5. camunda流程定义表无数据_[Python04] 学习snakemake,三步轻松搭建生信流程!

    随着学习的不断深入,分析的数据越来越多.你会发现,日常生信分析不过是调用一些相同的函数或者包分析不同的数据,换汤不换药. 那么,如何把分析过程流程化,让数据像工厂的流水线一样自动被处理? 最简单的法子 ...

  6. 流程图 3条泳道 决策_制定透明决策的三步流程

    流程图 3条泳道 决策 使您的领导者工作更加透明的最有效方法之一是采用现有流程,将其开放以征询团队的反馈,然后更改流程以考虑此反馈. 以下练习将使透明度更加切实,并有助于发展"肌肉记忆&qu ...

  7. pr cpu100%_打工度假签证拿PR三步搞定!高薪,稳定工作,分分钟成为人生赢家!...

    国内苦苦工作多年的996上班族, 想要换个新环境,丰富人生经历? 完全可以! 顺利拿到打工度假签 来澳洲打工就结束了嘛? 这只是第一步! 合法高薪工作之余, 你还有机会移民澳洲! 符合以下条件的 打工 ...

  8. 前端实现图片悬浮_前端技巧集:三步制作图片悬浮文字

    鼠标悬停在图片上显示文字,是电商网页经常使用的效果,下面三步教会大家CSS如何完成这个效果. 前提 HTML图片和文字是并列显示的.如下: 我是雪豹 1. 将文字浮在图片上 我们加个div把图片和文字 ...

  9. firebase登录验证_使用Firebase进行电话号码身份验证

    firebase登录验证 介绍 (Introduction) Ever since Firebase was introduced, I thought it would have a signifi ...

最新文章

  1. hdu 5903 Square Distance
  2. FlinkX 如何读取和写入 Clickhouse?
  3. 约瑟夫环递推公式的由来(约瑟夫环公式法)
  4. Jquery 中的CheckBox、 RadioButton、 DropDownList的取值赋值
  5. Shell 信号发送与捕捉
  6. C++ 多继承之如何调用私有成员
  7. jmeter 用户数 线程数_如何使用jmeter编写TCP测试脚本
  8. 移动端手势的七个事件库
  9. matlab 设计滤波器,FIR 滤波器设计
  10. 计算机人工智能分数,分数一般想学人工智能?这6所双一流大学是首选
  11. Jquery考试面试题(一)
  12. php 正则 /is,PHP 正则表达式后面接的/isU, /is, /s含义
  13. 基于GPS\北斗、GIS、GPRS技术构建智能巡检系统
  14. 谷粒商城 高级篇 (七) --------- 性能压测
  15. 领域建模——架构设计的第一步(上)
  16. 【简易实用】源生js瀑布流示列
  17. Python初识对象
  18. [案例][激励]关于个人贡献与团队贡献的激励制度(结合IT开发考虑)
  19. 升级cocoapods
  20. 【工业通讯】CAN基础内容详解(二)——物理层

热门文章

  1. 【AI视野·今日CV 计算机视觉论文速览 第194期】Mon, 10 May 2021
  2. java演练 循环嵌套 菱形图案的打印 四个阶段完成输出
  3. django-前端上传图片190912
  4. django-自定义错误页面-404
  5. python爬虫系列(3.8-正则的使用)
  6. [转]双线性插值(Bilinear interpolation)
  7. 15. SSH 远程
  8. .NET中使用Redis
  9. centos 下端口开放设置
  10. MATLAB学习笔记(二) -- 矩阵和数组