react-native使用FireBase实现google登陆

一、前置操作

首先下载这个包   yarn add @react-native-google-signin/google-signin

二、Google cloud配置

Google Cloud

去google控制台新建一个android项目,这时候需要用到你自己创建的keystore的sha1值,然后会让你下载一个JSON文件,先保存在本地,

这个json文件里面有client_id等信息。

三、Google play配置

去play后台创建一个app,使用自己创建的keystore证书打一个aab的包,上传测试,然后得到应用签名。

然后拿着这个sha1指纹,去FireBase控制台

三、FireBase配置

Firebase 管网

新建一个android应用 绑定上面拿到的应用签名,这里需要两个签名,一个是你本地keystore生成的sha1签名,google play后台的应用签名,因为google后台会为你这个app生成一个sha1 这个sha1 会跟你本地签名证书的sha1值不同,然后输入完成之后,会给你一个google-server.json文件,把这个文件放在你项目里android/app下的和app下的build.gradle同级。

四、项目配置

在你的android下的build.gradle里配置:

     

 然后在android/app/build.gradle配置

android/build.gradlebuildscript{ext{googlePlayServicesAuthVersion = "20.7.0"}}android/app/build.gradle顶部添加 apply plugin: 'com.google.gms.google-services'dependencies{implementation platform('com.google.firebase:firebase-bom:32.7.4')implementation 'com.google.firebase:firebase-analytics'}

五、login模块 

import { GoogleSignin } from '@react-native-google-signin/google-signin';//初始化google登陆
GoogleSignin.configure({webClientId:"此客户端ID在https://console.cloud.google.com获取"
});const onGoogleButtonPress = async () => {console.log('google login');try {await GoogleSignin.signOut();const res = await GoogleSignin.hasPlayServices({showPlayServicesUpdateDialog: true });console.log(res, '是否有google环境');if (res) {const { idToken } = await GoogleSignin.signIn();const loginRes = await overSeasAuthLogin({idToken,loginType: 1,os: Platform.OS === "android" ? 2 : 1,});console.log(loginRes, '登陆状态');}} catch (err) {console.log(err, 'err信息');}};

 idToken是google给你的一个token拿去给服务端校验,即可完成登陆。

客户端ID点击进去就能看到

具体信息参考https://react-native-google-signin.github.io/docs 

这是国外一友人写的文档,如果看的不太懂,私聊我即可。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/541973.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

最新开源解密版TwoNav网址导航系统源码

源码简介 2024最新开源解密版TwoNav网址导航系统源码去授权破解版 内置二十多套主题模板。 已去授权,最新开源解密版。TwoNav 是一款开源的书签(导航)管理程序,使用PHP SQLite 3开发,界面简洁,安装简单&…

集合系列(二) -List接口详解

一、List简介 List 的数据结构就是一个序列,存储内容时直接在内存中开辟一块连续的空间,然后将空间地址与索引对应。 以下是List集合简易架构图 由图中的继承关系,可以知道,ArrayList、LinkedList、Vector、Stack都是List的四个…

自习室预订系统|基于springboot框架+ Mysql+Java+B/S架构的自习室预订系统设计与实现(可运行源码+数据库+设计文档+部署说明)

推荐阅读100套最新项目 最新ssmjava项目文档视频演示可运行源码分享 最新jspjava项目文档视频演示可运行源码分享 最新Spring Boot项目文档视频演示可运行源码分享 目录 前台功能效果图 学生功能模块 管理员功能登录前台功能效果图 系统功能设计 数据库E-R图设计 lunwen参…

IDEA中的Project工程、Module模块的概念及创建导入

1、IDEA中的层级关系: project(工程) - module(模块) - package(包) - class(类)/接口具体的: 一个project中可以创建多个module一个module中可以创建多个package一个package中可以创建多个class/接口2、Project和Module的概念: 在 IntelliJ …

(done 剩个什么 3/4 unigram frequency 的玩意儿没懂) word2vec 算法,计算 嵌入矩阵(CBOW, Skip-gram)随机梯度下降法 SGD 负采样方案

参考视频1:https://www.bilibili.com/video/BV1vS4y1N7mo/?vd_source7a1a0bc74158c6993c7355c5490fc600 (讲的太浅了) 参考视频2:https://www.bilibili.com/video/BV1s64y1P7Qm?p4&vd_source7a1a0bc74158c6993c7355c5490fc…

css3 实现html样式蛇形布局

文章目录 1. 实现效果2. 实现代码 1. 实现效果 2. 实现代码 <template><div class"body"><div class"title">CSS3实现蛇形布局</div><div class"list"><div class"item" v-for"(item, index) …

【Unity+Vuforia】AR 发布安卓的设置

Player Settings > Resolution and Presentation > Default Orientation portrait Player Settings > Other Settings > Auto Graphics API 取消勾选 Player Settings > Other Settings > Graphics APIs 选择OpenGLES3删除其他的 Player Settings…

excel同类项合并求和怎么操作?

想必很多办公人士都熟悉excel这款软件&#xff0c;那么使用过程里&#xff0c;若想合并同类项数据并求和&#xff0c;具体是如何操作的呢&#xff1f;下面就是小编带来的excel合并同类项数据并求和的操作步骤&#xff0c;很简单哦&#xff0c;看完之后你也来试试吧! 先看一下原…

如何使用“Docker搭建prometheus监控体系“在Ubuntu服务器?

一、启动prometheus容器服务 1.在/usr/local/etc/目录下&#xff0c;创建文件夹prometheus mkdir prometheus/ 2.在文件夹prometheus下&#xff0c;创建prometheus.yml文件 touch prometheus.yml 3.启动prometheus容器服务 docker run -d --name prometheus -p 9090:9090 -…

TSINGSEE青犀AI智能分析网关V4酿酒厂安全挂网AI检测算法

在酿酒行业中&#xff0c;安全生产一直是企业经营中至关重要的一环。为了确保酒厂生产过程中的安全&#xff0c;TSINGSEE青犀AI智能分析网关V4的安全挂网AI检测算法发挥了重要作用。 TSINGSEE青犀AI智能分析网关V4的安全挂网检测算法是针对酒厂里酒窖挂网行为进行智能检测与识…

webpack5零基础入门-8清空前次打包文件与处理图标字体资源

1.配置output中的clean属性为true output: {/**文件输出路径 绝对路径*///__dirname 表示当前文件的文件夹目录path: path.resolve(__dirname, dist),//所有文件的输出目录/**文件名 */filename: static/js/dist.js,//入口文件输出文件名clean: true,//在打包前将path整个目录内…

微信小程序将高德地图转为腾讯地图的自行车路线规划

微信小程序后台首页开发设置 相关文档 腾讯后台 微信小程序接入JDK JDK腾讯地图文档 腾讯路线规划文档 核心代码 <map id"myMap" ref"myMap" style"width: 100%; height: calc(100vh - 80px)":latitude"latitude" :scale&qu…