在现代移动应用程序中，社交登录是一项非常重要的功能，而谷歌登录是其中不可或缺的一部分。谷歌登录通过 API 提供了非常简单的方法来实现用户的身份验证和授权。在本篇文章中，我们将学习如何在 React Native 应用程序中集成谷歌登录。
迈向谷歌开发控制台
为了开始整合谷歌登录，你需要进入谷歌开发控制台并创建一个谷歌开发者账户。一旦你完成了账户的创建，你需要按照以下步骤进行操作：
- 点击 "创建项目" 按钮，并为你的 React Native 应用程序创建一个新的项目。
- 将 "API 和服务" 中的 "凭据" 选项卡选中。这个页面将列出所有的 API 密钥和 OAuth 客户端 ID。
- 点击 "创建凭据"，然后选择 "OAuth 客户端 ID"。
- 在 "应用程序类型" 选项卡中，选择 "Android"。
- 现在你需要输入包名和 SHA-1 手机指纹（在本地运行 Android 项目时运行命令
keytool -list -v -alias androiddebugkey -keystore ~/.android/debug.keystore获取手指印）。 - 创建一个新的 OAuth 客户端 ID。输入 "应用程序名称" 和 "电子邮箱地址"。接下来选择 "谷歌登录 API" 并点击 "创建"。
在以上步骤完成之后，你将得到一个客户端 ID 和一个客户端密钥。你将使用这些凭据来在 React Native 应用中实现谷歌登录功能。
集成谷歌登录到 React Native 应用程序中
我们将使用 React Native 社区提供的 react-native-google-signin 库来集成谷歌登录到我们的 React Native 应用程序中。让我们跟随以下步骤进行操作：
- 首先需要安装依赖库：
---- --- -----------------------------------------
或
--- ------- -----------------------------------------
- 接下来，我们需要配置 Google 登录模块：
------ - ------------ - ---- -------------------------------------------- -- --- ------------------------ ------- --------------------------------------------------- ------------ ----------------------- -------------- ----- ------------- --- ---------- --- ------------------------- ----- ------------ --- ---
在 webClientId 字段中，你需要输入你的 Web 应用程序客户端 ID。你可以在谷歌开发控制台中获取这个 ID。
- 在应用程序中实现谷歌登录的流程：
------ - ------------ - ---- --------------------------------------------
-- ---
----- -------- -------- -
--- -
----- -------------------------------
----- -------- - ----- ----------------------
----------------- ---- --- -- ----------
- ----- ------- -
------------------ --- -- -------
-
-
----- -------- --------- -
--- -
----- -----------------------
----------------- ------ -------
- ----- ------- -
------------------ --- -- -------
-
-以上 signIn 函数会在你点击登录按钮时执行。它会使用 GoogleSignin.signIn() 方法来启动谷歌登录流程。在成功登录之后，你将得到一个用户信息对象。
- 关联一个谷歌帐户
如果你想让用户在应用程序中绑定谷歌账户，你可以使用以下代码：
------ - ------------ - ---- --------------------------------------------
----- -------- ------------------------ -
--- -
----- -------------------------------
----- ---- - ----- ----------------------
----- ---------- - --------------------------------------------
-------------
-----------------
--
----- ---------------------- - ----- ----------------------------------------
--------------------- ---- ----- --------------------------------------
- ----- ------- -
------------------ --- -- -------
-
-在以上代码中，我们使用了 firebase.auth.GoogleAuthProvider.credential() 方法来从谷歌登录数据中获取 Firebase 认证凭据。之后，你可以使用 Firebase 身份验证系统将这个凭据与用户的 Firebase 身份验证账户相关联。
结论
现在你已经掌握了如何在 React Native 应用程序中实现谷歌登录功能。在本文中，我们学习了如何创建谷歌开发者账户以及如何使用 React Native 社区提供的第三方库来实现谷歌登录功能。我们还学习了如何将谷歌登录数据关联到 Firebase 用户帐户上。如果你已经掌握这篇文章介绍的所有内容，那么你已经准备好在实际移动应用程序中实现谷歌登录功能。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/67161bd1ad1e889fe21ad221