在现今的移动应用开发中，社交认证（Social Authentication）已经成为了必须的一个功能，而 Google 账号也是其中最受欢迎的选择之一。而我们可以通过 npm 包 React Native Google Signin Benestudio2 来轻松地在 React Native 应用中加入 Google 账号的认证功能。
安装 React Native Google Signin Benestudio2
我们可以在项目根目录下使用如下的命令来安装 React Native Google Signin Benestudio2：
--- ------- -------------------------------------- ------
如果你使用 yarn 包管理器的话，可以使用以下命令：
---- --- --------------------------------------
配置 Google API
要使用 Google 登录，我们需要先配置相应的 Google API。在进行下一步之前，我们需要：
- 在 Google APIs Console 中创建一个新的项目（或使用已有的项目）
- 打开该项目，并在左侧导航栏中选择 “APIs & Services -> Credentials”
- 在页面顶部选择 “Create credentials -> OAuth client ID”
- 在弹出的表单中选择 “Mobile app”
- 在 “Package name” 和 “Key hashes” 输入相应的信息
- 在 “Authorized redirect URIs” 中输入：
com.googleusercontent.apps.{your-client-id}:/oauth2redirect/google（其中 {your-client-id} 替换成你自己的客户端 ID）。这个 URI 在我们下一步代码的实现中还会用到。 - 完成创建，并记下你所得到的客户端 ID。
配置 React Native 项目
在我们开始使用 React Native Google Signin Benestudio2 之前，我们还需要在应用中进行一些设置。
安装 deep-linking 库
React Native Google Signin Benestudio2 使用了深度链接（Deep Linking）的方式来进行 Google 账号的认证，因此我们还需要安装一个深度链接库。我这里选择的是 react-native-deep-linking。
你可以使用以下命令来安装它：
--- ------- ------------------------- ------
或者使用 yarn：
---- --- -------------------------
配置深度链接
一旦我们的项目中有了深度链接库，我们就需要在 AndroidManifest.xml 和 AppDelegate.m 这两个文件中进行一些设置来支持深度链接。
Android
打开 android/app/src/main/AndroidManifest.xml，在 <application> 标签中添加：
---------------
------- ----------------------------------------- --
--------- ---------------------------------------------- --
--------- ------------------------------------------------ --
----- ------------------------------------------------------------ ----------------------------- --
----------------注意将 {your-client-id} 替换成你自己的客户端 ID。
iOS
打开 ios/{你的项目名}/AppDelegate.m，在文件头部添加：
------- -----------------
在 - (BOOL)application:(UIApplication *)application openURL:(NSURL *)url … 函数中添加如下代码：
-------------- ----------------------- ----------- ----------------- ------ ----
配置 GoogleSignin
从react-native-google-signin-benestudio2 v7.1.0 到 React Native 的区别
第七次迁移过来，导致了我以前的一些文本原本都是ReactNativeGoogleSignIn针对7.0.2以下版本的。但是在 7.1.0 版本中这个已经不适用了。
从v7.1.0开始，package在改变的同时,在安装时，你需要关注一下依赖项是否可以支持。Google 本身会不时更新他们的SDK。随时可能需要更新插件以配合SDK所做的更改。
大的改变有以下几项：
- package改动了，需要import 的包的便以改变。主要是GoogleSignin改为 GoogleSignIn （变量首字母大写）
- 7.1.0 要求支持使用pod来管理iOS端的依赖，7.1.0以下则是手动加入，具体说明会在后面有讲解
打开你的 App.js 文件，添加如下代码：
------ ------ ----------- ---- --------
------ ------ ----- ------- ---- ---------------
------ -
-------------
-------------------
------------
- ---- -----------------------------------------
------ ------- ----- --- ------- --------- -
------------------ -
-------------
---------- - -
--------- -----
--
-
------------------- -
------------------------
------- ---------- -------- -----------
------------ -----------------------
-------------- -----
------------- ---
---------- ---
------------------------- -----
------------ ---
------------ -----------------------
---
----------------------------------------------------------- -------
-
------ - ----- -- -- -
--- -
----- -------------------------------
----- -------- - ----- ----------------------
------------------------ -----------
- ----- ------- -
-- ----------- --- ------------------------------ -
-- ---- --------- --- ----- ----
- ---- -- ----------- --- ------------------------ -
-- --------- ----- ---- --- -- -- -------- -------
- ---- -- ----------- --- ---------------------------------------- -
-- ---- -------- --- --------- -- --------
- ---- -
-- ---- ----- ----- --------
-
-
--
-------- -
------ -
----- ------------- -- --------------- --------- ----------- -----------
-------------------
-------------- ---- ------- ----
-----------------------------------
--------------------------------------
---------------------
--
-------------------- -- -
----- ----------------- --- --------------- -----
------------------------------------------
-------
--
-------
--
-
-注意将 {your-web-client-id} 和 {your-ios-client-id} 分别替换成你自己在上文中获取到的 Web 和 iOS 客户端 ID。
运行项目
我们已经完成了 React Native Google Signin Benestudio2 的安装和配置，现在可以用以下命令在模拟器或真机上运行 React Native 应用：
------------ -----------
或者
------------ -------
如果你想了解更多细节或遇到了困难，可以参考原项目的 Github 页面 以获取更详细的信息。
无论在开发中还是生产发布之前，我们一定要确保了文档的完整性和正确性。因此，我通过本篇文章的写作，试图提供一份详细且深入的 React Native Google Signin Benestudio2 的使用教程，帮助前端开发人员更好地应用 Google 账号认证功能到 React Native 应用中。希望这个教程对大家在实践中有所帮助。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6005530281e8991b448d0633