在移动应用开发中，第三方授权登录功能已经成为了不可或缺的一部分，并且谷歌账号已经成为了现代化应用中的常用账号类型之一。而 react-native-google-signin-jmlopezdona 便是一款专门为 React Native 框架所开发的谷歌授权登录插件，它可以帮助开发者轻松地实现应用中的谷歌账号登录功能。本文就对 react-native-google-signin-jmlopezdona 进行了详细的讲解，供开发者使用。
什么是 react-native-google-signin-jmlopezdona？
react-native-google-signin-jmlopezdona 是一款开源第三方 npm 包，提供了在 React Native 应用中使用谷歌登录的功能。该包能够重载 WebView 中的 JavaScript 来用谷歌服务实现授权登录过程，进而通过 OAuth2 策略完成与谷歌账号管理后台的交互，从而实现在移动应用中的谷歌账户授权登录。
安装 react-native-google-signin-jmlopezdona
在使用该 npm 包前，我们需要先将它安装在项目中。
--- ------- -------------------------------------- ------
接下来，需要使用 react-native link 命令来进行关联操作。
------------ ---- --------------------------------------
注意：在 Android 系统上，我们还需要将 google-services.json 文件添加至 /android/app/ 下。这个文件包含了使用 Google APIs 和 OAuth2 的授权信息，可以通过 Google API 控制台和包含谷歌登录集成功能的项目创建得到。
使用 react-native-google-signin-jmlopezdona
- 配置项目
在项目中导入 react-native-google-signin-jmlopezdona，然后在代码中进行初始化。我们需要在调用 signIn 处理登录数据之前，初始化 GSiModule：
------ --------- ---- -----------------------------------------
-- ------ --- ------ ---------- ------ -----
----- ------ - ---------------- -- --- ----------- ---- ------ -----
-- --- --------- --
----- -------- --------------- -
--- -
----- ---------------------
-- ----------- --- --
------- ---------- -------- -----------
-------- --------------------------------------------
---------- ----------------------------------------------------
--------- -------
------------ ---------------------------------
---
- ----- --- -
----------------
-
-- 添加按钮
在视图层表现上，我们需要在登录页面上添加相应按钮，让用户进行授权。可以通过 TouchableOpacity、Text 等 Views 中添加各种规格的按钮。在 onPress 事件中，调用 signIn 方法：
------ ------ - --------- - ---- --------
------ - ----------- ----- ----------------- ---- - ---- ---------------
------ ---------- - ------ - ---- -----------------------------------------
------ ------- ----- ----------- ------- --------- -
-- ------
----- --------------------- -
---------------- -- -------
----- ------- ------ - ----- ------------------- -- -- ------ --
-- --------------- -- ------------------- -
-- ------
- ---- -- ------------------ -
-- ----
- ---- -
-- ----
-
-
-------- -
------ -
----- -------------------------
----------------- --------------------- -----------------------------------
----- -----------------------------------------
-------------------
-------
--
-
-- 处理登陆结果
在登录的过程中，我们需要处理来自谷歌API返回的数据并作相应存储或者跳转操作。我们可以通过类似于下面这种代码进行相应动作的处理：
------ - --------- - ---- --------
------ - ------- - ---- ---------------
------ ---------- - ------ - ---- -----------------------------------------
------ ------- ----- ----------- ------- --------- -
-- ---------
----- -------- --------------------- -
-- --------------- -- ------------------- -
-- ------
-- -- ------- ------ ------ ------ ------- ------ -- ----- ----- ---- ----------------
----- ------- - ---------------
----- ------------ - --------------------
----- ----------- - -------------------
----- -------------- - ----------------------
----- -------- - ----- ---------------------------
-- --------------- -
-- ------
- ---- -
----- ---------
-
- ---- -- ------------------ -
-- ----
- ---- -
-- ----
-
-
----- ------------------- -
---------------- -- -------
----- --- - ----- ------------------------
-- ----- -
----- -----------------------------
------------------------
- ---- -
----- ------- ------ - ----- -------------------------
----------------------
-
-
-------- -
------ -----
-
-结论
本文介绍了 react-native-google-signin-jmlopezdona 这个 npm 包的使用教程。我们在此希望通过本文，帮助读者理解 ，利用该 npm 包，轻松根据需要开发移动应用程序的谷歌账号授权登录功能。在未来的开发中，相信 react-native-google-signin-jmlopezdona 会成为不可或缺的第三方插件，极大地提高了开发体验。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/600551a381e8991b448ceff6