NPM 包 React-Native-GoogleSignIn 使用教程

React-Native-GoogleSignIn 是一个基于 Google 登录 API 的 React Native npm 包，使用该包可以快速鉴权 Google 账户，获取用户信息等操作。本文将为您介绍如何使用该包，从安装到实现一个简单的登录示例。

安装

在您的 React Native 项目中使用 npm 安装该包。

--- ------- -------------------------- ------

配置

安装完成后，接下来需要进行配置，这包括一些 Google API 的设置和 React Native 的配置。

Google API 配置

创建 OAuth 客户端 ID

要使用 Google 登录 API，您需要创建一个 OAuth 客户端 ID，方法如下：

  1. 登录 Google Cloud Console。
  2. 创建或选择您的项目。
  3. 在左侧菜单中选择“API 和服务”，然后选择“凭据”。
  4. 点击“创建凭据”按钮，然后选择“OAuth 客户端 ID”。
  5. 在“应用类型”中选择“移动应用”，并填写相关信息。
  6. 输入您的 Android 包名和签名证书指纹。要获取证书指纹，请打开终端并运行以下命令：
------- ----------- ------ --------------- --------- ------------------------- ----- --
  1. 点击“创建”按钮完成。

配置授权域

在您创建的 OAuth 客户端 ID 中，您需要添加“授权域”。在翻译中看起来更加晦涩难懂，其实所谓的“授权域”指的就是您的应用程序需要访问 Google 服务的范围。要添加授权域，请按照以下步骤操作：

  1. 打开 Google API Console.
  2. 在左侧菜单中选择“API 和服务” -> “仪表盘”。
  3. 确认您当选的项目已打开，然后找到“Google OAuth 设置”部分，单击“授权域”。
  4. 确保您当前的项目已选择，然后单击“创建授权域”按钮。
  5. 在“授权身份验证范围”下创建有效授权范围。这里我们可以使用“https://www.googleapis.com/auth/userinfo.profile”作为授权域，该域授权访问用户的用户资料。完成后，点击“添加”按钮。
  6. 单击“继续”按钮，然后设置授权域的名称。
  7. 单击“创建”按钮，然后重新打开“Google OAuth Settings”部分。

这样，您就已经完成功能 API 的配置和设置，接下来需要进行 React Native 的设置。

React Native 配置

为了能在 React Native 项目中使用该包，您需要在您的 Android 项目中添加以下配置：

  1. 在您的 settings.gradle 文件中添加以下代码：
------- -----------------------------
------------------------------------------------- - --- ---------------------------- -----------------------------------------------------
  1. 在相应的 build.gradle 文件中添加以下代码：
------------ -
  -------------- --------------------------------------
  
  -------------- --------------------------------------------------
-
  1. 在您的 AndroidManifest.xml 文件中添加以下代码：
--------- ----------------------------------------------------------
     ----------------------
  
  -------------
    ---- -------- ---
    ----------
      ---------------------------------------------
      ----------------------------------------------------- --
    ---- -------- ---
  --------------
-----------

一旦您完成了上述配置，React Native 就已经准备好了，您可以开始使用该包了。

使用

现在，您已经准备好使用 react-native-google-signin 包进行工作了。以下是在 React Native 项目中使用 react-native-google-signin 包的详细使用教程。

初始化

在开始使用 react-native-google-signin 包时，首先要进行初始化操作，否则会导致运行过程中出现不可预知的错误。要执行初始化，您需要通过导入包中的 GoogleSignin.configure 方法进行调用。

------ - ------------ - ---- -----------------------------

------------------------
  ------- --------------------------------------------------- -- -----------
  ------------ ------------------------- -- --- ------ ----
  -------------- ----- -- -----------------
---------- -- -
  -- -------
---

登录

在初始化操作执行完毕后，接下来可以开始调用 signIn 方法进行登录了。

------------------------------------- -- -
  -- ------------------
---------------- -- -
  -- ----
--

检测登录状态

您可以通过检测标志位检测登录状态，通常情况下，调用 signInSilently 函数进行验证。

------ - ------------ - ---- -----------------------------

----------------------------------------- -- -
  -- ------------------
-------------- -- -
  --------------------------
---

登出

最后，当您的用户需要退出登录或者已经结束使用应用程序时，您可以通过调用 signOut 方法进行登出。

----------------------
  -------- -- ---
  ------------ -- -
    -------------------
  ---

最后，让我们为 React Native 中的 Google 登录简单实现一个示例，以帮助您加深对该包的理解。

------ ------ - -------- - ---- --------
------ - ----- ----- ------ - ---- ---------------
------ - ------------ - ---- -----------------------------

----- ------------ - -- -- -
  ----- ---------- ------------ - ---------------

  ----- ------------ - ----- -- -- -
    --- -
      ----- -------------------------------
      ----- - ---- - - ----- ----------------------
      ------------------
    - ----- ------- -
      -------------------
    -
  --

  ----- ------------- - ----- -- -- -
    --- -
      ----- -----------------------
      ------------------
    - ----- ------- -
      -------------------
    -
  --

  ------ -
    ------
      --------- - -
        --
          ----------------------------
          -----------------------------
          ------- ----------- ---- ----------------------- --
        ---
      - - -
        ------- ------------- ---- --- ---------------------- --
      --
    -------
  --
--

------ ------- -------------

至此，我们已经学习了 react-native-google-signin 中的一些基本操作，并实现了一个用于登录 Google 的简单示例。希望这篇文章能够帮助您顺利使用该包，为您的 React Native 项目添加一个更加全面的 Google 登录策略。

来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6005545881e8991b448d1a2a

阅读全文

