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配置

java 复制代码
android/build.gradle

    buildscript{
        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模块

javascript 复制代码
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

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

相关推荐
墨狂之逸才13 小时前
React Native 状态管理大比拼:Event Bus 还是 Context?小白一看就懂!
react native
爱滑雪的码农13 小时前
React Native 完整开发全流程(从零到上线)
javascript·react native·react.js
沐言人生14 小时前
ReactNative 源码分析12——Native View创建流程onBatchComplete
android·react native
沐言人生3 天前
ReactNative 源码分析11——Native View创建流程setChildren和manageChildren
android·react native
沐言人生4 天前
ReactNative 源码分析10——Native View创建流程createView
android·react native
坏小虎4 天前
【聊天列表组件选型建议】FlashList、FlatList、LegendList三种列表组件
javascript·react native·react.js
sealaugh325 天前
react native(学习笔记第五课) 英语打卡微应用(4)- frontend的列表展示
笔记·学习·react native
沐言人生5 天前
ReactNative 源码分析9——Native View初始化
android·react native
接着奏乐接着舞5 天前
react native expo打包
javascript·react native·react.js
jxm_csdn7 天前
Expo Go 本地命令行编译 apk(Ubutnu22.04)
react native