React Native 全栈开发实战班 - 原生功能集成之第三方登录

第三方登录 是指用户使用第三方平台(如 Google、Facebook、Apple、Twitter 等)的账户进行应用登录。这种方式简化了用户注册和登录流程,提高了用户体验,并利用第三方平台提供的身份验证机制来确保安全性。React Native 提供了多种方式来实现第三方登录,包括使用第三方库(如 react-native-google-signin, react-native-facebook-login, react-native-apple-authentication)和调用原生模块。本章节将详细介绍如何使用 react-native-google-signinreact-native-facebook-login 库来实现 Google 和 Facebook 第三方登录。


5.1 第三方登录概述

第三方登录的主要流程包括:

  1. 用户选择第三方平台进行登录: 用户选择使用 Google、Facebook 等第三方平台的账户进行登录。
  2. 应用调用第三方平台的 SDK 进行身份验证: 应用通过第三方平台的 SDK 或 API 发起身份验证请求。
  3. 用户授权: 用户在第三方平台授权应用访问其账户信息。
  4. 获取用户信息: 应用从第三方平台获取用户的身份信息(如用户 ID、姓名、邮箱等)。
  5. 登录完成: 应用根据获取到的用户信息完成登录流程。

常见的第三方登录平台:

  • Google Sign-In
  • Facebook Login
  • Apple Sign-In
  • Twitter Login
  • GitHub Login
  • 微信登录
  • QQ 登录

React Native 提供了多种第三方库来简化第三方登录的实现:

  • react-native-google-signin: 用于实现 Google 登录。
  • react-native-facebook-login: 用于实现 Facebook 登录。
  • react-native-apple-authentication: 用于实现 Apple 登录。
  • react-native-twitter-signin: 用于实现 Twitter 登录。
  • react-native-wechat: 用于实现微信登录。

本章节将重点介绍如何使用 react-native-google-signinreact-native-facebook-login 库来实现 Google 和 Facebook 第三方登录。


5.2 使用 react-native-google-signin 实现 Google 登录

react-native-google-signin 是一个流行的第三方库,用于实现 Google 登录功能。

5.2.1 安装 react-native-google-signin
npm install @react-native-google-signin/google-signin

链接原生依赖(React Native 0.60 及以上版本自动链接):

cd ios
pod install
cd ..
5.2.2 配置 Google API
  1. 创建 Google Cloud 项目:

    前往 Google Cloud Console,创建一个新项目。

  2. 启用 Google Sign-In API:

    在 API 库中,启用 Google Sign-In API。

  3. 配置 OAuth 同意屏幕:

    配置 OAuth 同意屏幕,设置应用名称、支持邮箱等。

  4. 创建 OAuth 2.0 客户端 ID:

    在凭据页面,创建一个 OAuth 客户端 ID,选择 Android 或 iOS 平台,并填写应用包名和 SHA-1 指纹。

  5. 配置 google-services.jsonGoogleService-Info.plist

    下载 google-services.json 文件,并将其放置在 android/app 目录下。

    下载 GoogleService-Info.plist 文件,并将其添加到 Xcode 项目中。

5.2.3 基本用法

示例:

import React from 'react';
import { View, Button, StyleSheet, Alert } from 'react-native';
import { GoogleSignin, GoogleSigninButton, statusCodes } from '@react-native-google-signin/google-signin';const GoogleLoginExample = () => {const [user, setUser] = React.useState(null);React.useEffect(() => {// 配置 Google Sign-InGoogleSignin.configure({webClientId: 'YOUR_WEB_CLIENT_ID', // 从 Google API Console 获取offlineAccess: true, // 是否支持离线访问hostedDomain: '', // 指定域名(可选)forceCodeForRefreshToken: true, // 是否强制刷新 tokenaccountName: '', // 指定账户名(可选)});}, []);const handleSignIn = async () => {try {await GoogleSignin.hasPlayServices();const userInfo = await GoogleSignin.signIn();setUser(userInfo);console.log('用户信息:', userInfo);} catch (error) {if (error.code === statusCodes.SIGN_IN_CANCELLED) {console.log('用户取消登录');} else if (error.code === statusCodes.IN_PROGRESS) {console.log('登录操作正在进行中');} else {console.error('登录错误:', error);}}};const handleSignOut = async () => {try {await GoogleSignin.signOut();setUser(null);console.log('用户已登出');} catch (error) {console.error('登出错误:', error);}};return (<View style={styles.container}>{user ? (<View><Text style={styles.text}>Hello, {user.user.name}</Text><Button title="登出" onPress={handleSignOut} /></View>) : (<GoogleSigninButtonstyle={styles.button}size={GoogleSigninButton.Size.Wide}color={GoogleSigninButton.Color.Dark}onPress={handleSignIn}/>)}</View>);
};const styles = StyleSheet.create({container: {flex: 1,justifyContent: 'center',alignItems: 'center',padding: 20,},button: {width: 200,height: 50,},text: {fontSize: 18,marginBottom: 10,},
});export default GoogleLoginExample;

解释:

  • GoogleSignin.configure 方法: 配置 Google Sign-In,包括 webClientId(从 Google API Console 获取)。
  • GoogleSignin.hasPlayServices 方法: 检查设备是否安装了 Google Play 服务。
  • GoogleSignin.signIn 方法: 发起 Google 登录请求。
  • GoogleSignin.signOut 方法: 登出用户。
5.2.4 获取用户信息

react-native-google-signin 返回的用户信息包含以下字段:

  • id: 用户唯一标识符。
  • name: 用户姓名。
  • email: 用户邮箱。
  • photo: 用户头像 URL。
  • idToken: 身份验证 token。
  • accessToken: 访问 token。

示例:

const handleSignIn = async () => {try {await GoogleSignin.hasPlayServices();const userInfo = await GoogleSignin.signIn();console.log('用户信息:', userInfo);// 发送用户信息到服务器进行身份验证} catch (error) {// 处理错误}
};
5.2.5 处理登录状态

可以通过 isSignedIn 方法检查用户是否已经登录。

示例:

const checkLoginStatus = async () => {const isSignedIn = await GoogleSignin.isSignedIn();if (isSignedIn) {const userInfo = await GoogleSignin.signInSilently();setUser(userInfo);}
};

5.3 使用 react-native-facebook-login 实现 Facebook 登录

react-native-facebook-login 是一个流行的第三方库,用于实现 Facebook 登录功能。

5.3.1 安装 react-native-facebook-login
npm install react-native-facebook-login

链接原生依赖(React Native 0.60 及以上版本自动链接):

cd ios
pod install
cd ..
5.3.2 配置 Facebook API
  1. 创建 Facebook 应用:

    前往 Facebook Developers,创建一个新应用。

  2. 配置 OAuth 重定向 URI:

    在 Facebook 应用设置中,配置 OAuth 重定向 URI。

  3. 配置 Info.plist(iOS):

    Info.plist 文件中添加以下内容:

    <key>CFBundleURLTypes</key>
    <array><dict><key>CFBundleURLSchemes</key><array><string>fbYOUR_FB_APP_ID</string></array></dict>
    </array>
    <key>FacebookAppID</key>
    <string>YOUR_FB_APP_ID</string>
    <key>FacebookDisplayName</key>
    <string>YOUR_APP_NAME</string>
    
  4. 配置 AndroidManifest.xml(Android):

    AndroidManifest.xml 文件中添加以下内容:

    <meta-data android:name="com.facebook.sdk.ApplicationId" android:value="@string/facebook_app_id"/>
    

    res/values/strings.xml 文件中添加:

    <string name="facebook_app_id">YOUR_FB_APP_ID</string>
    
5.3.3 基本用法

示例:

import React from 'react';
import { View, Button, StyleSheet, Alert } from 'react-native';
import { LoginManager, AccessToken } from 'react-native-facebook-login';const FacebookLoginExample = () => {const handleLogin = () => {LoginManager.logInWithPermissions(['public_profile', 'email']).then((result) => {if (result.isCancelled) {console.log('用户取消登录');} else {AccessToken.getCurrentAccessToken().then((data) => {const token = data.accessToken;fetch('https://graph.facebook.com/v12.0/me?fields=id,name,email&access_token=' + token).then((response) => response.json()).then((json) => {console.log('用户信息:', json);// 发送用户信息到服务器进行身份验证}).catch((error) => {console.error('获取用户信息失败:', error);});});}},(error) => {console.error('登录错误:', error);});};const handleLogout = () => {// Facebook SDK 不提供直接登出方法// 可以清除本地存储的用户信息Alert.alert('登出', 'Facebook SDK 不提供直接登出方法');};return (<View style={styles.container}><Button title="Facebook 登录" onPress={handleLogin} /><Button title="登出" onPress={handleLogout} /></View>);
};const styles = StyleSheet.create({container: {flex: 1,justifyContent: 'center',alignItems: 'center',padding: 20,},
});export default FacebookLoginExample;

解释:

  • LoginManager.logInWithPermissions 方法: 发起 Facebook 登录请求,并请求指定权限。
  • AccessToken.getCurrentAccessToken 方法: 获取当前用户的访问 token。
  • fetch 请求: 使用 Graph API 获取用户信息。
5.3.4 获取用户信息

可以通过 Facebook Graph API 获取用户信息,如用户 ID、姓名、邮箱等。

示例:

const getUserInfo = (token) => {fetch('https://graph.facebook.com/v12.0/me?fields=id,name,email&access_token=' + token).then((response) => response.json()).then((json) => {console.log('用户信息:', json);// 发送用户信息到服务器进行身份验证}).catch((error) => {console.error('获取用户信息失败:', error);});
};
5.3.5 处理登录状态

Facebook SDK 本身不提供直接的登出方法,但可以通过清除应用的登录状态来实现登出功能。以下是如何处理登录状态的详细说明:

5.3.5.1 清除登录状态

要登出用户,通常需要清除应用中的登录状态。由于 react-native-facebook-login 不提供直接的登出方法,可以通过以下几种方式来实现:

  1. 清除 Access Token:

    使用 AccessToken 模块清除存储的 Access Token。

    import { AccessToken } from 'react-native-facebook-login';const handleLogout = async () => {try {await AccessToken.setCurrentAccessToken(null);Alert.alert('登出成功', '您已成功登出 Facebook');} catch (error) {console.error('登出失败:', error);Alert.alert('登出失败', '无法清除登录状态');}
    };
    

    解释:

    • AccessToken.setCurrentAccessToken(null) 方法用于清除存储的 Access Token。
    • 清除 Token 后,应用将认为用户已登出。
  2. 清除应用缓存(可选):

    有时,清除 Access Token 可能不足以完全登出用户,尤其是在应用缓存中仍然保留用户信息的情况下。此时,可以选择清除应用的缓存。

    import { AsyncStorage } from 'react-native';const clearAppCache = async () => {try {await AsyncStorage.clear();console.log('应用缓存已清除');} catch (error) {console.error('清除缓存失败:', error);}
    };const handleLogout = async () => {try {await AccessToken.setCurrentAccessToken(null);await clearAppCache();Alert.alert('登出成功', '您已成功登出 Facebook');} catch (error) {console.error('登出失败:', error);Alert.alert('登出失败', '无法清除登录状态');}
    };
    

    解释:

    • AsyncStorage.clear() 方法用于清除应用的所有存储数据,包括缓存的用户信息。
  3. 调用 Facebook SDK 的登出(高级):

    如果需要更彻底的登出,可以调用 Facebook SDK 的原生登出方法。这需要使用原生代码进行扩展。

    示例(iOS):

    #import <FBSDKLoginKit/FBSDKLoginKit.h>// 在 AppDelegate.m 中添加一个方法
    - (void)logoutFacebook {[[FBSDKLoginManager new] logOut];
    }
    

    然后在 React Native 中通过原生模块调用这个方法。

    示例(JavaScript):

    import { NativeModules } from 'react-native';const { RNFacebookLogin } = NativeModules;const handleLogout = async () => {try {await AccessToken.setCurrentAccessToken(null);RNFacebookLogin.logoutFacebook();Alert.alert('登出成功', '您已成功登出 Facebook');} catch (error) {console.error('登出失败:', error);Alert.alert('登出失败', '无法清除登录状态');}
    };
    

    注意: 这种方法需要使用原生代码进行扩展,适用于高级用户。

5.3.5.2 检查登录状态

可以通过 AccessToken.getCurrentAccessToken 方法检查用户是否已经登录。

示例:

import React, { useEffect, useState } from 'react';
import { View, Text, Button, StyleSheet, Alert } from 'react-native';
import { AccessToken } from 'react-native-facebook-login';const FacebookLoginExample = () => {const [isLoggedIn, setIsLoggedIn] = useState(false);const [userInfo, setUserInfo] = useState(null);useEffect(() => {const checkLoginStatus = async () => {const token = await AccessToken.getCurrentAccessToken();if (token) {setIsLoggedIn(true);fetchUserInfo(token.accessToken);}};checkLoginStatus();}, []);const fetchUserInfo = async (token) => {try {const response = await fetch(`https://graph.facebook.com/v12.0/me?fields=id,name,email&access_token=${token}`);const json = await response.json();setUserInfo(json);console.log('用户信息:', json);} catch (error) {console.error('获取用户信息失败:', error);}};const handleLogin = () => {// 登录逻辑};const handleLogout = async () => {try {await AccessToken.setCurrentAccessToken(null);await clearAppCache();setIsLoggedIn(false);setUserInfo(null);Alert.alert('登出成功', '您已成功登出 Facebook');} catch (error) {console.error('登出失败:', error);Alert.alert('登出失败', '无法清除登录状态');}};const clearAppCache = async () => {try {await AsyncStorage.clear();console.log('应用缓存已清除');} catch (error) {console.error('清除缓存失败:', error);}};return (<View style={styles.container}>{isLoggedIn ? (<View><Text style={styles.text}>Hello, {userInfo.name}</Text><Button title="登出" onPress={handleLogout} /></View>) : (<Button title="Facebook 登录" onPress={handleLogin} />)}</View>);
};const styles = StyleSheet.create({container: {flex: 1,justifyContent: 'center',alignItems: 'center',padding: 20,},text: {fontSize: 18,marginBottom: 10,},
});export default FacebookLoginExample;

解释:

  • 检查登录状态: 通过 AccessToken.getCurrentAccessToken 方法检查用户是否已经登录。
  • 获取用户信息: 如果用户已登录,可以通过 Graph API 获取用户信息。
  • 登出: 调用 AccessToken.setCurrentAccessToken(null) 清除 Access Token,并通过 clearAppCache 清除应用缓存。

5.3.5.3 注意事项

  • 权限管理: 在请求用户信息时,需要确保请求的权限(如 email, public_profile)已获得用户授权。
  • 错误处理: 处理可能的错误,如网络错误、权限被拒绝等。
  • 安全性: 确保 Access Token 的安全,避免泄露。

5.4 总结

本章节介绍了 React Native 中的第三方登录功能,包括如何使用 react-native-google-signinreact-native-facebook-login 库来实现 Google 和 Facebook 登录,以及如何处理登录状态和用户信息。通过合理使用第三方登录,可以简化用户注册和登录流程,提高用户体验。


课后作业

  1. 实现一个包含 Google 和 Facebook 登录功能的应用。
  2. 获取并显示用户信息,如用户姓名和邮箱。
  3. 实现登出功能,清除用户登录状态。
  4. 阅读 react-native-google-signinreact-native-facebook-login 官方文档,深入了解其他高级功能和最佳实践。

作者简介

前腾讯电子签的前端负责人,现 whentimes tech CTO,专注于前端技术的大咖一枚!一路走来,从小屏到大屏,从 Web 到移动,什么前端难题都见过。热衷于用技术打磨产品,带领团队把复杂的事情做到极简,体验做到极致。喜欢探索新技术,也爱分享一些实战经验,帮助大家少走弯路!

温馨提示:可搜老码小张公号联系导师

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

如若内容造成侵权/违法违规/事实不符,请联系一条长河网进行投诉反馈,一经查实,立即删除!

相关文章

【H2O2|全栈】MySQL的云端部署

目录 前言 开篇语 准备工作 MySQL移除 为什么需要移除&#xff1f; 移除操作 Yum仓库 yum简介 rpm安装 yum库安装 MySQL安装 使用yum安装 开机自启动 检查运行状态 MySQL配置 初始密码 ​编辑登录 修改root密码 退出MySQL 字符集配置 结束语 前言 开篇语…

数据结构-二叉平衡树

一.平衡二叉树 二叉搜索树插入的次序不同导致不同的深度和平均查找长度ASL 左右子树高度差不超过绝对值1的二叉搜索是二叉平衡树 二.平衡二叉树的调整 在右子树的右子树上的插入做RR插入 把被破坏节点的右子树变成跟节点并把这个右子树的左子树挂载到原来被破坏的结点的右子树…

【PCIE716-0】基于PCIe总线架构的XC7Z100 FPGA高性能实时信号处理平台

板卡概述 PCIE716-0是一款基于PCIe总线架构的XC7Z100 FPGA高性能实时信号处理平台。该平台采用Xilinx的ZYNQ SOC系列产品XC7Z100作为主处理器。 该平台的PL端具有1个FMC&#xff08;HPC&#xff09;接口&#xff0c;1路PCIe x8主机接口&#xff0c;支持1路UART串口、支持1组6…

从0开始的数据结构速过——番外(1)

目录 尝试 思考与架构设置 编写&#xff01; 一些额外知识的补充 可变参数模板 std::common_type std::forward 这是《数据结构从0开始》的一个番外。实际上是介绍一下一些现代C的写法。这里以快速构建std::array作为契机来说明一下一些现代C的语法。 尝试 我们在这里呢…

Day10_CSS过度动画

Day10_CSS过度动画 背景 : PC和APP项目我们已经开发完毕, 但是再真正开发的时候有些有些简易的动态效果我们可以使用CSS完成 ; 本节课我们来使用CSS完成基础的动画效果 今日学习目标 CSS3过度CSS3平面动态效果CSS3动画效果案例 1. CSS3过渡 ​ 含义 :过渡指的是元素从一种…

如何制作代购系统的客服支持模块

在代购系统中&#xff0c;客服支持模块是维护用户满意度和忠诚度的关键环节。一个有效的客服支持模块不仅可以解决用户的疑问和问题&#xff0c;还可以收集用户反馈&#xff0c;用于改进服务和产品。本文将详细介绍如何制作一个代购系统的客服支持模块&#xff0c;包括前端界面…

【unity小技巧】一些unity3D灯光的使用与渲染及性能优化方案

文章目录 天空盒反射配置太阳耀斑眩光烘培光照烘培光照时弹出错误&#xff0c;记得勾选模型下面的选择阴影项目配置光源模型模型shader的问题 全局光照混合光照模式混合照明模式减性照明模式Shadowmask照明模式间接烘焙照明模式 环境光遮罩灯光探针反射探针技术关闭反射探针可以…

Spring Boot汽车资讯:科技与汽车的对话

5系统详细实现 5.1 管理员模块的实现 5.1.1 用户信息管理 汽车资讯网站的系统管理员可以管理用户&#xff0c;可以对用户信息修改删除审核以及查询操作。具体界面的展示如图5.1所示。 图5.1 用户信息管理界面 5.1.2 汽车品牌管理 系统管理员可以汽车品牌信息进行添加&#xf…

go 学习网站,go例子 go demo go学习视频

1. 代码例子&#xff1a; Go by Example 2. b站 视频&#xff1a; 尚硅谷视频&#xff1a; 004_尚硅谷_程序的基本概念_哔哩哔哩_bilibili 3. go技术文档&#xff1a; fmt Go语言中文文档

记录下,用油猴Tampermonkey监听所有请求,绕过seesion

油猴Tampermonkey监听所有请求&#xff0c;绕过seesion 前因后果脚本编写 前因后果 原因是要白嫖一个网站的接口&#xff0c;这个接口的页面入口被隐藏掉了&#xff0c;不能通过页面调用&#xff0c;幸好之前有想过逆向破解通过账号密码模拟登录后拿到token&#xff0c;请求该…

网络安全:我们的安全防线

在数字化时代&#xff0c;网络安全已成为国家安全、经济发展和社会稳定的重要组成部分。网络安全不仅仅是技术问题&#xff0c;更是一个涉及政治、经济、文化、社会等多个层面的综合性问题。从宏观到微观&#xff0c;网络安全的重要性不言而喻。 宏观层面&#xff1a;国家安全与…

多账号登录管理器(淘宝、京东、拼多多等)

目录 下载安装与运行 解决什么问题 功能说明 目前支持的平台 功能演示 登录后能保持多久 下载安装与运行 下载、安装与运行 语雀 解决什么问题 多个账号的快捷登录与切换 功能说明 支持多个电商平台支持多个账号的登录保持支持快捷切换支持导入导出支持批量删除支持…

浅谈网络 | 二层到三层

目录 物理层到MAC层第一层&#xff08;物理层&#xff09;第二层&#xff08;数据链路层&#xff09;局域网 交换机与VLAN生成树协议VLAN ICMP与pingICMP 协议的格式 网关静态路由是什么&#xff1f; 路由协议如何配置策略路由&#xff1f;动态路由算法动态路由协议 物理层到MA…

c++ 后端

基础知识 1. 指针、引用2. 数组3. 缺省参数4. 函数重载5. 内联函数6. 宏7. auto8. const9. 类和对象10. 类的6个默认成员函数11. 初始化列表12. this指针13. C/C的区别14. C 三大特性15. 结构体内存对齐规则16. explicit17. static18. 友元类、友元函数19. 内部类20. 内存管理&…

汽车资讯新趋势:Spring Boot技术解读

5系统详细实现 5.1 管理员模块的实现 5.1.1 用户信息管理 汽车资讯网站的系统管理员可以管理用户&#xff0c;可以对用户信息修改删除审核以及查询操作。具体界面的展示如图5.1所示。 图5.1 用户信息管理界面 5.1.2 汽车品牌管理 系统管理员可以汽车品牌信息进行添加&#xf…

【C++】vector

一、vector的介绍及使用 1.1 vector的介绍 vector的底层与string相似都是顺序表形式管理数组&#xff0c;本质上来说string就可以归入到vector里面&#xff0c;但是在实际使用中&#xff0c;字符有很多自身独有的接口设计需要&#xff0c;因此string被单独拿出来设计。在前面s…

uniapp Uview上传图片组件Upload会自动刷新

背景 最近在做跑团小程序&#xff0c;马上接近尾声了&#xff0c;今天新增一个团长增加活动页面&#xff1a; 然后一切准备就绪&#xff0c;发现了一个问题&#xff0c;当选择上传图片后&#xff0c;页面会自动刷新&#xff0c;把之前填写的信息全部重置了。奇怪了&#xff0c…

软件测试之缺陷管理

一、软件缺陷的基本概念 1、软件缺陷的基本概念主要分为&#xff1a;缺陷、故障、失效这三种。 &#xff08;1&#xff09;缺陷&#xff08;defect&#xff09;&#xff1a;存在于软件之中的偏差&#xff0c;可被激活&#xff0c;以静态的形式存在于软件内部&#xff0c;相当…

数字资产与大健康领域的知识宝藏:高效知识库搭建策略

在数字化时代&#xff0c;大健康领域的企业积累了丰富的数字资产&#xff0c;这些资产如同一座待挖掘的金矿&#xff0c;蕴含着巨大的价值。高效搭建知识库&#xff0c;能够将这些数字资产转化为企业竞争力。 数字资产与大健康领域知识宝藏 数字资产在大健康领域包括患者数据…

使用WebRTC实现点对点实时音视频通信的技术详解

&#x1f493; 博客主页&#xff1a;瑕疵的CSDN主页 &#x1f4dd; Gitee主页&#xff1a;瑕疵的gitee主页 ⏩ 文章专栏&#xff1a;《热点资讯》 使用WebRTC实现点对点实时音视频通信的技术详解 使用WebRTC实现点对点实时音视频通信的技术详解 使用WebRTC实现点对点实时音视频…