猜你喜欢

  • npm 包 react-maps-recompose 使用教程

    简介 react-maps-recompose 是一个基于 react-google-maps 的 React 组件库，它能够大大简化在 React 应用中使用 Google Maps API 的开发...

    2 年前
  • npm 包 vue-year-calendar 使用教程

    什么是 vue-year-calendar 包？ vue-year-calendar 是一个轻量级的 Vue.js 组件，可以生成响应式年历。它可以轻松地在 Vue.js 应用程序中使用，支持跨浏览器...

    2 年前
  • npm 包 node-opkg 使用教程

    在前端开发中，要实现一些复杂的功能，就需要使用一些安装了特定 JavaScript 库的 npm 包。Node-opkg 是一个用于基于 OpenWrt 的系统上安装和卸载 ipkg 包的库，这篇文章...

    2 年前
  • npm 包 nglint 使用教程

    简介 nglint 是一个用于 Angular 项目的静态代码分析工具，它可以根据一系列的规则对代码进行静态分析，帮助开发者发现代码潜在的问题。 nglint 提供了大量内置的规则，同时也支持自定义规...

    2 年前
  • npm 包 is-valid-coordinates 使用教程

    在前端开发中，常常会需要对经纬度进行校验，以保证地理位置信息的准确性。is-valid-coordinates 是一个 npm 包，它可以用来验证坐标值是否合法。接下来，我们将简单介绍该包的使用方法。

    2 年前
  • npm 包 redux-notice 使用教程

    介绍 redux-notice 是一款基于 Redux 存储的全局通知管理库。它可以让你方便地管理全局通知，例如提示信息、错误信息等。 redux-notice 提供了许多自定义选项和 API，使得开...

    2 年前
  • npm 包 vizi-vql 使用教程

    1. 什么是 vizi-vql vizi-vql 是一个前端专用的 SQL 解析器，可以用于解析 SQL 查询语句，并转化为可供前端直接使用的数据格式。vizi-vql 通过 npm 包的形式发布，在...

    2 年前
  • npm 包 bcoe-test-e 使用教程

    在前端开发中，我们经常会遇到需要测试代码的场景。而 npm 包 bcoe-test-e 就是针对 JavaScript 代码进行测试的工具包。本文将介绍 bcoe-test-e 的使用方法，并提供一些...

    2 年前
  • npm 包 @sirena/agenda 使用教程

    简介 @sirena/agenda 是一个基于 Node.js 的任务调度库，可以用于实现计划任务、定时任务等常见的任务调度需求。它支持多种存储方式，包括 MongoDB、Redis 等。

    2 年前
  • npm 包 good-formatters 使用教程

    简介 good-formatters 是一个基于 Node.js 的 npm 包，它提供了一些常用的格式化函数，可以方便地用于前端和后端开发。该包的特点是代码简单、易于使用、模块化易扩展等。

    2 年前
  • npm 包 gulp-openjscad-standalone 使用教程

    简介 gulp-openjscad-standalone 是一款基于 gulp 和 OpenJSCAD 的 npm 包，可以用于在前端快速构建 3D 模型。本文将详细介绍其使用方法。

    2 年前
  • npm包Lasso-Use-Strict使用教程

    前言 在前端开发中，JavaScript 所有的变量默认是全局变量，它可以随时在任何地方被访问和更改，但这种方式往往会带来很多问题，特别是在大型项目中。 于是，JavaScript引入了"use st...

    2 年前
  • npm 包 ng2-grid2 使用教程

    随着前端技术的不断发展，各种开源的模块和库也层出不穷。今天我们要介绍的是一个非常实用的库：ng2-grid2。它是一个基于 Angular 的网格布局组件，可以帮助前端开发者快速构建网格和布局，提高开...

    2 年前
  • npm 包 vim-ultimate-hacker 使用教程

    什么是 vim-ultimate-hacker vim-ultimate-hacker 是一个可以大幅提升 vim 编辑器的编程效率的插件包。它包含了多个常用的 vim 插件，以及一些辅助工具。

    2 年前
  • npm 包 wiki-plugin-chess 使用教程

    wiki-plugin-chess 是一个基于 npm 包的用于在维基百科页面中创建和展示棋盘和棋谱的插件。本文将详细介绍如何使用该插件以及相关的深度学习和指导意义。

    2 年前
  • npm 包 cerebro-vagalume-plugin 使用教程

    在前端开发中，有许多好用的 npm 包，其中 cerebro-vagalume-plugin 是一款非常实用的插件，可以帮助我们进行快速音乐搜索。本篇文章将为大家介绍该插件的详细使用方法，并提供示例代...

    2 年前
  • npm 包 circularity 的使用教程

    前言 在前端开发中，我们时常需要解决模块间相互依赖和引用的问题。在处理模块依赖时，出现了一个概念叫做循环依赖（Circular Dependency），指两个或以上的模块之间相互依赖，导致检查并不存在...

    2 年前
  • NPM 包 http-compose 使用教程

    前言 在前端开发中很常见的一个技术栈就是使用 http 请求 API 数据。在实际的开发中我们通常要实现多个请求串行或并行执行以及请求的错误处理等。这些操作我们可以自己手写代码来实现，也可以使用 np...

    2 年前
  • npm 包 pseudo-hyena 使用教程

    前言 在前端开发中，会经常使用到各种 JavaScript 库和框架，而这些库和框架的安装和管理则需要使用到 npm（Node Package Manager），npm 是目前最流行的 JavaScr...

    2 年前
  • npm 包 mongoose-tie 的使用教程

    前言 作为前端开发者，我们经常需要与后端进行数据交互。而 MongoDB 作为一个流行的 NoSQL 数据库，是我们经常使用的一种工具。在 Node.js 框架中，我们可以使用 Mongoose 来简...

    2 年前

相关推荐

    暂无文章