GoogleAPIs 与 React Native / Expo 的集成答案

【问题标题】：GoogleAPIs integration with React Native / ExpoGoogleAPIs 与 React Native / Expo 的集成
【发布时间】：2021-09-18 14:30:10
【问题描述】：

我正在尝试创建一个 React Native / Expo 应用程序，我可以在其中使用 YouTube Data V3 API（视频插入），但我很难理解如何在 React Native 中使用 fetch() 通过身份验证来获取 access_key谷歌用户通过谷歌 oauth2 同意屏幕。

这是我目前的代码：

fetch(
        'https://accounts.google.com/o/oauth2/v2/auth?' +
        'client_id=' + clientId + '&' +
        'redirect_uri=http://localhost:19006&' +
        'response_type=token&' +
        'scope=https://www.googleapis.com/auth/drive.metadata.readonly&' +
        'include_granted_scopes=true&' +
        'state=pass-through value',

        {
          method: 'GET'
        }                
      );

我在 Chrome 控制台中收到 from origin 'http://localhost:19006' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled. 和 Uncaught (in promise) TypeError: Failed to fetch 错误。如果我将链接复制粘贴到浏览器的新选项卡中，则同意页面正在运行。

我使用 Javascript 代码让它工作，但在 React Native 中我无法让它工作。我正在关注https://developers.google.com/identity/protocols/oauth2/javascript-implicit-flow#js-client-library的文档

我在 GitHub 和 StackOverflow 上搜索了可能的解决方案，但我找不到任何适用于 React Native/Expo 的解决方案。我也尝试了Node.Js Googleapis client library，但据我了解它与 React Native/Expo 不兼容。

【问题讨论】：

标签： react-native google-api expo

【解决方案1】：

您可以尝试使用以下 npm 包或搜索相关的 npm 包，如下所示 AppAuth react-native：

https://github.com/FormidableLabs/react-native-app-auth

还可以查看文档或示例：

https://developer.okta.com/blog/2018/03/16/build-react-native-authentication-oauth-2

【讨论】：