时间戳

首页 > 解决方案 > Fitbit OAuth2.0 redirect_uri 和原生反应

react-native - Fitbit OAuth2.0 redirect_uri 和原生反应

问题描述

我在 react native 和我为 redirect_uri 设置的端点之间遇到了问题。对于流程，当前用户从应用程序被带到出现 fitbit 授权页面的浏览器。到现在为止还挺好。用户选择想要允许的权限，redirect_uri 从这里指向一个将信息保存到数据库中的快速端点。在这一步之后，我想将用户重定向回 react native 应用程序以继续，而不是只显示来自移动浏览器中端点的成功消息。端点完成处理后，如何将用户重定向回应用程序？

标签： react-nativeoauth-2.0fitbit

解决方案

您要问的是所谓的deep linking。

要从浏览器打开您的本机应用程序：

  1. 您的本机应用程序需要定义一个 URL scheme，其他应用程序可以使用它来定位它。
  2. 您基于浏览器的代码需要使用您应用的scheme.

而且，很可能：

  1. 您的应用需要一个用于深层链接的侦听器。如果您不编写侦听器，您的应用程序将打开，但您无法将信息从基于浏览器的代码传递到应用程序。

这是一个粗略的例子，作为一个起点。我鼓励您彻底阅读文档，因为深层链接比第一眼要复杂得多。:)

反应原生

首先，按照此处的说明my-excellent-app://为您的应用创建方案。如果您使用Expo，这将变得更加容易。

然后，在生命周期中尽早添加监听器。就像大多数关于这个的文档解释一样——通常在你最顶层的组件中App.js或index.js.

import { Linking } from 'react-native';
import URL from 'url-parse';

// Make sure to only add this listener once!
// Adding it more than once will trigger the handler more than once. ;)
Linking.addEventListener('url', ({ url }) => {
  const deeplink = URL(url, true);
  console.log(deeplink.query);
});

网络资料

我不确定你使用的是什么技术栈，但这个概念很简单：在服务器上做任何你需要做的事情，然后将浏览器重定向回你的应用程序的自定义方案。

在 Express 中，这将类似于：

res.redirect('my-excellent-app://myCustomLink?other=data&using=UrlParamsGoesHere');

最后，像Branch这样的第三方也可以处理很多此类问题，甚至更多。

推荐阅读